From 7cd5896bdd7b96a0f90f6f3b3720343cd5cbe4d9 Mon Sep 17 00:00:00 2001 From: jamie Date: Sun, 15 Jun 2025 19:32:58 +0100 Subject: feat: add sass support --- .gitignore | 1 + css/default.css | 141 ------------------------------------------------ css/default.scss | 161 +++++++++++++++++++++++++++++++++++++++++++++++++++++++ flake.nix | 2 +- site.hs | 6 +++ skiletro.cabal | 1 + 6 files changed, 170 insertions(+), 142 deletions(-) delete mode 100644 css/default.css create mode 100644 css/default.scss diff --git a/.gitignore b/.gitignore index b3d7013..e769f21 100644 --- a/.gitignore +++ b/.gitignore @@ -1,4 +1,5 @@ .direnv/ +.sass-cache/ result result/ _cache diff --git a/css/default.css b/css/default.css deleted file mode 100644 index 381ff73..0000000 --- a/css/default.css +++ /dev/null @@ -1,141 +0,0 @@ -html { - font-size: 62.5%; -} - -body { - font-size: 1.6rem; - color: #000; -} - -header { - border-bottom: 0.2rem solid #000; -} - -nav { - text-align: right; -} - -nav a { - font-size: 1.8rem; - font-weight: bold; - color: black; - text-decoration: none; - text-transform: uppercase; -} - -footer { - margin-top: 3rem; - padding: 1.2rem 0; - border-top: 0.2rem solid #000; - font-size: 1.2rem; - color: #555; -} - -h1 { - font-size: 2.4rem; -} - -h2 { - font-size: 2rem; -} - -article .header { - font-size: 1.4rem; - font-style: italic; - color: #555; -} - -.logo a { - font-weight: bold; - color: #000; - text-decoration: none; -} - -@media (max-width: 319px) { - body { - width: 90%; - margin: 0; - padding: 0 5%; - } - header { - margin: 4.2rem 0; - } - nav { - margin: 0 auto 3rem; - text-align: center; - } - footer { - text-align: center; - } - .logo { - text-align: center; - margin: 1rem auto 3rem; - } - .logo a { - font-size: 2.4rem; - } - nav a { - display: block; - line-height: 1.6; - } -} - -@media (min-width: 320px) { - body { - width: 90%; - margin: 0; - padding: 0 5%; - } - header { - margin: 4.2rem 0; - } - nav { - margin: 0 auto 3rem; - text-align: center; - } - footer { - text-align: center; - } - .logo { - text-align: center; - margin: 1rem auto 3rem; - } - .logo a { - font-size: 2.4rem; - } - nav a { - display: inline; - margin: 0 0.6rem; - } -} - -@media (min-width: 640px) { - body { - width: 60rem; - margin: 0 auto; - padding: 0; - } - header { - margin: 0 0 3rem; - padding: 1.2rem 0; - } - nav { - margin: 0; - text-align: right; - } - nav a { - margin: 0 0 0 1.2rem; - display: inline; - } - footer { - text-align: right; - } - .logo { - margin: 0; - text-align: left; - } - .logo a { - float: left; - font-size: 1.8rem; - } -} diff --git a/css/default.scss b/css/default.scss new file mode 100644 index 0000000..a33ba78 --- /dev/null +++ b/css/default.scss @@ -0,0 +1,161 @@ +html { + font-size: 62.5%; +} + +body { + font-size: 1.6rem; + color: #000; +} + +header { + border-bottom: 0.2rem solid #000; +} + +nav { + text-align: right; +} + +nav a { + font-size: 1.8rem; + font-weight: bold; + color: black; + text-decoration: none; + text-transform: uppercase; +} + +footer { + margin-top: 3rem; + padding: 1.2rem 0; + border-top: 0.2rem solid #000; + font-size: 1.2rem; + color: #555; +} + +h1 { + font-size: 2.4rem; +} + +h2 { + font-size: 2rem; +} + +article .header { + font-size: 1.4rem; + font-style: italic; + /* color: #555; */ + $myColor: red; + color: $myColor; +} + +.logo a { + font-weight: bold; + color: #000; + text-decoration: none; +} + +@media (max-width: 319px) { + body { + width: 90%; + margin: 0; + padding: 0 5%; + } + + header { + margin: 4.2rem 0; + } + + nav { + margin: 0 auto 3rem; + text-align: center; + } + + footer { + text-align: center; + } + + .logo { + text-align: center; + margin: 1rem auto 3rem; + } + + .logo a { + font-size: 2.4rem; + } + + nav a { + display: block; + line-height: 1.6; + } +} + +@media (min-width: 320px) { + body { + width: 90%; + margin: 0; + padding: 0 5%; + } + + header { + margin: 4.2rem 0; + } + + nav { + margin: 0 auto 3rem; + text-align: center; + } + + footer { + text-align: center; + } + + .logo { + text-align: center; + margin: 1rem auto 3rem; + } + + .logo a { + font-size: 2.4rem; + } + + nav a { + display: inline; + margin: 0 0.6rem; + } +} + +@media (min-width: 640px) { + body { + width: 60rem; + margin: 0 auto; + padding: 0; + } + + header { + margin: 0 0 3rem; + padding: 1.2rem 0; + } + + nav { + margin: 0; + text-align: right; + } + + nav a { + margin: 0 0 0 1.2rem; + display: inline; + } + + footer { + text-align: right; + } + + .logo { + margin: 0; + text-align: left; + } + + .logo a { + float: left; + font-size: 1.8rem; + } +} \ No newline at end of file diff --git a/flake.nix b/flake.nix index 33c3149..aa7851f 100644 --- a/flake.nix +++ b/flake.nix @@ -25,7 +25,7 @@ tools = hp: {inherit (hp) hakyll;}; hlsCheck.enable = true; mkShellArgs = { - buildInputs = [pkgs.just]; + buildInputs = with pkgs; [just sass]; shellHook = "just -l -u"; }; }; diff --git a/site.hs b/site.hs index 851d53d..a392545 100644 --- a/site.hs +++ b/site.hs @@ -3,6 +3,7 @@ import Data.Monoid (mappend) import Hakyll +import Hakyll.Web.Sass (sassCompiler) -------------------------------------------------------------------------------- main :: IO () @@ -15,6 +16,11 @@ main = hakyll $ do route idRoute compile compressCssCompiler + match "css/*.scss" $ do + route $ setExtension "css" + let compressCssItem = fmap compressCss + compile (compressCssItem <$> sassCompiler) + match (fromList ["about.rst", "contact.markdown"]) $ do route $ setExtension "html" compile $ diff --git a/skiletro.cabal b/skiletro.cabal index 993f0b9..36dda08 100644 --- a/skiletro.cabal +++ b/skiletro.cabal @@ -7,5 +7,6 @@ executable site main-is: site.hs build-depends: base == 4.* , hakyll == 4.16.* + , hakyll-sass == 0.2.* ghc-options: -threaded -rtsopts -with-rtsopts=-N default-language: Haskell2010 -- cgit v1.3.1