From b3a71874a8a3c2d8dab79b652793bca11f1b928c Mon Sep 17 00:00:00 2001 From: Huy Tran Date: Wed, 25 Jul 2018 12:21:03 +1000 Subject: [PATCH] refactors SCSS styles -- see CHANGELOG --- static-src/scss/hyde-hyde.scss | 4 +- static-src/scss/hyde-hyde/_base.scss | 13 +-- static-src/scss/hyde-hyde/_code.scss | 18 +++- static-src/scss/hyde-hyde/_customised.scss | 114 --------------------- static-src/scss/hyde-hyde/_list.scss | 27 +++++ static-src/scss/hyde-hyde/_misc.scss | 21 ++++ static-src/scss/hyde-hyde/_post.scss | 23 ++--- static-src/scss/hyde-hyde/_project.scss | 81 ++------------- static-src/scss/hyde-hyde/_responsive.scss | 103 +++++++++++++++++++ static-src/scss/hyde-hyde/_variables.scss | 10 +- 10 files changed, 195 insertions(+), 219 deletions(-) delete mode 100644 static-src/scss/hyde-hyde/_customised.scss create mode 100644 static-src/scss/hyde-hyde/_list.scss create mode 100644 static-src/scss/hyde-hyde/_misc.scss create mode 100644 static-src/scss/hyde-hyde/_responsive.scss diff --git a/static-src/scss/hyde-hyde.scss b/static-src/scss/hyde-hyde.scss index c059ec3..a51b826 100644 --- a/static-src/scss/hyde-hyde.scss +++ b/static-src/scss/hyde-hyde.scss @@ -8,8 +8,10 @@ @import 'hyde-hyde/base'; @import 'hyde-hyde/theme'; @import 'hyde-hyde/sidebar'; +@import 'hyde-hyde/list'; @import 'hyde-hyde/post'; @import 'hyde-hyde/code'; @import 'hyde-hyde/gist'; @import 'hyde-hyde/project'; -@import 'hyde-hyde/customised'; +@import 'hyde-hyde/responsive'; +@import 'hyde-hyde/misc'; diff --git a/static-src/scss/hyde-hyde/_base.scss b/static-src/scss/hyde-hyde/_base.scss index 76e017c..d84c8b2 100644 --- a/static-src/scss/hyde-hyde/_base.scss +++ b/static-src/scss/hyde-hyde/_base.scss @@ -24,6 +24,10 @@ h4 { font-size: $h4-font-size; } +h5 { + font-size: $h5-font-size; +} + %quotebox { padding: .8889rem; margin-top: 1.4em; @@ -102,10 +106,7 @@ a { } } -.text-center { - text-align: center; -} - -.pull-right { - float: right; +.content { + padding-bottom: 2rem; + padding-top: 2rem; } diff --git a/static-src/scss/hyde-hyde/_code.scss b/static-src/scss/hyde-hyde/_code.scss index c068efd..052ceae 100644 --- a/static-src/scss/hyde-hyde/_code.scss +++ b/static-src/scss/hyde-hyde/_code.scss @@ -1,7 +1,12 @@ pre { - border: 1px solid $gray-1; - border-radius: 2px; + //border: 1px solid $gray-1; + //border-radius: 2px; tab-size: 2; + //width: 111%; + //margin-left: -11%; + //padding-left: 9%; + //padding-right: 2%; + //background: #29292e; code { white-space: pre-wrap; } @@ -10,11 +15,11 @@ pre { %code-font { font-family: $code-font-family; font-size: $code-font-size; - line-height: $code-line-height; + //line-height: $code-line-height; } %code-in-rounded-box { - border-radius: 3px; + border-radius: 4px; padding: 2px 4px; color: $code-color; background-color: $code-background-color; @@ -39,6 +44,9 @@ code { // highlight.js .hljs { + font-size: $code-fence-font-size; + font-weight: 300; white-space: pre; - border:none; + border: 1px solid $gray-3; + border-radius: 4px; } diff --git a/static-src/scss/hyde-hyde/_customised.scss b/static-src/scss/hyde-hyde/_customised.scss deleted file mode 100644 index 2d9aade..0000000 --- a/static-src/scss/hyde-hyde/_customised.scss +++ /dev/null @@ -1,114 +0,0 @@ -@media(min-width: 48em) { - html,body { - -webkit-text-size-adjust: 100%; // iOS - font-size: 16px; - box-direction: normal; - } - .sidebar { - bottom: 0; - left: 0; - position: fixed; - text-align: left; - top: 0; - width: 18rem; - } - .sidebar-sticky { - left: 1rem; - position: absolute; - right: 1rem; - top: 1rem; - } - .content { - margin-left: 20rem; - margin-right: 2rem; - max-width: 38rem; - } - .layout-reverse { - .sidebar { - left: auto; - right: 0; - } - .content { - margin-left: 2rem; - margin-right: 20rem; - } - } -} - -@media(min-width: 58em) { - html,body { - text-size-adjust: none; - font-size: 17px; - font-weight: 400; - line-height: 1.611em; // golden ratio - } -} - - -.content { - padding-bottom: 2rem; - padding-top: 2rem; -} - -@media(min-width: 64em) { - .content { - margin-left: 20rem; - margin-right: 2rem; - max-width: 46.056rem; - } - .layout-reverse .content { - margin-left: 4rem; - margin-right: 22rem; - } -} - -@media(max-width: 48rem) { - .hidden-tablet { - display: none; - } -} - -.element--center { - display: block; - margin-left: auto; - margin-right: auto; -} - -.section__title { - font-size: $section__title-font-size; -} - -.post-list__item { - margin-bottom: 3em; -} - -.item__title--big { - display: block; - font-size: $item__title-big-font-size; - line-height: 1.25; -} - -.item__title--small { - font-size: 1rem; -} - -.item__date { - color: $item__date-color; - display: block; - font-size: $item__date-font-size; - margin-bottom: .2rem; - margin-top: .2rem; -} - -#references { - li { - font-size: .9rem; - } -} - -.menu { - background-color: #f3f3f3; - color: #333; - border-radius: 2px; - padding: 1px 5px; -} diff --git a/static-src/scss/hyde-hyde/_list.scss b/static-src/scss/hyde-hyde/_list.scss new file mode 100644 index 0000000..a5ef352 --- /dev/null +++ b/static-src/scss/hyde-hyde/_list.scss @@ -0,0 +1,27 @@ +// for the list of posts + +.section__title { + font-size: $section__title-font-size; +} + +.post-list__item { + margin-bottom: 3em; +} + +.item__title--big { + display: block; + font-size: $item__title-big-font-size; + line-height: 1.25; +} + +.item__title--small { + font-size: 1rem; +} + +.item__date { + color: $item__date-color; + display: block; + font-size: $item__date-font-size; + margin-bottom: .2rem; + margin-top: .2rem; +} diff --git a/static-src/scss/hyde-hyde/_misc.scss b/static-src/scss/hyde-hyde/_misc.scss new file mode 100644 index 0000000..869ee40 --- /dev/null +++ b/static-src/scss/hyde-hyde/_misc.scss @@ -0,0 +1,21 @@ +// some misc styles +.element--center { + display: block; + margin-left: auto; + margin-right: auto; +} + +.menu { + background-color: #f3f3f3; + color: #333; + border-radius: 2px; + padding: 1px 5px; +} + +.text-center { + text-align: center; +} + +.pull-right { + float: right; +} diff --git a/static-src/scss/hyde-hyde/_post.scss b/static-src/scss/hyde-hyde/_post.scss index 3624b74..de1b618 100644 --- a/static-src/scss/hyde-hyde/_post.scss +++ b/static-src/scss/hyde-hyde/_post.scss @@ -30,7 +30,7 @@ margin: 0 auto; margin-top: 60px; a { - font-size: .8rem; + font-size: 0.8rem; display: flex; align-items: center; justify-content: center; @@ -51,7 +51,7 @@ } } .fa { - font-size: .8rem; + font-size: 0.8rem; } .post--navigation-prev { text-align: left; @@ -66,19 +66,12 @@ } } } - -@media only screen and(min-width: 34rem) { - .post--navigation { - display: flex; - justify-content: space-between; - a { - width: calc(50% - 10px); - &:nth-child(2) { - margin-top: 0; - } - } - } -} .post--navigation-single a { text-transform: none; } + +#references { + li { + font-size: 0.9rem; + } +} diff --git a/static-src/scss/hyde-hyde/_project.scss b/static-src/scss/hyde-hyde/_project.scss index a725d89..9e4af67 100644 --- a/static-src/scss/hyde-hyde/_project.scss +++ b/static-src/scss/hyde-hyde/_project.scss @@ -12,8 +12,14 @@ } } +.project__image { + border: 1px solid $gray-2; + box-shadow: 1px 1px $gray-2; +} + .project__title { margin-top: 1.765rem; + letter-spacing: 1px; font-size: $project__title-font-size; } @@ -37,59 +43,6 @@ .project__featured-image { position: relative; - .ribbon { - position: absolute; - top: -9px; - right: -8px; - width: 110px; - height: 110px; - overflow: hidden; - .text { - position: relative; - left: -8px; - top: 18px; - width: 158px; - padding: 10px; - letter-spacing: 2px; - font-size: 1.133rem; - font-weight: bold; - text-align: center; - text-transform: uppercase; - color: $white; - background-color: $ribbon-background-color; - transform: rotate(45deg) translate3d(0, 0, 0); - &:before { - border-left: 5px solid transparent; - border-right: 5px solid transparent; - border-top: 5px solid $ribbon-color; - bottom: -5px; - content: ""; - position: absolute; - left: 0; - } - &:after { - border-left: 5px solid transparent; - border-right: 5px solid transparent; - border-top: 5px solid $ribbon-color; - bottom: -5px; - content: ""; - position: absolute; - right: 0; - } - } - } -} - -.project-image { - &:hover { - opacity: 0.8; - } -} - -@media (max-width: 767px) { - .project-image { - margin-bottom: 0.882rem; - } } .project__summary { @@ -132,27 +85,7 @@ .col-md-8 { @extend %col_extend; } -@media (min-width: 992px) { - .col-md-4 { - float: left; - width: 33.33333333%; - } - .col-md-8 { - float: left; - width: 66.66666667%; - } - .portfolio-container { - width: 1360px; - } -} -@media (min-width: 768px) { - .col-sm-8 { - width: 66.66666667%; - } - .project__title { - margin-top: .2rem; - } -} + .img-responsive { display: block; max-width: 100%; diff --git a/static-src/scss/hyde-hyde/_responsive.scss b/static-src/scss/hyde-hyde/_responsive.scss new file mode 100644 index 0000000..11db2e4 --- /dev/null +++ b/static-src/scss/hyde-hyde/_responsive.scss @@ -0,0 +1,103 @@ +// mobile ~320..480px +// 320px ~ 16rem/16px ~ 18.8235/17px ~ 17.7778/18px +// 480px ~ 30rem/16px ~ 28.2353rem/17px ~ 26.6667rem/18px +@media only screen and (min-device-width: 320px) and (max-device-width: 480px) { + // styles +} + +// tablet/medium device ~768px+ +// 768px ~ 48em/16px ~ 45.1765em/17px ~ 42.6667/18px +@media (min-width: 768px) { + html, + body { + -webkit-text-size-adjust: 100%; // iOS + font-size: 16px; + box-direction: normal; + } + .sidebar { + bottom: 0; + left: 0; + position: fixed; + text-align: left; + top: 0; + width: 18rem; + } + .sidebar-sticky { + left: 1rem; + position: absolute; + right: 1rem; + top: 1rem; + } + .content { + margin-left: 20rem; + margin-right: 2rem; + max-width: 38rem; + } + .layout-reverse { + .sidebar { + left: auto; + right: 0; + } + .content { + margin-left: 2rem; + margin-right: 20rem; + } + } + .col-sm-8 { + width: 66.66666667%; + } + .project__title { + margin-top: 0.2rem; + } + .hidden-tablet { + display: none; + } + .post--navigation { + display: flex; + justify-content: space-between; + a { + width: calc(50% - 10px); + &:nth-child(2) { + margin-top: 0; + } + } + } +} + +// Large devices (laptops/desktops, 992px and up) +// ~ 62rem/16px ~ 58.3529rem/17px ~ 55.1111rem/18px +@media (min-width: 992px) { + html, + body { + text-size-adjust: none; + font-size: 17px; + font-weight: 400; + line-height: 1.611em; // golden ratio + } + .content { + margin-left: 20rem; + margin-right: 2rem; + max-width: 46.056rem; + } + .layout-reverse .content { + margin-left: 4rem; + margin-right: 22rem; + } + .col-md-4 { + float: left; + width: 33.33333333%; + } + .col-md-8 { + float: left; + width: 66.66666667%; + } + .portfolio-container { + width: 1360px; + } +} + +// Large device ~1024px +// 1024px ~ 64rem/16px ~ 60.2353rem/17px 56.8889rem/18px +@media (min-width: 1024px) { + // styles +} diff --git a/static-src/scss/hyde-hyde/_variables.scss b/static-src/scss/hyde-hyde/_variables.scss index 80179b7..9ab0007 100644 --- a/static-src/scss/hyde-hyde/_variables.scss +++ b/static-src/scss/hyde-hyde/_variables.scss @@ -1,8 +1,9 @@ $gray-0: #fafafa; $gray-1: #f9f9f9; $gray-2: #eee; +$gray-3: #ddd; $gray-4: #ccc; -$gray-5: #ddd; +$gray-4: #bbb; $gray-6: #878787; $gray-7: #767676; $gray-8: #515151; @@ -32,8 +33,8 @@ $large-font-size: 20px; // https://www.client9.com/css-system-font-stack-monospace-v2 $code-font-family: "SF-Mono", "SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono", "Roboto Mono", "Ubuntu Mono", "Courier New", Courier, monospace; -$code-font-size: .85rem; -$code-fence-font-size: .7rem; +$code-font-size: .9rem; +$code-fence-font-size: .9rem; $code-color: #bf616a; $code-background-color: #f9f2f4; $code-line-height: 1.4; @@ -65,6 +66,7 @@ $h1-line-height: 1.25; $h2-font-size: 1.85rem; $h3-font-size: 1.5rem; $h4-font-size:1.3rem; +$h5-font-size:1rem; $sidebar-color: #300030; @@ -78,7 +80,7 @@ $post--navigation-color: #c2255c; // portfolio $project__title-font-size: $h2-font-size; $project__subtitle-font-size-big: $h3-font-size; -$project__subtitle-font-size-small: ($h3-font-size - 0.5rem); +$project__subtitle-font-size-small: $h4-font-size; $project__subtitle-font-style: italic; $project__subtitle-color: #778492; $ribbon-color: #276582;