From 35ef660878190f2f2d4454f4609411a7e84b88e2 Mon Sep 17 00:00:00 2001 From: "Thomas A. Christensen II" <25492070+MillironX@users.noreply.github.com> Date: Tue, 20 Dec 2022 21:14:34 -0600 Subject: [PATCH] Switch styles to Sass --- assets/styles/main.css | 123 ---------------------------------- assets/styles/mix-twbs.scss | 125 +++++++++++++++++++++++++++++++++++ layouts/_default/baseof.html | 7 +- 3 files changed, 127 insertions(+), 128 deletions(-) delete mode 100644 assets/styles/main.css create mode 100644 assets/styles/mix-twbs.scss diff --git a/assets/styles/main.css b/assets/styles/main.css deleted file mode 100644 index 40973e3..0000000 --- a/assets/styles/main.css +++ /dev/null @@ -1,123 +0,0 @@ -.blurred-container { - position: relative; - width: 100%; - min-height: 35vh; - height: 350px; - top: 0; - left: 0; -} - -.blurred-container .motto { - color: #fff; - font-size: 76px; - font-weight: 600; - text-align: center; - text-shadow: 0 0 10px rgba(0, 0, 0, 0.33); - text-transform: uppercase; - top: 7.5vh; - z-index: 3; - display: block; - margin: 0 auto; - position: relative; - width: 60%; - height: 0; -} - -.motto h1 { - background: #0000007d; -} - -.blurred-container .img-src { - position: fixed; - width: 100%; - min-height: 35vh; - height: 350px; - background-repeat: no-repeat; - background-size: cover; - background-position: center center; -} - -.blur { - opacity: 0; -} - -.list-main { - position: relative; - background-color: #fff; -} - -/* Gives me greater control over fonts */ -.font-serif { - font-family: Georgia, "Times New Roman", Times, serif; -} - -.font-sans { - font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; -} - -.font-mono { - font-family: Menlo, Monaco, Consolas, "Courier New", monospace; -} - -.font-small-caps { - font-variant-caps: small-caps; -} - -.strikethrough { - text-decoration: line-through; -} - -.sfTable { - margin: 0 auto; -} - -.text-align-left { - text-align: left; -} - -.text-align-right { - text-align: right; -} - -.float-left { - float: left; -} - -.float-right { - float: right; -} - -.media-object { - max-height: 100%; - max-width: 100%; -} - -@media (min-width: 768px) { - .pull-left { - max-width: 25%; - } - - .w-md-50 { - width: 50%; - } -} - -h1 small { - font-size: 60%; - color: #9a9a9a; - font-weight: 300; - line-height: 1.5; -} - -h1 { - font-weight: 400; - margin: 30px 0 15px; -} - -.dogear { - clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 25%, 75% 0); -} - -.fa-stack-top { - vertical-align: top; -} diff --git a/assets/styles/mix-twbs.scss b/assets/styles/mix-twbs.scss new file mode 100644 index 0000000..2b8230d --- /dev/null +++ b/assets/styles/mix-twbs.scss @@ -0,0 +1,125 @@ +.blurred-container { + position: relative; + width: 100%; + min-height: 35vh; + height: 350px; + top: 0; + left: 0; + } + + .blurred-container .motto { + color: #fff; + font-size: 76px; + font-weight: 600; + text-align: center; + text-shadow: 0 0 10px rgba(0, 0, 0, 0.33); + text-transform: uppercase; + top: 7.5vh; + z-index: 3; + display: block; + margin: 0 auto; + position: relative; + width: 60%; + height: 0; + } + + .motto h1 { + background: #0000007d; + } + + .blurred-container .img-src { + position: fixed; + width: 100%; + min-height: 35vh; + height: 350px; + background-repeat: no-repeat; + background-size: cover; + background-position: center center; + } + + .blur { + opacity: 0; + } + + .list-main { + position: relative; + background-color: #fff; + } + + /* Gives me greater control over fonts */ + .font-serif { + font-family: Georgia, "Times New Roman", Times, serif; + } + + .font-sans { + font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; + } + + .font-mono { + font-family: Menlo, Monaco, Consolas, "Courier New", monospace; + } + + .font-small-caps { + font-variant-caps: small-caps; + } + + .strikethrough { + text-decoration: line-through; + } + + .sfTable { + margin: 0 auto; + } + + .text-align-left { + text-align: left; + } + + .text-align-right { + text-align: right; + } + + .float-left { + float: left; + } + + .float-right { + float: right; + } + + .media-object { + max-height: 100%; + max-width: 100%; + } + + @media (min-width: 768px) { + .pull-left { + max-width: 25%; + } + + .w-md-50 { + width: 50%; + } + } + + h1 small { + font-size: 60%; + color: #9a9a9a; + font-weight: 300; + line-height: 1.5; + } + + h1 { + font-weight: 400; + margin: 30px 0 15px; + } + + .dogear { + clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 25%, 75% 0); + } + + .fa-stack-top { + vertical-align: top; + } + +@import "bootstrap/bootstrap"; diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html index 4d92820..0ec6d3f 100644 --- a/layouts/_default/baseof.html +++ b/layouts/_default/baseof.html @@ -5,11 +5,8 @@ {{ .Title }} - {{ .Site.Title }} - {{ $twbscss := resources.Get "styles/bootstrap/bootstrap.scss" | resources.ToCSS }} - {{ $mycss := resources.Get "styles/main.css" }} - {{ $allcss := slice $twbscss $mycss | resources.Concat "css/bundle.css" }} - {{ $allcsspure := $allcss | resources.PostCSS (dict "nomap" true) | minify | fingerprint | resources.PostProcess }} - + {{ $twbssass := resources.Get "styles/mix-twbs.scss" | resources.ToCSS | minify | resources.PostProcess }} + {{ $millironx := resources.Get "graphics/millironx.svg" }}