summaryrefslogtreecommitdiff
path: root/_sass
diff options
context:
space:
mode:
Diffstat (limited to '_sass')
-rw-r--r--_sass/yat.scss24
-rw-r--r--_sass/yat/_base.scss39
-rw-r--r--_sass/yat/_layout.scss299
3 files changed, 309 insertions, 53 deletions
diff --git a/_sass/yat.scss b/_sass/yat.scss
index 4db827b..8d1730f 100644
--- a/_sass/yat.scss
+++ b/_sass/yat.scss
@@ -2,18 +2,18 @@
// Define defaults for each variable.
-$base-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif, Oswald,
-"Apple Color Emoji", "Open Sans", "FontAwesome", !default;
-$base-font-size: 14px !default;
+$base-font-family: 'Noto Sans Light', 'AppleSDGothicNeo-Regular', 'Malgun
+Gothic', "Apple Color Emoji", Helvetica, Arial, sans-serif, Oswald, dotum, sans-serif, !default;
+$base-font-size: 14px !default;
$base-font-weight: 400 !default;
$small-font-size: $base-font-size * 0.875 !default;
-$base-line-height: 1.5 !default;
+$base-line-height: 1.6 !default;
$spacing-unit: 30px !default;
-$text-color: #333 !default;
-$background-color: #fefefe !default;
-$brand-color: #2a7ae2 !default;
+$text-color: #313b3f !default;
+$background-color: #fff !default;
+$brand-color: #ff5100 !default;
$grey-color: #828282 !default;
$grey-color-light: lighten($grey-color, 40%) !default;
@@ -24,16 +24,16 @@ $white-color: #fdfdfd !default;
$table-text-align: left !default;
$header-height: $base-line-height * $base-font-size * 2.85 !default;
-$header-text-color: lighten($white-color, 10%) !default;
+$header-text-color: invert($theme-color) !default;
$header-background-color: $theme-color !default;
$footer-height: $header-height * 1.05 !default;
-$footer-text-color: rgba(lighten(invert($theme-color), 30%), 50%) !default;
+$footer-text-color: lighten(invert($theme-color), 25%) !default;
$footer-background-color: darken($theme-color, 5%) !default;
-$banner-height: 420px !default;
+$banner-height: 640px !default;
$banner-text-color: lighten($white-color, 0%) !default;
-$banner-background: darken(#333, 5%) !default;
+$banner-background: rgba(0,0,0,0.8) !default;
// Width of the content area
$content-width: 920px !default;
@@ -62,7 +62,7 @@ $on-laptop: 800px !default;
@import
"yat/base",
"yat/layout",
- "yat/syntax-highlighting",
+ // "yat/syntax-highlighting",
"misc/article-menu",
"misc/common-list",
"misc/google-translate"
diff --git a/_sass/yat/_base.scss b/_sass/yat/_base.scss
index 38c41e5..61c3d87 100644
--- a/_sass/yat/_base.scss
+++ b/_sass/yat/_base.scss
@@ -14,7 +14,10 @@ dl, dd, ol, ul, figure {
* Basic styling
*/
body {
- font: $base-font-weight #{$base-font-size}/#{$base-line-height} $base-font-family;
+ font-family: $base-font-family;
+ font-weight: $base-font-weight;
+ font-size: #{$base-font-size};
+ line-height: #{$base-line-height};
color: $text-color;
background-color: $background-color;
-webkit-text-size-adjust: 100%;
@@ -107,7 +110,7 @@ a {
text-decoration: none;
&:visited {
- color: darken($brand-color, 15%);
+ color: #606060;
}
&:hover {
@@ -149,22 +152,37 @@ blockquote {
pre,
code {
@include relative-font-size(0.9375);
- border-radius: 3px;
- background-color: #3d3d3d;
}
code {
padding: 1px 5px;
+ border-radius: 3px;
+ color: #fff;
+ background-color: $brand-color;
}
pre {
- padding: 8px 12px;
overflow-x: auto;
+ position: relative;
+
+ &:before {
+ content: attr(data-lang);
+ color: #fff;
+ background-color: #ff4e00;
+ padding: 0 .5em;
+ border-radius: 0 2px;
+ text-transform: uppercase;
+ text-align: center;
+ min-width: 32px;
+ display: inline-block;
+ position: absolute;
+ right: 0;
+ }
> code {
border: 0;
- padding-right: 0;
- padding-left: 0;
+ padding: 20px!important;
+ background-color: transparent;
}
}
@@ -179,11 +197,6 @@ pre {
padding-right: $spacing-unit;
padding-left: $spacing-unit;
@extend %clearfix;
-
- @include media-query($on-laptop) {
- padding-right: $spacing-unit / 2;
- padding-left: $spacing-unit / 2;
- }
}
@@ -205,7 +218,7 @@ table {
margin-bottom: $spacing-unit;
width: 100%;
text-align: $table-text-align;
- color: lighten($text-color, 18%);
+ color: lighten($text-color, 5%);
border-collapse: collapse;
tr {
diff --git a/_sass/yat/_layout.scss b/_sass/yat/_layout.scss
index 50bbb13..c0e7064 100644
--- a/_sass/yat/_layout.scss
+++ b/_sass/yat/_layout.scss
@@ -11,14 +11,31 @@ html {
&[data-scroll-status='top'] {
header.site-header-transparent {
height: 0;
+ margin-top: 20px;
+ background-color: transparent;
+ transition: 0.1s height,background-color,box-shadow;
&.site-header {
- text-shadow: 0 0 2px #505050a0;
+ .site-brand-inner, .page-link {
+ color: #fff;
+ transition: 0.1s color;
+ }
+
+ @include media-query($on-laptop) {
+ .page-link {
+ color: unset;
+ }
+
+ .menu-icon {
+ > svg {
+ fill: $white-color;
+ }
+ }
+ }
}
}
footer.site-footer {
- color: #888;
background-color: transparent;
.site-footer-inner {
@@ -46,11 +63,22 @@ html {
height: $header-height;
width: 100%;
transition: height 0.2s, text-shadow 0.2s, top 0.2s;
+ box-shadow: 0 1px 0 0 rgba(0, 0, 0, .06);
// Positioning context for the mobile navigation icon
@include flex-sticky(0);
z-index: 1000;
+ & > .wrapper {
+ margin: 0 60px;
+ max-width: 100%;
+
+ @include media-query(1024px) {
+ margin: unset;
+ max-width: unset;
+ }
+ }
+
a {
text-decoration: none;
}
@@ -68,16 +96,12 @@ html {
@include relative-font-size(1.125);
font-weight: $base-font-weight;
letter-spacing: -1px;
- transition: filter 0.2s;
+ transition: 0.1s filter color;
&, &:visited {
color: $header-text-color;
}
- &:hover {
- filter: drop-shadow(0 0 2px #08080880);
- }
-
.site-favicon {
display: inline-block;
height: $header-height / 1.5;
@@ -87,7 +111,7 @@ html {
}
.site-nav {
- @include relative-font-size(1.025);
+ @include relative-font-size(1.125);
line-height: $header-height;
position: absolute;
right: 0;
@@ -102,16 +126,20 @@ html {
}
.page-link {
- color: $header-text-color;
line-height: $base-line-height;
+ color: $header-text-color;
+ transition: 0.1s ease-in-out;
// Gaps between nav items, but not on the last one
&:not(:last-child) {
- margin-right: 20px;
+ margin-right: 24px;
+ &:hover {
+ text-decoration: underline;
+ }
}
}
- @include media-query($on-palm) {
+ @include media-query($on-laptop) {
position: absolute;
top: 0;
text-align: left;
@@ -128,13 +156,16 @@ html {
text-align: center;
> svg {
- fill: $white-color;
+ fill: rgba($header-text-color, 80%);
+ transition: 0.1s fill;
}
}
input ~ .trigger {
clear: both;
display: none;
+ border-radius: 3px;
+ box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, .06);
}
input:checked ~ .trigger {
@@ -155,7 +186,7 @@ html {
* Site footer
*/
.site-footer {
- @include relative-font-size(0.9);
+ @include relative-font-size(1.0);
color: $footer-text-color;
background-color: $footer-background-color;
text-align: left;
@@ -163,11 +194,11 @@ html {
.site-footer-inner {
transition: border-top 0.2s;
- padding: $spacing-unit * 0.8 0;
+ padding: $spacing-unit * 1.8 0;
}
a {
- $a-color: invert(mix(invert($theme-color), #0030ae));
+ $a-color: $brand-color;
color: $a-color;
&:hover {
@@ -193,6 +224,15 @@ html {
@include relative-font-size(2.25);
}
}
+
+ .post-tags {
+ display: inline-block;
+ padding-right: 150px;
+
+ .post-tag {
+ margin: 0 12px 0 0;
+ }
+ }
}
/**
@@ -201,7 +241,7 @@ html {
.page-content {
@extend %flex-1; /* <-- Keep footer on the bottom */
-ms-flex: none; /* <-- Fix IE footer issue */
- padding: $spacing-unit * 1.5 0;
+ padding: $spacing-unit * 2 0;
}
.page-heading {
@@ -221,20 +261,65 @@ html {
list-style: none;
> li {
- margin-bottom: $spacing-unit;
+ margin-bottom: $spacing-unit * 1.5;
+ padding-bottom: 30px;
+
+ &:not(:last-child) {
+ border-bottom: 1px solid #e3e3e3;
+ }
+ }
+ }
+
+ .post-title {
+ margin-bottom: 2px;
+
+ a {
+ text-decoration: none;
+
+ &:after {
+ content: 'NEW';
+ position: absolute;
+ margin-left: 8px;
+ margin-top: 3px;
+ padding: 0px 3px;
+ background-color: $brand-color;
+ color: #fff;
+ font-size: 10px;
+ font-weight: 600;
+ border-radius: 2px;
+ }
+
+ &:visited:after {
+ background-color: #fff;
+ }
}
}
.post-meta {
- font-size: $small-font-size;
+ font-size: $base-font-size;
color: $grey-color;
+ margin-bottom: $spacing-unit * 0.5;
}
.post-link {
@include relative-font-size(1.5);
-
- display: block;
font-weight: $base-font-weight * 1.5;
+ color: #15171a;
+ }
+
+ .post-excerpt {
+ color: #777;
+ }
+
+ .post-tags .post-tag {
+ text-decoration: none;
+ border: 1px solid;
+ padding: 2px 4px;
+ border-radius: 2px;
+
+ &:not(:first-child) {
+ margin-left: 8px;
+ }
}
}
@@ -245,6 +330,20 @@ html {
.post {
@extend %post-header;
+ .post-header {
+ margin: 50px auto 60px;
+ padding: 0 0 20px;
+ border-bottom: 1px solid #ebebeb;
+
+ .post-title {
+ margin-bottom: 2px;
+ }
+
+ .post-meta {
+ color: #808080;
+ }
+ }
+
.post-content {
margin-bottom: $spacing-unit;
@@ -271,6 +370,67 @@ html {
@include relative-font-size(1.125);
}
}
+
+ img, iframe {
+ margin-left: auto;
+ margin-right: auto;
+ display: block;
+ }
+
+ h2, h3, h4, h5, h6 {
+ margin: 60px 0 19px;
+ }
+
+ p, hr {
+ margin-bottom: 24px;
+ }
+
+ hr {
+ height: 1px;
+ background-color: #ebebeb;
+ border: none;
+ }
+ }
+
+ .post-related {
+ &>*:first-child {
+ @include relative-font-size(1.425);
+ color: #333;
+ margin-bottom: 14px;
+ }
+
+ ul {
+ margin-left: 15px;
+ .post-link {
+ @include relative-font-size(1.075);
+ }
+
+ a {
+ text-decoration: none;
+ color: #666;
+
+ &:hover {
+ color: #333;
+ }
+
+ &:after {
+ content: 'NEW';
+ position: absolute;
+ margin-left: 8px;
+ margin-top: 3px;
+ padding: 0px 3px;
+ background-color: $brand-color;
+ color: #fff;
+ font-size: 10px;
+ font-weight: 600;
+ border-radius: 2px;
+ }
+
+ &:visited:after {
+ background-color: #fff;
+ }
+ }
+ }
}
}
@@ -281,9 +441,35 @@ html {
.post-nav {
display: flex;
justify-content: space-between;
+ margin: 72px 0 59px;
+ padding: 31px 0 0;
a {
- display: flex;
+ @include relative-font-size(1.125);
+ line-height: 15px;
+ color: #666;
+ }
+
+ .previous:before {
+ content: ' ';
+ border: solid #787878;
+ border-width: 0 2px 2px 0;
+ display: inline-block;
+ padding: 4px;
+ margin-right: 8px;
+ transform: rotate(135deg);
+ -webkit-transform: rotate(135deg);
+ }
+
+ .next:after {
+ content: ' ';
+ border: solid #787878;
+ border-width: 0 2px 2px 0;
+ display: inline-block;
+ padding: 4px;
+ margin-left: 8px;
+ transform: rotate(-45deg);
+ -webkit-transform: rotate(-45deg);
}
}
@@ -322,6 +508,7 @@ html {
height: $banner-height;
background-color: $banner-background;
transition: height 0.2s;
+ margin-bottom: 32px;
.page-banner-img {
position: absolute;
@@ -343,16 +530,17 @@ html {
color: $banner-text-color;
padding: 10px 5px;
- text-shadow: 1px 1px 2px #333;
+ text-shadow: 1px 1px 2px #33333355;
& > *:first-child {
margin: 0;
> :nth-child(1) {
- @include relative-font-size(2.825);
+ @include relative-font-size(3.9);
letter-spacing: -1px;
- line-height: 1;
- margin-bottom: 10px;
+ line-height: 0.95;
+ margin-bottom: 18px;
+ font-weight: normal;
@include media-query($on-palm) {
@include relative-font-size(2.425);
@@ -360,13 +548,41 @@ html {
}
> :nth-child(2) {
- font-weight: $base-font-weight * 1.5;
+ font-weight: normal;
+ margin-bottom: 0;
}
> :last-child {
margin-bottom: 0;
}
}
+
+ .post-subtitle {
+ @include relative-font-size(1.525);
+ color: #ffffffcc;
+ padding-right: 280px;
+ }
+
+ .post-meta {
+ color: #ffffffcc;
+ }
+
+ .post-tags {
+ color: #999;
+ padding-right: 280px;
+
+ .post-tag {
+ @include relative-font-size(1.125);
+ display: inline-block;
+ text-decoration: none;
+ margin: 9px 12px 0 0;
+ color: #fff;
+
+ &:hover {
+ text-decoration: underline;
+ }
+ }
+ }
}
@include media-query($on-palm) {
@@ -391,7 +607,7 @@ html {
@include flex-sticky($header-height + 20px);
- @include media-query($on-palm) {
+ @include media-query($on-laptop) {
display: none;
}
@@ -419,7 +635,6 @@ html {
margin-top: 28px;
}
-
&:hover:before {
content: '#';
left: -1em;
@@ -432,5 +647,33 @@ html {
color: $grey-color;
}
+ li a {
+ &.post-link {
+ margin-left: 5px;
+ }
+
+ color: #303030;
+
+ &:hover {
+ color: #000;
+ }
+
+ &:after {
+ content: 'NEW';
+ position: absolute;
+ margin-left: 8px;
+ margin-top: 3px;
+ padding: 0px 3px;
+ background-color: $brand-color;
+ color: #fff;
+ font-size: 10px;
+ font-weight: 600;
+ border-radius: 2px;
+ }
+
+ &:visited:after {
+ background-color: #fff;
+ }
+ }
}
generated by cgit v1.2.3 (git 2.39.1) at 2024-10-18 16:22:00 +0000