From 616a6ff1c40aa19506493c65a7ae51691c78b6f0 Mon Sep 17 00:00:00 2001 From: Shin Sang-jae Date: Mon, 27 Jan 2025 20:40:57 +0900 Subject: [PATCH 1/8] icon color: bluesky, instagram, threads, tiktok, x, youtube --- _sass/minimal-mistakes/_utilities.scss | 4 +++- _sass/minimal-mistakes/_variables.scss | 6 ++++-- 2 files changed, 7 insertions(+), 3 deletions(-) diff --git a/_sass/minimal-mistakes/_utilities.scss b/_sass/minimal-mistakes/_utilities.scss index cd6e94b7fd1d..cb8cceb3af43 100644 --- a/_sass/minimal-mistakes/_utilities.scss +++ b/_sass/minimal-mistakes/_utilities.scss @@ -201,13 +201,14 @@ $text-alignments: left, right, start, end, center, justify; @each $color, $icons in ( $behance-color: ".fa-behance, .fa-behance-square", $bitbucket-color: ".fa-bitbucket", + $bluesky-color: ".fa-bluesky, .fa-square-bluesky", $dribbble-color: ".fa-dribbble, .fa-dribbble-square", $facebook-color: ".fa-facebook, .fa-facebook-square, .fa-facebook-f", $flickr-color: ".fa-flickr", $foursquare-color: ".fa-foursquare", $github-color: ".fa-github, .fa-github-alt, .fa-github-square", $gitlab-color: ".fa-gitlab", - $instagram-color: ".fa-instagram", + $instagram-color: ".fa-instagram, .fa-square-instagram", $keybase-color: ".fa-keybase", $lastfm-color: ".fa-lastfm, .fa-lastfm-square", $linkedin-color: ".fa-linkedin, .fa-linkedin-in", @@ -223,6 +224,7 @@ $text-alignments: left, right, start, end, center, justify; $vine-color: ".fa-vine", $xing-color: ".fa-xing, .fa-xing-square", $youtube-color: ".fa-youtube", + $black-color: ".fa-x-twitter, .fa-square-x-twitter, .fa-threads, .fa-square-treads, .fa-tiktok", ) { #{$icons} { color: $color; diff --git a/_sass/minimal-mistakes/_variables.scss b/_sass/minimal-mistakes/_variables.scss index 2a3258735264..b7f45bf43fe2 100644 --- a/_sass/minimal-mistakes/_variables.scss +++ b/_sass/minimal-mistakes/_variables.scss @@ -90,13 +90,14 @@ $yiq-debug: false !default; /* brands */ $behance-color: #1769ff !default; $bitbucket-color: #205081 !default; +$bluesky-color: #1185FE !default; $dribbble-color: #ea4c89 !default; $facebook-color: #3b5998 !default; $flickr-color: #ff0084 !default; $foursquare-color: #0072b1 !default; $github-color: #171516 !default; $gitlab-color: #e24329 !default; -$instagram-color: #517fa4 !default; +$instagram-color: #cd3376 !default; $keybase-color: #ef7639 !default; $lastfm-color: #d51007 !default; $linkedin-color: #007bb6 !default; @@ -110,8 +111,9 @@ $tumblr-color: #32506d !default; $twitter-color: #55acee !default; $vimeo-color: #1ab7ea !default; $vine-color: #00bf8f !default; -$youtube-color: #bb0000 !default; $xing-color: #006567 !default; +$youtube-color: #bb0000 !default; +$black-color: #000000 !default; /* links */ $link-color: mix(#000, $info-color, 20%) !default; From 7fb3567b2e965ab308ff5c5e2bf87fd2fa0734e3 Mon Sep 17 00:00:00 2001 From: Shin Sang-jae Date: Tue, 28 Jan 2025 00:10:31 +0900 Subject: [PATCH 2/8] toc label korean --- _data/ui-text.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/_data/ui-text.yml b/_data/ui-text.yml index c1d3a12a9a9a..6cbdee3f9cb4 100644 --- a/_data/ui-text.yml +++ b/_data/ui-text.yml @@ -605,7 +605,7 @@ ko: &DEFAULT_KO breadcrumb_separator : "/" menu_label : "토글 메뉴" search_label : - toc_label : "On This Page" + toc_label : "목차" ext_link_label : "직접 링크" less_than : "최대" minute_read : "분 소요" From a075f0fb7d63acef19c0ba9329668e1781390585 Mon Sep 17 00:00:00 2001 From: Shin Sang-jae Date: Tue, 28 Jan 2025 00:33:58 +0900 Subject: [PATCH 3/8] Modifying awkward expressions --- _data/ui-text.yml | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/_data/ui-text.yml b/_data/ui-text.yml index 6cbdee3f9cb4..cb45398ebbcf 100644 --- a/_data/ui-text.yml +++ b/_data/ui-text.yml @@ -601,7 +601,7 @@ ko: &DEFAULT_KO page : "페이지" pagination_previous : "이전" pagination_next : "다음" - breadcrumb_home_label : "Home" + breadcrumb_home_label : "홈" breadcrumb_separator : "/" menu_label : "토글 메뉴" search_label : @@ -614,17 +614,17 @@ ko: &DEFAULT_KO tags_label : "태그:" categories_label : "카테고리:" date_label : "업데이트:" - comments_label : "댓글남기기" + comments_label : "댓글 남기기" comments_title : "댓글" more_label : "더 보기" related_label : "참고" follow_label : "팔로우:" feed_label : "피드" - powered_by : "Powered by" + powered_by : "제작 지원: " website_label : "웹사이트" email_label : "이메일" recent_posts : "최근 포스트" - undefined_wpm : "Undefined parameter words_per_minute at _config.yml" + undefined_wpm : "_config.yml 파일에 words_per_minute 값이 설정되어 있지 않습니다." comment_form_info : "이메일은 공개되지 않습니다. 작성 필요 필드:" comment_form_comment_label : "댓글" comment_form_md_info : "마크다운을 지원합니다." @@ -633,11 +633,11 @@ ko: &DEFAULT_KO comment_form_website_label : "웹사이트(선택사항)" comment_btn_submit : "댓글 등록" comment_btn_submitted : "등록됨" - comment_success_msg : "감사합니다! 댓글이 머지된 후 확인하실 수 있습니다." - comment_error_msg : "댓글 등록에 문제가 있습니다. 필요 필드를 작성했는지 확인하고 다시 시도하세요." - loading_label : "로딩중..." + comment_success_msg : "댓글이 등록되었습니다. 등록된 내용은 관리자 승인 후에 표시됩니다." + comment_error_msg : "댓글이 등록되지 않았습니다. 필수 입력 항목이 빠졌는지 확인하고 다시 시도하세요." + loading_label : "로딩 중..." search_label_text : - search_placeholder_text : "검색어를 입력하세요..." + search_placeholder_text : "검색어를 입력하세요." search_algolia_no_results : results_found : "개 결과 발견" back_to_top : "맨 위로 이동" From 0133857d0e350be18f675ede8eaa8556a9626a37 Mon Sep 17 00:00:00 2001 From: Shin Sang-jae Date: Tue, 28 Jan 2025 01:18:34 +0900 Subject: [PATCH 4/8] height alignment of toc and h2 does not match when using aside --- _sass/minimal-mistakes/_page.scss | 1009 +++++++++++++++-------------- 1 file changed, 507 insertions(+), 502 deletions(-) diff --git a/_sass/minimal-mistakes/_page.scss b/_sass/minimal-mistakes/_page.scss index e33888400eed..9e3ffc49f314 100644 --- a/_sass/minimal-mistakes/_page.scss +++ b/_sass/minimal-mistakes/_page.scss @@ -2,560 +2,565 @@ SINGLE PAGE/POST ========================================================================== */ -#main { - @include clearfix; - margin-inline: auto; - padding-inline: 1em; - -webkit-animation: $intro-transition; - animation: $intro-transition; - max-width: 100%; - -webkit-animation-delay: 0.15s; - animation-delay: 0.15s; - - @include breakpoint($x-large) { - max-width: $max-width; - } -} - -body { - display: -webkit-box; - display: -ms-flexbox; - display: flex; - min-height: 100vh; - -webkit-box-orient: vertical; - -webkit-box-direction: normal; - -ms-flex-direction: column; - flex-direction: column; -} - -.initial-content, -.search-content { - flex: 1 0 auto; -} - -.page { - @include breakpoint($large) { - float: inline-end; - width: calc(100% - #{$right-sidebar-width-narrow}); - padding-inline-end: $right-sidebar-width-narrow; - } - - @include breakpoint($x-large) { - width: calc(100% - #{$right-sidebar-width}); - padding-inline-end: $right-sidebar-width; + #main { + @include clearfix; + margin-inline: auto; + padding-inline: 1em; + -webkit-animation: $intro-transition; + animation: $intro-transition; + max-width: 100%; + -webkit-animation-delay: 0.15s; + animation-delay: 0.15s; + + @include breakpoint($x-large) { + max-width: $max-width; + } } - - .page__inner-wrap { - float: inline-start; - margin-top: 1em; - margin-inline: 0; - width: 100%; - clear: both; - - .page__content, - .page__meta, - .page__share { - position: relative; + + body { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + min-height: 100vh; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + } + + .initial-content, + .search-content { + flex: 1 0 auto; + } + + .page { + @include breakpoint($large) { + float: inline-end; + width: calc(100% - #{$right-sidebar-width-narrow}); + padding-inline-end: $right-sidebar-width-narrow; + } + + @include breakpoint($x-large) { + width: calc(100% - #{$right-sidebar-width}); + padding-inline-end: $right-sidebar-width; + } + + .page__inner-wrap { float: inline-start; + margin-top: 1em; margin-inline: 0; width: 100%; clear: both; + + .page__content, + .page__meta, + .page__share { + position: relative; + float: inline-start; + margin-inline: 0; + width: 100%; + clear: both; + } } } -} - -.page__title { - margin-top: 0; - line-height: 1; - - a { - color: $text-color; - text-decoration: none; - } - - & + .page__meta { - margin-top: -0.5em; - } -} - -.page__lead { - font-family: $global-font-family; - font-size: $type-size-4; -} - -.page__content { - h2 { - padding-bottom: 0.5em; - border-bottom: 1px solid $border-color; + + .page__title { + margin-top: 0; + line-height: 1; + + a { + color: $text-color; + text-decoration: none; + } + + & + .page__meta { + margin-top: -0.5em; + } } - - h1, h2, h3, h4, h5, h6 { - .header-link { - position: relative; - inset-inline-start: 0.5em; - opacity: 0; - font-size: 0.8em; - -webkit-transition: opacity 0.2s ease-in-out 0.1s; - -moz-transition: opacity 0.2s ease-in-out 0.1s; - -o-transition: opacity 0.2s ease-in-out 0.1s; - transition: opacity 0.2s ease-in-out 0.1s; - } - - &:hover .header-link { - opacity: 1; - } - } - - p, - li, - dl { - font-size: 1em; + + .page__lead { + font-family: $global-font-family; + font-size: $type-size-4; } - - /* paragraph indents */ - p { - margin: 0 0 $indent-var; - - /* sibling indentation*/ - @if $paragraph-indent == true { - & + p { - text-indent: $indent-var; - margin-top: -($indent-var); + + .page__content { + h2 { + padding-bottom: 0.5em; + border-bottom: 1px solid $border-color; + } + + h2:first-of-type { + margin-top: 0em; + } + + h1, h2, h3, h4, h5, h6 { + .header-link { + position: relative; + inset-inline-start: 0.5em; + opacity: 0; + font-size: 0.8em; + -webkit-transition: opacity 0.2s ease-in-out 0.1s; + -moz-transition: opacity 0.2s ease-in-out 0.1s; + -o-transition: opacity 0.2s ease-in-out 0.1s; + transition: opacity 0.2s ease-in-out 0.1s; + } + + &:hover .header-link { + opacity: 1; } } - } - - a:not(.btn) { - &:hover { - text-decoration: underline; - - img { - box-shadow: 0 0 10px rgba(#000, 0.25); + + p, + li, + dl { + font-size: 1em; + } + + /* paragraph indents */ + p { + margin: 0 0 $indent-var; + + /* sibling indentation*/ + @if $paragraph-indent == true { + & + p { + text-indent: $indent-var; + margin-top: -($indent-var); + } } } - } - - :not(pre) > code { - padding-top: 0.1rem; - padding-bottom: 0.1rem; - font-size: 0.8em; - background: $code-background-color; - border-radius: $border-radius; - - &::before, - &::after { - letter-spacing: -0.2em; - content: "\00a0"; /* non-breaking space*/ + + a:not(.btn) { + &:hover { + text-decoration: underline; + + img { + box-shadow: 0 0 10px rgba(#000, 0.25); + } + } + } + + :not(pre) > code { + padding-top: 0.1rem; + padding-bottom: 0.1rem; + font-size: 0.8em; + background: $code-background-color; + border-radius: $border-radius; + + &::before, + &::after { + letter-spacing: -0.2em; + content: "\00a0"; /* non-breaking space*/ + } + } + + dt { + margin-top: 1em; + font-family: $sans-serif; + font-weight: bold; + } + + dd { + margin-inline-start: 1em; + font-family: $sans-serif; + font-size: $type-size-6; + } + + .small { + font-size: $type-size-6; + } + + /* blockquote citations */ + blockquote + .small { + margin-top: -1.5em; + padding-inline-start: 1.25rem; } } - - dt { - margin-top: 1em; - font-family: $sans-serif; - font-weight: bold; - } - - dd { - margin-inline-start: 1em; - font-family: $sans-serif; - font-size: $type-size-6; - } - - .small { - font-size: $type-size-6; - } - - /* blockquote citations */ - blockquote + .small { - margin-top: -1.5em; - padding-inline-start: 1.25rem; - } -} - -.page__hero { - position: relative; - margin-bottom: 2em; - @include clearfix; - -webkit-animation: $intro-transition; - animation: $intro-transition; - -webkit-animation-delay: 0.25s; - animation-delay: 0.25s; - - &--overlay { + + .page__hero { position: relative; margin-bottom: 2em; - padding: 3em 0; @include clearfix; - background-size: cover; - background-repeat: no-repeat; - background-position: center; -webkit-animation: $intro-transition; animation: $intro-transition; -webkit-animation-delay: 0.25s; animation-delay: 0.25s; - + + &--overlay { + position: relative; + margin-bottom: 2em; + padding: 3em 0; + @include clearfix; + background-size: cover; + background-repeat: no-repeat; + background-position: center; + -webkit-animation: $intro-transition; + animation: $intro-transition; + -webkit-animation-delay: 0.25s; + animation-delay: 0.25s; + + a { + color: #fff; + } + + .wrapper { + padding-inline: 1em; + + @include breakpoint($x-large) { + max-width: $x-large; + } + } + + .page__title, + .page__meta, + .page__lead, + .btn { + color: #fff; + text-shadow: 1px 1px 4px rgba(#000, 0.5); + } + + .page__lead { + max-width: $medium; + } + + .page__title { + font-size: $type-size-2; + + @include breakpoint($small) { + font-size: $type-size-1; + } + } + } + } + + .page__hero-image { + width: 100%; + height: auto; + -ms-interpolation-mode: bicubic; + } + + .page__hero-caption { + position: absolute; + bottom: 0; + inset-inline-end: 0; + margin: 0 auto; + padding: 2px 5px; + color: #fff; + font-family: $caption-font-family; + font-size: $type-size-7; + background: #000; + text-align: end; + z-index: 5; + opacity: 0.5; + border-radius: $border-radius 0 0 0; + + @include breakpoint($large) { + padding: 5px 10px; + } + a { color: #fff; + text-decoration: none; } - - .wrapper { - padding-inline: 1em; - - @include breakpoint($x-large) { - max-width: $x-large; + } + + /* + Social sharing + ========================================================================== */ + + .page__share { + margin-top: 2em; + padding-top: 1em; + border-top: 1px solid $border-color; + + @include breakpoint(max-width $small) { + .btn span { + border: 0; + clip: rect(0 0 0 0); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; } } - - .page__title, - .page__meta, - .page__lead, - .btn { - color: #fff; - text-shadow: 1px 1px 4px rgba(#000, 0.5); + } + + .page__share-title { + margin-bottom: 10px; + font-size: $type-size-6; + text-transform: uppercase; + } + + /* + Page meta + ========================================================================== */ + + .page__meta { + margin-top: 2em; + color: $muted-text-color; + font-family: $sans-serif; + font-size: $type-size-6; + + p { + margin: 0; } - - .page__lead { - max-width: $medium; + + a { + color: inherit; } - - .page__title { - font-size: $type-size-2; - - @include breakpoint($small) { - font-size: $type-size-1; - } + } + + .page__meta-title { + margin-bottom: 10px; + font-size: $type-size-6; + text-transform: uppercase; + } + + .page__meta-sep::before { + content: "\2022"; + padding-inline: 0.5em; + } + + /* + Page taxonomy + ========================================================================== */ + + .page__taxonomy { + .sep { + display: none; + } + + strong { + margin-inline-end: 10px; } } -} - -.page__hero-image { - width: 100%; - height: auto; - -ms-interpolation-mode: bicubic; -} - -.page__hero-caption { - position: absolute; - bottom: 0; - inset-inline-end: 0; - margin: 0 auto; - padding: 2px 5px; - color: #fff; - font-family: $caption-font-family; - font-size: $type-size-7; - background: #000; - text-align: end; - z-index: 5; - opacity: 0.5; - border-radius: $border-radius 0 0 0; - - @include breakpoint($large) { + + .page__taxonomy-item { + display: inline-block; + margin-inline-end: 5px; + margin-bottom: 8px; padding: 5px 10px; - } - - a { - color: #fff; text-decoration: none; + border: 1px solid mix(#000, $border-color, 25%); + border-radius: $border-radius; + + &:hover { + text-decoration: none; + color: $link-color-hover; + } } -} - -/* - Social sharing - ========================================================================== */ - -.page__share { - margin-top: 2em; - padding-top: 1em; - border-top: 1px solid $border-color; - - @include breakpoint(max-width $small) { - .btn span { + + .taxonomy__section { + margin-bottom: 2em; + padding-bottom: 1em; + + &:not(:last-child) { + border-bottom: solid 1px $border-color; + } + + .archive__item-title { + margin-top: 0; + } + + .archive__subtitle { + clear: both; border: 0; - clip: rect(0 0 0 0); - height: 1px; - margin: -1px; - overflow: hidden; - padding: 0; - position: absolute; - width: 1px; + } + + + .taxonomy__section { + margin-top: 2em; } } -} - -.page__share-title { - margin-bottom: 10px; - font-size: $type-size-6; - text-transform: uppercase; -} - -/* - Page meta - ========================================================================== */ - -.page__meta { - margin-top: 2em; - color: $muted-text-color; - font-family: $sans-serif; - font-size: $type-size-6; - - p { - margin: 0; - } - - a { - color: inherit; - } -} - -.page__meta-title { - margin-bottom: 10px; - font-size: $type-size-6; - text-transform: uppercase; -} - -.page__meta-sep::before { - content: "\2022"; - padding-inline: 0.5em; -} - -/* - Page taxonomy - ========================================================================== */ - -.page__taxonomy { - .sep { - display: none; - } - - strong { - margin-inline-end: 10px; - } -} - -.page__taxonomy-item { - display: inline-block; - margin-inline-end: 5px; - margin-bottom: 8px; - padding: 5px 10px; - text-decoration: none; - border: 1px solid mix(#000, $border-color, 25%); - border-radius: $border-radius; - - &:hover { - text-decoration: none; - color: $link-color-hover; - } -} - -.taxonomy__section { - margin-bottom: 2em; - padding-bottom: 1em; - - &:not(:last-child) { - border-bottom: solid 1px $border-color; - } - - .archive__item-title { - margin-top: 0; + + .taxonomy__title { + margin-bottom: 0.5em; + color: $muted-text-color; + } + + .taxonomy__count { + color: $muted-text-color; + } + + .taxonomy__index { + display: grid; + grid-column-gap: 2em; + grid-template-columns: repeat(2, 1fr); + margin: 1.414em 0; + padding: 0; + font-size: 0.75em; + list-style: none; + + @include breakpoint($large) { + grid-template-columns: repeat(3, 1fr); + } + + a { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + padding: 0.25em 0; + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; + color: inherit; + text-decoration: none; + border-bottom: 1px solid $border-color; + } } - - .archive__subtitle { + + .back-to-top { + display: block; clear: both; - border: 0; - } - - + .taxonomy__section { - margin-top: 2em; - } -} - -.taxonomy__title { - margin-bottom: 0.5em; - color: $muted-text-color; -} - -.taxonomy__count { - color: $muted-text-color; -} - -.taxonomy__index { - display: grid; - grid-column-gap: 2em; - grid-template-columns: repeat(2, 1fr); - margin: 1.414em 0; - padding: 0; - font-size: 0.75em; - list-style: none; - - @include breakpoint($large) { - grid-template-columns: repeat(3, 1fr); - } - - a { - display: -webkit-box; - display: -ms-flexbox; - display: flex; - padding: 0.25em 0; - -webkit-box-pack: justify; - -ms-flex-pack: justify; - justify-content: space-between; - color: inherit; + color: $muted-text-color; + font-size: 0.6em; + text-transform: uppercase; + text-align: end; text-decoration: none; - border-bottom: 1px solid $border-color; } -} - -.back-to-top { - display: block; - clear: both; - color: $muted-text-color; - font-size: 0.6em; - text-transform: uppercase; - text-align: end; - text-decoration: none; -} - -/* - Comments - ========================================================================== */ - -.page__comments { - float: inline-start; - margin-inline: 0; - width: 100%; - clear: both; -} - -.page__comments-title { - margin-top: 2rem; - margin-bottom: 10px; - padding-top: 2rem; - font-size: $type-size-6; - border-top: 1px solid $border-color; - text-transform: uppercase; -} - -.page__comments-form { - -webkit-transition: $global-transition; - transition: $global-transition; - - &.disabled { - input, - button, - textarea, - label { - pointer-events: none; - cursor: not-allowed; - filter: alpha(opacity=65); - box-shadow: none; - opacity: 0.65; - } - } -} - -.comment { - @include clearfix(); - margin: 1em 0; - - &:not(:last-child) { - border-bottom: 1px solid $border-color; - } -} - -.comment__avatar-wrapper { - float: inline-start; - width: 60px; - height: 60px; - - @include breakpoint($large) { - width: 100px; - height: 100px; + + /* + Comments + ========================================================================== */ + + .page__comments { + float: inline-start; + margin-inline: 0; + width: 100%; + clear: both; } -} - -.comment__avatar { - width: 40px; - height: 40px; - border-radius: 50%; - - @include breakpoint($large) { - width: 80px; - height: 80px; - padding: 5px; - border: 1px solid $border-color; + + .page__comments-title { + margin-top: 2rem; + margin-bottom: 10px; + padding-top: 2rem; + font-size: $type-size-6; + border-top: 1px solid $border-color; + text-transform: uppercase; + } + + .page__comments-form { + -webkit-transition: $global-transition; + transition: $global-transition; + + &.disabled { + input, + button, + textarea, + label { + pointer-events: none; + cursor: not-allowed; + filter: alpha(opacity=65); + box-shadow: none; + opacity: 0.65; + } + } } -} - -.comment__content-wrapper { - float: inline-end; - width: calc(100% - 60px); - - @include breakpoint($large) { - width: calc(100% - 100px); + + .comment { + @include clearfix(); + margin: 1em 0; + + &:not(:last-child) { + border-bottom: 1px solid $border-color; + } } -} - -.comment__author { - margin: 0; - - a { - text-decoration: none; + + .comment__avatar-wrapper { + float: inline-start; + width: 60px; + height: 60px; + + @include breakpoint($large) { + width: 100px; + height: 100px; + } } -} - -.comment__date { - @extend .page__meta; - margin: 0; - - a { - text-decoration: none; + + .comment__avatar { + width: 40px; + height: 40px; + border-radius: 50%; + + @include breakpoint($large) { + width: 80px; + height: 80px; + padding: 5px; + border: 1px solid $border-color; + } } -} - -/* - Related - ========================================================================== */ - -.page__related { - @include clearfix(); - float: inline-start; - margin-top: 2em; - padding-top: 1em; - border-top: 1px solid $border-color; - - @include breakpoint($large) { + + .comment__content-wrapper { float: inline-end; - width: calc(100% - #{$right-sidebar-width-narrow}); + width: calc(100% - 60px); + + @include breakpoint($large) { + width: calc(100% - 100px); + } } - - @include breakpoint($x-large) { - width: calc(100% - #{$right-sidebar-width}); + + .comment__author { + margin: 0; + + a { + text-decoration: none; + } } - - a { - color: inherit; - text-decoration: none; + + .comment__date { + @extend .page__meta; + margin: 0; + + a { + text-decoration: none; + } } -} - -.page__related-title { - margin-bottom: 10px; - font-size: $type-size-6; - text-transform: uppercase; -} - -/* - Wide Pages - ========================================================================== */ - -.wide { - .page, .page__related { + + /* + Related + ========================================================================== */ + + .page__related { + @include clearfix(); + float: inline-start; + margin-top: 2em; + padding-top: 1em; + border-top: 1px solid $border-color; + @include breakpoint($large) { - padding-inline-end: 0; + float: inline-end; + width: calc(100% - #{$right-sidebar-width-narrow}); } - + @include breakpoint($x-large) { - padding-inline-end: 0; + width: calc(100% - #{$right-sidebar-width}); + } + + a { + color: inherit; + text-decoration: none; + } + } + + .page__related-title { + margin-bottom: 10px; + font-size: $type-size-6; + text-transform: uppercase; + } + + /* + Wide Pages + ========================================================================== */ + + .wide { + .page, .page__related { + @include breakpoint($large) { + padding-inline-end: 0; + } + + @include breakpoint($x-large) { + padding-inline-end: 0; + } } } -} + \ No newline at end of file From a322c4ac4c6e28df6bffe906c85e9ea78e273343 Mon Sep 17 00:00:00 2001 From: Shin Sang-jae Date: Tue, 28 Jan 2025 14:17:11 +0900 Subject: [PATCH 5/8] add if condition for author urls wrapper --- _includes/author-profile.html | 2 ++ 1 file changed, 2 insertions(+) diff --git a/_includes/author-profile.html b/_includes/author-profile.html index e256ec7dd18f..88dce8ec2b6a 100644 --- a/_includes/author-profile.html +++ b/_includes/author-profile.html @@ -22,6 +22,7 @@

{% endif %} + {% if author %}
+ {% endif %} From 80e6d0fbbac9a9adb73f68f1edb06fd80ededce4 Mon Sep 17 00:00:00 2001 From: Shin Sang-jae Date: Fri, 31 Jan 2025 09:03:17 +0900 Subject: [PATCH 6/8] Revert "height alignment of toc and h2 does not match when using aside" This reverts commit 0133857d0e350be18f675ede8eaa8556a9626a37. --- _sass/minimal-mistakes/_page.scss | 1009 ++++++++++++++--------------- 1 file changed, 502 insertions(+), 507 deletions(-) diff --git a/_sass/minimal-mistakes/_page.scss b/_sass/minimal-mistakes/_page.scss index 9e3ffc49f314..e33888400eed 100644 --- a/_sass/minimal-mistakes/_page.scss +++ b/_sass/minimal-mistakes/_page.scss @@ -2,565 +2,560 @@ SINGLE PAGE/POST ========================================================================== */ - #main { - @include clearfix; - margin-inline: auto; - padding-inline: 1em; - -webkit-animation: $intro-transition; - animation: $intro-transition; - max-width: 100%; - -webkit-animation-delay: 0.15s; - animation-delay: 0.15s; - - @include breakpoint($x-large) { - max-width: $max-width; - } +#main { + @include clearfix; + margin-inline: auto; + padding-inline: 1em; + -webkit-animation: $intro-transition; + animation: $intro-transition; + max-width: 100%; + -webkit-animation-delay: 0.15s; + animation-delay: 0.15s; + + @include breakpoint($x-large) { + max-width: $max-width; } - - body { - display: -webkit-box; - display: -ms-flexbox; - display: flex; - min-height: 100vh; - -webkit-box-orient: vertical; - -webkit-box-direction: normal; - -ms-flex-direction: column; - flex-direction: column; - } - - .initial-content, - .search-content { - flex: 1 0 auto; - } - - .page { - @include breakpoint($large) { - float: inline-end; - width: calc(100% - #{$right-sidebar-width-narrow}); - padding-inline-end: $right-sidebar-width-narrow; - } - - @include breakpoint($x-large) { - width: calc(100% - #{$right-sidebar-width}); - padding-inline-end: $right-sidebar-width; - } - - .page__inner-wrap { +} + +body { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + min-height: 100vh; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; +} + +.initial-content, +.search-content { + flex: 1 0 auto; +} + +.page { + @include breakpoint($large) { + float: inline-end; + width: calc(100% - #{$right-sidebar-width-narrow}); + padding-inline-end: $right-sidebar-width-narrow; + } + + @include breakpoint($x-large) { + width: calc(100% - #{$right-sidebar-width}); + padding-inline-end: $right-sidebar-width; + } + + .page__inner-wrap { + float: inline-start; + margin-top: 1em; + margin-inline: 0; + width: 100%; + clear: both; + + .page__content, + .page__meta, + .page__share { + position: relative; float: inline-start; - margin-top: 1em; margin-inline: 0; width: 100%; clear: both; - - .page__content, - .page__meta, - .page__share { - position: relative; - float: inline-start; - margin-inline: 0; - width: 100%; - clear: both; - } } } - - .page__title { - margin-top: 0; - line-height: 1; - - a { - color: $text-color; - text-decoration: none; - } - - & + .page__meta { - margin-top: -0.5em; - } +} + +.page__title { + margin-top: 0; + line-height: 1; + + a { + color: $text-color; + text-decoration: none; } - - .page__lead { - font-family: $global-font-family; - font-size: $type-size-4; + + & + .page__meta { + margin-top: -0.5em; } - - .page__content { - h2 { - padding-bottom: 0.5em; - border-bottom: 1px solid $border-color; - } - - h2:first-of-type { - margin-top: 0em; - } - - h1, h2, h3, h4, h5, h6 { - .header-link { - position: relative; - inset-inline-start: 0.5em; - opacity: 0; - font-size: 0.8em; - -webkit-transition: opacity 0.2s ease-in-out 0.1s; - -moz-transition: opacity 0.2s ease-in-out 0.1s; - -o-transition: opacity 0.2s ease-in-out 0.1s; - transition: opacity 0.2s ease-in-out 0.1s; - } - - &:hover .header-link { - opacity: 1; - } - } - - p, - li, - dl { - font-size: 1em; - } - - /* paragraph indents */ - p { - margin: 0 0 $indent-var; - - /* sibling indentation*/ - @if $paragraph-indent == true { - & + p { - text-indent: $indent-var; - margin-top: -($indent-var); - } - } - } - - a:not(.btn) { - &:hover { - text-decoration: underline; - - img { - box-shadow: 0 0 10px rgba(#000, 0.25); - } +} + +.page__lead { + font-family: $global-font-family; + font-size: $type-size-4; +} + +.page__content { + h2 { + padding-bottom: 0.5em; + border-bottom: 1px solid $border-color; + } + + h1, h2, h3, h4, h5, h6 { + .header-link { + position: relative; + inset-inline-start: 0.5em; + opacity: 0; + font-size: 0.8em; + -webkit-transition: opacity 0.2s ease-in-out 0.1s; + -moz-transition: opacity 0.2s ease-in-out 0.1s; + -o-transition: opacity 0.2s ease-in-out 0.1s; + transition: opacity 0.2s ease-in-out 0.1s; + } + + &:hover .header-link { + opacity: 1; + } + } + + p, + li, + dl { + font-size: 1em; + } + + /* paragraph indents */ + p { + margin: 0 0 $indent-var; + + /* sibling indentation*/ + @if $paragraph-indent == true { + & + p { + text-indent: $indent-var; + margin-top: -($indent-var); } } - - :not(pre) > code { - padding-top: 0.1rem; - padding-bottom: 0.1rem; - font-size: 0.8em; - background: $code-background-color; - border-radius: $border-radius; - - &::before, - &::after { - letter-spacing: -0.2em; - content: "\00a0"; /* non-breaking space*/ + } + + a:not(.btn) { + &:hover { + text-decoration: underline; + + img { + box-shadow: 0 0 10px rgba(#000, 0.25); } } - - dt { - margin-top: 1em; - font-family: $sans-serif; - font-weight: bold; - } - - dd { - margin-inline-start: 1em; - font-family: $sans-serif; - font-size: $type-size-6; - } - - .small { - font-size: $type-size-6; - } - - /* blockquote citations */ - blockquote + .small { - margin-top: -1.5em; - padding-inline-start: 1.25rem; + } + + :not(pre) > code { + padding-top: 0.1rem; + padding-bottom: 0.1rem; + font-size: 0.8em; + background: $code-background-color; + border-radius: $border-radius; + + &::before, + &::after { + letter-spacing: -0.2em; + content: "\00a0"; /* non-breaking space*/ } } - - .page__hero { + + dt { + margin-top: 1em; + font-family: $sans-serif; + font-weight: bold; + } + + dd { + margin-inline-start: 1em; + font-family: $sans-serif; + font-size: $type-size-6; + } + + .small { + font-size: $type-size-6; + } + + /* blockquote citations */ + blockquote + .small { + margin-top: -1.5em; + padding-inline-start: 1.25rem; + } +} + +.page__hero { + position: relative; + margin-bottom: 2em; + @include clearfix; + -webkit-animation: $intro-transition; + animation: $intro-transition; + -webkit-animation-delay: 0.25s; + animation-delay: 0.25s; + + &--overlay { position: relative; margin-bottom: 2em; + padding: 3em 0; @include clearfix; + background-size: cover; + background-repeat: no-repeat; + background-position: center; -webkit-animation: $intro-transition; animation: $intro-transition; -webkit-animation-delay: 0.25s; animation-delay: 0.25s; - - &--overlay { - position: relative; - margin-bottom: 2em; - padding: 3em 0; - @include clearfix; - background-size: cover; - background-repeat: no-repeat; - background-position: center; - -webkit-animation: $intro-transition; - animation: $intro-transition; - -webkit-animation-delay: 0.25s; - animation-delay: 0.25s; - - a { - color: #fff; - } - - .wrapper { - padding-inline: 1em; - - @include breakpoint($x-large) { - max-width: $x-large; - } - } - - .page__title, - .page__meta, - .page__lead, - .btn { - color: #fff; - text-shadow: 1px 1px 4px rgba(#000, 0.5); - } - - .page__lead { - max-width: $medium; - } - - .page__title { - font-size: $type-size-2; - - @include breakpoint($small) { - font-size: $type-size-1; - } - } - } - } - - .page__hero-image { - width: 100%; - height: auto; - -ms-interpolation-mode: bicubic; - } - - .page__hero-caption { - position: absolute; - bottom: 0; - inset-inline-end: 0; - margin: 0 auto; - padding: 2px 5px; - color: #fff; - font-family: $caption-font-family; - font-size: $type-size-7; - background: #000; - text-align: end; - z-index: 5; - opacity: 0.5; - border-radius: $border-radius 0 0 0; - - @include breakpoint($large) { - padding: 5px 10px; - } - + a { color: #fff; - text-decoration: none; } - } - - /* - Social sharing - ========================================================================== */ - - .page__share { - margin-top: 2em; - padding-top: 1em; - border-top: 1px solid $border-color; - - @include breakpoint(max-width $small) { - .btn span { - border: 0; - clip: rect(0 0 0 0); - height: 1px; - margin: -1px; - overflow: hidden; - padding: 0; - position: absolute; - width: 1px; + + .wrapper { + padding-inline: 1em; + + @include breakpoint($x-large) { + max-width: $x-large; } } - } - - .page__share-title { - margin-bottom: 10px; - font-size: $type-size-6; - text-transform: uppercase; - } - - /* - Page meta - ========================================================================== */ - - .page__meta { - margin-top: 2em; - color: $muted-text-color; - font-family: $sans-serif; - font-size: $type-size-6; - - p { - margin: 0; - } - - a { - color: inherit; + + .page__title, + .page__meta, + .page__lead, + .btn { + color: #fff; + text-shadow: 1px 1px 4px rgba(#000, 0.5); } - } - - .page__meta-title { - margin-bottom: 10px; - font-size: $type-size-6; - text-transform: uppercase; - } - - .page__meta-sep::before { - content: "\2022"; - padding-inline: 0.5em; - } - - /* - Page taxonomy - ========================================================================== */ - - .page__taxonomy { - .sep { - display: none; + + .page__lead { + max-width: $medium; } - - strong { - margin-inline-end: 10px; + + .page__title { + font-size: $type-size-2; + + @include breakpoint($small) { + font-size: $type-size-1; + } } } - - .page__taxonomy-item { - display: inline-block; - margin-inline-end: 5px; - margin-bottom: 8px; +} + +.page__hero-image { + width: 100%; + height: auto; + -ms-interpolation-mode: bicubic; +} + +.page__hero-caption { + position: absolute; + bottom: 0; + inset-inline-end: 0; + margin: 0 auto; + padding: 2px 5px; + color: #fff; + font-family: $caption-font-family; + font-size: $type-size-7; + background: #000; + text-align: end; + z-index: 5; + opacity: 0.5; + border-radius: $border-radius 0 0 0; + + @include breakpoint($large) { padding: 5px 10px; + } + + a { + color: #fff; text-decoration: none; - border: 1px solid mix(#000, $border-color, 25%); - border-radius: $border-radius; - - &:hover { - text-decoration: none; - color: $link-color-hover; - } } - - .taxonomy__section { - margin-bottom: 2em; - padding-bottom: 1em; - - &:not(:last-child) { - border-bottom: solid 1px $border-color; - } - - .archive__item-title { - margin-top: 0; - } - - .archive__subtitle { - clear: both; +} + +/* + Social sharing + ========================================================================== */ + +.page__share { + margin-top: 2em; + padding-top: 1em; + border-top: 1px solid $border-color; + + @include breakpoint(max-width $small) { + .btn span { border: 0; - } - - + .taxonomy__section { - margin-top: 2em; + clip: rect(0 0 0 0); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; } } - - .taxonomy__title { - margin-bottom: 0.5em; - color: $muted-text-color; - } - - .taxonomy__count { - color: $muted-text-color; - } - - .taxonomy__index { - display: grid; - grid-column-gap: 2em; - grid-template-columns: repeat(2, 1fr); - margin: 1.414em 0; - padding: 0; - font-size: 0.75em; - list-style: none; - - @include breakpoint($large) { - grid-template-columns: repeat(3, 1fr); - } - - a { - display: -webkit-box; - display: -ms-flexbox; - display: flex; - padding: 0.25em 0; - -webkit-box-pack: justify; - -ms-flex-pack: justify; - justify-content: space-between; - color: inherit; - text-decoration: none; - border-bottom: 1px solid $border-color; - } +} + +.page__share-title { + margin-bottom: 10px; + font-size: $type-size-6; + text-transform: uppercase; +} + +/* + Page meta + ========================================================================== */ + +.page__meta { + margin-top: 2em; + color: $muted-text-color; + font-family: $sans-serif; + font-size: $type-size-6; + + p { + margin: 0; } - - .back-to-top { - display: block; - clear: both; - color: $muted-text-color; - font-size: 0.6em; - text-transform: uppercase; - text-align: end; + + a { + color: inherit; + } +} + +.page__meta-title { + margin-bottom: 10px; + font-size: $type-size-6; + text-transform: uppercase; +} + +.page__meta-sep::before { + content: "\2022"; + padding-inline: 0.5em; +} + +/* + Page taxonomy + ========================================================================== */ + +.page__taxonomy { + .sep { + display: none; + } + + strong { + margin-inline-end: 10px; + } +} + +.page__taxonomy-item { + display: inline-block; + margin-inline-end: 5px; + margin-bottom: 8px; + padding: 5px 10px; + text-decoration: none; + border: 1px solid mix(#000, $border-color, 25%); + border-radius: $border-radius; + + &:hover { text-decoration: none; + color: $link-color-hover; } - - /* - Comments - ========================================================================== */ - - .page__comments { - float: inline-start; - margin-inline: 0; - width: 100%; +} + +.taxonomy__section { + margin-bottom: 2em; + padding-bottom: 1em; + + &:not(:last-child) { + border-bottom: solid 1px $border-color; + } + + .archive__item-title { + margin-top: 0; + } + + .archive__subtitle { clear: both; + border: 0; } - - .page__comments-title { - margin-top: 2rem; - margin-bottom: 10px; - padding-top: 2rem; - font-size: $type-size-6; - border-top: 1px solid $border-color; - text-transform: uppercase; - } - - .page__comments-form { - -webkit-transition: $global-transition; - transition: $global-transition; - - &.disabled { - input, - button, - textarea, - label { - pointer-events: none; - cursor: not-allowed; - filter: alpha(opacity=65); - box-shadow: none; - opacity: 0.65; - } - } + + + .taxonomy__section { + margin-top: 2em; } - - .comment { - @include clearfix(); - margin: 1em 0; - - &:not(:last-child) { - border-bottom: 1px solid $border-color; - } +} + +.taxonomy__title { + margin-bottom: 0.5em; + color: $muted-text-color; +} + +.taxonomy__count { + color: $muted-text-color; +} + +.taxonomy__index { + display: grid; + grid-column-gap: 2em; + grid-template-columns: repeat(2, 1fr); + margin: 1.414em 0; + padding: 0; + font-size: 0.75em; + list-style: none; + + @include breakpoint($large) { + grid-template-columns: repeat(3, 1fr); } - - .comment__avatar-wrapper { - float: inline-start; - width: 60px; - height: 60px; - - @include breakpoint($large) { - width: 100px; - height: 100px; - } + + a { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + padding: 0.25em 0; + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; + color: inherit; + text-decoration: none; + border-bottom: 1px solid $border-color; } - - .comment__avatar { - width: 40px; - height: 40px; - border-radius: 50%; - - @include breakpoint($large) { - width: 80px; - height: 80px; - padding: 5px; - border: 1px solid $border-color; - } +} + +.back-to-top { + display: block; + clear: both; + color: $muted-text-color; + font-size: 0.6em; + text-transform: uppercase; + text-align: end; + text-decoration: none; +} + +/* + Comments + ========================================================================== */ + +.page__comments { + float: inline-start; + margin-inline: 0; + width: 100%; + clear: both; +} + +.page__comments-title { + margin-top: 2rem; + margin-bottom: 10px; + padding-top: 2rem; + font-size: $type-size-6; + border-top: 1px solid $border-color; + text-transform: uppercase; +} + +.page__comments-form { + -webkit-transition: $global-transition; + transition: $global-transition; + + &.disabled { + input, + button, + textarea, + label { + pointer-events: none; + cursor: not-allowed; + filter: alpha(opacity=65); + box-shadow: none; + opacity: 0.65; + } + } +} + +.comment { + @include clearfix(); + margin: 1em 0; + + &:not(:last-child) { + border-bottom: 1px solid $border-color; + } +} + +.comment__avatar-wrapper { + float: inline-start; + width: 60px; + height: 60px; + + @include breakpoint($large) { + width: 100px; + height: 100px; } - - .comment__content-wrapper { +} + +.comment__avatar { + width: 40px; + height: 40px; + border-radius: 50%; + + @include breakpoint($large) { + width: 80px; + height: 80px; + padding: 5px; + border: 1px solid $border-color; + } +} + +.comment__content-wrapper { + float: inline-end; + width: calc(100% - 60px); + + @include breakpoint($large) { + width: calc(100% - 100px); + } +} + +.comment__author { + margin: 0; + + a { + text-decoration: none; + } +} + +.comment__date { + @extend .page__meta; + margin: 0; + + a { + text-decoration: none; + } +} + +/* + Related + ========================================================================== */ + +.page__related { + @include clearfix(); + float: inline-start; + margin-top: 2em; + padding-top: 1em; + border-top: 1px solid $border-color; + + @include breakpoint($large) { float: inline-end; - width: calc(100% - 60px); - - @include breakpoint($large) { - width: calc(100% - 100px); - } + width: calc(100% - #{$right-sidebar-width-narrow}); } - - .comment__author { - margin: 0; - - a { - text-decoration: none; - } + + @include breakpoint($x-large) { + width: calc(100% - #{$right-sidebar-width}); } - - .comment__date { - @extend .page__meta; - margin: 0; - - a { - text-decoration: none; - } + + a { + color: inherit; + text-decoration: none; } - - /* - Related - ========================================================================== */ - - .page__related { - @include clearfix(); - float: inline-start; - margin-top: 2em; - padding-top: 1em; - border-top: 1px solid $border-color; - +} + +.page__related-title { + margin-bottom: 10px; + font-size: $type-size-6; + text-transform: uppercase; +} + +/* + Wide Pages + ========================================================================== */ + +.wide { + .page, .page__related { @include breakpoint($large) { - float: inline-end; - width: calc(100% - #{$right-sidebar-width-narrow}); + padding-inline-end: 0; } - + @include breakpoint($x-large) { - width: calc(100% - #{$right-sidebar-width}); - } - - a { - color: inherit; - text-decoration: none; - } - } - - .page__related-title { - margin-bottom: 10px; - font-size: $type-size-6; - text-transform: uppercase; - } - - /* - Wide Pages - ========================================================================== */ - - .wide { - .page, .page__related { - @include breakpoint($large) { - padding-inline-end: 0; - } - - @include breakpoint($x-large) { - padding-inline-end: 0; - } + padding-inline-end: 0; } } - \ No newline at end of file +} From 1c70fd2ef5860336289231a8c4125b589fa475cd Mon Sep 17 00:00:00 2001 From: Shin Sang-jae Date: Fri, 31 Jan 2025 14:45:34 +0900 Subject: [PATCH 7/8] Revert "height alignment of toc and h2 does not match when using aside" This reverts commit 0133857d0e350be18f675ede8eaa8556a9626a37. From 14d71a786c579dd7ef4bf2628f2ac29198bef01a Mon Sep 17 00:00:00 2001 From: Shin Sang-jae Date: Fri, 31 Jan 2025 15:31:07 +0900 Subject: [PATCH 8/8] vertical alignment for first content --- _sass/minimal-mistakes/_page.scss | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/_sass/minimal-mistakes/_page.scss b/_sass/minimal-mistakes/_page.scss index e33888400eed..27e08ccfd8e7 100644 --- a/_sass/minimal-mistakes/_page.scss +++ b/_sass/minimal-mistakes/_page.scss @@ -170,6 +170,12 @@ body { margin-top: -1.5em; padding-inline-start: 1.25rem; } + + /* vertical alignment for first content */ + :first-child, + aside + :nth-child(2) { + margin-top: 0em; + } } .page__hero {