diff --git a/_data/origin/cors.yml b/_data/origin/cors.yml index cf8f0ec5..61aabc43 100644 --- a/_data/origin/cors.yml +++ b/_data/origin/cors.yml @@ -11,7 +11,7 @@ cdns: # fonts -webfonts: https://fonts.googleapis.com/css2?family=Lato&family=Source+Sans+Pro:wght@400;600;900&display=swap +webfonts: https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&display=swap # Libraries diff --git a/_includes/author-card.html b/_includes/author-card.html new file mode 100644 index 00000000..9adb789b --- /dev/null +++ b/_includes/author-card.html @@ -0,0 +1,37 @@ + + +{% assign intro = site.data.about.intro %} + +
+ {% if site.avatar %} + {{ site.social.name }} + {% endif %} + +
+

+ {{ intro.name | default: site.social.name }} +

+ {% if intro.headline %} +

{{ intro.headline }}

+ {% endif %} + +
+ About + {% for link in intro.links %} + {% unless link.url contains 'mailto:' %} + {{ link.name }} + {% endunless %} + {% endfor %} +
+
+
diff --git a/_includes/datetime.html b/_includes/datetime.html index 53258ba8..4522af72 100644 --- a/_includes/datetime.html +++ b/_includes/datetime.html @@ -9,6 +9,7 @@ <{{ wrap_elem }} class="{% if include.class %}{{ include.class }}{% endif %}" + {% if wrap_elem == 'time' %}datetime="{{ include.date | date_to_xmlschema }}"{% endif %} data-ts="{{ include.date | date: '%s' }}" data-df="{{ df_dayjs }}" {% if include.tooltip %} diff --git a/_includes/head.html b/_includes/head.html index 5e8626f4..e6ac6bc2 100644 --- a/_includes/head.html +++ b/_includes/head.html @@ -107,6 +107,10 @@ href="{{ site.data.origin[type].fontawesome.css | relative_url }}" /> + {% if site.toc and page.toc %} diff --git a/_includes/metadata-hook.html b/_includes/metadata-hook.html index c8006931..168d5eab 100644 --- a/_includes/metadata-hook.html +++ b/_includes/metadata-hook.html @@ -1,3 +1,17 @@ +{% assign intro = site.data.about.intro %} +{% capture person_id %}{{ '/about/' | absolute_url }}#person{% endcapture %} +{% capture person_json %} + { + "@type": "Person", + "@id": "{{ person_id }}", + "name": "{{ site.social.name }}", + "alternateName": {{ intro.name | default: site.social.name | jsonify }}, + "url": "{{ '/about/' | absolute_url }}", + {% if intro.headline %}"description": {{ intro.headline | jsonify }},{% endif %} + "sameAs": {{ site.social.links | jsonify }} + } +{% endcapture %} + {% if page.layout == 'post' %} {% endif %} - + {% if page.layout == 'home' %} +{% endif %} + + +{% if page.url == '/about/' %} + {% endif %} diff --git a/_includes/post-list-item.html b/_includes/post-list-item.html new file mode 100644 index 00000000..751bbf00 --- /dev/null +++ b/_includes/post-list-item.html @@ -0,0 +1,42 @@ + + +{% assign post = include.post %} + +
+ +
+ {% if include.show_category and post.categories.size > 0 %} + {{ post.categories | first }} + {% endif %} + +

+ {% if post.pin %}{% endif %} + {{ post.title }} +

+ +

+ {% if post.description %} + {{ post.description | strip_html | truncate: 160 | escape }} + {% else %} + {% include no-linenos.html content=post.content %} + {{ content | markdownify | strip_html | truncate: 160 | escape }} + {% endif %} +

+ +
+ {% include datetime.html date=post.date lang=include.lang wrap='time' %} + {% include read-time.html content=post.content lang=include.lang %} +
+
+ + {% if post.image %} + {% assign src = post.image.path | default: post.image %} + {% unless src contains '//' %} + {% assign src = post.img_path | append: '/' | append: src | replace: '//', '/' %} + {% endunless %} +
+ {{ post.image.alt | default: post.title | escape }} +
+ {% endif %} + +
diff --git a/_includes/post-nav.html b/_includes/post-nav.html index 76bcd59a..7e4b98bd 100644 --- a/_includes/post-nav.html +++ b/_includes/post-nav.html @@ -1,37 +1,21 @@ - + -
+
+ diff --git a/_includes/related-posts.html b/_includes/related-posts.html index afff540f..6247b393 100644 --- a/_includes/related-posts.html +++ b/_includes/related-posts.html @@ -36,31 +36,29 @@ {% include ads/multiplex.html %} {% if index_list.size > 0 %} - - - + + {% endif %} diff --git a/_includes/sidebar.html b/_includes/sidebar.html deleted file mode 100644 index 9fe0208f..00000000 --- a/_includes/sidebar.html +++ /dev/null @@ -1,104 +0,0 @@ - - - - diff --git a/_includes/topbar.html b/_includes/topbar.html index 0092f69d..516db0fc 100644 --- a/_includes/topbar.html +++ b/_includes/topbar.html @@ -1,70 +1,65 @@ -
-
- - {% assign paths = page.url | split: '/' %} +
+
+ {{ site.title }} - {% if paths.size == 0 or page.layout == 'home' %} - - {{ site.data.locales[include.lang].tabs.home | capitalize }} - - {% else %} - {% for item in paths %} - {% if forloop.first %} - - - {{ site.data.locales[include.lang].tabs.home | capitalize }} - - + - {% elsif forloop.last %} - {% if page.collection == 'tabs' %} - {{ site.data.locales[include.lang].tabs[item] | default: page.title }} - {% else %} - {{ page.title }} - {% endif %} +
+ + + + + {{ site.data.locales[include.lang].search.cancel }} - {% elsif page.layout == 'category' or page.layout == 'tag' %} - - - {{ site.data.locales[include.lang].tabs[item] | default: page.title }} - - - {% endif %} - {% endfor %} - {% endif %} - - + {% for entry in site.data.contact %} + {% if entry.type == 'github' %} + + + + {% endif %} + {% endfor %} - + {% unless site.theme_mode %} + + {% endunless %} -
- {% if page.layout == 'home' %} - {{- site.data.locales[include.lang].title | default: site.title -}} - {% elsif page.collection == 'tabs' or page.layout == 'page' %} - {%- capture tab_key -%}{{ page.url | split: '/' }}{%- endcapture -%} - {{- site.data.locales[include.lang].tabs[tab_key] | default: page.title -}} - {% else %} - {{- site.data.locales[include.lang].layout[page.layout] | default: page.layout | capitalize -}} - {% endif %} + +
- - - - - - - {{ site.data.locales[include.lang].search.cancel }}
-
+
diff --git a/_layouts/archives.html b/_layouts/archives.html index 18e95f55..338a1a50 100644 --- a/_layouts/archives.html +++ b/_layouts/archives.html @@ -5,32 +5,35 @@ {% include lang.html %} -{% assign df_strftime_m = site.data.locales[lang].df.archives.strftime | default: '/ %m' %} -{% assign df_dayjs_m = site.data.locales[lang].df.archives.dayjs | default: '/ MM' %} - -
- -{% for post in site.posts %} - {% capture cur_year %}{{ post.date | date: "%Y" }}{% endcapture %} - - {% if cur_year != last_year %} - {% unless forloop.first %}{% endunless %} -
{{ cur_year }}
-
    - {% assign last_year = cur_year %} - {% endif %} - -
  • - {% assign ts = post.date | date: '%s' %} - {{ post.date | date: "%d" }} - - {{ post.date | date: df_strftime_m }} - - {{ post.title }} -
    • - - {% if forloop.last %}
{% endif %} - -{% endfor %} - +{% assign posts_by_year = site.posts | group_by_exp: 'post', "post.date | date: '%Y'" %} + +
+

+ {{ site.posts | size }}개의 글 · {{ posts_by_year.size }}년간의 기록 +

+ + {% for year in posts_by_year %} +
+
+

{{ year.name }}

+ {{ year.items | size }} +
+ +
    + {% for post in year.items %} +
  1. + + + {{ post.title }} + {% if post.categories.size > 0 %} + {{ post.categories | first }} + {% endif %} + +
    2. + {% endfor %} +
+
+ {% endfor %}
diff --git a/_layouts/categories.html b/_layouts/categories.html index 5d9be16d..6ccb862f 100644 --- a/_layouts/categories.html +++ b/_layouts/categories.html @@ -3,106 +3,59 @@ # All the Categories of posts --- -{% include lang.html %} {% assign HEAD_PREFIX = 'h_' %} {% assign LIST_PREFIX = -'l_' %} {% assign group_index = 0 %} {% assign sort_categories = site.categories -| sort %} {% for category in sort_categories %} {% assign category_name = -category | first %} {% assign posts_of_category = category | last %} {% assign -first_post = posts_of_category | first %} {% if category_name == -first_post.categories[0] %} {% assign sub_categories = '' | split: '' %} {% for -post in posts_of_category %} {% assign second_category = post.categories[1] %} -{% if second_category %} {% unless sub_categories contains second_category %} {% -assign sub_categories = sub_categories | push: second_category %} {% endunless -%} {% endif %} {% endfor %} {% assign sub_categories = sub_categories | sort %} -{% assign sub_categories_size = sub_categories | size %} - -
- -
- - - - {% capture _category_url %}/categories/{{ category_name | slugify | - url_encode }}/{% endcapture %} - {{ category_name }} - - - {% assign top_posts_size = site.categories[category_name] | size %} - - {% if sub_categories_size > 0 %} {{ sub_categories_size }} {% if - sub_categories_size > 1 %} {{ - site.data.locales[lang].categories.category_measure.plural | default: - site.data.locales[lang].categories.category_measure }} {% else %} {{ - site.data.locales[lang].categories.category_measure.singular | default: - site.data.locales[lang].categories.category_measure }} {% endif -%} , {% - endif %} {{ top_posts_size }} {% if top_posts_size > 1 %} {{ - site.data.locales[lang].categories.post_measure.plural | default: - site.data.locales[lang].categories.post_measure }} {% else %} {{ - site.data.locales[lang].categories.post_measure.singular | default: - site.data.locales[lang].categories.post_measure }} {% endif %} - - - - - {% if sub_categories_size > 0 %} - - - - {% else %} - - - - {% endif %} -
- - - - {% if sub_categories_size > 0 %} -
-
    - {% for sub_category in sub_categories %} -
  • - - - {% capture _sub_ctg_url %}/categories/{{ sub_category | slugify | - url_encode }}/{% endcapture %} - {{ sub_category }} - - {% assign posts_size = site.categories[sub_category] | size %} - - {{ posts_size }} {% if posts_size > 1 %} {{ - site.data.locales[lang].categories.post_measure.plural | default: - site.data.locales[lang].categories.post_measure }} {% else %} {{ - site.data.locales[lang].categories.post_measure.singular | default: - site.data.locales[lang].categories.post_measure }} {% endif %} - -
    • +{% comment %} Top-level categories (a post's first category), sorted by post count {% endcomment %} +{% assign category_keys = '' | split: '' %} +{% for category in site.categories %} + {% assign name = category[0] %} + {% assign top_level_posts = category[1] | where_exp: 'post', 'post.categories[0] == name' %} + {% if top_level_posts.size > 0 %} + {% assign count = category[1] | size | prepend: '0000' | slice: -4, 4 %} + {% assign key = count | append: '|' | append: name %} + {% assign category_keys = category_keys | push: key %} + {% endif %} +{% endfor %} +{% assign category_keys = category_keys | sort | reverse %} + +
    +

    {{ category_keys | size }}개의 카테고리 · 글이 많은 순

    + +
    + {% for key in category_keys %} + {% assign name = key | split: '|' | last %} + {% assign posts_of_category = site.categories[name] %} + {% assign category_url = name | slugify | url_encode | prepend: '/categories/' | append: '/' | relative_url %} + + {% assign sub_categories = '' | split: '' %} + {% for post in posts_of_category %} + {% assign second_category = post.categories[1] %} + {% if second_category and post.categories[0] == name %} + {% unless sub_categories contains second_category %} + {% assign sub_categories = sub_categories | push: second_category %} + {% endunless %} + {% endif %} {% endfor %} -
+ +
+
+

+ {{ name }} +

+ {{ posts_of_category | size }} +
+ +
    + {% for post in posts_of_category limit: 3 %} +
  • {{ post.title }}
    • + {% endfor %} +
+ +
+ {% for sub in sub_categories %} + {{ sub }} + {% endfor %} + 전체 보기 +
+
+ {% endfor %}
- {% endif %}
- - -{% assign group_index = group_index | plus: 1 %} {% endif %} {% endfor %} diff --git a/_layouts/category.html b/_layouts/category.html index 25caec36..0a94c968 100644 --- a/_layouts/category.html +++ b/_layouts/category.html @@ -1,25 +1,20 @@ --- layout: page -# The Category layout +# The category archive layout --- {% include lang.html %} -
-

- - {{ page.title }} - {{ page.posts | size }} -

+
+
+ 카테고리 +

{{ page.title }}

+

{{ page.posts | size }}개의 글

+
-
    +
    {% for post in page.posts %} -
  • - {{ post.title }} - - {% include datetime.html date=post.date wrap='span' class='text-muted - small' lang=lang %} -
    • + {% include post-list-item.html post=post lang=lang show_category=true %} {% endfor %} -
+
diff --git a/_layouts/default.html b/_layouts/default.html index 606b1479..37270fdf 100644 --- a/_layouts/default.html +++ b/_layouts/default.html @@ -14,12 +14,11 @@ {% include head.html %} - {% include sidebar.html lang=lang %} + {% include topbar.html lang=lang %}
- {% include topbar.html lang=lang %} {{ content }} {% include - search-results.html lang=lang %} + {{ content }} {% include search-results.html lang=lang %}
diff --git a/_layouts/home.html b/_layouts/home.html index a5324a62..2ce48608 100644 --- a/_layouts/home.html +++ b/_layouts/home.html @@ -40,67 +40,41 @@ {% endfor %} {% endif %} +{% assign intro = site.data.about.intro %} + +{% if paginator.page == 1 %} +
+

{{ intro.headline | default: site.tagline }}

+

{{ site.description }}

+
+ {{ intro.name | default: site.social.name }} + {{ site.posts | size }} posts + RSS +
+
+{% endif %} + +{% comment %} Sort categories by post count: "0025|web" strings sort lexicographically {% endcomment %} +{% assign category_keys = '' | split: '' %} +{% for category in site.categories %} + {% assign count = category[1] | size | prepend: '0000' | slice: -4, 4 %} + {% assign key = count | append: '|' | append: category[0] %} + {% assign category_keys = category_keys | push: key %} +{% endfor %} +{% assign category_keys = category_keys | sort | reverse %} + + +
{% for post in posts %} - -
- {% if post.image %} - {% if post.image.lqip %} - {% capture lqip %}lqip="{{ post.image.lqip }}"{% endcapture %} - {% endif %} - - {% assign src = post.image.path | default: post.image %} - {% unless src contains '//' %} - {% assign src = post.img_path | append: '/' | append: src | replace: '//', '/' %} - {% endunless %} - - {% assign alt = post.image.alt | default: 'Preview Image' %} - - {{ alt }} - {% endif %} - -
-

- {{ post.title }} -

- -
-

- {% include no-linenos.html content=post.content %} - {{ content | markdownify | strip_html | truncate: 200 | escape }} -

-
- -
-
- - - {% include datetime.html date=post.date lang=lang %} - - - {% if post.categories.size > 0 %} - - - {% for category in post.categories %} - {{ category }} - {%- unless forloop.last -%},{%- endunless -%} - {% endfor %} - - {% endif %} -
- - {% if post.pin %} -
- - {{ site.data.locales[lang].post.pin_prompt }} -
- {% endif %} -
- -
- -
- + {% include post-list-item.html post=post lang=lang show_category=true %} {% endfor %}
diff --git a/_layouts/page.html b/_layouts/page.html index 6c9f17e8..8c8dd288 100644 --- a/_layouts/page.html +++ b/_layouts/page.html @@ -5,9 +5,14 @@ {% include lang.html %} {% include origin-type.html %} {% if layout.tail_includes %} {% assign has_tail = true %} {% endif %} -
+{% assign single_column_layouts = 'home,archives,tags,categories,tag,category' | split: ',' %} +{% if single_column_layouts contains page.layout %} + {% assign single_column = true %} +{% endif %} + +
-
+
{% capture padding %} {% unless page.layout == 'home' %}px-1{% endunless %} {% endcapture %} @@ -25,22 +30,26 @@

{{ title }}

+ {% unless single_column %}
+ {% unless page.layout == 'post' %}
{% include update-list.html lang=lang %} {% include trending-tags.html lang=lang %}
+ {% endunless %} {% for _include in layout.panel_includes %} {% assign _include_path = _include | append: '.html' %} {% include {{ _include_path }} lang=lang %} {% endfor %}
+ {% endunless %}
{% if has_tail %} -
+
{% for _include in layout.tail_includes %} {% assign _include_path = _include | append: '.html' %} {% include {{ _include_path }} lang=lang %} {% diff --git a/_layouts/post.html b/_layouts/post.html index c9cf2e17..21e8e1f8 100644 --- a/_layouts/post.html +++ b/_layouts/post.html @@ -11,83 +11,89 @@ {% include lang.html %} -

{{ page.title }}

- -
- - - {{ site.data.locales[lang].post.posted }} - {% include datetime.html date=page.date tooltip=true lang=lang %} - - - - {% if page.last_modified_at and page.last_modified_at != page.date %} - - {{ site.data.locales[lang].post.updated }} - {% include datetime.html date=page.last_modified_at tooltip=true lang=lang %} - - {% endif %} - - {% if page.image %} - {% capture src %}src="{{ page.image.path | default: page.image }}"{% endcapture %} - {% capture class %}class="preview-img{% if page.image.no_bg %}{{ ' no-bg' }}{% endif %}"{% endcapture %} - {% capture alt %}alt="{{ page.image.alt | default: "Preview Image" }}"{% endcapture %} - - {% capture lqip %} - {% if page.image.lqip %} - lqip="{{ page.image.lqip }}" - {% endif %} - {% endcapture %} - -
- - {%- if page.image.alt -%} -
{{ page.image.alt }}
- {%- endif -%} -
+
+ {% if page.categories.size > 0 %} + {{ page.categories[0] }} {% endif %} -
+

{{ page.title }}

+ +
- + {% if page.author %} {% assign authors = page.author %} {% elsif page.authors %} {% assign authors = page.authors %} {% endif %} - {{ site.data.locales[lang].post.written_by }} - - {% if authors %} {% for author in authors %} {{ site.data.authors[author].name }} - {% unless forloop.last %}, {% endunless %} + {%- unless forloop.last -%}, {% endunless -%} {% endfor %} {% else %} - {{ site.social.name }} + {{ site.social.name }} {% endif %} - -
- - {% if site.google_analytics.pv.proxy_endpoint or site.google_analytics.pv.cache_path %} + + + {% include datetime.html date=page.date tooltip=true lang=lang wrap='time' %} + + + + {% if page.last_modified_at and page.last_modified_at != page.date %} + + {{ site.data.locales[lang].post.updated }} + {% include datetime.html date=page.last_modified_at tooltip=true lang=lang wrap='time' %} + + {% endif %} + + + {% if site.google_analytics.pv.proxy_endpoint or site.google_analytics.pv.cache_path %} {{ site.data.locales[lang].post.pageview_measure }} + {% endif %} + + + {% include read-time.html content=content lang=lang %} +
+ + {% if page.image %} + {% capture src %}src="{{ page.image.path | default: page.image }}"{% endcapture %} + {% capture class %}class="preview-img{% if page.image.no_bg %}{{ ' no-bg' }}{% endif %}"{% endcapture %} + {% capture alt %}alt="{{ page.image.alt | default: "Preview Image" }}"{% endcapture %} + + {% capture lqip %} + {% if page.image.lqip %} + lqip="{{ page.image.lqip }}" {% endif %} + {% endcapture %} - - {% include read-time.html content=content prompt=true lang=lang %} +
+ + {%- if page.image.alt -%} +
{{ page.image.alt }}
+ {%- endif -%}
+ {% endif %} +
-
- -
+{% if page.description %} +
+

요약

+

{{ page.description | strip_html | escape }}

+
+{% endif %} {% include ads/post-top.html %} @@ -97,38 +103,24 @@

{{ page.title }}

{% include ads/post-bottom.html %} -
- - - {% if page.categories.size > 0 %} -
- - {% for category in page.categories %} - {{ category }} - {%- unless forloop.last -%}, {%- endunless -%} - {% endfor %} -
- {% endif %} - - +
{% if page.tags.size > 0 %} -
- +
{% for tag in page.tags %} - - {{- tag -}} - + #{{ tag }} {% endfor %} -
+
{% endif %} -
-
+ {% include author-card.html %} +
+
{% if site.data.locales[lang].copyright.license.template %} - {% capture _replacement %} {{ site.data.locales[lang].copyright.license.name }} @@ -136,12 +128,9 @@

{{ page.title }}

{% endcapture %} {{ site.data.locales[lang].copyright.license.template | replace: ':LICENSE_NAME', _replacement }} - {% endif %}
{% include post-sharing.html lang=lang %} - -
- -
+
+
diff --git a/_layouts/tag.html b/_layouts/tag.html index 8648b1f8..5a6924e5 100644 --- a/_layouts/tag.html +++ b/_layouts/tag.html @@ -1,24 +1,20 @@ --- layout: page -# The layout for Tag page +# The tag archive layout --- {% include lang.html %} -
-

- - {{ page.title }} - {{ page.posts | size }} -

-
    +
    +
    + 태그 +

    #{{ page.title }}

    +

    {{ page.posts | size }}개의 글

    +
    + +
    {% for post in page.posts %} -
  • - {{ post.title }} - - {% include datetime.html date=post.date wrap='span' class='text-muted - small' lang=lang %} -
    • + {% include post-list-item.html post=post lang=lang show_category=true %} {% endfor %} -
+
diff --git a/_layouts/tags.html b/_layouts/tags.html index 7800ca0f..975931ae 100644 --- a/_layouts/tags.html +++ b/_layouts/tags.html @@ -3,20 +3,28 @@ # All the Tags of posts. --- -
- {% assign tags = '' | split: '' %} - {% for t in site.tags %} - {% assign tags = tags | push: t[0] %} - {% endfor %} +{% comment %} Sort tags by post count: "0025|java" strings sort lexicographically {% endcomment %} +{% assign tag_keys = '' | split: '' %} +{% for t in site.tags %} + {% assign count = t[1] | size | prepend: '0000' | slice: -4, 4 %} + {% assign key = count | append: '|' | append: t[0] %} + {% assign tag_keys = tag_keys | push: key %} +{% endfor %} +{% assign tag_keys = tag_keys | sort | reverse %} - {% assign sorted_tags = tags | sort_natural %} +
+

{{ site.tags | size }}개의 태그 · 글이 많은 순

- {% for t in sorted_tags %} - - {% endfor %} +
diff --git a/_sass/addon/commons.scss b/_sass/addon/commons.scss index 5e865de4..89733039 100644 --- a/_sass/addon/commons.scss +++ b/_sass/addon/commons.scss @@ -35,6 +35,9 @@ body { color: var(--text-color); -webkit-font-smoothing: antialiased; font-family: $font-family-base; + letter-spacing: -0.01em; + word-break: keep-all; + overflow-wrap: break-word; } /* --- Typography --- */ @@ -680,214 +683,9 @@ mjx-container { min-width: auto !important; } -/* --- sidebar layout --- */ - -$sidebar-display: 'sidebar-display'; -$btn-gap: 0.8rem; // for the bottom icons -$btn-border-width: 3px; -$btn-mb: 0.5rem; - -#sidebar { - @include pl-pr(0); - - position: fixed; - top: 0; - left: 0; - height: 100%; - overflow-y: auto; - width: $sidebar-width; - z-index: 99; - background: var(--sidebar-bg); - - /* Hide scrollbar for Chrome, Safari and Opera */ - &::-webkit-scrollbar { - display: none; - } - - /* Hide scrollbar for IE, Edge and Firefox */ - -ms-overflow-style: none; /* IE and Edge */ - scrollbar-width: none; /* Firefox */ - - %sidebar-link-hover { - &:hover { - color: var(--sidebar-active-color); - } - } - - a { - @extend %sidebar-links; - } - - #avatar { - display: block; - width: 7rem; - height: 7rem; - overflow: hidden; - box-shadow: var(--avatar-border-color) 0 0 0 2px; - transform: translateZ(0); /* fixed the zoom in Safari */ - - img { - transition: transform 0.5s; - - &:hover { - transform: scale(1.2); - } - } - } - - .profile-wrapper { - @include mt-mb(2.5rem); - @extend %clickable-transition; - - padding-left: 2.5rem; - padding-right: 1.25rem; - width: 100%; - } - - .site-title { - font-weight: 900; - font-size: 1.75rem; - line-height: 1.2; - letter-spacing: 0.25px; - color: rgba(134, 133, 133, 0.99); - margin-top: 1.25rem; - margin-bottom: 0.5rem; - - a { - @extend %clickable-transition; - @extend %sidebar-link-hover; - } - } - - .site-subtitle { - font-size: 95%; - color: var(--sidebar-muted-color); - margin-top: 0.25rem; - word-spacing: 1px; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - } - - ul { - margin-bottom: 2rem; - - li.nav-item { - opacity: 0.9; - width: 100%; - padding-left: 1.5rem; - padding-right: 1.5rem; - - a.nav-link { - @include pt-pb(0.6rem); - - display: flex; - align-items: center; - border-radius: 0.75rem; - font-weight: 600; - - &:hover { - background-color: var(--sidebar-hover-bg); - } - - i { - font-size: 95%; - opacity: 0.8; - margin-right: 1.5rem; - } - - span { - font-size: 90%; - letter-spacing: 0.2px; - } - } - - &.active { - .nav-link { - color: var(--sidebar-active-color); - background-color: var(--sidebar-hover-bg); - - span { - opacity: 1; - } - } - } - - &:not(:first-child) { - margin-top: 0.25rem; - } - } - } - - .sidebar-bottom { - @include pl-pr(2rem); - - margin-bottom: 1.5rem; - - %button { - width: 1.75rem; - height: 1.75rem; - margin-bottom: $btn-mb; // multi line gap - border-radius: 50%; - color: var(--sidebar-btn-color); - background-color: var(--sidebar-btn-bg); - text-align: center; - display: flex; - align-items: center; - justify-content: center; - - &:hover { - background-color: var(--sidebar-hover-bg); - } - } - - a { - @extend %button; - @extend %sidebar-link-hover; - @extend %clickable-transition; - - &:not(:last-child) { - margin-right: $btn-gap; - } - } - - i { - line-height: 1.75rem; - } - - .mode-toggle { - padding: 0; - border: 0; - - @extend %button; - @extend %sidebar-links; - @extend %sidebar-link-hover; - } - - .icon-border { - @extend %no-cursor; - @include ml-mr(calc(($btn-gap - $btn-border-width) / 2)); - - background-color: var(--sidebar-muted-color); - content: ''; - width: $btn-border-width; - height: $btn-border-width; - border-radius: 50%; - margin-bottom: $btn-mb; - } - } /* .sidebar-bottom */ -} /* #sidebar */ +$nav-display: 'sidebar-display'; /* attribute toggled by the menu button JS */ @media (hover: hover) { - #sidebar ul > li:last-child::after { - transition: top 0.5s ease; - } - - .nav-link { - transition: background-color 0.3s ease-in-out; - } - .post-preview { transition: background-color 0.35s ease-in-out; } @@ -907,35 +705,81 @@ $btn-mb: 0.5rem; /* --- top-bar --- */ #topbar-wrapper { + position: sticky; + top: 0; + z-index: 100; height: $topbar-height; background-color: var(--topbar-bg); + border-bottom: 1px solid var(--main-border-color); + -webkit-backdrop-filter: saturate(180%) blur(12px); + backdrop-filter: saturate(180%) blur(12px); } #topbar { - /* icons */ - i { - color: #999999; + gap: 2.5rem; +} + +#topbar-title { + flex-shrink: 0; + font-size: 1.125rem; + font-weight: 800; + letter-spacing: -0.03em; + color: var(--heading-color); + white-space: nowrap; + + &:hover { + color: var(--heading-color); } +} - #breadcrumb { - font-size: 1rem; - color: gray; - padding-left: 0.5rem; +#topbar-nav { + display: flex; + align-items: center; + gap: 0.25rem; - a:hover { - @extend %link-hover; + .nav-link { + position: relative; + padding: 0.5rem 0.75rem; + font-size: 0.9375rem; + font-weight: 500; + color: var(--nav-muted-color); + border-radius: 0.5rem; + transition: color 0.2s ease, background-color 0.2s ease; + + &:hover { + color: var(--nav-active-color); + background-color: var(--nav-hover-bg); } - span { - &:not(:last-child) { - &::after { - content: '›'; - padding: 0 0.3rem; - } - } + &.active { + color: var(--nav-active-color); + font-weight: 700; } } -} /* #topbar */ +} + +.topbar-actions { + gap: 0.25rem; +} + +.topbar-icon { + display: flex; + align-items: center; + justify-content: center; + width: 2.25rem; + height: 2.25rem; + padding: 0; + border: 0; + border-radius: 0.5rem; + background: none; + color: var(--nav-muted-color); + transition: color 0.2s ease, background-color 0.2s ease; + + &:hover { + color: var(--nav-active-color); + background-color: var(--nav-hover-bg); + } +} #sidebar-trigger, #search-trigger { @@ -945,10 +789,16 @@ $btn-mb: 0.5rem; #search-wrapper { display: flex; width: 100%; - border-radius: 1rem; + height: 2.25rem; + border-radius: 0.5rem; border: 1px solid var(--search-wrapper-border-color); background: var(--main-bg); - padding: 0 0.5rem; + padding: 0 0.625rem; + transition: border-color 0.2s ease; + + &.input-focus { + border-color: var(--input-focus-border-color); + } i { z-index: 2; @@ -1063,20 +913,6 @@ $btn-mb: 0.5rem; } } /* #search-results */ -#topbar-title { - display: none; - font-size: 1.1rem; - font-weight: 600; - font-family: sans-serif; - color: var(--topbar-text-color); - text-align: center; - width: 70%; - overflow: hidden; - text-overflow: ellipsis; - word-break: keep-all; - white-space: nowrap; -} - #core-wrapper { line-height: 1.75; @@ -1095,9 +931,10 @@ $btn-mb: 0.5rem; inset: 0 0 0 0; height: 100%; width: 100%; - z-index: 1; + z-index: 99; + background: var(--mask-bg); - @at-root [#{$sidebar-display}] & { + @at-root [#{$nav-display}] & { display: block !important; } } @@ -1173,7 +1010,7 @@ $btn-mb: 0.5rem; } .toast-body { - font-family: Lato, sans-serif; + font-family: inherit; line-height: 1.25rem; button { @@ -1204,9 +1041,9 @@ $btn-mb: 0.5rem; /* Responsive Design: - {sidebar, content, panel} >= 1200px screen width - {sidebar, content} >= 850px screen width - {content} <= 849px screen width + {content, panel} >= 1200px screen width + {content} <= 1199px screen width + top navigation collapses into a menu button <= 849px screen width */ @@ -1229,11 +1066,6 @@ $btn-mb: 0.5rem; } } } - - #avatar { - width: 5rem; - height: 5rem; - } } @media all and (max-width: 768px) { @@ -1251,26 +1083,14 @@ $btn-mb: 0.5rem; } } -/* hide sidebar and panel */ +/* collapse the top navigation */ @media all and (max-width: 849px) { - @mixin slide($append: null) { - $basic: transform 0.4s ease; - - @if $append { - transition: $basic, $append; - } @else { - transition: $basic; - } - } - html, body { overflow-x: hidden; } footer { - @include slide; - height: $footer-height-mobile; div.d-flex { @@ -1280,62 +1100,68 @@ $btn-mb: 0.5rem; } } - [#{$sidebar-display}] { - #sidebar { - transform: translateX(0); - } - - #main-wrapper, - footer { - transform: translateX(#{$sidebar-width}); - } - - #back-to-top { - visibility: hidden; - } + #topbar, + #main, + footer > .container { + max-width: 100%; } - #sidebar { - @include slide; - - transform: translateX(-#{$sidebar-width}); /* hide */ - -webkit-transform: translateX(-#{$sidebar-width}); + #topbar { + gap: 1rem; } - #main-wrapper { - @include slide; + .topbar-actions { + flex: 1 1 auto; + justify-content: flex-end; + min-width: 0; } - #topbar, - #main, - footer > .container { - max-width: 100%; + #search-wrapper.d-flex { + flex: 1 1 auto; } #search-result-wrapper { width: 100%; } - #breadcrumb, - #search-wrapper { + #search-wrapper, + #topbar-nav, + .topbar-actions > a.topbar-icon { display: none; } - #topbar-wrapper { - @include slide(top 0.2s ease); - - left: 0; - } - #core-wrapper, #panel-wrapper { margin-top: 0; } - #topbar-title, #sidebar-trigger, #search-trigger { - display: block; + display: flex; + } + + [#{$nav-display}] { + #topbar-nav { + display: flex; + flex-direction: column; + align-items: stretch; + position: absolute; + top: $topbar-height; + left: 0; + right: 0; + padding: 0.75rem 1rem 1.25rem; + background-color: var(--main-bg); + border-bottom: 1px solid var(--main-border-color); + + .nav-link { + padding: 0.875rem 0.75rem; + font-size: 1rem; + } + } + + #back-to-top { + visibility: hidden; + } } #search-result-wrapper .post-content { @@ -1362,20 +1188,15 @@ $btn-mb: 0.5rem; } } -/* Sidebar is visible */ +/* full top navigation */ @media all and (min-width: 850px) { /* Solved jumping scrollbar */ html { overflow-y: scroll; } - #main-wrapper, - footer { - margin-left: $sidebar-width; - } - #main-wrapper { - min-height: calc(100vh - $footer-height); + min-height: calc(100vh - $footer-height - $topbar-height); } footer { @@ -1391,12 +1212,6 @@ $btn-mb: 0.5rem; } } - #sidebar { - .profile-wrapper { - margin-top: 3rem; - } - } - #search-hints { display: none; } @@ -1425,10 +1240,6 @@ $btn-mb: 0.5rem; bottom: 5.5rem; right: 5%; } - - #topbar-title { - text-align: left; - } } /* Pad horizontal */ @@ -1439,19 +1250,10 @@ $btn-mb: 0.5rem; } } -/* Compact icons in sidebar & panel hidden */ @media all and (min-width: 850px) and (max-width: 1199px) { #search-results > div { max-width: 700px; } - - #breadcrumb { - width: 65%; - overflow: hidden; - text-overflow: ellipsis; - word-break: keep-all; - white-space: nowrap; - } } /* panel hidden */ @@ -1465,15 +1267,17 @@ $btn-mb: 0.5rem; } } -/* --- desktop mode, both sidebar and panel are visible --- */ +/* --- desktop mode, the panel is visible --- */ @media all and (min-width: 1200px) { - #back-to-top { - bottom: 6.5rem; + #topbar, + #main, + footer > .container { + max-width: $main-content-max-width; } - #search-wrapper { - margin-right: 4rem; + #back-to-top { + bottom: 6.5rem; } #search-input { @@ -1498,86 +1302,19 @@ $btn-mb: 0.5rem; } .post-content { - font-size: 1.03rem; - } - - footer { - div.d-felx { - width: 85%; - } + font-size: 1.0625rem; } } @media all and (min-width: 1400px) { #back-to-top { - right: calc((100vw - #{$sidebar-width} - 1140px) / 2 + 3rem); + right: calc((100vw - #{$main-content-max-width}) / 2 - 1rem); } } @media all and (min-width: 1650px) { - $icon-gap: 1rem; - - #main-wrapper, - footer { - margin-left: $sidebar-width-large; - } - - #topbar-wrapper { - left: $sidebar-width-large; - } - - #search-wrapper { - margin-right: calc( - #{$main-content-max-width} * 0.25 - #{$search-max-width} - 0.75rem - ); - } - - #main, - footer > .container { - max-width: $main-content-max-width; - padding-left: 1.75rem !important; - padding-right: 1.75rem !important; - } - #core-wrapper, #tail-wrapper { padding-right: 4.5rem !important; } - - #back-to-top { - right: calc( - (100vw - #{$sidebar-width-large} - #{$main-content-max-width}) / 2 + 2rem - ); - } - - #sidebar { - width: $sidebar-width-large; - - $icon-gap: 1rem; // for the bottom icons - - .profile-wrapper { - margin-top: 3.5rem; - margin-bottom: 2.5rem; - padding-left: 3.5rem; - } - - ul { - li.nav-item { - @include pl-pr(2.75rem); - } - } - - .sidebar-bottom { - padding-left: 2.75rem; - margin-bottom: 1.75rem; - - a:not(:last-child) { - margin-right: $icon-gap; - } - - .icon-border { - @include ml-mr(calc(($icon-gap - $btn-border-width) / 2)); - } - } - } -} /* min-width: 1650px */ +} diff --git a/_sass/addon/module.scss b/_sass/addon/module.scss index 10e0d69c..316144fe 100644 --- a/_sass/addon/module.scss +++ b/_sass/addon/module.scss @@ -6,8 +6,9 @@ %heading { color: var(--heading-color); - font-weight: 400; + font-weight: 700; font-family: $font-family-heading; + letter-spacing: -0.02em; } %section { @@ -55,8 +56,8 @@ } %link-hover { - color: #d2603a !important; - border-bottom: 1px solid #d2603a; + color: var(--heading-color) !important; + border-bottom: 1px solid var(--heading-color); text-decoration: none; } @@ -106,14 +107,6 @@ } } -%sidebar-links { - color: rgba(117, 117, 117, 0.9); - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; -} - %text-clip { display: -webkit-box; overflow: hidden; diff --git a/_sass/addon/syntax.scss b/_sass/addon/syntax.scss index df756a7b..f99a0af8 100644 --- a/_sass/addon/syntax.scss +++ b/_sass/addon/syntax.scss @@ -86,6 +86,7 @@ html { } /* .highlight */ code { + font-family: $font-family-mono; -webkit-hyphens: none; -ms-hyphens: none; hyphens: none; diff --git a/_sass/addon/variables.scss b/_sass/addon/variables.scss index 38e840df..62d75f68 100644 --- a/_sass/addon/variables.scss +++ b/_sass/addon/variables.scss @@ -2,18 +2,13 @@ * The SCSS variables */ -/* sidebar */ - -$sidebar-width: 260px !default; /* the basic width */ -$sidebar-width-large: 300px !default; /* screen width: >= 1650px */ - /* other framework sizes */ -$topbar-height: 3rem !default; +$topbar-height: 4rem !default; $search-max-width: 210px !default; $footer-height: 5rem !default; $footer-height-mobile: 6rem !default; /* screen width: < 850px */ -$main-content-max-width: 1250px !default; +$main-content-max-width: 1200px !default; $bottom-min-height: 35rem !default; $base-radius: 0.5rem; @@ -22,5 +17,9 @@ $base-radius: 0.5rem; $code-font-size: 0.85rem !default; /* fonts */ -$font-family-base: 'Source Sans Pro', 'Microsoft Yahei', sans-serif; -$font-family-heading: 'Microsoft Yahei', sans-serif; +$font-family-base: 'Pretendard Variable', Pretendard, -apple-system, + BlinkMacSystemFont, system-ui, 'Apple SD Gothic Neo', 'Noto Sans KR', + sans-serif; +$font-family-heading: $font-family-base; +$font-family-mono: 'JetBrains Mono', 'SFMono-Regular', Menlo, Consolas, + monospace; diff --git a/_sass/colors/dark-typography.scss b/_sass/colors/dark-typography.scss index 310828eb..7995cf4e 100644 --- a/_sass/colors/dark-typography.scss +++ b/_sass/colors/dark-typography.scss @@ -33,14 +33,10 @@ rgba(255, 255, 255, 0) 100% ); - /* Sidebar */ - --sidebar-bg: radial-gradient(circle, #242424 0%, #1d1f27 100%); - --sidebar-muted-color: #6d6c6b; - --sidebar-active-color: rgb(255, 255, 255, 0.95); - --sidebar-hover-bg: rgb(54, 54, 54, 0.33); - --sidebar-btn-bg: rgb(84, 83, 83, 0.3); - --sidebar-btn-color: #787878; - --avatar-border-color: rgb(206, 206, 206, 0.9); + /* Navigation */ + --nav-muted-color: #9e9ea4; + --nav-active-color: #fafafa; + --nav-hover-bg: rgba(255, 255, 255, 0.06); /* Topbar */ --topbar-bg: rgb(27, 27, 30, 0.64); diff --git a/_sass/colors/light-syntax.scss b/_sass/colors/light-syntax.scss index 040a5f50..11ef7b62 100644 --- a/_sass/colors/light-syntax.scss +++ b/_sass/colors/light-syntax.scss @@ -67,11 +67,11 @@ .highlight .il { color: #009999; } /* Literal.Number.Integer.Long */ /* --- custom light colors --- */ - --language-border-color: rgba(172, 169, 169, 0.2); - --highlight-bg-color: #f7f7f7; - --highlighter-rouge-color: #3f596f; + --language-border-color: #e5e8eb; + --highlight-bg-color: #f9fafb; + --highlighter-rouge-color: #333d4b; --highlight-lineno-color: #c2c6cc; - --inline-code-bg: #f6f6f7; + --inline-code-bg: #f2f4f6; --code-header-text-color: #a3a3b1; --code-header-muted-color: #ebebeb; --code-header-icon-color: #d1d1d1; diff --git a/_sass/colors/light-typography.scss b/_sass/colors/light-typography.scss index 6a68821c..3796b46c 100644 --- a/_sass/colors/light-typography.scss +++ b/_sass/colors/light-typography.scss @@ -4,25 +4,25 @@ @mixin light-scheme { /* Framework color */ - --main-bg: white; - --mask-bg: #c1c3c5; - --main-border-color: #f3f3f3; + --main-bg: #ffffff; + --mask-bg: rgba(25, 31, 40, 0.24); + --main-border-color: #f2f4f6; /* Common color */ - --text-color: #34343c; - --text-muted-color: #8e8e8e; - --heading-color: black; - --blockquote-border-color: #eeeeee; - --blockquote-text-color: #9a9a9a; - --link-color: #0153ab; - --link-underline-color: #dee2e6; + --text-color: #333d4b; + --text-muted-color: #8b95a1; + --heading-color: #191f28; + --blockquote-border-color: #191f28; + --blockquote-text-color: #4e5968; + --link-color: #191f28; + --link-underline-color: #d1d6db; --button-bg: #ffffff; - --btn-border-color: #e9ecef; + --btn-border-color: #e5e8eb; --btn-backtotop-color: #686868; --btn-backtotop-border-color: #f1f1f1; --btn-box-shadow: #eaeaea; --checkbox-color: #c5c5c5; - --checkbox-checked-color: #07a8f7; + --checkbox-checked-color: #191f28; --img-bg: radial-gradient( circle, rgb(255, 255, 255) 0%, @@ -35,32 +35,28 @@ rgba(250, 250, 250, 0) 100% ); - /* Sidebar */ - --sidebar-bg: #f6f8fa; - --sidebar-muted-color: #a2a19f; - --sidebar-active-color: #1d1d1d; - --sidebar-hover-bg: rgb(227, 227, 227, 0.64); - --sidebar-btn-bg: white; - --sidebar-btn-color: #8e8e8e; - --avatar-border-color: white; + /* Navigation */ + --nav-muted-color: #6b7684; + --nav-active-color: #191f28; + --nav-hover-bg: #f2f4f6; /* Topbar */ - --topbar-bg: rgb(255, 255, 255, 0.7); - --topbar-text-color: rgb(78, 78, 78); - --search-wrapper-border-color: rgb(240, 240, 240); - --search-tag-bg: #f8f9fa; - --search-icon-color: #c2c6cc; - --input-focus-border-color: #b8b8b8; + --topbar-bg: rgba(255, 255, 255, 0.85); + --topbar-text-color: #4e5968; + --search-wrapper-border-color: #e5e8eb; + --search-tag-bg: #f2f4f6; + --search-icon-color: #8b95a1; + --input-focus-border-color: #191f28; /* Home page */ - --post-list-text-color: dimgray; + --post-list-text-color: #6b7684; --btn-patinator-text-color: #555555; - --btn-paginator-hover-color: var(--sidebar-bg); - --btn-paginator-border-color: var(--sidebar-bg); + --btn-paginator-hover-color: #f2f4f6; + --btn-paginator-border-color: #f2f4f6; --btn-text-color: #676666; /* Posts */ - --toc-highlight: #563d7c; + --toc-highlight: #191f28; --btn-share-hover-color: var(--link-color); --card-bg: white; --card-hovor-bg: #e2e2e2; @@ -68,13 +64,13 @@ rgba(211, 209, 209, 0.15) 0 0 0 1px; --label-color: #616161; --relate-post-date: rgba(30, 55, 70, 0.4); - --footnote-target-bg: lightcyan; - --tag-bg: rgba(0, 0, 0, 0.075); - --tag-border: #dee2e6; + --footnote-target-bg: #f2f4f6; + --tag-bg: #f2f4f6; + --tag-border: #e5e8eb; --tag-shadow: var(--btn-border-color); - --tag-hover: rgb(222, 226, 230); - --tb-odd-bg: #fbfcfd; - --tb-border-color: #eaeaea; + --tag-hover: #e5e8eb; + --tb-odd-bg: #f9fafb; + --tb-border-color: #e5e8eb; --dash-color: silver; --kbd-wrap-color: #bdbdbd; --kbd-text-color: var(--text-color); @@ -104,6 +100,6 @@ /* Archive */ --timeline-color: rgba(0, 0, 0, 0.075); - --timeline-node-bg: #c2c6cc; + --timeline-node-bg: #b0b8c1; --timeline-year-dot-color: #ffffff; } /* light-scheme */ diff --git a/_sass/layout/archives.scss b/_sass/layout/archives.scss index 3a2e86b1..537383e0 100644 --- a/_sass/layout/archives.scss +++ b/_sass/layout/archives.scss @@ -3,142 +3,127 @@ */ #archives { - letter-spacing: 0.03rem; - - $timeline-width: 4px; - - %timeline { - content: ''; - width: $timeline-width; - position: relative; - float: left; - background-color: var(--timeline-color); + .archives-summary { + margin: -0.5rem 0 2.5rem; + font-size: 0.9375rem; + color: var(--text-muted-color); } - .year { - height: 3.5rem; - font-size: 1.5rem; - position: relative; - left: 2px; - margin-left: -$timeline-width; - - &::before { - @extend %timeline; + .archive-year { + display: grid; + grid-template-columns: 7rem minmax(0, 1fr); + gap: 0 2rem; + padding: 2rem 0; + border-top: 1px solid var(--main-border-color); + } - height: 72px; - left: 79px; - bottom: 16px; - } + .archive-year-header { + position: sticky; + top: calc(#{$topbar-height} + 1.5rem); + align-self: start; + display: flex; + align-items: baseline; + gap: 0.5rem; + } - &:first-child::before { - @extend %timeline; + .archive-year-title { + margin: 0; + font-size: 1.75rem; + font-weight: 800; + letter-spacing: -0.03em; + font-variant-numeric: tabular-nums; + } - height: 32px; - top: 24px; - } + .archive-year-count { + font-size: 0.8125rem; + font-weight: 600; + color: var(--text-muted-color); + } - /* Year dot */ - &::after { - content: ''; - display: inline-block; - position: relative; - border-radius: 50%; - width: 12px; - height: 12px; - left: 21.5px; - border: 3px solid; - background-color: var(--timeline-year-dot-color); - border-color: var(--timeline-node-bg); - box-shadow: 0 0 2px 0 #c2c6cc; - z-index: 1; - } + .archive-list { + margin: 0; + padding: 0; + list-style: none; } - ul { - li { - font-size: 1.1rem; - line-height: 3rem; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - - &:nth-child(odd) { - background-color: var(--main-bg, #ffffff); - background-image: linear-gradient( - to left, - #ffffff, - #fbfbfb, - #fbfbfb, - #fbfbfb, - #ffffff - ); - } + .archive-item a { + display: flex; + align-items: baseline; + gap: 1.25rem; + margin: 0 -0.75rem; + padding: 0.75rem; + border-radius: 0.5rem; + border-bottom: 0; + color: var(--text-color); + transition: background-color 0.15s ease; - &::before { - @extend %timeline; + &:hover { + background-color: var(--nav-hover-bg); - top: 0; - left: 77px; - height: 3.1rem; + .archive-title { + color: var(--heading-color); } } + } - &:last-child li:last-child::before { - height: 1.5rem; - } - } /* #archives ul */ + .archive-date { + flex-shrink: 0; + width: 3rem; + font-family: $font-family-mono; + font-size: 0.8125rem; + color: var(--text-muted-color); + font-variant-numeric: tabular-nums; + } - .date { + .archive-title { + flex: 1 1 auto; + min-width: 0; + overflow: hidden; + text-overflow: ellipsis; white-space: nowrap; - display: inline-block; - position: relative; - right: 0.5rem; - - &.month { - width: 1.4rem; - text-align: center; - } + font-size: 1rem; + font-weight: 500; + } - &.day { - font-size: 85%; - font-family: Lato, sans-serif; - } + .archive-category { + flex-shrink: 0; + font-size: 0.8125rem; + color: var(--text-muted-color); } +} /* #archives */ - a { - /* post title in Archvies */ - margin-left: 2.5rem; - position: relative; - top: 0.1rem; +@media all and (max-width: 576px) { + #archives { + .archive-year { + grid-template-columns: minmax(0, 1fr); + gap: 0.75rem; + padding: 1.5rem 0; + } - &:hover { - border-bottom: none; + .archive-year-header { + position: static; } - &::before { - /* the dot before post title */ - content: ''; - display: inline-block; - position: relative; - border-radius: 50%; - width: 8px; - height: 8px; - float: left; - top: 1.35rem; - left: 71px; - background-color: var(--timeline-node-bg); - box-shadow: 0 0 3px 0 #c2c6cc; - z-index: 1; + .archive-item a { + flex-wrap: wrap; + gap: 0.25rem 1rem; } - } -} /* #archives */ -@media all and (max-width: 576px) { - #archives { - margin-top: -1rem; + .archive-title { + flex-basis: 100%; + order: 2; + white-space: normal; + } - ul { - letter-spacing: 0; + .archive-category { + order: 1; } } } + +.single-column h1.dynamic-title { + margin-top: 3rem; + font-size: 2.25rem; + font-weight: 800; + letter-spacing: -0.035em; +} diff --git a/_sass/layout/categories.scss b/_sass/layout/categories.scss index 330d3d35..b821ccef 100644 --- a/_sass/layout/categories.scss +++ b/_sass/layout/categories.scss @@ -2,82 +2,117 @@ Style for Tab Categories */ -%category-icon-color { - color: gray; +.category-grid { + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: 1rem; } -.categories { - margin-bottom: 2rem; - border-color: var(--categories-border); +.category-card { + display: flex; + flex-direction: column; + padding: 1.25rem 1.375rem; + border: 1px solid var(--main-border-color); + border-radius: $base-radius; + transition: border-color 0.2s ease; - &.card, - .list-group { - @extend %rounded; + &:hover { + border-color: var(--btn-border-color); } - .card-header { - $radius: calc($base-radius - 1px); + .category-card-header { + display: flex; + align-items: baseline; + justify-content: space-between; + gap: 1rem; + margin-bottom: 0.75rem; + } - padding: 0.75rem; - border-radius: $radius; - border-bottom: 0; + .category-card-title { + margin: 0 !important; + font-size: 1.125rem; + font-weight: 700; - &.hide-border-bottom { - border-bottom-left-radius: 0; - border-bottom-right-radius: 0; + a { + color: var(--heading-color); + border-bottom: 0; + + &:hover { + text-decoration: underline; + text-underline-offset: 0.2em; + } } } - i { - @extend %category-icon-color; - - font-size: 86%; /* fontawesome icons */ + .category-card-count { + font-size: 0.8125rem; + font-weight: 600; + color: var(--text-muted-color); + font-variant-numeric: tabular-nums; } - .list-group-item { - border-left: none; - border-right: none; - padding-left: 2rem; - - &:first-child { - border-top-left-radius: 0; - border-top-right-radius: 0; + .category-card-posts { + flex: 1 1 auto; + margin: 0 0 1rem; + padding: 0; + list-style: none; + + li { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + font-size: 0.875rem; + line-height: 1.9; } - &:last-child { + a { + color: var(--post-list-text-color); border-bottom: 0; + + &:hover { + color: var(--heading-color); + } } } -} /* .categories */ - -.category-trigger { - width: 1.7rem; - height: 1.7rem; - border-radius: 50%; - text-align: center; - color: #6c757d !important; - - i { - position: relative; - height: 0.7rem; - width: 1rem; - transition: transform 300ms ease; + + .category-card-footer { + display: flex; + flex-wrap: wrap; + align-items: center; + gap: 0.375rem; + padding-top: 0.875rem; + border-top: 1px solid var(--main-border-color); + font-size: 0.8125rem; + + a { + border-bottom: 0; + } } - &:hover { - i { - color: var(--categories-icon-hover-color); + .category-card-sub { + padding: 0.125rem 0.625rem; + color: var(--text-color); + background: var(--tag-bg); + border-radius: 999px; + + &:hover { + background: var(--tag-hover); } } -} -/* only works on desktop */ -@media (hover: hover) { - .category-trigger:hover { - background-color: var(--categories-hover-bg); + .category-card-more { + margin-left: auto; + font-weight: 600; + color: var(--text-muted-color); + + &:hover { + color: var(--heading-color); + } } } -.rotate { - transform: rotate(-90deg); +@media all and (max-width: 576px) { + .category-grid { + grid-template-columns: minmax(0, 1fr); + } } diff --git a/_sass/layout/category-tag.scss b/_sass/layout/category-tag.scss index 3b25db5c..207ae6a2 100644 --- a/_sass/layout/category-tag.scss +++ b/_sass/layout/category-tag.scss @@ -2,55 +2,36 @@ Style for page Category and Tag */ -.dash { - margin: 0 0.5rem 0.6rem 0.5rem; - border-bottom: 2px dotted var(--dash-color); -} - -#page-category, -#page-tag { - ul > li { - line-height: 1.5rem; - padding: 0.6rem 0; - - /* dot */ - &::before { - background: #999999; - width: 5px; - height: 5px; - border-radius: 50%; - display: block; - content: ''; - position: relative; - top: 0.6rem; - margin-right: 0.5rem; - } - - /* post's title */ - > a { - @extend %no-bottom-border; - - font-size: 1.1rem; - } - - /* post's date */ - > span:last-child { - white-space: nowrap; +.taxonomy-header { + padding: 3rem 0 1.5rem; + border-bottom: 1px solid var(--main-border-color); + + .taxonomy-eyebrow { + font-size: 0.875rem; + font-weight: 600; + color: var(--text-muted-color); + border-bottom: 0; + + &:hover { + color: var(--heading-color); } } -} -/* tag icon */ -#page-tag h1 > i { - font-size: 1.2rem; -} + .taxonomy-title { + margin: 0.5rem 0 0.5rem !important; + font-size: 2.25rem; + font-weight: 800; + letter-spacing: -0.035em; + word-break: keep-all; + } -#page-category h1 > i { - font-size: 1.25rem; + .taxonomy-count { + margin: 0; + font-size: 0.9375rem; + color: var(--text-muted-color); + } } -#page-category, -#page-tag, #access-lastmod { a:hover { @extend %link-hover; @@ -60,18 +41,11 @@ } @media all and (max-width: 576px) { - #page-category, - #page-tag { - ul > li { - &::before { - margin: 0 0.5rem; - } + .taxonomy-header { + padding-top: 1.75rem; - > a { - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - } + .taxonomy-title { + font-size: 1.75rem; } } } diff --git a/_sass/layout/home.scss b/_sass/layout/home.scss index 5092c698..3b902b7f 100644 --- a/_sass/layout/home.scss +++ b/_sass/layout/home.scss @@ -2,95 +2,188 @@ Style for Homepage */ -#post-list { - margin-top: 2rem; +$home-content-width: 760px; - a.card-wrapper { - display: block; +.single-column #core-wrapper > .post { + max-width: $home-content-width; + margin: 0 auto; +} + +.home-hero { + padding: 2.5rem 0 2rem; + + .home-hero-title { + margin: 0 0 0.75rem; + font-size: 1.5rem; + font-weight: 700; + line-height: 1.4; + letter-spacing: -0.03em; + word-break: keep-all; + } + + .home-hero-desc { + max-width: 36rem; + margin-bottom: 1rem; + font-size: 0.9375rem; + line-height: 1.7; + color: var(--post-list-text-color); + } + + .home-hero-meta { + display: flex; + flex-wrap: wrap; + align-items: center; + gap: 0.5rem 1rem; + font-size: 0.8125rem; + color: var(--text-muted-color); + + a { + font-weight: 600; + color: var(--heading-color); + border-bottom: 1px solid var(--link-underline-color); + + &:hover { + @extend %link-hover; + } + } + } +} + +.home-tabs { + display: flex; + gap: 0.25rem; + margin: 0 -0.25rem; + padding: 0.25rem; + overflow-x: auto; + border-bottom: 1px solid var(--main-border-color); + scrollbar-width: none; + + &::-webkit-scrollbar { + display: none; + } + + .home-tab { + flex-shrink: 0; + padding: 0.5rem 0.875rem; + margin-bottom: -0.3125rem; + font-size: 0.9375rem; + font-weight: 500; + color: var(--nav-muted-color); + border-bottom: 2px solid transparent; + transition: color 0.2s ease, border-color 0.2s ease; &:hover { - text-decoration: none; + color: var(--nav-active-color); } - &:not(:last-child) { - margin-bottom: 1.25rem; + &.active { + font-weight: 700; + color: var(--nav-active-color); + border-bottom-color: var(--nav-active-color); } } - .card { - %img-radius { - border-radius: $base-radius $base-radius 0 0; - } + .home-tab-more { + margin-left: auto; + font-size: 0.875rem; + } +} - .preview-img { - height: 10rem; +#post-list { + margin-top: 0.5rem; - @extend %img-radius; + .post-item { + border-bottom: 1px solid var(--main-border-color); + } - img { - width: 100%; - height: 100%; - -o-object-fit: cover; - object-fit: cover; + .post-item-link { + display: flex; + align-items: center; + gap: 2rem; + padding: 1.75rem 0; + color: inherit; - @extend %img-radius; + &:hover { + .post-item-title { + text-decoration: underline; + text-decoration-thickness: 1px; + text-underline-offset: 0.2em; } } + } - .card-body { - min-height: 10.5rem; - padding: 1rem; - - .card-title { - @extend %text-clip; + .post-item-body { + flex: 1 1 auto; + min-width: 0; + } - font-size: 1.25rem; - } + .post-item-category { + display: inline-block; + margin-bottom: 0.5rem; + font-size: 0.8125rem; + font-weight: 600; + color: var(--text-muted-color); + } - %muted { - color: var(--text-muted-color) !important; - } + .post-item-title { + @extend %text-clip; - .card-text.post-content { - @extend %muted; + margin: 0 0 0.5rem; + font-size: 1.3125rem; + font-weight: 700; + line-height: 1.45; + } - p { - @extend %text-clip; + .post-item-excerpt { + @extend %text-clip; - line-height: 1.5; - margin: 0; - } - } + margin: 0 0 0.875rem; + font-size: 0.9375rem; + line-height: 1.65; + color: var(--post-list-text-color); + } - .post-meta { - @extend %muted; + .post-item-meta { + display: flex; + align-items: center; + font-size: 0.8125rem; + color: var(--text-muted-color); - i { - &:not(:first-child) { - margin-left: 1.5rem; - } - } + em, + time { + @extend %normal-font-style; - em { - @extend %normal-font-style; + color: inherit; + } - color: inherit; - } + > * + *::before { + content: '·'; + margin: 0 0.5rem; + } + } - > div:first-child { - display: block; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - } - } + .post-item-thumb { + flex-shrink: 0; + width: 10rem; + aspect-ratio: 16 / 10; + overflow: hidden; + border-radius: $base-radius; + background: var(--tag-bg); + + img { + width: 100%; + height: 100%; + object-fit: cover; } } } /* #post-list */ .pagination { + justify-content: center; + gap: 0.25rem; + margin-top: 2.5rem !important; color: var(--btn-patinator-text-color); - font-family: Lato, sans-serif; + font-family: inherit; a:hover { text-decoration: none; @@ -98,122 +191,80 @@ .page-item { .page-link { - color: inherit; - width: 2.5rem; - height: 2.5rem; + display: flex; + align-items: center; + justify-content: center; + width: 2.25rem; + height: 2.25rem; padding: 0; - display: -webkit-box; - -webkit-box-pack: center; - -webkit-box-align: center; - border-radius: 50%; - border: 1px solid var(--btn-paginator-border-color); - background-color: var(--button-bg); + font-size: 0.875rem; + color: inherit; + border: 0; + border-radius: 0.5rem !important; + background-color: transparent; + box-shadow: none; &:hover { - background-color: var(--btn-paginator-hover-color); + background-color: var(--nav-hover-bg); } } - &.active { - .page-link { - background-color: var(--btn-paginator-hover-color); - color: var(--btn-text-color); - } + &.active .page-link { + font-weight: 700; + color: var(--main-bg); + background-color: var(--heading-color); } &.disabled { cursor: not-allowed; .page-link { - color: rgba(108, 117, 125, 0.57); - border-color: var(--btn-paginator-border-color); - background-color: var(--button-bg); + color: var(--text-muted-color); + opacity: 0.5; } } - - &:first-child .page-link, - &:last-child .page-link { - border-radius: 50%; - } } /* .page-item */ -} /* .pagination */ -/* Tablet */ -@media all and (min-width: 768px) { - #post-list { - %img-radius { - border-radius: 0 $base-radius $base-radius 0; - } - - .card { - .preview-img { - width: 20rem; - height: 11.5rem; // can hold 2 lines each for title and content - } - - .card-body { - min-height: 10.75rem; - width: 60%; - padding: 1.75rem 1.75rem 1.25rem 1.75rem; - - .card-text { - display: inherit !important; - } - - .post-meta { - i { - &:not(:first-child) { - margin-left: 1.75rem; - } - } - } - } - } + .page-index { + display: none; } -} +} /* .pagination */ -/* Hide SideBar and TOC */ -@media all and (max-width: 830px) { - .pagination { - justify-content: space-evenly; +@media all and (max-width: 576px) { + .home-hero { + padding: 1.75rem 0 1.5rem; - .page-item { - &:not(:first-child):not(:last-child) { - display: none; - } + .home-hero-title { + font-size: 1.25rem; } } -} -/* Sidebar is visible */ -@media all and (min-width: 831px) { - #post-list { - margin-top: 2.5rem; + .home-tabs .home-tab-more { + margin-left: 0; } - .pagination { - font-size: 0.85rem; - - .page-item { - &:not(:last-child) { - margin-right: 0.7rem; - } + #post-list { + .post-item-link { + align-items: flex-start; + gap: 1rem; + padding: 1.5rem 0; + } - .page-link { - width: 2rem; - height: 2rem; - } + .post-item-title { + font-size: 1.125rem; } - .page-index { - display: none; + .post-item-thumb { + width: 5.5rem; + aspect-ratio: 1; } - } /* .pagination */ -} + } -/* Panel is visible */ -@media all and (min-width: 1200px) { - #post-list { - padding-right: 0.5rem; + .pagination .page-item:not(:first-child):not(:last-child) { + display: none; + } + + .pagination .page-index { + display: block; } } diff --git a/_sass/layout/post.scss b/_sass/layout/post.scss index 3d01b4d6..504bc688 100644 --- a/_sass/layout/post.scss +++ b/_sass/layout/post.scss @@ -2,6 +2,8 @@ Post-specific style */ +$post-content-width: 740px; + @mixin btn-sharing-color($light-color, $important: false) { @if $important { color: var(--btn-share-color, $light-color) !important; @@ -10,20 +12,23 @@ } } -%btn-post-nav { - width: 50%; - position: relative; - border-color: var(--btn-border-color); +%text-color { + color: var(--text-color); } -@mixin dot($pl: 0.25rem, $pr: 0.25rem) { - content: '\2022'; - padding-left: $pl; - padding-right: $pr; +%btn-share-hovor { + color: var(--btn-share-hover-color) !important; } -%text-color { - color: var(--text-color); +/* --- reading column --- */ + +.layout-post { + #core-wrapper > .post, + #tail-wrapper > * { + max-width: $post-content-width; + margin-left: auto; + margin-right: auto; + } } .preview-img { @@ -46,31 +51,182 @@ } } -h1 + .post-meta { - span + span::before { - @include dot; +/* --- header --- */ + +.post-header { + padding-bottom: 2rem; + border-bottom: 1px solid var(--main-border-color); + + .post-header-category { + display: inline-block; + margin-top: 2.5rem; + font-size: 0.875rem; + font-weight: 600; + color: var(--text-muted-color); + border-bottom: 0; + + &:hover { + color: var(--heading-color); + } + + + h1 { + margin-top: 0.75rem !important; + } } - em { - @extend %text-color; + h1 { + margin-bottom: 1.25rem !important; + font-size: 2.25rem; + font-weight: 800; + line-height: 1.35; + letter-spacing: -0.035em; + word-break: keep-all; + } - a { - @extend %text-color; + .post-meta { + display: flex; + flex-wrap: wrap; + align-items: center; + gap: 0.25rem 0; + font-size: 0.875rem; + color: var(--text-muted-color); + + > span + span::before { + content: '·'; + margin: 0 0.5rem; + } + + em, + time { + @extend %normal-font-style; + + color: inherit; + } + + .post-meta-author a { + font-weight: 600; + color: var(--heading-color); + border-bottom: 0; + } + } +} + +.post-summary { + margin: 2rem 0 0.5rem; + padding: 1.25rem 1.5rem; + border-radius: $base-radius; + background-color: var(--nav-hover-bg); + + .post-summary-label { + margin-bottom: 0.375rem; + font-size: 0.75rem; + font-weight: 700; + letter-spacing: 0.08em; + color: var(--text-muted-color); + } + + .post-summary-text { + margin: 0; + line-height: 1.7; + color: var(--heading-color); + } +} + +/* --- body typography --- */ + +.layout-post .post-content { + font-size: 1.0625rem; + line-height: 1.85; + color: var(--text-color); + + p { + margin-bottom: 1.25rem; + } + + h2 { + margin-top: 3.5rem; + margin-bottom: 1rem; + font-size: 1.625rem; + line-height: 1.4; + } + + h3 { + margin-top: 2.5rem; + margin-bottom: 0.75rem; + font-size: 1.3125rem; + line-height: 1.45; + } + + h4, + h5 { + margin-top: 2rem; + margin-bottom: 0.5rem; + font-size: 1.125rem; + } + + blockquote:not([class^='prompt-']) { + margin: 1.5rem 0; + padding: 0.25rem 0 0.25rem 1.25rem; + border-left: 3px solid var(--blockquote-border-color); + color: var(--blockquote-text-color); + + p:last-child { + margin-bottom: 0; + } + } + + blockquote[class^='prompt-'] { + border-radius: $base-radius; + } + + hr { + margin: 3rem 0; + border-color: var(--main-border-color); + opacity: 1; + } + + img { + border-radius: $base-radius; + } + + .highlight { + border-radius: 0 0 $base-radius $base-radius; + } + + div[class^='language-'], + div.highlighter-rouge { + border-radius: $base-radius; + box-shadow: inset 0 0 0 1px var(--language-border-color); + } + + .table-wrapper > table { + font-size: 0.9375rem; + + thead { + border-bottom: 1px solid var(--heading-color); } } } +/* --- footer --- */ + .post-tail-wrapper { - margin-top: 6rem; - border-bottom: 1px double var(--main-border-color); - font-size: 0.85rem; + margin-top: 4rem; + font-size: 0.875rem; - .post-tail-bottom a { - color: inherit; + .post-tail-bottom { + gap: 1rem; + padding: 1.5rem 0; + border-bottom: 1px solid var(--main-border-color); + color: var(--text-muted-color); + + a { + color: inherit; + } } .license-wrapper { - line-height: 1.2rem; + line-height: 1.4rem; > a { color: var(--text-color); @@ -79,17 +235,10 @@ h1 + .post-meta { @extend %link-hover; } } - - span:last-child { - font-size: 0.85rem; - } - } /* .license-wrapper */ - - .post-meta a:not(:hover) { - @extend %link-underline; } .share-wrapper { + flex-shrink: 0; vertical-align: middle; -webkit-user-select: none; -moz-user-select: none; @@ -97,7 +246,7 @@ h1 + .post-meta { user-select: none; .share-icons { - font-size: 1.2rem; + font-size: 1.1rem; > i { position: relative; @@ -111,6 +260,8 @@ h1 + .post-meta { } a { + border-bottom: 0; + &:not(:last-child) { margin-right: 0.25rem; } @@ -124,114 +275,212 @@ h1 + .post-meta { } } - .fab { - &.fa-twitter { - @include btn-sharing-color(rgba(29, 161, 242, 1)); - } - - &.fa-facebook-square { - @include btn-sharing-color(rgb(66, 95, 156)); - } - - &.fa-telegram { - @include btn-sharing-color(rgb(39, 159, 217)); - } - - &.fa-linkedin { - @include btn-sharing-color(rgb(0, 119, 181)); - } - - &.fa-weibo { - @include btn-sharing-color(rgb(229, 20, 43)); - } + i { + color: var(--text-muted-color); } } /* .share-icons */ - - .fas.fa-link { - @include btn-sharing-color(rgb(171, 171, 171)); - } } /* .share-wrapper */ } +.share-label { + @include label(inherit, 400, inherit); + + &::after { + content: ':'; + } +} + .post-tags { - line-height: 2rem; + display: flex; + flex-wrap: wrap; + gap: 0.5rem; + margin-bottom: 2.5rem; .post-tag { + margin: 0; + padding: 0.25rem 0.75rem; + font-size: 0.8125rem; + line-height: 1.5; + color: var(--text-color); background: var(--tag-bg); + border: 0; + border-radius: 999px; + transition: background-color 0.2s ease; &:hover { - @extend %link-hover; - @extend %tag-hover; - @extend %no-bottom-border; + color: var(--heading-color); + background: var(--tag-hover); + border-bottom: 0; } } } -.post-navigation { - padding-top: 3rem; - padding-bottom: 4rem; +.author-card { + display: flex; + align-items: center; + gap: 1.25rem; + padding: 1.5rem 0; + border-top: 1px solid var(--main-border-color); + border-bottom: 1px solid var(--main-border-color); + + .author-card-avatar { + flex-shrink: 0; + width: 3.5rem; + height: 3.5rem; + object-fit: cover; + border-radius: 50%; + background: var(--tag-bg); + } - .btn { - @extend %btn-post-nav; + .author-card-body { + min-width: 0; - &:not(:hover) { - color: var(--link-color); - } - - &:hover { - &:not(.disabled)::before { - color: whitesmoke; - } + p { + margin: 0; } + } - &.disabled { - @extend %btn-post-nav; + .author-card-name { + font-size: 1rem; + font-weight: 700; - pointer-events: auto; - cursor: not-allowed; - background: none; - color: gray; + a { + color: var(--heading-color); + border-bottom: 0; } + } - &.btn-outline-primary.disabled:focus { - box-shadow: none; - } + .author-card-desc { + margin-top: 0.25rem !important; + font-size: 0.875rem; + line-height: 1.6; + color: var(--post-list-text-color); + } - &::before { + .author-card-links { + display: flex; + flex-wrap: wrap; + gap: 0.25rem 1rem; + margin-top: 0.5rem; + font-size: 0.8125rem; + + a { + font-weight: 600; color: var(--text-muted-color); - font-size: 0.65rem; - text-transform: uppercase; - content: attr(prompt); - } + border-bottom: 0; - &:first-child { - border-radius: $base-radius 0 0 $base-radius; - left: 0.5px; + &:hover { + color: var(--heading-color); + } } + } +} + +/* --- previous / next --- */ + +.post-navigation { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 1rem; + padding: 2.5rem 0 1rem; + + .post-nav-item { + display: flex; + flex-direction: column; + gap: 0.375rem; + padding: 1.125rem 1.25rem; + border: 1px solid var(--main-border-color); + border-radius: $base-radius; + color: inherit; + transition: border-color 0.2s ease, background-color 0.2s ease; - &:last-child { - border-radius: 0 $base-radius $base-radius 0; - right: 0.5px; + &:hover { + border-color: var(--btn-border-color); + background-color: var(--nav-hover-bg); } } - p { - font-size: 1.1rem; - line-height: 1.5rem; - margin-top: 0.3rem; - white-space: normal; + .post-nav-empty { + visibility: hidden; + } + + .post-nav-next { + text-align: right; + } + + .post-nav-label { + font-size: 0.8125rem; + color: var(--text-muted-color); + } + + .post-nav-title { + @extend %text-clip; + + font-size: 0.9375rem; + font-weight: 600; + line-height: 1.5; + color: var(--heading-color); } } /* .post-navigation */ -@media (hover: hover) { - .post-navigation { - .btn, - .btn::before { - transition: all 0.35s ease-in-out; +/* --- related posts --- */ + +#related-posts { + margin-top: 3rem; + + .related-posts-title { + margin: 0 0 0.5rem; + font-size: 1.125rem; + font-weight: 700; + } + + .related-list { + margin: 0; + padding: 0; + list-style: none; + + li + li { + border-top: 1px solid var(--main-border-color); + } + } + + .related-item { + display: flex; + flex-direction: column; + gap: 0.25rem; + padding: 1.125rem 0; + color: inherit; + border-bottom: 0; + + &:hover .related-item-title { + text-decoration: underline; + text-underline-offset: 0.2em; } } + + .related-item-title { + font-size: 1rem; + font-weight: 600; + color: var(--heading-color); + } + + .related-item-excerpt { + @extend %text-clip; + + -webkit-line-clamp: 1; + font-size: 0.875rem; + color: var(--post-list-text-color); + } + + .related-item-date { + font-size: 0.8125rem; + font-style: normal; + color: var(--text-muted-color); + } } +/* --- table of contents --- */ + @-webkit-keyframes fade-up { from { opacity: 0; @@ -261,37 +510,49 @@ h1 + .post-meta { } #toc-wrapper { - border-left: 1px solid rgba(158, 158, 158, 0.17); position: -webkit-sticky; position: sticky; - top: 4rem; - transition: top 0.2s ease-in-out; + top: calc(#{$topbar-height} + 2.5rem); + margin-top: 2.5rem; + max-height: calc(100vh - #{$topbar-height} - 5rem); + overflow-y: auto; + border-left: 1px solid var(--main-border-color); -webkit-animation: fade-up 0.8s; animation: fade-up 0.8s; + scrollbar-width: none; + + .panel-heading { + font-size: 0.75rem; + font-weight: 700; + letter-spacing: 0.08em; + color: var(--text-muted-color); + } ul { list-style: none; - font-size: 0.85rem; - line-height: 1.25; + font-size: 0.8125rem; + line-height: 1.4; padding-left: 0; li { &:not(:last-child) { - margin: 0.4rem 0; + margin: 0.25rem 0; } a { - padding: 0.2rem 0 0.2rem 1.25rem; + padding: 0.25rem 0 0.25rem 1rem; } } /* Overwrite TOC plugin style */ .toc-link { + position: relative; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; + color: var(--text-muted-color); &:hover { color: var(--toc-highlight); @@ -308,53 +569,26 @@ h1 + .post-meta { font-weight: 600; &::before { - display: inline-block; - width: 1px; + display: block; + position: absolute; + top: 0.25rem; + bottom: 0.25rem; left: -1px; - height: 1.25rem; + width: 2px; + height: auto; + margin: 0; background-color: var(--toc-highlight) !important; } } ul { a { - padding-left: 2rem; + padding-left: 1.75rem; } } } } -/* --- Related Posts --- */ - -#related-posts { - > h3 { - @include label(1.1rem, 600); - } - - em { - @extend %normal-font-style; - - color: var(--relate-post-date); - } - - p { - font-size: 0.9rem; - margin-bottom: 0.5rem; - overflow: hidden; - text-overflow: ellipsis; - display: -webkit-box; - -webkit-line-clamp: 2; - -webkit-box-orient: vertical; - } - - .card { - h4 { - @extend %text-color; - @extend %text-clip; - } - } -} - #tail-wrapper { min-height: 2rem; @@ -368,21 +602,31 @@ h1 + .post-meta { } } -%btn-share-hovor { - color: var(--btn-share-hover-color) !important; -} +@media all and (max-width: 576px) { + .preview-img[data-src] { + margin-top: 2.2rem; + } -.share-label { - @include label(inherit, 400, inherit); + .post-header { + .post-header-category { + margin-top: 1.5rem; + } - &::after { - content: ':'; + h1 { + font-size: 1.625rem; + } } -} -@media all and (max-width: 576px) { - .preview-img[data-src] { - margin-top: 2.2rem; + .layout-post .post-content { + font-size: 1rem; + + h2 { + font-size: 1.375rem; + } + + h3 { + font-size: 1.1875rem; + } } .post-tail-bottom { @@ -390,7 +634,14 @@ h1 + .post-meta { > div:first-child { width: 100%; - margin-top: 1rem; + } + } + + .post-navigation { + grid-template-columns: 1fr; + + .post-nav-empty { + display: none; } } } @@ -401,15 +652,7 @@ h1 + .post-meta { } } -/* Hide SideBar and TOC */ @media all and (max-width: 849px) { - .post-navigation { - padding-left: 0; - padding-right: 0; - margin-left: -0.5rem; - margin-right: -0.5rem; - } - .preview-img[data-src] { max-width: 100vw; border-radius: 0; diff --git a/_sass/layout/tags.scss b/_sass/layout/tags.scss index 4cf5d3b7..43b3bd44 100644 --- a/_sass/layout/tags.scss +++ b/_sass/layout/tags.scss @@ -2,18 +2,43 @@ Styles for Tab Tags */ +.taxonomy-summary { + margin: -0.5rem 0 2rem; + font-size: 0.9375rem; + color: var(--text-muted-color); +} + +.tag-cloud { + display: flex; + flex-wrap: wrap; + gap: 0.5rem; + margin: 0; + padding: 0; + list-style: none; +} + .tag { - border-radius: 0.7em; - padding: 6px 8px 7px; - margin-right: 0.8rem; - line-height: 3rem; - letter-spacing: 0; - border: 1px solid var(--tag-border) !important; - box-shadow: 0 0 3px 0 var(--tag-shadow); + display: inline-flex; + align-items: center; + gap: 0.375rem; + padding: 0.375rem 0.875rem; + font-size: 0.9375rem; + line-height: 1.5; + color: var(--text-color); + background: var(--tag-bg); + border: 0 !important; + border-radius: 999px; + transition: background-color 0.2s ease, color 0.2s ease; + + &:hover { + color: var(--heading-color); + background: var(--tag-hover); + } - span { - margin-left: 0.6em; - font-size: 0.7em; - font-family: Oswald, sans-serif; + .tag-count { + font-size: 0.75rem; + font-weight: 600; + color: var(--text-muted-color); + font-variant-numeric: tabular-nums; } } diff --git a/assets/robots.txt b/assets/robots.txt index 8116e62e..ad07cb2e 100644 --- a/assets/robots.txt +++ b/assets/robots.txt @@ -14,4 +14,31 @@ Allow: / User-agent: Mediapartners-Google Allow: / +# AI search & answer engines (GEO): allow crawling so posts can be cited +User-agent: OAI-SearchBot +Allow: / + +User-agent: ChatGPT-User +Allow: / + +User-agent: GPTBot +Allow: / + +User-agent: ClaudeBot +Allow: / + +User-agent: Claude-SearchBot +Allow: / + +User-agent: Claude-User +Allow: / + +User-agent: PerplexityBot +Allow: / + +User-agent: Google-Extended +Allow: / + +# LLM-friendly site index: {{ '/llms.txt' | absolute_url }} + Sitemap: {{ '/sitemap.xml' | absolute_url }} diff --git a/llms.txt b/llms.txt new file mode 100644 index 00000000..1d0691be --- /dev/null +++ b/llms.txt @@ -0,0 +1,37 @@ +--- +layout: null +permalink: /llms.txt +sitemap: false +--- +# {{ site.title }} + +> {{ site.description | strip_newlines }} + +{% assign intro = site.data.about.intro -%} +- Author: {{ intro.name | default: site.social.name }} ({{ site.social.links[0] }}) +- Profile: {{ '/about/' | absolute_url }} +{% if intro.headline %}- Focus: {{ intro.headline }} +{% endif -%} +- Language: {{ site.lang }} +- Feed: {{ '/feed.xml' | absolute_url }} +- Sitemap: {{ '/sitemap.xml' | absolute_url }} + +All posts are original writing by the author. When citing, please link to the canonical post URL. + +## Topics + +{% assign categories = site.categories | sort -%} +{% for category in categories -%} +- [{{ category[0] }}]({{ category[0] | slugify | url_encode | prepend: '/categories/' | append: '/' | absolute_url }}): {{ category[1] | size }} posts +{% endfor %} +## Posts + +{% for post in site.posts -%} +{% unless post.hidden -%} +- [{{ post.title }}]({{ post.url | absolute_url }}) ({{ post.date | date: '%Y-%m-%d' }}){% if post.description %}: {{ post.description | strip_html | strip_newlines }}{% endif %} +{% endunless -%} +{% endfor %} +## Optional + +- [About]({{ '/about/' | absolute_url }}): 경력, 주요 성과, 기술 스택 +- [Archives]({{ '/archives/' | absolute_url }}): 전체 글 목록