From 2865ddcd02173e46f2fd33f6569e05e0e86e43dc Mon Sep 17 00:00:00 2001 From: Kevin Mok Date: Sat, 2 Feb 2019 01:04:05 -0500 Subject: [PATCH] More Sass conversion --- .gitignore | 1 + .gitlab-ci.yml | 18 +++-- assets/sass/main.scss | 139 +++++++++++++++++++---------------- config.toml | 1 + ideas.md | 19 +++-- layouts/partials/header.html | 8 +- 6 files changed, 106 insertions(+), 80 deletions(-) diff --git a/.gitignore b/.gitignore index 0966645..5264827 100644 --- a/.gitignore +++ b/.gitignore @@ -1,4 +1,5 @@ public/* +resources/_gen/* themes/base16* commit-msg.txt diff --git a/.gitlab-ci.yml b/.gitlab-ci.yml index a77eca2..c74eee1 100644 --- a/.gitlab-ci.yml +++ b/.gitlab-ci.yml @@ -1,14 +1,15 @@ # All available Hugo versions are listed here: https://gitlab.com/pages/hugo/container_registry -image: registry.gitlab.com/pages/hugo:latest +# image: registry.gitlab.com/pages/hugo:0.53 +image: hatita/docker-hugo-extended variables: GIT_SUBMODULE_STRATEGY: recursive -test: - script: - - hugo - except: - - master +# test: + # script: + # - hugo + # except: + # - master pages: script: @@ -16,5 +17,6 @@ pages: artifacts: paths: - public - only: - - master + # only: + # - master + diff --git a/assets/sass/main.scss b/assets/sass/main.scss index 49e7bc7..44b8dd9 100644 --- a/assets/sass/main.scss +++ b/assets/sass/main.scss @@ -33,10 +33,16 @@ body { } .container { - max-width: 52em; + max-width: $max-page-width; margin-left: auto; margin-right: auto; + .copyright { + #{a-tags} { + color: #747369; + } + } + @media (max-width: $max-page-width) { width: 100%; } @@ -52,27 +58,32 @@ div { } } -@mixin side-padding($n) { +@mixin side-padding-rem($n) { padding-left: $n * 1rem; padding-right: $n * 1rem; } -@mixin vert-padding($n) { +@mixin vert-padding-rem($n) { padding-top: $n * 1rem; padding-bottom: $n * 1rem; } +@mixin auto-center() { + margin-left: auto; + margin-right: auto; +} + @mixin article-body() { /* background-color: #e6e6fa; */ background-color: #cbbeb5; color: #2d2d2d; - @include side-padding(8); - @include vert-padding(1); + @include side-padding-rem(8); + @include vert-padding-rem(1); /* min-height: 50%; */ /* min-height: 30em; */ @media (max-width: $max-page-width) { - @include side-padding(2); + @include side-padding-rem(2); } } @@ -90,18 +101,13 @@ article { } } -// TODO: converted up to here - header { margin-top: 1.5rem; margin-bottom: 1rem; -} -@media (max-width: 52em) { - header { + @media (max-width: $max-page-width) { margin-top: 0; - padding-left: 2rem; - padding-right: 2rem; + @include side-padding-rem(2); } } @@ -114,30 +120,29 @@ footer { bottom: 0; position: absolute; width: 100%; -} -@media (max-width: 52em) { - footer { + .container { + background-color: #393939; + max-width: 62em; + @include auto-center(); + height: 1.8em; + } + + @media (max-width: $max-page-width) { margin-top: 0; margin-bottom: 0; } } -footer .container { - background-color: #393939; - max-width: 62em; - margin-left: auto; - margin-right: auto; - height: 1.8em; -} - /* Typography */ -h1, h2, h3, h4, h5, h6 { - font-weight: bold; - line-height: 1.25; - margin-top: 1em; - margin-bottom: .5em; +@for $i from 1 to 6 { + h#{$i} { + font-weight: bold; + line-height: 1.25; + margin-top: 1em; + margin-bottom: .5em; + } } p { @@ -159,53 +164,61 @@ pre, code { /* Header Layout */ -header a.path,a.path:visited { - color: #6699cc; -} +header { + a { + .path .path:visited { + color: #6699cc; + } + } -header span.caret { - color: #f2f0ec; + span { + caret { + color: #f2f0ec; + } + } } /* Footer Layout */ -footer a,a:visited { - color: #747369; - /* text-decoration: none; */ -} +$a-tags: 'a, a:active, a:visited'; -.container.copyright a,a:visited { - color: #747369; - /* text-decoration: none; */ +footer { + #{$a-tags} { + color: #747369; + } } /* 404 Page Layout */ -.page-not-found h1 { - text-align: center; - font-size: 5em; -} - -.page-not-found h2 { - text-align: center; - font-size: 3em; - color: #a09f93; - margin-bottom: 4rem; -} +.page-not-found { + h1 { + text-align: center; + font-size: 5em; + } -@media (max-width: 52em) { - .page-not-found h1 { + h2 { + text-align: center; font-size: 3em; + color: #a09f93; + margin-bottom: 4rem; } - .page-not-found h2 { - font-size: 2em; + @media (max-width: $max-page-width) { + h1 { + font-size: 3em; + } + + h2 { + font-size: 2em; + } } } +// TODO: converted up to here + /* Homepage Layout */ -@media (max-width: 52em) { +@media (max-width: $max-page-width) { .homepage { margin-bottom: 2rem; } @@ -220,7 +233,7 @@ h1.site-title { margin-bottom: 0.2em; } -@media (max-width: 52em) { +@media (max-width: $max-page-width) { h1.site-title { font-size: 3em; } @@ -231,7 +244,7 @@ h1.site-title { color: #ffcc66; } -@media (max-width: 52em) { +@media (max-width: $max-page-width) { .homepage h1.headline { padding-left: 2rem; padding-right: 2rem; @@ -319,7 +332,7 @@ article.single .meta .val, article.single .meta .val a { color: #cc99cc; } -@media (max-width: 52em) { +@media (max-width: $max-page-width) { article.single .meta { padding-left: 2rem; padding-right: 2rem; @@ -332,7 +345,7 @@ article.single h1.headline { color: #ffcc66; } -@media (max-width: 52em) { +@media (max-width: $max-page-width) { article.single h1.headline { padding-left: 2rem; padding-right: 2rem; @@ -344,7 +357,7 @@ article.single section.body { padding-bottom: 3rem; } -@media (max-width: 52em) { +@media (max-width: $max-page-width) { article.single section.body { padding-top: 2rem; padding-bottom: 1rem; @@ -394,7 +407,7 @@ article.single figure, article.single div.highlight { background-color: #393939; } -@media (max-width: 52em) { +@media (max-width: $max-page-width) { article.single figure, article.single div.highlight { width: 100%; margin-left: 0; diff --git a/config.toml b/config.toml index 028f5bc..510fee4 100644 --- a/config.toml +++ b/config.toml @@ -1,4 +1,5 @@ # baseURL = "http://localhost:1313/" +# baseURL = "/home/kevin/coding/mf-site/public" baseURL = "https://kevin-mok.gitlab.io/my-site-hugo/" languageCode = "en-us" title = "Kevin Mok" diff --git a/ideas.md b/ideas.md index 258d56d..cd8ff8c 100644 --- a/ideas.md +++ b/ideas.md @@ -1,6 +1,13 @@ -- refactor single/list into baseof -- i3-like nav. bar - - symbols - - blog - - about? - - work +# Large +- loop through URL sections +- rewrite CSS in Sass + - push to base16 repo +- resume + - printable version +- add CSS grid layout +- credits + +# Tiny +- click on name for base URL +- tux icon + diff --git a/layouts/partials/header.html b/layouts/partials/header.html index 6cc6267..fd017e1 100644 --- a/layouts/partials/header.html +++ b/layouts/partials/header.html @@ -14,8 +14,10 @@ - - + +{{ $main_sass := resources.Get "sass/main.scss" }} +{{ $main_style := $main_sass | resources.ToCSS }} + ~{{ .Page.RelPermalink }} ยท {{ .Site.Title }} - +