From 7f097d7700c273458612386bc5887119efd32fd7 Mon Sep 17 00:00:00 2001
From: panr <radoslaw.koziel@gmail.com>
Date: Tue, 21 Jun 2022 17:14:59 +0200
Subject: [PATCH] refactor from PostCSS to SASS
---
assets/css/{buttons.css => buttons.scss} | 8 +--
assets/css/{code.css => code.scss} | 12 ++---
assets/css/color/blue.css | 13 -----
assets/css/color/blue.scss | 1 +
assets/css/color/green.css | 13 -----
assets/css/color/green.scss | 1 +
assets/css/color/orange.css | 13 -----
assets/css/color/orange.scss | 1 +
assets/css/color/pink.css | 13 -----
assets/css/color/pink.scss | 1 +
assets/css/color/red.css | 13 -----
assets/css/color/red.scss | 1 +
assets/css/{font.css => font.scss} | 0
assets/css/{footer.css => footer.scss} | 7 ++-
assets/css/{form.css => form.scss} | 14 +++---
assets/css/{gist.css => gist.scss} | 0
assets/css/{header.css => header.scss} | 41 +++++++++------
assets/css/{logo.css => logo.scss} | 2 +-
assets/css/{main.css => main.scss} | 50 +++++++++----------
.../css/{pagination.css => pagination.scss} | 2 +-
assets/css/{post.css => post.scss} | 28 +++++------
assets/css/{prism.css => prism.scss} | 0
assets/css/style.css | 16 ------
assets/css/style.scss | 18 +++++++
assets/css/{syntax.css => syntax.scss} | 14 +++---
assets/css/{terms.css => terms.scss} | 2 +-
assets/css/variables.scss | 14 ++++++
layouts/partials/head.html | 20 ++++----
28 files changed, 139 insertions(+), 179 deletions(-)
rename assets/css/{buttons.css => buttons.scss} (91%)
rename assets/css/{code.css => code.scss} (83%)
delete mode 100644 assets/css/color/blue.css
create mode 100644 assets/css/color/blue.scss
delete mode 100644 assets/css/color/green.css
create mode 100644 assets/css/color/green.scss
delete mode 100644 assets/css/color/orange.css
create mode 100644 assets/css/color/orange.scss
delete mode 100644 assets/css/color/pink.css
create mode 100644 assets/css/color/pink.scss
delete mode 100644 assets/css/color/red.css
create mode 100644 assets/css/color/red.scss
rename assets/css/{font.css => font.scss} (100%)
rename assets/css/{footer.css => footer.scss} (85%)
rename assets/css/{form.css => form.scss} (50%)
rename assets/css/{gist.css => gist.scss} (100%)
rename assets/css/{header.css => header.scss} (76%)
rename assets/css/{logo.css => logo.scss} (79%)
rename assets/css/{main.css => main.scss} (83%)
rename assets/css/{pagination.css => pagination.scss} (95%)
rename assets/css/{post.css => post.scss} (74%)
rename assets/css/{prism.css => prism.scss} (100%)
delete mode 100644 assets/css/style.css
create mode 100644 assets/css/style.scss
rename assets/css/{syntax.css => syntax.scss} (88%)
rename assets/css/{terms.css => terms.scss} (69%)
create mode 100644 assets/css/variables.scss
diff --git a/assets/css/buttons.css b/assets/css/buttons.scss
similarity index 91%
rename from assets/css/buttons.css
rename to assets/css/buttons.scss
index b619481..4ca08c8 100644
--- a/assets/css/buttons.css
+++ b/assets/css/buttons.scss
@@ -16,8 +16,8 @@ a.button {
text-decoration: none;
text-align: center;
border-radius: 0;
- border: 1px solid var(--accent);
- background: var(--accent);
+ border: 1px solid $accent;
+ background: $accent;
font: inherit;
font-weight: bold;
appearance: none;
@@ -25,7 +25,7 @@ a.button {
outline: none;
&:hover {
- background: color-mod(var(--accent) a(90%));
+ background: opacify($accent, .9);
}
/* variants */
@@ -63,7 +63,7 @@ a.read-more:hover,
a.read-more:active {
display: inline-flex;
border: none;
- color: var(--accent);
+ color: $accent;
background: none;
box-shadow: none;
padding: 0;
diff --git a/assets/css/code.css b/assets/css/code.scss
similarity index 83%
rename from assets/css/code.css
rename to assets/css/code.scss
index 8405fa9..9ac2f6b 100644
--- a/assets/css/code.css
+++ b/assets/css/code.scss
@@ -1,5 +1,5 @@
.collapsable-code {
- --border-color: color-mod(var(--accent) blend(#999 90%));
+ $border-color: mix($accent, #999, 90%);
position: relative;
width: 100%;
@@ -39,13 +39,13 @@
min-width: 30px;
min-height: 30px;
margin: 0;
- border-bottom: 1px solid var(--border-color);
+ border-bottom: 1px solid $border-color;
cursor: pointer;
}
&__title {
flex: 1;
- color: var(--accent);
+ color: $accent;
padding: 3px 10px;
text-overflow: ellipsis;
white-space: nowrap;
@@ -53,15 +53,15 @@
}
&__language {
- color: var(--accent);
- border: 1px solid var(--border-color);
+ color: $accent;
+ border: 1px solid $border-color;
border-bottom: none;
text-transform: uppercase;
padding: 3px 10px;
}
&__toggle {
- color: var(--accent);
+ color: $accent;
font-size: 16px;
padding: 3px 10px;
diff --git a/assets/css/color/blue.css b/assets/css/color/blue.css
deleted file mode 100644
index ddc44f6..0000000
--- a/assets/css/color/blue.css
+++ /dev/null
@@ -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);
diff --git a/assets/css/color/blue.scss b/assets/css/color/blue.scss
new file mode 100644
index 0000000..5a3b455
--- /dev/null
+++ b/assets/css/color/blue.scss
@@ -0,0 +1 @@
+$accent: #23B0FF;
diff --git a/assets/css/color/green.css b/assets/css/color/green.css
deleted file mode 100644
index 389dc37..0000000
--- a/assets/css/color/green.css
+++ /dev/null
@@ -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);
diff --git a/assets/css/color/green.scss b/assets/css/color/green.scss
new file mode 100644
index 0000000..efb853a
--- /dev/null
+++ b/assets/css/color/green.scss
@@ -0,0 +1 @@
+$accent: #78E2A0;
diff --git a/assets/css/color/orange.css b/assets/css/color/orange.css
deleted file mode 100644
index 33fd8d8..0000000
--- a/assets/css/color/orange.css
+++ /dev/null
@@ -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);
diff --git a/assets/css/color/orange.scss b/assets/css/color/orange.scss
new file mode 100644
index 0000000..5a6ab3c
--- /dev/null
+++ b/assets/css/color/orange.scss
@@ -0,0 +1 @@
+$accent: #FFA86A;
diff --git a/assets/css/color/pink.css b/assets/css/color/pink.css
deleted file mode 100644
index d09d434..0000000
--- a/assets/css/color/pink.css
+++ /dev/null
@@ -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);
diff --git a/assets/css/color/pink.scss b/assets/css/color/pink.scss
new file mode 100644
index 0000000..fce2e73
--- /dev/null
+++ b/assets/css/color/pink.scss
@@ -0,0 +1 @@
+$accent: #EE72F1;
diff --git a/assets/css/color/red.css b/assets/css/color/red.css
deleted file mode 100644
index 756435d..0000000
--- a/assets/css/color/red.css
+++ /dev/null
@@ -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);
diff --git a/assets/css/color/red.scss b/assets/css/color/red.scss
new file mode 100644
index 0000000..1f9bd6e
--- /dev/null
+++ b/assets/css/color/red.scss
@@ -0,0 +1 @@
+$accent: #FF6266;
diff --git a/assets/css/font.css b/assets/css/font.scss
similarity index 100%
rename from assets/css/font.css
rename to assets/css/font.scss
diff --git a/assets/css/footer.css b/assets/css/footer.scss
similarity index 85%
rename from assets/css/footer.css
rename to assets/css/footer.scss
index bac4ec0..7079663 100644
--- a/assets/css/footer.css
+++ b/assets/css/footer.scss
@@ -11,7 +11,7 @@
width: 760px;
max-width: 100%;
- @media (--tablet) {
+ @media ($tablet) {
flex-direction: column;
}
}
@@ -25,7 +25,6 @@
flex-direction: row;
align-items: center;
font-size: 1rem;
- color: var(--light-color-secondary);
&--user {
margin: auto;
@@ -35,14 +34,14 @@
& > *:first-child:not(:only-child) {
margin-right: 10px;
- @media (--tablet) {
+ @media ($tablet) {
border: none;
padding: 0;
margin: 0;
}
}
- @media (--tablet) {
+ @media ($tablet) {
flex-direction: column;
margin-top: 10px;
}
diff --git a/assets/css/form.css b/assets/css/form.scss
similarity index 50%
rename from assets/css/form.css
rename to assets/css/form.scss
index 5ff4738..13132c9 100644
--- a/assets/css/form.css
+++ b/assets/css/form.scss
@@ -1,15 +1,15 @@
input, textarea, select {
background: transparent;
- color: var(--accent);
- border: 1px solid var(--accent);
+ color: $accent;
+ border: 1px solid $accent;
border-radius: 0;
padding: 10px;
font: inherit;
appearance: none;
&:focus, :active {
- border-color: var(--color);
- outline: 1px solid var(--color);
+ border-color: $color;
+ outline: 1px solid $color;
}
&:active {
@@ -18,13 +18,13 @@ input, textarea, select {
}
select {
- background: var(--background);
+ background: $background;
option {
- background: var(--background);
+ background: $background;
}
}
::placeholder {
- color: color-mod(var(--accent) a(50%));
+ color: color-mod($accent) a(50%);
}
diff --git a/assets/css/gist.css b/assets/css/gist.scss
similarity index 100%
rename from assets/css/gist.css
rename to assets/css/gist.scss
diff --git a/assets/css/header.css b/assets/css/header.scss
similarity index 76%
rename from assets/css/header.css
rename to assets/css/header.scss
index e8f9da3..87d02d9 100644
--- a/assets/css/header.css
+++ b/assets/css/header.scss
@@ -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;
- background: var(--background);
- box-shadow: var(--shadow);
+ background: $background;
+ box-shadow: $shadow;
color: white;
border: 2px solid;
margin: 0;
@@ -31,7 +33,7 @@
&:after {
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;
width: 100%;
right: 10px;
@@ -45,14 +47,16 @@
}
.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;
- @media (--phone) {
- @mixin menu;
+ @media ($phone) {
+ @include menu;
top: 50px;
right: 0;
+
+ &.hidden-on-mobile {
+ display: none;
+ }
}
&__inner {
@@ -63,7 +67,7 @@
padding: 0;
&--desktop {
- @media (--phone) {
+ @media ($phone) {
display: none;
}
}
@@ -71,7 +75,7 @@
&--mobile {
display: none;
- @media (--phone) {
+ @media ($phone) {
display: block;
}
}
@@ -84,7 +88,7 @@
}
}
- @media (--phone) {
+ @media ($phone) {
flex-direction: column;
align-items: flex-start;
padding: 0;
@@ -107,12 +111,12 @@
}
&-more {
- @mixin menu;
+ @include menu;
top: 35px;
left: 0;
&-trigger {
- color: var(--accent);
+ color: $accent;
user-select: none;
cursor: pointer;
}
@@ -138,26 +142,31 @@
list-style-type: none;
display: flex;
flex-direction: row;
- color: var(--accent);
+ color: $accent;
cursor: pointer;
margin: 0;
}
&__more {
- @mixin menu;
+ @include menu;
top: 35px;
right: 0;
}
}
&-trigger {
- color: var(--accent);
+ display: none;
+ color: $accent;
border: 2px solid;
margin-left: 10px;
height: 100%;
padding: 3px 8px;
position: relative;
cursor: pointer;
+
+ @media ($phone) {
+ display: block;
+ }
}
}
}
diff --git a/assets/css/logo.css b/assets/css/logo.scss
similarity index 79%
rename from assets/css/logo.css
rename to assets/css/logo.scss
index d455cc7..33c7fef 100644
--- a/assets/css/logo.css
+++ b/assets/css/logo.scss
@@ -2,7 +2,7 @@
display: flex;
align-items: center;
text-decoration: none;
- background: var(--accent);
+ background: $accent;
color: black;
padding: 5px 10px;
}
diff --git a/assets/css/main.css b/assets/css/main.scss
similarity index 83%
rename from assets/css/main.css
rename to assets/css/main.scss
index 8929ea1..56ab5be 100644
--- a/assets/css/main.css
+++ b/assets/css/main.scss
@@ -15,8 +15,8 @@ body {
font-size: 1rem;
line-height: 1.54;
letter-spacing: -0.02em;
- background-color: color-mod(var(--accent) blend(#1D1E28 98%));
- color: var(--color);
+ background-color: $background;
+ color: $color;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
font-feature-settings: "liga", "tnum", "zero", "ss01", "locl";
@@ -24,7 +24,7 @@ body {
-webkit-overflow-scrolling: touch;
-webkit-text-size-adjust: 100%;
- @media (--phone) {
+ @media ($phone) {
font-size: 1rem;
}
}
@@ -61,7 +61,7 @@ a {
/* Waiting for a better times... */
/* &:has(code) {
- text-decoration-color: var(--accent);
+ text-decoration-color: $accent;
} */
}
@@ -109,8 +109,8 @@ figure {
font-size: 14px;
padding: 5px 10px;
margin-top: 5px;
- background: var(--accent);
- color: var(--background);
+ background: $accent;
+ color: $background;
/* opacity: .8; */
&.left {
@@ -130,8 +130,8 @@ figure {
code, kbd {
font-family: 'Fira Code', Monaco, Consolas, Ubuntu Mono, monospace !important;
font-feature-settings: normal;
- background: color-mod(var(--accent) a(20%));
- color: var(--accent);
+ background: color-mod($accent) a(20%);
+ color: $accent;
padding: 1px 6px;
margin: 0 2px;
font-size: .95rem;
@@ -157,7 +157,7 @@ pre {
margin-top: -40px;
}
- @media (--phone) {
+ @media ($phone) {
white-space: pre-wrap;
word-wrap: break-word;
}
@@ -172,12 +172,12 @@ pre {
}
blockquote {
- border-top: 1px solid var(--accent);
- border-bottom: 1px solid var(--accent);
+ border-top: 1px solid $accent;
+ border-bottom: 1px solid $accent;
margin: 40px 0;
padding: 25px;
- @media (--phone) {
+ @media ($phone) {
padding-right: 0;
}
@@ -198,15 +198,15 @@ blockquote {
display: block;
position: absolute;
left: -25px;
- color: var(--accent);
+ color: $accent;
}
&.twitter-tweet {
position: relative;
- background: color-mod(var(--accent) a(10%));
+ background: color-mod($accent) a(10%);
font: inherit;
color: inherit;
- border: 1px solid var(--accent);
+ border: 1px solid $accent;
padding-top: 60px;
p:before {
@@ -217,12 +217,12 @@ blockquote {
content: '> From Twitter:';
position: absolute;
top: 20px;
- color: var(--accent);
+ color: $accent;
font-weight: bold;
}
a {
- color: var(--accent);
+ color: $accent;
}
}
}
@@ -237,12 +237,12 @@ table {
table,
th,
td {
- border: 1px dashed var(--accent);
+ border: 1px dashed $accent;
padding: 10px;
}
th {
- color: var(--accent);
+ color: $accent;
}
ul,
@@ -254,7 +254,7 @@ ol {
position: relative;
}
- @media (--phone) {
+ @media ($phone) {
margin-left: 20px;
}
}
@@ -271,7 +271,7 @@ ol {
content: counter(li);
position: absolute;
right: calc(100% + 10px);
- color: var(--accent);
+ color: $accent;
display: inline-block;
text-align: right;
}
@@ -290,8 +290,8 @@ ol {
}
mark {
- background: var(--accent);
- color: var(--background);
+ background: $accent;
+ color: $background;
}
.container {
@@ -312,7 +312,7 @@ mark {
max-width: 100%;
}
- @media (--phone) {
+ @media ($phone) {
padding: 20px;
}
@@ -333,7 +333,7 @@ mark {
hr {
width: 100%;
border: none;
- background: var(--border-color);
+ background: $border-color;
height: 1px;
}
diff --git a/assets/css/pagination.css b/assets/css/pagination.scss
similarity index 95%
rename from assets/css/pagination.css
rename to assets/css/pagination.scss
index 30dbadc..11f77ac 100644
--- a/assets/css/pagination.css
+++ b/assets/css/pagination.scss
@@ -15,7 +15,7 @@
text-align: center;
margin: 0 auto;
padding: 5px 10px;
- background: color-mod(var(--accent) blend(#1D1E28 98%));
+ background: mix($accent, #1D1E28, 98%);
font-size: .8rem;
text-transform: uppercase;
text-decoration: none;
diff --git a/assets/css/post.css b/assets/css/post.scss
similarity index 74%
rename from assets/css/post.css
rename to assets/css/post.scss
index 37155bc..106fa21 100644
--- a/assets/css/post.css
+++ b/assets/css/post.scss
@@ -3,7 +3,7 @@
}
.framed {
- border: 1px solid var(--accent);
+ border: 1px solid $accent;
padding: 20px;
*:first-child {
@@ -25,27 +25,23 @@
margin: 20px auto;
padding: 20px 0;
- @media (--tablet) {
- max-width: 660px;
- }
-
&:not(:last-of-type) {
- border-bottom: 1px solid var(--border-color);
+ border-bottom: 1px solid $border-color;
}
&-meta {
font-size: 1rem;
margin-bottom: 10px;
- color: color-mod(var(--accent) a(70%));
+ color: opcift($accent, 70%);
}
&-title {
- --border: 3px dotted var(--accent);
+ $border: 3px dotted $accent;
position: relative;
- color: var(--accent);
+ color: $accent;
margin: 0 0 15px;
padding-bottom: 15px;
- border-bottom: var(--border);
+ border-bottom: $border;
&:after {
content: '';
@@ -53,7 +49,7 @@
bottom: 2px;
display: block;
width: 100%;
- border-bottom: var(--border);
+ border-bottom: $border;
}
a {
@@ -77,12 +73,12 @@
}
&-cover {
- border: 20px solid var(--accent);
+ border: 20px solid $accent;
background: transparent;
margin: 40px 0;
padding: 20px;
- @media (--phone) {
+ @media ($phone) {
padding: 10px;
border-width: 10px;
}
@@ -95,7 +91,7 @@
content: '-';
position: absolute;
left: -20px;
- color: var(--accent);
+ color: $accent;
}
}
}
@@ -117,7 +113,7 @@
}
.hanchor {
- color: color-mod(var(--accent) alpha(90%));
+ color: opacify($accent, .9);
text-decoration: none;
margin-left: 10px;
visibility: hidden;
@@ -128,5 +124,5 @@ h1:hover a, h2:hover a, h3:hover a, h4:hover a {
}
.footnotes {
- color: color-mod(var(--color) alpha(50%));
+ color: opacify($color, .5);
}
diff --git a/assets/css/prism.css b/assets/css/prism.scss
similarity index 100%
rename from assets/css/prism.css
rename to assets/css/prism.scss
diff --git a/assets/css/style.css b/assets/css/style.css
deleted file mode 100644
index 240cde0..0000000
--- a/assets/css/style.css
+++ /dev/null
@@ -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';
diff --git a/assets/css/style.scss b/assets/css/style.scss
new file mode 100644
index 0000000..ccdb8a8
--- /dev/null
+++ b/assets/css/style.scss
@@ -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";
diff --git a/assets/css/syntax.css b/assets/css/syntax.scss
similarity index 88%
rename from assets/css/syntax.css
rename to assets/css/syntax.scss
index 95604ef..f5576e8 100644
--- a/assets/css/syntax.css
+++ b/assets/css/syntax.scss
@@ -17,7 +17,7 @@ code.language-scss,
.token.number,
.token.inserted,
.token.important {
- color: var(--accent) !important;
+ color: $accent !important;
}
.token.tag-id,
@@ -34,7 +34,7 @@ code.language-scss,
.token.class-name,
.token.constant,
.token.symbol {
- color: color-mod(var(--accent) a(70%)) !important;
+ color: opacify($accent, .7) !important;
}
.token.property,
@@ -44,7 +44,7 @@ code.language-scss,
code.language-javascript,
code.language-html,
.command-line-prompt > span:before {
- color: color-mod(var(--accent) blend(#999 90%)) !important;
+ color: mix($accent, #999, .9) !important;
}
.token.selector,
@@ -80,7 +80,7 @@ pre[class*="language-"] {
right: 0;
padding: 0;
margin: 0;
- background: color-mod(var(--accent) blend(#999 90%) a(8%));
+ background: opacify(mix($accent, #999, 90%), .08);
pointer-events: none;
line-height: inherit;
white-space: pre;
@@ -116,9 +116,9 @@ pre[class*="language-"] {
}
.code-toolbar {
- --code-margin: 40px;
+ $code-margin: 40px;
position: relative;
- margin: var(--code-margin) 0;
+ margin: $code-margin 0;
padding: 20px;
border: 1px solid rgba(255, 255, 255, .1);
@@ -126,7 +126,7 @@ pre[class*="language-"] {
+ .highlight,
+ .highlight .code-toolbar {
border-top: 0;
- margin-top: calc(-1 * var(--code-margin));
+ margin-top: calc(-1 * $code-margin);
}
pre, code {
diff --git a/assets/css/terms.css b/assets/css/terms.scss
similarity index 69%
rename from assets/css/terms.css
rename to assets/css/terms.scss
index 794e2fa..0c9a61b 100644
--- a/assets/css/terms.css
+++ b/assets/css/terms.scss
@@ -1,6 +1,6 @@
.terms {
h1 {
- color: var(--accent);
+ color: $accent;
}
h3 {
diff --git a/assets/css/variables.scss b/assets/css/variables.scss
new file mode 100644
index 0000000..6c2c35e
--- /dev/null
+++ b/assets/css/variables.scss
@@ -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);
+}
diff --git a/layouts/partials/head.html b/layouts/partials/head.html
index 3b4efd4..5596edb 100644
--- a/layouts/partials/head.html
+++ b/layouts/partials/head.html
@@ -8,25 +8,25 @@
{{ template "_internal/google_analytics.html" . }}
<!-- Local Theme Variables -->
-{{ $defaultStyles := resources.Get "css/style.css" }}
+{{ $defaultStyles := resources.Get "css/style.scss" }}
{{ if (isset .Params "color") }}
- {{ $localColorCss := resources.Get (printf "css/color/%s.css" .Params.color) }}
- {{ $localCss := slice $defaultStyles $localColorCss | resources.Concat (printf "css/%s-local.css" .Params.color) }}
- {{ $localColorStyles := $localCss | resources.ToCSS | resources.PostCSS }}
+ {{ $localColorCss := resources.Get (printf "css/color/%s.scss" .Params.color) }}
+ {{ $localCss := slice $localColorCss $defaultStyles | resources.Concat (printf "css/%s-local.scss" .Params.color) }}
+ {{ $localColorStyles := $localCss | resources.ToCSS }}
<link rel="stylesheet" href="{{ $localColorStyles.RelPermalink }}">
{{ else }}
<!-- Theme Variables -->
- {{ $colorCss := resources.Get (printf "css/color/%s.css" ($.Site.Params.ThemeColor | default "orange")) }}
- {{ $css := slice $defaultStyles $colorCss | resources.Concat "css/base.css" }}
+ {{ $colorCss := resources.Get (printf "css/color/%s.scss" ($.Site.Params.ThemeColor | default "orange")) }}
+ {{ $css := slice $colorCss $defaultStyles | resources.Concat "css/base.scss" }}
{{ $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 }}">
{{ end }}
-<!-- Custom CSS to override theme properties (/static/style.css) -->
-{{ if (fileExists "static/style.css") -}}
- <link rel="stylesheet" href="{{ "style.css" | absURL }}">
+<!-- Custom CSS to override theme properties (/static/style.scss) -->
+{{ if (fileExists "static/style.scss") -}}
+ <link rel="stylesheet" href="{{ "style.scss" | absURL }}">
{{- end }}
<!-- Icons -->