From 61eae5c5f9881cab29712f6e696085baa977e1f9 Mon Sep 17 00:00:00 2001 From: Jeffrey Tse Date: Wed, 11 Sep 2019 12:19:34 +0800 Subject: release: v1.0.0 --- _sass/misc/article-menu.scss | 47 +++++ _sass/misc/common-list.scss | 49 +++++ _sass/misc/google-translate.scss | 189 ++++++++++++++++++ _sass/yat.scss | 83 ++++++++ _sass/yat/_base.scss | 258 +++++++++++++++++++++++++ _sass/yat/_layout.scss | 371 ++++++++++++++++++++++++++++++++++++ _sass/yat/_syntax-highlighting.scss | 105 ++++++++++ 7 files changed, 1102 insertions(+) create mode 100644 _sass/misc/article-menu.scss create mode 100644 _sass/misc/common-list.scss create mode 100644 _sass/misc/google-translate.scss create mode 100644 _sass/yat.scss create mode 100644 _sass/yat/_base.scss create mode 100644 _sass/yat/_layout.scss create mode 100644 _sass/yat/_syntax-highlighting.scss (limited to '_sass') diff --git a/_sass/misc/article-menu.scss b/_sass/misc/article-menu.scss new file mode 100644 index 0000000..006f6ee --- /dev/null +++ b/_sass/misc/article-menu.scss @@ -0,0 +1,47 @@ +/* + * Post menu + */ + +.post-menu { + padding: 0 20px; + max-width: 250px; + + .post-menu-title { + font-size: $base-font-size * 1.35; + margin-bottom: 6px; + font-weight: 600; + color: #4e4e4e; + + &:before { + content: '\f02e'; + margin-right: 5px; + font-size: $base-font-size * 1.15; + } + } + + .post-menu-content { + ul { + @for $i from 2 to 7 { + .h-h#{$i} { + padding-left: ($i - 2) * $base-font-size * 0.9; + font-size: (7 - $i) + $base-font-size * 0.9; + } + } + + a { + display: flex; + padding: 0px 8px; + + * { + pointer-events: none; + } + } + + .active { + color: white; + background: mix(invert($theme-color), darkorange); + transition: background 0.5s; + } + } + } +} diff --git a/_sass/misc/common-list.scss b/_sass/misc/common-list.scss new file mode 100644 index 0000000..97f7b31 --- /dev/null +++ b/_sass/misc/common-list.scss @@ -0,0 +1,49 @@ +/** + * Common list + */ +.common-list { + @include relative-font-size(1.0); + + background: #eaeaea; + box-shadow: 0px 0px 3px 0px #a9a9a9; + border-radius: 3px; + min-width: 200px; + + ul { + list-style: none; + margin: 0; + } + + li { + border-bottom: 1px solid $background-color; + + &:last-child { + border-bottom: none; + } + + a { + display: flex; + justify-content: space-between; + padding: 8px 12px; + text-decoration: none; + font-weight: 600; + color: mix($theme-color, #666); + transition: background 0.2s; + + &:hover { + background: mix($theme-color, #fff, 20%); + } + } + + span { + @include relative-font-size(0.8); + display: inline-block; + border-radius: 10px; + align-self: center; + background: darken(invert($theme-color), 20%); + padding: 0px 8px; + margin-left: 20px; + color: $white-color; + } + } +} diff --git a/_sass/misc/google-translate.scss b/_sass/misc/google-translate.scss new file mode 100644 index 0000000..97519a5 --- /dev/null +++ b/_sass/misc/google-translate.scss @@ -0,0 +1,189 @@ +/* OVERRIDE GOOGLE TRANSLATE WIDGET CSS BEGIN */ + +%goog-te-menu { + a.goog-te-menu-value { + vertical-align: top !important; + + &:hover { + text-decoration: none; + } + + span { + color: #aaa; + } + + span:hover { + color: white; + } + + /* Remove the down arrow */ + /* when dropdown open */ + span[style="color: rgb(213, 213, 213);"] { + display: none; + } + /* after clicked/touched */ + span[style="color: rgb(118, 118, 118);"] { + display: none; + } + /* on page load (not yet touched or clicked) */ + span[style="color: rgb(155, 155, 155);"] { + display: none; + } + + /* Remove span with left border line | (next to the arrow) in Chrome & Firefox */ + span[style="border-left: 1px solid rgb(187, 187, 187);"] { + display: none; + } + /* Remove span with left border line | (next to the arrow) in Edge & IE11 */ + span[style="border-left-color: rgb(187, 187, 187); border-left-width: 1px; border-left-style: solid;"] { + display: none; + } + } +} + +div#google_translate_element { + display: inline; + + div.goog-te-gadget { + display: inline; + font-size: 0; + } + + div[id=':0.targetLanguage'] { + display: inline; + } + + div.goog-te-gadget-simple { + border: none; + background-color: transparent; + + @extend %goog-te-menu; + } + + a.goog-logo-link { + display: none; + } + + .goog-te-gadget-icon { + display: none !important; + /*background: url("url for the icon") 0 0 no-repeat !important;*/ + } + + a.goog-te-menu-value { + margin: 0; + + span:first-child { + display: none; + } + + &:before { + content: "\f1ab \f0d7"; + font-family: FontAwesome; + font-size: initial; + color: #fefefe; + border: 1px solid #fefefe85; + border-radius: 3px; + padding: 3px 6px; + } + } +} + +.goog-te-menu-frame .goog-te-menu2 { + max-width: 100%; + overflow-x: auto; + box-sizing: border-box; + height: auto; +} + +/* HIDE the google translate toolbar */ +.goog-te-banner-frame.skiptranslate { + display: none !important; + border: none; + box-shadow: 0 0; + -webkit-box-shadow: 0 0; +} + +body { + top: 0px !important; +} + +/* OVERRIDE GOOGLE TRANSLATE WIDGET CSS END */ + + +// Main look + +.ct-language-selected { + background: lighten($theme-color, 10%) !important; +} + +.ct-language-dropdown { + overflow: hidden; + max-height: 0; + position: absolute; + top: 110%; + right: -10px; + -webkit-transition: all 0.25s ease-in-out; + transition: all 0.25s ease-in-out; + width: 100px; + text-align: center; + padding-top: 0; + z-index: 200; + + li { + background: lighten($theme-color, 5%); + padding: 5px; + + a { + display: block; + + img { + width: 24px; + max-height: 24px; + } + } + + &:first-child { + padding-top: 10px; + border-radius: 3px 3px 0 0; + } + + &:last-child { + padding-bottom: 10px; + border-radius: 0 0 3px 3px; + } + + &:hover { + @extend .ct-language-selected; + } + } + +} + +.list-unstyled { + display: inline-block; + list-style: none; + margin-left: 0; +} + +.ct-language { + display: inline-block; + position: relative; + background: #fefefe2b; + padding: 3px 10px; + border-radius: 3px; + + &:hover { + cursor: pointer; + + .ct-language-dropdown { + padding-top: 8px; + max-height: 10000px; + } + } + + &:before { + content: "\f1ab \f0d7"; + font-family: FontAwesome; + } +} + diff --git a/_sass/yat.scss b/_sass/yat.scss new file mode 100644 index 0000000..76bf409 --- /dev/null +++ b/_sass/yat.scss @@ -0,0 +1,83 @@ +@charset "utf-8"; + +// 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-weight: 400 !default; +$small-font-size: $base-font-size * 0.875 !default; +$base-line-height: 1.5 !default; + +$spacing-unit: 30px !default; + +$text-color: #333 !default; +$background-color: #fefefe !default; +$brand-color: #2a7ae2 !default; + +$grey-color: #828282 !default; +$grey-color-light: lighten($grey-color, 40%) !default; +$grey-color-dark: darken($grey-color, 25%) !default; + +// Themes +$theme-cool: #222 !default; +$theme-violet: #543581 !default; +$theme-aquablue: #00aaa0 !default; +$theme-azure: #2863b1 !default; +$theme-gracered: #a12a50 !default; +$theme-aloe: #3d9e56 !default; +$theme-brown: #795548 !default; + +// Current theme +$theme: $theme-cool; + + +$white-color: #fdfdfd !default; +$theme-color: $theme; + +$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-background-color: $theme-color !default; + +$footer-height: $header-height * 1.05 !default; +$footer-text-color: rgba(lighten(invert($theme-color), 30%), 50%) !default; +$footer-background-color: darken($theme-color, 5%) !default; + +$banner-height: 350px !default; +$banner-text-color: lighten($white-color, 0%) !default; +$banner-background: darken(#333, 5%) !default; + +// Width of the content area +$content-width: 920px !default; + +$on-palm: 600px !default; +$on-laptop: 800px !default; + +// Use media queries like this: +// @include media-query($on-palm) { +// .wrapper { +// padding-right: $spacing-unit / 2; +// padding-left: $spacing-unit / 2; +// } +// } +@mixin media-query($device) { + @media screen and (max-width: $device) { + @content; + } +} + +@mixin relative-font-size($ratio) { + font-size: $base-font-size * $ratio; +} + +// Import partials. +@import + "yat/base", + "yat/layout", + "yat/syntax-highlighting", + "misc/article-menu", + "misc/common-list", + "misc/google-translate" +; diff --git a/_sass/yat/_base.scss b/_sass/yat/_base.scss new file mode 100644 index 0000000..15eacde --- /dev/null +++ b/_sass/yat/_base.scss @@ -0,0 +1,258 @@ +/** + * Reset some basic elements + */ +body, h1, h2, h3, h4, h5, h6, +p, blockquote, pre, hr, +dl, dd, ol, ul, figure { + margin: 0; + padding: 0; +} + + + +/** + * Basic styling + */ +body { + font: $base-font-weight #{$base-font-size}/#{$base-line-height} $base-font-family; + color: $text-color; + background-color: $background-color; + -webkit-text-size-adjust: 100%; + -webkit-font-feature-settings: "kern" 1; + -moz-font-feature-settings: "kern" 1; + -o-font-feature-settings: "kern" 1; + font-feature-settings: "kern" 1; + font-kerning: normal; + display: flex; + min-height: 100vh; + flex-direction: column; +} + + + +/** + * Set `margin-bottom` to maintain vertical rhythm + */ +h1, h2, h3, h4, h5, h6, +p, blockquote, pre, +ul, ol, dl, figure, +%vertical-rhythm { + margin-bottom: $spacing-unit / 2; +} + + + +/** + * `main` element + */ +main { + display: block; /* Default value of `display` of `main` element is 'inline' in IE 11. */ +} + + + +/** + * Images + */ +img { + max-width: 100%; + vertical-align: middle; +} + + + +/** + * Figures + */ +figure > img { + display: block; +} + +figcaption { + font-size: $small-font-size; +} + + + +/** + * Lists + */ +ul, ol { + margin-left: $spacing-unit; +} + +li { + > ul, + > ol { + margin-bottom: 0; + } +} + + + +/** + * Headings + */ +h1, h2, h3, h4, h5, h6 { + font-weight: $base-font-weight * 1.5; +} + + + +/** + * Links + */ +a { + color: $brand-color; + text-decoration: none; + + &:visited { + color: darken($brand-color, 15%); + } + + &:hover { + color: $text-color; + text-decoration: underline; + } + + .social-media-list &:hover { + text-decoration: none; + + .username { + text-decoration: underline; + } + } +} + + +/** + * Blockquotes + */ +blockquote { + color: $grey-color; + border-left: 4px solid $grey-color-light; + padding-left: $spacing-unit / 2; + @include relative-font-size(1.125); + letter-spacing: -1px; + font-style: italic; + + > :last-child { + margin-bottom: 0; + } +} + + + +/** + * Code formatting + */ +pre, +code { + @include relative-font-size(0.9375); + border-radius: 3px; + background-color: #3d3d3d; +} + +code { + padding: 1px 5px; +} + +pre { + padding: 8px 12px; + overflow-x: auto; + + > code { + border: 0; + padding-right: 0; + padding-left: 0; + } +} + + + +/** + * Wrapper + */ +.wrapper { + max-width: $content-width; + margin: auto; + 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; + } +} + + + +/** + * Clearfix + */ +%clearfix:after { + content: ""; + display: table; + clear: both; +} + + +/** + * Tables + */ +table { + margin-bottom: $spacing-unit; + width: 100%; + text-align: $table-text-align; + color: lighten($text-color, 18%); + border-collapse: collapse; + border: 1px solid $grey-color-light; + tr { + &:nth-child(even) { + background-color: lighten($grey-color-light, 6%); + } + } + th, td { + padding: ($spacing-unit / 3) ($spacing-unit / 2); + } + th { + background-color: lighten($grey-color-light, 3%); + border: 1px solid darken($grey-color-light, 4%); + border-bottom-color: darken($grey-color-light, 12%); + } + td { + border: 1px solid $grey-color-light; + } +} + +/** + * Vertical center + */ +%vertical-center { + position: absolute; + top: 50%; + transform: translateY(-50%); +} + +/** + * Flex layout + */ +%flex-layout { + display: flex; +} + +%flex-1 { + flex: 1; + min-width: 0; /* <-- fix flexbox width with pre tags */ +} + +/** + * Flex sticky + */ +@mixin flex-sticky($top) { + position: sticky; + align-self: flex-start; /* <-- fix the sticky not work issue */ + transform: scale(0.9999); /* <-- fix the sticky x overflow issue */ + top: $top; +} diff --git a/_sass/yat/_layout.scss b/_sass/yat/_layout.scss new file mode 100644 index 0000000..4d4eeae --- /dev/null +++ b/_sass/yat/_layout.scss @@ -0,0 +1,371 @@ +/** + * Site header + */ +.site-header { + background: $header-background-color; + height: $header-height; + width: 100%; + + // Positioning context for the mobile navigation icon + @include flex-sticky(0); + z-index: 1000; + + a { + text-decoration: none; + } +} + +.site-brand { + float: left; + margin-right: 50px; + + .site-title { + @include relative-font-size(1.625); + font-weight: $base-font-weight; + line-height: $header-height; + letter-spacing: -1px; + + &, + &:visited { + color: $header-text-color; + } + } +} + +.site-nav { + @include relative-font-size(1.025); + float: right; + line-height: $header-height; + + .nav-trigger { + display: none; + } + + .menu-icon { + display: none; + } + + .page-link { + color: $header-text-color; + line-height: $base-line-height; + + // Gaps between nav items, but not on the last one + &:not(:last-child) { + margin-right: 20px; + } + } + + @include media-query($on-palm) { + position: absolute; + right: $spacing-unit / 2; + text-align: left; + + label[for="nav-trigger"] { + display: block; + float: right; + z-index: 2; + cursor: pointer; + } + + .menu-icon { + display: block; + float: right; + text-align: center; + + > svg { + fill: $white-color; + } + } + + input ~ .trigger { + clear: both; + display: none; + } + + input:checked ~ .trigger { + display: block; + background: $header-background-color; + } + + .page-link { + display: block; + padding: 5px 10px; + color: rgba($header-text-color, 80%); + margin: 0 25px; + } + } +} + +/** + * Site footer + */ +.site-footer { + @include relative-font-size(0.9); + color: $footer-text-color; + background: $footer-background-color; + padding: $spacing-unit * 0.8 0; + text-align: left; + + a { + $a-color: invert(mix(invert($theme-color), #0030ae)); + color: $a-color; + + &:hover { + color: lighten($a-color, 10%); + } + } +} + +/** + * Post header + */ +%post-header { + .post-header { + margin-bottom: $spacing-unit; + } + + .post-title { + @include relative-font-size(2.625); + letter-spacing: -1px; + line-height: 1; + + @include media-query($on-laptop) { + @include relative-font-size(2.25); + } + } +} + +/** + * Page content + */ +.page-content { + @extend %flex-1; /* <-- Keep footer on the bottom */ + padding: $spacing-unit 0; +} + +.page-heading { + @include relative-font-size(2); +} + +.post-list-heading { + @include relative-font-size(1.75); +} + +/** + * Pagination page + */ +.pagination { + .post-list { + margin-left: 0; + list-style: none; + + > li { + margin-bottom: $spacing-unit; + } + } + + .post-meta { + font-size: $small-font-size; + color: $grey-color; + } + + .post-link { + @include relative-font-size(1.5); + + display: block; + font-weight: 600; + } +} + + +/** + * Posts + */ +.post { + @extend %post-header; + + .post-content { + margin-bottom: $spacing-unit; + + h2 { + @include relative-font-size(2); + + @include media-query($on-laptop) { + @include relative-font-size(1.75); + } + } + + h3 { + @include relative-font-size(1.625); + + @include media-query($on-laptop) { + @include relative-font-size(1.375); + } + } + + h4 { + @include relative-font-size(1.25); + + @include media-query($on-laptop) { + @include relative-font-size(1.125); + } + } + } +} + + +/** + * Posts misc + */ +.post-nav { + display: flex; + justify-content: space-between; + + a { + display: flex; + } +} + + +/** + * Archives page + */ +.page-archives { + .page-archives-list { + margin-left: 0; + list-style: none; + } + + .archives-time { + @include relative-font-size(1.5); + + &:not(:first-child) { + margin-top: 18px; + } + margin-bottom: 8px; + } + + .post-meta { + font-size: $small-font-size; + color: $grey-color; + } +} + + +/** + * Page banner + */ +.page-banner { + display: block; + position: relative; + height: $banner-height; + background-color: $banner-background; + + .page-banner-img { + position: absolute; + height: 100%; + overflow: hidden; + + & > *:first-child { + position: relative; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + height: 100%; + max-width: 1000%; + background-size: cover; + background-position: center center; + overflow: hidden; + } + } + + .wrapper { + height: 100%; + } + + .page-banner-inner { + @extend %vertical-center; + + position: relative; + color: $banner-text-color; + padding: 10px 5px; + text-shadow: 1px 1px 2px #333; + + .page-banner-heading { + @include relative-font-size(2.825); + letter-spacing: -1px; + line-height: 1; + margin-bottom: 10px; + + @include media-query($on-palm) { + @include relative-font-size(2.425); + } + } + + @extend %post-header; + + .post-title { + @include relative-font-size(2.925); + } + } +} + + +/** + * Layout and sidebar + */ +.framework { + @extend %flex-layout; + + .main { + @extend %flex-1; + } + + .sidebar { + padding-left: 8px; + + @include flex-sticky($header-height + 20px); + + @include media-query($on-palm) { + display: none; + } + + } +} + + +/** + * Segments page + */ +.page-segments { + .page-segments-list { + margin-left: 0; + list-style: none; + } + + .segment-name { + font-weight: 600; + margin-bottom: 8px; + position: relative; + + @include relative-font-size(1.6); + + &:not(:first-child) { + margin-top: 28px; + } + + + &:hover:before { + content: '#'; + left: -1em; + position: absolute; + } + } + + .post-meta { + font-size: $small-font-size; + color: $grey-color; + } + +} + diff --git a/_sass/yat/_syntax-highlighting.scss b/_sass/yat/_syntax-highlighting.scss new file mode 100644 index 0000000..8e1224d --- /dev/null +++ b/_sass/yat/_syntax-highlighting.scss @@ -0,0 +1,105 @@ +/** + * Syntax highlighting styles + */ + +.highlight { + color: #c7c7c7; + @extend %vertical-rhythm; + + .c { color: #998; font-style: italic } // Comment + .err { color: #a61717; background-color: #e3d2d2 } // Error + .k { font-weight: bold } // Keyword + .o { font-weight: bold } // Operator + .cm { color: #998; font-style: italic } // Comment.Multiline + .cp { color: #999; font-weight: bold } // Comment.Preproc + .c1 { color: #998; font-style: italic } // Comment.Single + .cs { color: #999; font-weight: bold; font-style: italic } // Comment.Special + .gd { color: #000; background-color: #fdd } // Generic.Deleted + .gd .x { color: #000; background-color: #faa } // Generic.Deleted.Specific + .ge { font-style: italic } // Generic.Emph + .gr { color: #a00 } // Generic.Error + .gh { color: #999 } // Generic.Heading + .gi { color: #000; background-color: #dfd } // Generic.Inserted + .gi .x { color: #000; background-color: #afa } // Generic.Inserted.Specific + .go { color: #888 } // Generic.Output + .gp { color: #555 } // Generic.Prompt + .gs { font-weight: bold } // Generic.Strong + .gu { color: #aaa } // Generic.Subheading + .gt { color: #a00 } // Generic.Traceback + .kc { font-weight: bold } // Keyword.Constant + .kd { color: #0fdcdc; font-weight: bold } // Keyword.Declaration + .kp { font-weight: bold } // Keyword.Pseudo + .kr { font-weight: bold } // Keyword.Reserved + .kt { color: #a7a7a7; font-weight: bold } // Keyword.Type + .m { color: #099 } // Literal.Number + .s { color: #d0c55c } // Literal.String + .na { color: #a6e22e } // Name.Attribute + .nb { color: #6cc117 } // Name.Builtin + .nc { color: #4682b4; font-weight: bold } // Name.Class + .no { color: #a6e22e } // Name.Constant + .ni { color: #800080 } // Name.Entity + .ne { color: #e04b9b; font-weight: bold } // Name.Exception + .nf { color: #e04b9b; font-weight: bold } // Name.Function + .nn { color: #a6e22e } // Name.Namespace + .nt { color: #4ec2e4 } // Name.Tag + .nv { color: #a6e22e } // Name.Variable + .ow { font-weight: bold } // Operator.Word + .w { color: #bbb } // Text.Whitespace + .mf { color: #099 } // Literal.Number.Float + .mh { color: #099 } // Literal.Number.Hex + .mi { color: #099 } // Literal.Number.Integer + .mo { color: #099 } // Literal.Number.Oct + .sb { color: #d0c55c } // Literal.String.Backtick + .sc { color: #d0c55c } // Literal.String.Char + .sd { color: #d0c55c } // Literal.String.Doc + .s2 { color: #d0c55c } // Literal.String.Double + .se { color: #d0c55c } // Literal.String.Escape + .sh { color: #d0c55c } // Literal.String.Heredoc + .si { color: #d0c55c } // Literal.String.Interpol + .sx { color: #d0c55c } // Literal.String.Other + .sr { color: #009926 } // Literal.String.Regex + .s1 { color: #d0c55c } // Literal.String.Single + .ss { color: #990073 } // Literal.String.Symbol + .bp { color: #999 } // Name.Builtin.Pseudo + .vc { color: #a6e22e } // Name.Variable.Class + .vg { color: #a6e22e } // Name.Variable.Global + .vi { color: #a6e22e } // Name.Variable.Instance + .il { color: #099 } // Literal.Number.Integer.Long +} + +code .rouge-table { + @extend .highlight; +} + +code.highlighter-rouge { + color: white; + background: #676767; + border: none; + padding: 2px 4px; +} + +figure.highlight pre { + border-radius: 3px; + + code table.rouge-table { + margin: 0; + + td { + border: 1px solid #efefef86; + } + + pre { + margin: 0; + padding: 0; + } + + .gutter.gl { + padding: 0; + + .lineno { + padding: 2px; + text-align: center; + } + } + } +} -- cgit v1.2.3