From 7c02d441305a258df5addc807748badf02bcfd45 Mon Sep 17 00:00:00 2001 From: foo-dogsquared Date: Sat, 20 Oct 2018 15:30:02 +0800 Subject: [PATCH] Refactor and modularize SCSS --- _config.yml | 2 +- _sass/_custom.scss | 363 +----------------------- _sass/custom_elems/_pinned_posts.scss | 21 ++ _sass/custom_elems/index.scss | 3 + _sass/custom_layout/_footer.scss | 66 +++++ _sass/custom_layout/_header.scss | 51 ++++ _sass/custom_layout/index.scss | 4 + _sass/minima.scss | 8 + _sass/minima/_layout.scss | 49 ---- _sass/pages/index.scss | 3 + _sass/pages/notes.scss | 20 ++ _sass/pagination/_home_post_list.scss | 9 + _sass/pagination/_style.scss | 25 ++ _sass/pagination/index.scss | 4 + _sass/post_content/_list_container.scss | 15 + _sass/post_content/_post.scss | 90 ++++++ _sass/post_content/_post_links.scss | 20 ++ _sass/post_content/_tags.scss | 24 ++ _sass/post_content/_wrapper.scss | 48 ++++ _sass/post_content/index.scss | 7 + 20 files changed, 420 insertions(+), 412 deletions(-) create mode 100644 _sass/custom_elems/_pinned_posts.scss create mode 100644 _sass/custom_elems/index.scss create mode 100644 _sass/custom_layout/_footer.scss create mode 100644 _sass/custom_layout/_header.scss create mode 100644 _sass/custom_layout/index.scss create mode 100644 _sass/pages/index.scss create mode 100644 _sass/pages/notes.scss create mode 100644 _sass/pagination/_home_post_list.scss create mode 100644 _sass/pagination/_style.scss create mode 100644 _sass/pagination/index.scss create mode 100644 _sass/post_content/_list_container.scss create mode 100644 _sass/post_content/_post.scss create mode 100644 _sass/post_content/_post_links.scss create mode 100644 _sass/post_content/_tags.scss create mode 100644 _sass/post_content/_wrapper.scss create mode 100644 _sass/post_content/index.scss diff --git a/_config.yml b/_config.yml index c3a0a3e..cc65f6b 100644 --- a/_config.yml +++ b/_config.yml @@ -44,7 +44,7 @@ plugins: - jekyll-sitemap - jekyll-redirect-from -pinpost: ["A Freebie's Resource List (Mostly Related to Programming)", "An Absolute Beginners' Complete Web Development Resource List"] +pinpost: ["A Freebie's Resource List (Mostly Related to Programming)"] google_analytics: UA-126718538-1 diff --git a/_sass/_custom.scss b/_sass/_custom.scss index b494cef..2a36ccf 100644 --- a/_sass/_custom.scss +++ b/_sass/_custom.scss @@ -7,22 +7,6 @@ a, a:hover, a:visited { color: $light-brown; // Specified settings for the headers in 'post.html' - &.heading-links { - color: $text-color; - &:hover { - text-decoration: none; - &::after { - color: $grey-color; - content: ' →'; - } - } - } - &.post-link:visited { - color: $brown; - } - &.post-alt-link:visited { - color: $brown; - } } blockquote { @@ -34,11 +18,7 @@ blockquote { word-spacing: 1px; } -h1, -h2, -h3 h4, -h5, -h6 { +h1, h2, h3, h4, h5, h6 { code { font-size: 1em; } @@ -100,43 +80,6 @@ table:not(.rouge-table) { } } -.relative-posts { - color: $grey-color-dark; - display: flex; - font-size: $small-font-size; - justify-content: space-between; - margin-top: 2em; - - a { - font-size: $base-font-size * 1.2; - } - - .previous-post { - text-align: left; - max-width: 45%; - } - - .next-post { - text-align: right; - max-width: 45%; - } - - @include media-query($on-laptop) { - flex-flow: column wrap; - align-content: center; - justify-content: center; - text-align: center; - - > * { - margin-top: 2em; - } - - .previous-post, .next-post { - text-align: center; - } - } -} - // code syntax table figure.highlight { border: 1px solid $grey-color-light; @@ -162,93 +105,6 @@ figure.highlight { font-size: 1.4em !important; } -// alt title properties -main .home { - > .home-post:not(:first-of-type) { - margin-top: 3em; - } - - > .home-post > * { - margin: 0; - } -} - -h2.post-alt-title { - font-family: "Georgia", $base-font-family; -} - -// wrapper -.wrapper { - main > & { - & > :first-child { - margin-top: 0; - padding-top: 0; - } - - .post-content { - > h1:not(:first-of-type){ - margin-top: $spacing-unit * 1.65; - } - - h2:first-of-type { - margin-top: $spacing-unit * 1.5; - } - - h2:not(:first-of-type) { - margin-top: $spacing-unit * 1.4; - } - - h3:not(:first-of-type) { - margin-top: $spacing-unit * 1.15; - } - - > p { - word-spacing: 1px; - } - - p > img { - display: block; - margin: 0 auto; - } - - ul.resources-link { - list-style: none; - margin-left: 1.9em; - - @include media-query($on-palm) { - margin-left: 0; - - > li { - margin-bottom: 0.75em; - } - } - } - } - } -} - -// notes.md -.entry-list-item { - display: flex; - align-items: center; - justify-content: space-between; - margin: .25em; - padding: .5em; - &:nth-child(odd) { - background: lighten($brown, 50%); - } - &:last-child { - margin-bottom: 1em; - } - .post-list-date { - display: block; - } - @include media-query($on-palm) { - flex-flow: column; - align-items: baseline; - } -} - // custom properties for several layout items #personal-logo { width: 29px; @@ -261,229 +117,12 @@ h2.post-alt-title { text-decoration: underline; } -p.caption { - color: $grey-color; - font-size: $small-font-size; - padding-bottom: 1.5em; - text-align: center; - width: 100%; -} - code.fileName { color: darken($code-keywords, 10%); } -// List of topics properties found on posts type -#list-container { - border: 3px $brown dashed; - border-left: 0px; - border-right: 0px; - color: $grey-color; - line-height: 1.75em; - margin: 2em 0; - padding: 2em; - width: inherit; - @include relative-font-size(0.95); - ul { - list-style: upper-roman; - } -} - -// Header custom settings -.site-header { - background: linear-gradient(75deg, $dark-brown, $brown, $light-brown); - border-top: 5px solid $dark-brown; - border-bottom: 1px solid $grey-color-light; - color: $super-platinum; - .site-title { - @include relative-font-size(1.625); - font-weight: 300; - line-height: $base-line-height * $base-font-size * 2.25; - letter-spacing: -1px; - margin-bottom: 0; - float: left; - &, - &:visited { - color: $super-platinum; - } - } - .site-nav { - float: right; - line-height: $base-line-height * $base-font-size * 2.25; - .nav-trigger { - display: none; - } - .menu-icon { - display: none; - } - .page-link { - color: $super-platinum; - 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) { - .page-link { - color: $text-color; - margin: 0 .5em; - text-align: left; - } - .menu-icon { - display: block; - } - } - } -} - -// Post Title -.post-subtitle { - color: $grey-color; - font-size: $base-font-size * 1.7; - margin: .24em 0; -} - -// Markdown Table of Content -// Pinned posts style on the homepage -#pinned-section { - background: linear-gradient(75deg, $dark-brown, $brown, $light-brown); - border: $brown 4px solid; - border-top: 0; - border-bottom: 0; - color: white; - margin-bottom: 2em; - padding: $base-font-size; - - - ul.pinned-posts { - & * {color: white;} - - list-style: none; - padding: 0; - - @include media-query($on-palm) { - margin-left: 0; - } - } -} - .dt-updated, .reading-minutes { color: $grey-color; font-size: $small-font-size; margin-top: 0; } - -// Pagination custom settings -.pagination { - align-content: center; - align-items: center; - display: flex; - justify-content: space-between; - margin: 2em; - .previous, - .next { - border-radius: 4px; - padding: 1em; - text-align: center; - width: 100px; - &.disabled { - color: $grey-color; - } - } - &>* { - padding: 1em; - } - @include media-query($on-palm) { - flex-flow: column wrap; - } -} - -// Tags custom settings -.list-tags { - color: $grey-color; -} - -.home-tags { - font-size: $small-font-size; -} - -.post-updatedOn { - color: $grey-color-dark; - font-size: $small-font-size; - margin-bottom: $base-font-size; - span.updatedPostDate { - font-weight: bolder; - } -} - -.post-tags { - color: $grey-color-dark; - font-size: $small-font-size; - .link-tag { - color: $brown; - } -} - -// Footer custom settings -.site-footer { - background: linear-gradient(75deg, $dark-brown, $brown, $light-brown); - border-top: 1px solid $grey-color-light; - color: $platinum; - padding: $spacing-unit 0; - .footer-col-1 { - width: -webkit-calc(25% - (#{$spacing-unit} / 2)); - width : calc(25% - (#{$spacing-unit} / 2)); - } - .footer-col-2 { - width: -webkit-calc(30% - (#{$spacing-unit} / 2)); - width : calc(30% - (#{$spacing-unit} / 2)); - } - .footer-col-wrapper { - color: $super-platinum; - .u-email, - .username { - color: $super-platinum; - &:hover { - color: $super-platinum; - } - } - .svg-icon { - fill: $super-platinum; - } - } - - .site-icon-credits { - font-size: $small-font-size; - margin-bottom: 1.5em; - - p { - margin: 0; - } - - a { - color: $footer-link; - } - } - - .site-credits { - text-align: center; - > p { - margin: 0; - } - - a { - color: $footer-link; - } - - .copyright { - font-size: $small-font-size; - } - } - @include media-query($on-palm) { - .footer-col-1, - .footer-col-2, - .footer-col-3 { - width: 100%; - } - } -} diff --git a/_sass/custom_elems/_pinned_posts.scss b/_sass/custom_elems/_pinned_posts.scss new file mode 100644 index 0000000..5bfebe0 --- /dev/null +++ b/_sass/custom_elems/_pinned_posts.scss @@ -0,0 +1,21 @@ +#pinned-section { + background: linear-gradient(75deg, $dark-brown, $brown, $light-brown); + border: $brown 4px solid; + border-top: 0; + border-bottom: 0; + color: white; + margin-bottom: 2em; + padding: $base-font-size; + + + ul.pinned-posts { + & * {color: white;} + + list-style: none; + padding: 0; + + @include media-query($on-palm) { + margin-left: 0; + } + } +} diff --git a/_sass/custom_elems/index.scss b/_sass/custom_elems/index.scss new file mode 100644 index 0000000..7fb80f4 --- /dev/null +++ b/_sass/custom_elems/index.scss @@ -0,0 +1,3 @@ +@import + "pinned_posts" +; \ No newline at end of file diff --git a/_sass/custom_layout/_footer.scss b/_sass/custom_layout/_footer.scss new file mode 100644 index 0000000..4d78796 --- /dev/null +++ b/_sass/custom_layout/_footer.scss @@ -0,0 +1,66 @@ +.site-footer { + background: linear-gradient(75deg, $dark-brown, $brown, $light-brown); + border-top: 1px solid $grey-color-light; + color: $platinum; + padding: $spacing-unit 0; +} + +.footer-col-1 { + width: -webkit-calc(25% - (#{$spacing-unit} / 2)); + width : calc(25% - (#{$spacing-unit} / 2)); +} + +.footer-col-2 { + width: -webkit-calc(30% - (#{$spacing-unit} / 2)); + width : calc(30% - (#{$spacing-unit} / 2)); +} + +.footer-col-wrapper { + color: $super-platinum; + .u-email, + .username { + color: $super-platinum; + &:hover { + color: $super-platinum; + } + } + .svg-icon { + fill: $super-platinum; + } +} + +.site-icon-credits { + font-size: $small-font-size; + margin-bottom: 1.5em; + + p { + margin: 0; + } + + a { + color: $footer-link; + } +} + +.site-credits { + text-align: center; + > p { + margin: 0; + } + + a { + color: $footer-link; + } + + .copyright { + font-size: $small-font-size; + } +} + +@include media-query($on-palm) { + .footer-col-1, + .footer-col-2, + .footer-col-3 { + width: 100%; + } +} diff --git a/_sass/custom_layout/_header.scss b/_sass/custom_layout/_header.scss new file mode 100644 index 0000000..8e9911e --- /dev/null +++ b/_sass/custom_layout/_header.scss @@ -0,0 +1,51 @@ +.site-header { + background: linear-gradient(75deg, $dark-brown, $brown, $light-brown); + border-top: 5px solid $dark-brown; + border-bottom: 1px solid $grey-color-light; + color: $super-platinum; +} + +.site-title { + @include relative-font-size(1.625); + font-weight: 300; + line-height: $base-line-height * $base-font-size * 2.25; + letter-spacing: -1px; + margin-bottom: 0; + float: left; + &, + &:visited { + color: $super-platinum; + } +} + +.site-nav { + float: right; + line-height: $base-line-height * $base-font-size * 2.25; + + .nav-trigger { + display: none; + } + + .menu-icon { + display: none; + } + + .page-link { + color: $super-platinum; + 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) { + .page-link { + color: $text-color; + margin: 0 .5em; + text-align: left; + } + .menu-icon { + display: block; + } + } +} diff --git a/_sass/custom_layout/index.scss b/_sass/custom_layout/index.scss new file mode 100644 index 0000000..7c267b3 --- /dev/null +++ b/_sass/custom_layout/index.scss @@ -0,0 +1,4 @@ +@import + "footer", + "header" +; \ No newline at end of file diff --git a/_sass/minima.scss b/_sass/minima.scss index 8fa00db..638bc81 100644 --- a/_sass/minima.scss +++ b/_sass/minima.scss @@ -68,5 +68,13 @@ $code-flags: #16e2e9; "minima/base", "minima/layout", "minima/syntax-highlighting", + + "custom_layout/index", + "custom_elems/index", + + "pages/index", + "pagination/index", + "post_content/index", + "custom" ; diff --git a/_sass/minima/_layout.scss b/_sass/minima/_layout.scss index c69af11..2db061d 100644 --- a/_sass/minima/_layout.scss +++ b/_sass/minima/_layout.scss @@ -170,8 +170,6 @@ } } - - /** * Page content */ @@ -206,50 +204,3 @@ display: block; @include relative-font-size(1.5); } - - - -/** - * Posts - */ -.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); - } -} - -.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); - } - } -} diff --git a/_sass/pages/index.scss b/_sass/pages/index.scss new file mode 100644 index 0000000..c7e4b40 --- /dev/null +++ b/_sass/pages/index.scss @@ -0,0 +1,3 @@ +@import + "notes" +; \ No newline at end of file diff --git a/_sass/pages/notes.scss b/_sass/pages/notes.scss new file mode 100644 index 0000000..3a0247a --- /dev/null +++ b/_sass/pages/notes.scss @@ -0,0 +1,20 @@ +.entry-list-item { + display: flex; + align-items: center; + justify-content: space-between; + margin: .25em; + padding: .5em; + &:nth-child(odd) { + background: lighten($brown, 50%); + } + &:last-child { + margin-bottom: 1em; + } + .post-list-date { + display: block; + } + @include media-query($on-palm) { + flex-flow: column; + align-items: baseline; + } +} \ No newline at end of file diff --git a/_sass/pagination/_home_post_list.scss b/_sass/pagination/_home_post_list.scss new file mode 100644 index 0000000..5be2adb --- /dev/null +++ b/_sass/pagination/_home_post_list.scss @@ -0,0 +1,9 @@ +main .home { + > .home-post:not(:first-of-type) { + margin-top: 3em; + } + + > .home-post > * { + margin: 0; + } +} \ No newline at end of file diff --git a/_sass/pagination/_style.scss b/_sass/pagination/_style.scss new file mode 100644 index 0000000..c5003a0 --- /dev/null +++ b/_sass/pagination/_style.scss @@ -0,0 +1,25 @@ +.pagination { + align-content: center; + align-items: center; + display: flex; + justify-content: space-between; + margin: 2em; + .previous, + .next { + border-radius: 4px; + padding: 1em; + text-align: center; + width: 100px; + &.disabled { + color: $grey-color; + } + } + + & > * { + padding: 1em; + } + + @include media-query($on-palm) { + flex-flow: column wrap; + } +} \ No newline at end of file diff --git a/_sass/pagination/index.scss b/_sass/pagination/index.scss new file mode 100644 index 0000000..9c26ac7 --- /dev/null +++ b/_sass/pagination/index.scss @@ -0,0 +1,4 @@ +@import + "style", + "home_post_list" +; \ No newline at end of file diff --git a/_sass/post_content/_list_container.scss b/_sass/post_content/_list_container.scss new file mode 100644 index 0000000..298ba0f --- /dev/null +++ b/_sass/post_content/_list_container.scss @@ -0,0 +1,15 @@ +#list-container { + border: 3px $brown dashed; + border-left: 0px; + border-right: 0px; + color: $grey-color; + line-height: 1.75em; + margin: 2em 0; + padding: 2em; + width: inherit; + @include relative-font-size(0.95); + + ul { + list-style: upper-roman; + } +} \ No newline at end of file diff --git a/_sass/post_content/_post.scss b/_sass/post_content/_post.scss new file mode 100644 index 0000000..428d92e --- /dev/null +++ b/_sass/post_content/_post.scss @@ -0,0 +1,90 @@ + +/** + * Posts + */ + .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); + } +} + +.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); + } + } +} + +.caption { + color: $grey-color; + font-size: $small-font-size; + padding-bottom: 1.5em; + text-align: center; + width: 100%; +} + +.relative-posts { + color: $grey-color-dark; + display: flex; + font-size: $small-font-size; + justify-content: space-between; + margin-top: 2em; + + a { + font-size: $base-font-size * 1.2; + } + + .previous-post { + text-align: left; + max-width: 45%; + } + + .next-post { + text-align: right; + max-width: 45%; + } + + @include media-query($on-laptop) { + flex-flow: column wrap; + align-content: center; + justify-content: center; + text-align: center; + + > * { + margin-top: 2em; + } + + .previous-post, .next-post { + text-align: center; + } + } +} \ No newline at end of file diff --git a/_sass/post_content/_post_links.scss b/_sass/post_content/_post_links.scss new file mode 100644 index 0000000..e531c3b --- /dev/null +++ b/_sass/post_content/_post_links.scss @@ -0,0 +1,20 @@ +.heading-links { + color: $text-color; + &:hover { + color: $text-color; + text-decoration: none; + &::after { + color: $grey-color; + content: ' →'; + } + } + + &:visited { + color: $text-color; + } +} + +.post-link:visited { + color: $brown; +} + diff --git a/_sass/post_content/_tags.scss b/_sass/post_content/_tags.scss new file mode 100644 index 0000000..0b8f131 --- /dev/null +++ b/_sass/post_content/_tags.scss @@ -0,0 +1,24 @@ +.list-tags { + color: $grey-color; +} + +.home-tags { + font-size: $small-font-size; +} + +.post-updatedOn { + color: $grey-color-dark; + font-size: $small-font-size; + margin-bottom: $base-font-size; + span.updatedPostDate { + font-weight: bolder; + } +} + +.post-tags { + color: $grey-color-dark; + font-size: $small-font-size; + .link-tag { + color: $brown; + } +} diff --git a/_sass/post_content/_wrapper.scss b/_sass/post_content/_wrapper.scss new file mode 100644 index 0000000..64323b6 --- /dev/null +++ b/_sass/post_content/_wrapper.scss @@ -0,0 +1,48 @@ +.wrapper { + main > & { + & > :first-child { + margin-top: 0; + padding-top: 0; + } + + .post-content { + > h1:not(:first-of-type){ + margin-top: $spacing-unit * 1.65; + } + + h2:first-of-type { + margin-top: $spacing-unit * 1.5; + } + + h2:not(:first-of-type) { + margin-top: $spacing-unit * 1.4; + } + + h3:not(:first-of-type) { + margin-top: $spacing-unit * 1.15; + } + + > p { + word-spacing: 1px; + } + + p > img { + display: block; + margin: 0 auto; + } + + ul.resources-link { + list-style: none; + margin-left: 1.9em; + + @include media-query($on-palm) { + margin-left: 0; + + > li { + margin-bottom: 0.75em; + } + } + } + } + } +} \ No newline at end of file diff --git a/_sass/post_content/index.scss b/_sass/post_content/index.scss new file mode 100644 index 0000000..262c35c --- /dev/null +++ b/_sass/post_content/index.scss @@ -0,0 +1,7 @@ +@import + "list_container", + "post", + "post_links", + "tags", + "wrapper" +; \ No newline at end of file