diff options
| -rw-r--r-- | config.toml | 2 | ||||
| -rw-r--r-- | sass/include/_document.scss | 41 | ||||
| -rw-r--r-- | sass/include/_typography.scss | 31 | ||||
| -rw-r--r-- | sass/themes/_auto.scss | 82 | ||||
| -rw-r--r-- | sass/themes/_bluelight.scss | 85 | ||||
| -rw-r--r-- | sass/themes/_dark.scss | 72 | ||||
| -rw-r--r-- | sass/themes/_light.scss | 84 | ||||
| -rw-r--r-- | templates/macros/head.html | 4 |
8 files changed, 99 insertions, 302 deletions
diff --git a/config.toml b/config.toml index 6f6eb35..4218c27 100644 --- a/config.toml +++ b/config.toml @@ -81,6 +81,8 @@ fonts = [ {url = "font/FiraCode-Bold.woff2"}, {url = "font/FiraCode-Regular.woff2"}, ] +# Uncomment below line to load fontawesome, eg: <i class="fa-solid fa-heart"></i> +#fontawesome = "https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.1.1/css/all.min.css" # favicons, comment out a line to disable loading some or all of these. favicon_theme_color = "#333333" diff --git a/sass/include/_document.scss b/sass/include/_document.scss index a5f91db..31f43ac 100644 --- a/sass/include/_document.scss +++ b/sass/include/_document.scss @@ -1,3 +1,44 @@ +:root { + // Spacings + --s1: .5rem; + --s2: 1rem; + --rc: .5rem; //radius corners + + // Borders + --br: 0.25rem; //border radius + --bw: 0.0625rem; //border width + --ow: 0.1875rem; //outline width + + // Responsives spacings + @if $enable-responsive-spacings { + // Sectionning + body > header, + body > main, + body > footer, + section { + @if map-get($breakpoints, "sm") { + @media (min-width: map-get($breakpoints, "sm")) { + --s1: .5rem; + } + } + @if map-get($breakpoints, "md") { + @media (min-width: map-get($breakpoints, "md")) { + --s1: .6rem; + } + } + @if map-get($breakpoints, "lg") { + @media (min-width: map-get($breakpoints, "lg")) { + --s1: .7rem; + } + } + @if map-get($breakpoints, "xl") { + @media (min-width: map-get($breakpoints, "xl")) { + --s1: .8rem; + } + } + } + } +} // Document: Content-box & Responsive typography // Change from `box-sizing: content-box` so that `width` is not affected by `padding` or `border` diff --git a/sass/include/_typography.scss b/sass/include/_typography.scss index c98fac5..b964426 100644 --- a/sass/include/_typography.scss +++ b/sass/include/_typography.scss @@ -1,3 +1,34 @@ +:root { + --fs: 1rem; //font-size + --lh: 1.5; //line-height + --lhh: 1.2; //line-height headers + --fw: 400; //font-weight + --fh: 700; //font-weight h1-h6 + // Responsive typography + @if $enable-responsive-typography { + @if map-get($breakpoints, "sm") { + @media (min-width: map-get($breakpoints, "sm")) { + --fs: 1rem; + } + } + @if map-get($breakpoints, "md") { + @media (min-width: map-get($breakpoints, "md")) { + --fs: 1.04rem; + } + } + @if map-get($breakpoints, "lg") { + @media (min-width: map-get($breakpoints, "lg")) { + --fs: 1.08rem; + } + } + @if map-get($breakpoints, "xl") { + @media (min-width: map-get($breakpoints, "xl")) { + --fs: 1.12rem; + } + } + } +} + // Typography h1, h2, diff --git a/sass/themes/_auto.scss b/sass/themes/_auto.scss index b229109..7c6109a 100644 --- a/sass/themes/_auto.scss +++ b/sass/themes/_auto.scss @@ -1,23 +1,17 @@ :root { - // Typography // Regular Fonts used by default: --ff: system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", sans-serif; // Monospace Fonts used for code: --fm: Menlo, Consolas, "Roboto Mono", "Ubuntu Monospace", "Noto Mono", "Oxygen Mono", "Liberation Mono", monospace; - --lh: 1.5; //line-height - --lhh: 1.2; //line-height headers - --fs: 1rem; //font-size - --fw: 400; //font-weight - --fh: 700; //font-weight h1-h6 // Colors - --f1: #555; //font color 1 bbb ccc - --f2: #333; //font color 2 fff eee + --f1: #555; //font color 1 + --f2: #333; //font color 2 - --c1: #fff; //color 1 111 - --c2: #eee; //color 2 222 - --c3: #ddd; //color 3 333 - --c4: #777; //color 4 888 + --c1: #fff; //color 1 + --c2: #eee; //color 2 + --c3: #ddd; //color 3 + --c4: #777; //color 4 --a1: #c40; //accent color 1 link --a2: #e60; //accent color 2 hover,focus @@ -25,40 +19,6 @@ --cg: #483; //ins green --cr: #d33; //del red - - // Spacings - --s1: .5rem; - --s2: 1rem; - --rc: .5rem; //radius corners - - // Borders - --br: 0.25rem; //border radius - --bw: 0.0625rem; //border width - --ow: 0.1875rem; //outline width - - // Responsive typography - @if $enable-responsive-typography { - @if map-get($breakpoints, "sm") { - @media (min-width: map-get($breakpoints, "sm")) { - --fs: 1rem; - } - } - @if map-get($breakpoints, "md") { - @media (min-width: map-get($breakpoints, "md")) { - --fs: 1.04rem; - } - } - @if map-get($breakpoints, "lg") { - @media (min-width: map-get($breakpoints, "lg")) { - --fs: 1.08rem; - } - } - @if map-get($breakpoints, "xl") { - @media (min-width: map-get($breakpoints, "xl")) { - --fs: 1.12rem; - } - } - } } @media (prefers-color-scheme: dark) { :root { @@ -75,33 +35,3 @@ --a3: #fb0; //accent color 3 h1-h2 hover,focus } } - -// Responsives spacings -@if $enable-responsive-spacings { - // Sectionning - body > header, - body > main, - body > footer, - section { - @if map-get($breakpoints, "sm") { - @media (min-width: map-get($breakpoints, "sm")) { - --s1: .5rem; - } - } - @if map-get($breakpoints, "md") { - @media (min-width: map-get($breakpoints, "md")) { - --s1: .6rem; - } - } - @if map-get($breakpoints, "lg") { - @media (min-width: map-get($breakpoints, "lg")) { - --s1: .7rem; - } - } - @if map-get($breakpoints, "xl") { - @media (min-width: map-get($breakpoints, "xl")) { - --s1: .8rem; - } - } - } -} diff --git a/sass/themes/_bluelight.scss b/sass/themes/_bluelight.scss index d53e0f7..1b01b8f 100644 --- a/sass/themes/_bluelight.scss +++ b/sass/themes/_bluelight.scss @@ -1,18 +1,14 @@ :root { - // Typography + // Regular Fonts used by default: --ff: system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", sans-serif; + // Monospace Fonts used for code: --fm: Menlo, Consolas, "Roboto Mono", "Ubuntu Monospace", "Noto Mono", "Oxygen Mono", "Liberation Mono", monospace; - --lh: 1.5; //line-height - --lhh: 1.2; //line-height headers - --fs: 1rem; //font-size - --fw: 400; //font-weight - --fh: 700; //font-weight h1-h6 // Colors - --f1: #1a1a1a; //font color 1 bbb ccc - --f2: #1a2050; //font color 2 fff eee + --f1: #1a1a1a; //font color 1 + --f2: #1a2050; //font color 2 - --c1: #eeeeee; //color 1 + --c1: #fafafa; //color 1 --c2: #cae1f0; //color 2 --c3: #062671; //color 3 --c4: #03143c; //color 4 @@ -23,75 +19,4 @@ --cg: #483; //ins green --cr: #d33; //del red - - // Spacings - --s1: .5rem; - --s2: 1rem; - --rc: .5rem; //radius corners - - // Borders - --br: 0.25rem; //border radius - --bw: 0.0625rem; //border width - --ow: 0.1875rem; //outline width - - // Responsive typography - @if $enable-responsive-typography { - @if map-get($breakpoints, "sm") { - @media (min-width: map-get($breakpoints, "sm")) { - --fs: 1rem; - } - } - - @if map-get($breakpoints, "md") { - @media (min-width: map-get($breakpoints, "md")) { - --fs: 1.04rem; - } - } - - @if map-get($breakpoints, "lg") { - @media (min-width: map-get($breakpoints, "lg")) { - --fs: 1.08rem; - } - } - - @if map-get($breakpoints, "xl") { - @media (min-width: map-get($breakpoints, "xl")) { - --fs: 1.12rem; - } - } - } } - -// Responsives spacings -@if $enable-responsive-spacings { - - // Sectionning - body>header, - body>main, - body>footer, - section { - @if map-get($breakpoints, "sm") { - @media (min-width: map-get($breakpoints, "sm")) { - --s1: .5rem; - } - } - - @if map-get($breakpoints, "md") { - @media (min-width: map-get($breakpoints, "md")) { - --s1: .6rem; - } - } - - @if map-get($breakpoints, "lg") { - @media (min-width: map-get($breakpoints, "lg")) { - --s1: .7rem; - } - } - - @if map-get($breakpoints, "xl") { - @media (min-width: map-get($breakpoints, "xl")) { - --s1: .8rem; - } - } - } -}
\ No newline at end of file diff --git a/sass/themes/_dark.scss b/sass/themes/_dark.scss index 1fef7c3..9c4519b 100644 --- a/sass/themes/_dark.scss +++ b/sass/themes/_dark.scss @@ -1,12 +1,8 @@ :root { - // Typography + // Regular Fonts used by default: --ff: system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", sans-serif; + // Monospace Fonts used for code: --fm: Menlo, Consolas, "Roboto Mono", "Ubuntu Monospace", "Noto Mono", "Oxygen Mono", "Liberation Mono", monospace; - --lh: 1.5; //line-height - --lhh: 1.2; //line-height headers - --fs: 1rem; //font-size - --fw: 400; //font-weight - --fh: 700; //font-weight h1-h6 // Colors --f1: #ccc; //font color 1 @@ -23,68 +19,4 @@ --cg: #483; //ins green --cr: #d33; //del red - - // Spacings - --s1: .5rem; - --s2: 1rem; - --rc: .5rem; //radius corners - - // Borders - --br: 0.25rem; //border radius - --bw: 0.0625rem; //border width - --ow: 0.1875rem; //outline width - - // Responsive typography - @if $enable-responsive-typography { - @if map-get($breakpoints, "sm") { - @media (min-width: map-get($breakpoints, "sm")) { - --fs: 1rem; - } - } - @if map-get($breakpoints, "md") { - @media (min-width: map-get($breakpoints, "md")) { - --fs: 1.04rem; - } - } - @if map-get($breakpoints, "lg") { - @media (min-width: map-get($breakpoints, "lg")) { - --fs: 1.08rem; - } - } - @if map-get($breakpoints, "xl") { - @media (min-width: map-get($breakpoints, "xl")) { - --fs: 1.12rem; - } - } - } -} - -// Responsives spacings -@if $enable-responsive-spacings { - // Sectionning - body > header, - body > main, - body > footer, - section { - @if map-get($breakpoints, "sm") { - @media (min-width: map-get($breakpoints, "sm")) { - --s1: .5rem; - } - } - @if map-get($breakpoints, "md") { - @media (min-width: map-get($breakpoints, "md")) { - --s1: .6rem; - } - } - @if map-get($breakpoints, "lg") { - @media (min-width: map-get($breakpoints, "lg")) { - --s1: .7rem; - } - } - @if map-get($breakpoints, "xl") { - @media (min-width: map-get($breakpoints, "xl")) { - --s1: .8rem; - } - } - } } diff --git a/sass/themes/_light.scss b/sass/themes/_light.scss index 1848f4e..0a51439 100644 --- a/sass/themes/_light.scss +++ b/sass/themes/_light.scss @@ -1,21 +1,17 @@ :root { - // Typography + // Regular Fonts used by default: --ff: system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", sans-serif; + // Monospace Fonts used for code: --fm: Menlo, Consolas, "Roboto Mono", "Ubuntu Monospace", "Noto Mono", "Oxygen Mono", "Liberation Mono", monospace; - --lh: 1.5; //line-height - --lhh: 1.2; //line-height headers - --fs: 1rem; //font-size - --fw: 400; //font-weight - --fh: 700; //font-weight h1-h6 // Colors - --f1: #555; //font color 1 bbb ccc - --f2: #333; //font color 2 fff eee + --f1: #555; //font color 1 + --f2: #333; //font color 2 - --c1: #fff; //color 1 111 - --c2: #eee; //color 2 222 - --c3: #ddd; //color 3 333 - --c4: #777; //color 4 888 + --c1: #fff; //color 1 + --c2: #eee; //color 2 + --c3: #ddd; //color 3 + --c4: #777; //color 4 --a1: #c40; //accent color 1 link --a2: #e60; //accent color 2 hover,focus @@ -23,68 +19,4 @@ --cg: #483; //ins green --cr: #d33; //del red - - // Spacings - --s1: .5rem; - --s2: 1rem; - --rc: .5rem; //radius corners - - // Borders - --br: 0.25rem; //border radius - --bw: 0.0625rem; //border width - --ow: 0.1875rem; //outline width - - // Responsive typography - @if $enable-responsive-typography { - @if map-get($breakpoints, "sm") { - @media (min-width: map-get($breakpoints, "sm")) { - --fs: 1rem; - } - } - @if map-get($breakpoints, "md") { - @media (min-width: map-get($breakpoints, "md")) { - --fs: 1.04rem; - } - } - @if map-get($breakpoints, "lg") { - @media (min-width: map-get($breakpoints, "lg")) { - --fs: 1.08rem; - } - } - @if map-get($breakpoints, "xl") { - @media (min-width: map-get($breakpoints, "xl")) { - --fs: 1.12rem; - } - } - } -} - -// Responsives spacings -@if $enable-responsive-spacings { - // Sectionning - body > header, - body > main, - body > footer, - section { - @if map-get($breakpoints, "sm") { - @media (min-width: map-get($breakpoints, "sm")) { - --s1: .5rem; - } - } - @if map-get($breakpoints, "md") { - @media (min-width: map-get($breakpoints, "md")) { - --s1: .6rem; - } - } - @if map-get($breakpoints, "lg") { - @media (min-width: map-get($breakpoints, "lg")) { - --s1: .7rem; - } - } - @if map-get($breakpoints, "xl") { - @media (min-width: map-get($breakpoints, "xl")) { - --s1: .8rem; - } - } - } } diff --git a/templates/macros/head.html b/templates/macros/head.html index bea8f66..ac411f7 100644 --- a/templates/macros/head.html +++ b/templates/macros/head.html @@ -12,6 +12,10 @@ {%- endif %} {%- endfor %}{%- endif %} +{%- if config.extra.fontawesome %} + <link rel="stylesheet" href="{{ config.extra.fontawesome | safe }}" crossorigin="anonymous"> +{%- endif %} + {%- if config.build_search_index %} <script defer type="text/javascript" src="{{ get_url(path=config.extra.js_search_index, trailing_slash=false, cachebust=true) | safe }}"></script> <script defer type="text/javascript" src="{{ get_url(path=config.extra.js_search, trailing_slash=false, cachebust=true) | safe }}"></script> |