revsuine/hugo-theme-terminal
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

refactor from PostCSS to SASS

Browse source
This commit is contained in:
panr 2022-06-21 17:14:59 +02:00
parent 56791937ff
commit 7f097d7700
28 changed files with 139 additions and 179 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
assets/css/buttons.css → assets/css/buttons.scss
View file

@ -16,8 +16,8 @@ a.button {
text-decoration: none; text-decoration: none;
text-align: center; text-align: center;
border-radius: 0; border-radius: 0;
border: 1px solid var(--accent); border: 1px solid $accent;
background: var(--accent); background: $accent;
font: inherit; font: inherit;
font-weight: bold; font-weight: bold;
appearance: none; appearance: none;
@ -25,7 +25,7 @@ a.button {
outline: none; outline: none;
&:hover { &:hover {
background: color-mod(var(--accent) a(90%)); background: opacify($accent, .9);
} }
/* variants */ /* variants */
@ -63,7 +63,7 @@ a.read-more:hover,
a.read-more:active { a.read-more:active {
display: inline-flex; display: inline-flex;
border: none; border: none;
color: var(--accent); color: $accent;
background: none; background: none;
box-shadow: none; box-shadow: none;
padding: 0; padding: 0;

12
assets/css/code.css → assets/css/code.scss
View file

@ -1,5 +1,5 @@
.collapsable-code { .collapsable-code {
--border-color: color-mod(var(--accent) blend(#999 90%)); $border-color: mix($accent, #999, 90%);
position: relative; position: relative;
width: 100%; width: 100%;
@ -39,13 +39,13 @@
min-width: 30px; min-width: 30px;
min-height: 30px; min-height: 30px;
margin: 0; margin: 0;
border-bottom: 1px solid var(--border-color); border-bottom: 1px solid $border-color;
cursor: pointer; cursor: pointer;
} }
&__title { &__title {
flex: 1; flex: 1;
color: var(--accent); color: $accent;
padding: 3px 10px; padding: 3px 10px;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
@ -53,15 +53,15 @@
} }
&__language { &__language {
color: var(--accent); color: $accent;
border: 1px solid var(--border-color); border: 1px solid $border-color;
border-bottom: none; border-bottom: none;
text-transform: uppercase; text-transform: uppercase;
padding: 3px 10px; padding: 3px 10px;
} }
&__toggle { &__toggle {
color: var(--accent); color: $accent;
font-size: 16px; font-size: 16px;
padding: 3px 10px; padding: 3px 10px;

13
assets/css/color/blue.css
View file

@ -1,13 +0,0 @@
:root {
--accent: #23B0FF;
--background: color-mod(var(--accent) blend(#1D1E28 98%));
--color: white;
--border-color: rgba(255, 255, 255, .1);
/* variables for js, must be the same as these in @custom-media queries */
--phoneWidth: (max-width: 684px);
--tabletWidth: (max-width: 900px);
}
@custom-media --phone (max-width: 684px);
@custom-media --tablet (max-width: 900px);

1
assets/css/color/blue.scss Normal file
View file

@ -0,0 +1 @@
$accent: #23B0FF;

13
assets/css/color/green.css
View file

@ -1,13 +0,0 @@
:root {
--accent: #78E2A0;
--background: color-mod(var(--accent) blend(#1D1E28 98%));
--color: white;
--border-color: rgba(255, 255, 255, .1);
/* variables for js, must be the same as these in @custom-media queries */
--phoneWidth: (max-width: 684px);
--tabletWidth: (max-width: 900px);
}
@custom-media --phone (max-width: 684px);
@custom-media --tablet (max-width: 900px);

1
assets/css/color/green.scss Normal file
View file

@ -0,0 +1 @@
$accent: #78E2A0;

13
assets/css/color/orange.css
View file

@ -1,13 +0,0 @@
:root {
--accent: #FFA86A;
--background: color-mod(var(--accent) blend(#1D1E28 98%));
--color: white;
--border-color: rgba(255, 255, 255, .1);
/* variables for js, must be the same as these in @custom-media queries */
--phoneWidth: (max-width: 684px);
--tabletWidth: (max-width: 900px);
}
@custom-media --phone (max-width: 684px);
@custom-media --tablet (max-width: 900px);

1
assets/css/color/orange.scss Normal file
View file

@ -0,0 +1 @@
$accent: #FFA86A;

13
assets/css/color/pink.css
View file

@ -1,13 +0,0 @@
:root {
--accent: #EE72F1;
--background: color-mod(var(--accent) blend(#1D1E28 98%));
--color: white;
--border-color: rgba(255, 255, 255, .1);
/* variables for js, must be the same as these in @custom-media queries */
--phoneWidth: (max-width: 684px);
--tabletWidth: (max-width: 900px);
}
@custom-media --phone (max-width: 684px);
@custom-media --tablet (max-width: 900px);

1
assets/css/color/pink.scss Normal file
View file

@ -0,0 +1 @@
$accent: #EE72F1;

13
assets/css/color/red.css
View file

@ -1,13 +0,0 @@
:root {
--accent: #FF6266;
--background: color-mod(var(--accent) blend(#1D1E28 98%));
--color: white;
--border-color: rgba(255, 255, 255, .1);
/* variables for js, must be the same as these in @custom-media queries */
--phoneWidth: (max-width: 684px);
--tabletWidth: (max-width: 900px);
}
@custom-media --phone (max-width: 684px);
@custom-media --tablet (max-width: 900px);

1
assets/css/color/red.scss Normal file
View file

@ -0,0 +1 @@
$accent: #FF6266;

0
assets/css/font.css → assets/css/font.scss
View file

7
assets/css/footer.css → assets/css/footer.scss
View file

@ -11,7 +11,7 @@
width: 760px; width: 760px;
max-width: 100%; max-width: 100%;
@media (--tablet) { @media ($tablet) {
flex-direction: column; flex-direction: column;
} }
} }
@ -25,7 +25,6 @@
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
font-size: 1rem; font-size: 1rem;
color: var(--light-color-secondary);
&--user { &--user {
margin: auto; margin: auto;
@ -35,14 +34,14 @@
& > *:first-child:not(:only-child) { & > *:first-child:not(:only-child) {
margin-right: 10px; margin-right: 10px;
@media (--tablet) { @media ($tablet) {
border: none; border: none;
padding: 0; padding: 0;
margin: 0; margin: 0;
} }
} }
@media (--tablet) { @media ($tablet) {
flex-direction: column; flex-direction: column;
margin-top: 10px; margin-top: 10px;
} }

14
assets/css/form.css → assets/css/form.scss
View file

@ -1,15 +1,15 @@
input, textarea, select { input, textarea, select {
background: transparent; background: transparent;
color: var(--accent); color: $accent;
border: 1px solid var(--accent); border: 1px solid $accent;
border-radius: 0; border-radius: 0;
padding: 10px; padding: 10px;
font: inherit; font: inherit;
appearance: none; appearance: none;
&:focus, :active { &:focus, :active {
border-color: var(--color); border-color: $color;
outline: 1px solid var(--color); outline: 1px solid $color;
} }
&:active { &:active {
@ -18,13 +18,13 @@ input, textarea, select {
} }
select { select {
background: var(--background); background: $background;
option { option {
background: var(--background); background: $background;
} }
} }
::placeholder { ::placeholder {
color: color-mod(var(--accent) a(50%)); color: color-mod($accent) a(50%);
} }

0
assets/css/gist.css → assets/css/gist.scss
View file

41
assets/css/header.css → assets/css/header.scss
View file

@ -1,7 +1,9 @@
@define-mixin menu { @mixin menu {
$shadow-color: opacify($background, .8);
$shadow: 0 10px $shadow-color, -10px 10px $shadow-color, 10px 10px $shadow-color;
position: absolute; position: absolute;
background: var(--background); background: $background;
box-shadow: var(--shadow); box-shadow: $shadow;
color: white; color: white;
border: 2px solid; border: 2px solid;
margin: 0; margin: 0;
@ -31,7 +33,7 @@
&:after { &:after {
content: ''; content: '';
background: repeating-linear-gradient(90deg, var(--accent), var(--accent) 2px, transparent 0, transparent 10px); background: repeating-linear-gradient(90deg, $accent, $accent 2px, transparent 0, transparent 10px);
display: block; display: block;
width: 100%; width: 100%;
right: 10px; right: 10px;
@ -45,14 +47,16 @@
} }
.menu { .menu {
--shadow-color: color-mod(var(--background) a(80%));
--shadow: 0 10px var(--shadow-color), -10px 10px var(--shadow-color), 10px 10px var(--shadow-color);
margin: 20px 1px; margin: 20px 1px;
@media (--phone) { @media ($phone) {
@mixin menu; @include menu;
top: 50px; top: 50px;
right: 0; right: 0;
&.hidden-on-mobile {
display: none;
}
} }
&__inner { &__inner {
@ -63,7 +67,7 @@
padding: 0; padding: 0;
&--desktop { &--desktop {
@media (--phone) { @media ($phone) {
display: none; display: none;
} }
} }
@ -71,7 +75,7 @@
&--mobile { &--mobile {
display: none; display: none;
@media (--phone) { @media ($phone) {
display: block; display: block;
} }
} }
@ -84,7 +88,7 @@
} }
} }
@media (--phone) { @media ($phone) {
flex-direction: column; flex-direction: column;
align-items: flex-start; align-items: flex-start;
padding: 0; padding: 0;
@ -107,12 +111,12 @@
} }
&-more { &-more {
@mixin menu; @include menu;
top: 35px; top: 35px;
left: 0; left: 0;
&-trigger { &-trigger {
color: var(--accent); color: $accent;
user-select: none; user-select: none;
cursor: pointer; cursor: pointer;
} }
@ -138,26 +142,31 @@
list-style-type: none; list-style-type: none;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
color: var(--accent); color: $accent;
cursor: pointer; cursor: pointer;
margin: 0; margin: 0;
} }
&__more { &__more {
@mixin menu; @include menu;
top: 35px; top: 35px;
right: 0; right: 0;
} }
} }
&-trigger { &-trigger {
color: var(--accent); display: none;
color: $accent;
border: 2px solid; border: 2px solid;
margin-left: 10px; margin-left: 10px;
height: 100%; height: 100%;
padding: 3px 8px; padding: 3px 8px;
position: relative; position: relative;
cursor: pointer; cursor: pointer;
@media ($phone) {
display: block;
}
} }
} }
} }

2
assets/css/logo.css → assets/css/logo.scss
View file

@ -2,7 +2,7 @@
display: flex; display: flex;
align-items: center; align-items: center;
text-decoration: none; text-decoration: none;
background: var(--accent); background: $accent;
color: black; color: black;
padding: 5px 10px; padding: 5px 10px;
} }

50
assets/css/main.css → assets/css/main.scss
View file

@ -15,8 +15,8 @@ body {
font-size: 1rem; font-size: 1rem;
line-height: 1.54; line-height: 1.54;
letter-spacing: -0.02em; letter-spacing: -0.02em;
background-color: color-mod(var(--accent) blend(#1D1E28 98%)); background-color: $background;
color: var(--color); color: $color;
text-rendering: optimizeLegibility; text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
font-feature-settings: "liga", "tnum", "zero", "ss01", "locl"; font-feature-settings: "liga", "tnum", "zero", "ss01", "locl";
@ -24,7 +24,7 @@ body {
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
-webkit-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;
@media (--phone) { @media ($phone) {
font-size: 1rem; font-size: 1rem;
} }
} }
@ -61,7 +61,7 @@ a {
/* Waiting for a better times... */ /* Waiting for a better times... */
/* &:has(code) { /* &:has(code) {
text-decoration-color: var(--accent); text-decoration-color: $accent;
} */ } */
} }
@ -109,8 +109,8 @@ figure {
font-size: 14px; font-size: 14px;
padding: 5px 10px; padding: 5px 10px;
margin-top: 5px; margin-top: 5px;
background: var(--accent); background: $accent;
color: var(--background); color: $background;
/* opacity: .8; */ /* opacity: .8; */
&.left { &.left {
@ -130,8 +130,8 @@ figure {
code, kbd { code, kbd {
font-family: 'Fira Code', Monaco, Consolas, Ubuntu Mono, monospace !important; font-family: 'Fira Code', Monaco, Consolas, Ubuntu Mono, monospace !important;
font-feature-settings: normal; font-feature-settings: normal;
background: color-mod(var(--accent) a(20%)); background: color-mod($accent) a(20%);
color: var(--accent); color: $accent;
padding: 1px 6px; padding: 1px 6px;
margin: 0 2px; margin: 0 2px;
font-size: .95rem; font-size: .95rem;
@ -157,7 +157,7 @@ pre {
margin-top: -40px; margin-top: -40px;
} }
@media (--phone) { @media ($phone) {
white-space: pre-wrap; white-space: pre-wrap;
word-wrap: break-word; word-wrap: break-word;
} }
@ -172,12 +172,12 @@ pre {
} }
blockquote { blockquote {
border-top: 1px solid var(--accent); border-top: 1px solid $accent;
border-bottom: 1px solid var(--accent); border-bottom: 1px solid $accent;
margin: 40px 0; margin: 40px 0;
padding: 25px; padding: 25px;
@media (--phone) { @media ($phone) {
padding-right: 0; padding-right: 0;
} }
@ -198,15 +198,15 @@ blockquote {
display: block; display: block;
position: absolute; position: absolute;
left: -25px; left: -25px;
color: var(--accent); color: $accent;
} }
&.twitter-tweet { &.twitter-tweet {
position: relative; position: relative;
background: color-mod(var(--accent) a(10%)); background: color-mod($accent) a(10%);
font: inherit; font: inherit;
color: inherit; color: inherit;
border: 1px solid var(--accent); border: 1px solid $accent;
padding-top: 60px; padding-top: 60px;
p:before { p:before {
@ -217,12 +217,12 @@ blockquote {
content: '> From Twitter:'; content: '> From Twitter:';
position: absolute; position: absolute;
top: 20px; top: 20px;
color: var(--accent); color: $accent;
font-weight: bold; font-weight: bold;
} }
a { a {
color: var(--accent); color: $accent;
} }
} }
} }
@ -237,12 +237,12 @@ table {
table, table,
th, th,
td { td {
border: 1px dashed var(--accent); border: 1px dashed $accent;
padding: 10px; padding: 10px;
} }
th { th {
color: var(--accent); color: $accent;
} }
ul, ul,
@ -254,7 +254,7 @@ ol {
position: relative; position: relative;
} }
@media (--phone) { @media ($phone) {
margin-left: 20px; margin-left: 20px;
} }
} }
@ -271,7 +271,7 @@ ol {
content: counter(li); content: counter(li);
position: absolute; position: absolute;
right: calc(100% + 10px); right: calc(100% + 10px);
color: var(--accent); color: $accent;
display: inline-block; display: inline-block;
text-align: right; text-align: right;
} }
@ -290,8 +290,8 @@ ol {
} }
mark { mark {
background: var(--accent); background: $accent;
color: var(--background); color: $background;
} }
.container { .container {
@ -312,7 +312,7 @@ mark {
max-width: 100%; max-width: 100%;
} }
@media (--phone) { @media ($phone) {
padding: 20px; padding: 20px;
} }
@ -333,7 +333,7 @@ mark {
hr { hr {
width: 100%; width: 100%;
border: none; border: none;
background: var(--border-color); background: $border-color;
height: 1px; height: 1px;
} }

2
assets/css/pagination.css → assets/css/pagination.scss
View file

@ -15,7 +15,7 @@
text-align: center; text-align: center;
margin: 0 auto; margin: 0 auto;
padding: 5px 10px; padding: 5px 10px;
background: color-mod(var(--accent) blend(#1D1E28 98%)); background: mix($accent, #1D1E28, 98%);
font-size: .8rem; font-size: .8rem;
text-transform: uppercase; text-transform: uppercase;
text-decoration: none; text-decoration: none;

28
assets/css/post.css → assets/css/post.scss
View file

@ -3,7 +3,7 @@
} }
.framed { .framed {
border: 1px solid var(--accent); border: 1px solid $accent;
padding: 20px; padding: 20px;
*:first-child { *:first-child {
@ -25,27 +25,23 @@
margin: 20px auto; margin: 20px auto;
padding: 20px 0; padding: 20px 0;
@media (--tablet) {
max-width: 660px;
}
&:not(:last-of-type) { &:not(:last-of-type) {
border-bottom: 1px solid var(--border-color); border-bottom: 1px solid $border-color;
} }
&-meta { &-meta {
font-size: 1rem; font-size: 1rem;
margin-bottom: 10px; margin-bottom: 10px;
color: color-mod(var(--accent) a(70%)); color: opcift($accent, 70%);
} }
&-title { &-title {
--border: 3px dotted var(--accent); $border: 3px dotted $accent;
position: relative; position: relative;
color: var(--accent); color: $accent;
margin: 0 0 15px; margin: 0 0 15px;
padding-bottom: 15px; padding-bottom: 15px;
border-bottom: var(--border); border-bottom: $border;
&:after { &:after {
content: ''; content: '';
@ -53,7 +49,7 @@
bottom: 2px; bottom: 2px;
display: block; display: block;
width: 100%; width: 100%;
border-bottom: var(--border); border-bottom: $border;
} }
a { a {
@ -77,12 +73,12 @@
} }
&-cover { &-cover {
border: 20px solid var(--accent); border: 20px solid $accent;
background: transparent; background: transparent;
margin: 40px 0; margin: 40px 0;
padding: 20px; padding: 20px;
@media (--phone) { @media ($phone) {
padding: 10px; padding: 10px;
border-width: 10px; border-width: 10px;
} }
@ -95,7 +91,7 @@
content: '-'; content: '-';
position: absolute; position: absolute;
left: -20px; left: -20px;
color: var(--accent); color: $accent;
} }
} }
} }
@ -117,7 +113,7 @@
} }
.hanchor { .hanchor {
color: color-mod(var(--accent) alpha(90%)); color: opacify($accent, .9);
text-decoration: none; text-decoration: none;
margin-left: 10px; margin-left: 10px;
visibility: hidden; visibility: hidden;
@ -128,5 +124,5 @@ h1:hover a, h2:hover a, h3:hover a, h4:hover a {
} }
.footnotes { .footnotes {
color: color-mod(var(--color) alpha(50%)); color: opacify($color, .5);
} }

0
assets/css/prism.css → assets/css/prism.scss
View file

16
assets/css/style.css
View file

@ -1,16 +0,0 @@
@import 'font.css';
@import 'buttons.css';
@import 'form.css';
@import 'header.css';
@import 'logo.css';
@import 'main.css';
@import 'post.css';
@import 'pagination.css';
@import 'footer.css';
@import 'prism.css';
@import 'syntax.css';
@import 'code.css';
@import 'terms.css';
@import 'gist.css';

18
assets/css/style.scss Normal file
View file

@ -0,0 +1,18 @@
@import "variables";
@import "font";
@import "buttons";
@import "form";
@import "header";
@import "logo";
@import "main";
@import "post";
@import "pagination";
@import "footer";
@import "prism";
@import "syntax";
@import "code";
@import "terms";
@import "gist";

14
assets/css/syntax.css → assets/css/syntax.scss
View file

@ -17,7 +17,7 @@ code.language-scss,
.token.number, .token.number,
.token.inserted, .token.inserted,
.token.important { .token.important {
color: var(--accent) !important; color: $accent !important;
} }
.token.tag-id, .token.tag-id,
@ -34,7 +34,7 @@ code.language-scss,
.token.class-name, .token.class-name,
.token.constant, .token.constant,
.token.symbol { .token.symbol {
color: color-mod(var(--accent) a(70%)) !important; color: opacify($accent, .7) !important;
} }
.token.property, .token.property,
@ -44,7 +44,7 @@ code.language-scss,
code.language-javascript, code.language-javascript,
code.language-html, code.language-html,
.command-line-prompt > span:before { .command-line-prompt > span:before {
color: color-mod(var(--accent) blend(#999 90%)) !important; color: mix($accent, #999, .9) !important;
} }
.token.selector, .token.selector,
@ -80,7 +80,7 @@ pre[class*="language-"] {
right: 0; right: 0;
padding: 0; padding: 0;
margin: 0; margin: 0;
background: color-mod(var(--accent) blend(#999 90%) a(8%)); background: opacify(mix($accent, #999, 90%), .08);
pointer-events: none; pointer-events: none;
line-height: inherit; line-height: inherit;
white-space: pre; white-space: pre;
@ -116,9 +116,9 @@ pre[class*="language-"] {
} }
.code-toolbar { .code-toolbar {
--code-margin: 40px; $code-margin: 40px;
position: relative; position: relative;
margin: var(--code-margin) 0; margin: $code-margin 0;
padding: 20px; padding: 20px;
border: 1px solid rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .1);
@ -126,7 +126,7 @@ pre[class*="language-"] {
+ .highlight, + .highlight,
+ .highlight .code-toolbar { + .highlight .code-toolbar {
border-top: 0; border-top: 0;
margin-top: calc(-1 * var(--code-margin)); margin-top: calc(-1 * $code-margin);
} }
pre, code { pre, code {

2
assets/css/terms.css → assets/css/terms.scss
View file

@ -1,6 +1,6 @@
.terms { .terms {
h1 { h1 {
color: var(--accent); color: $accent;
} }
h3 { h3 {

14
assets/css/variables.scss Normal file
View file

@ -0,0 +1,14 @@
/* COLOR VARIABLES */
$background: mix($accent, #1D1E28, 2%);
$color: white;
$border-color: rgba(255, 255, 255, .1);
/* MEDIA QUERIES */
$phone: (max-width: 684px);
$tablet: (max-width: 900px);
/* variables for js, must be the same as these in @custom-media queries */
:root {
--phoneWidth: (max-width: 684px);
--tabletWidth: (max-width: 900px);
}

20
layouts/partials/head.html
View file

@ -8,25 +8,25 @@
{{ template "_internal/google_analytics.html" . }} {{ template "_internal/google_analytics.html" . }}
<!-- Local Theme Variables --> <!-- Local Theme Variables -->
{{ $defaultStyles := resources.Get "css/style.css" }} {{ $defaultStyles := resources.Get "css/style.scss" }}
{{ if (isset .Params "color") }} {{ if (isset .Params "color") }}
{{ $localColorCss := resources.Get (printf "css/color/%s.css" .Params.color) }} {{ $localColorCss := resources.Get (printf "css/color/%s.scss" .Params.color) }}
{{ $localCss := slice $defaultStyles $localColorCss | resources.Concat (printf "css/%s-local.css" .Params.color) }} {{ $localCss := slice $localColorCss $defaultStyles | resources.Concat (printf "css/%s-local.scss" .Params.color) }}
{{ $localColorStyles := $localCss | resources.ToCSS | resources.PostCSS }} {{ $localColorStyles := $localCss | resources.ToCSS }}
<link rel="stylesheet" href="{{ $localColorStyles.RelPermalink }}"> <link rel="stylesheet" href="{{ $localColorStyles.RelPermalink }}">
{{ else }} {{ else }}
<!-- Theme Variables --> <!-- Theme Variables -->
{{ $colorCss := resources.Get (printf "css/color/%s.css" ($.Site.Params.ThemeColor | default "orange")) }} {{ $colorCss := resources.Get (printf "css/color/%s.scss" ($.Site.Params.ThemeColor | default "orange")) }}
{{ $css := slice $defaultStyles $colorCss | resources.Concat "css/base.css" }} {{ $css := slice $colorCss $defaultStyles | resources.Concat "css/base.scss" }}
{{ $options := (dict "targetPath" "style.css" "outputStyle" "compressed" "enableSourceMap" true "precision" 6 "includePaths" (slice "node_modules")) }} {{ $options := (dict "targetPath" "style.css" "outputStyle" "compressed" "enableSourceMap" true "precision" 6 "includePaths" (slice "node_modules")) }}
{{ $styles := $css | resources.ToCSS $options | resources.PostCSS }} {{ $styles := $css | resources.ToCSS $options }}
<link rel="stylesheet" href="{{ $styles.RelPermalink }}"> <link rel="stylesheet" href="{{ $styles.RelPermalink }}">
{{ end }} {{ end }}
<!-- Custom CSS to override theme properties (/static/style.css) --> <!-- Custom CSS to override theme properties (/static/style.scss) -->
{{ if (fileExists "static/style.css") -}} {{ if (fileExists "static/style.scss") -}}
<link rel="stylesheet" href="{{ "style.css" | absURL }}"> <link rel="stylesheet" href="{{ "style.scss" | absURL }}">
{{- end }} {{- end }}
<!-- Icons --> <!-- Icons -->