commit 7f097d7700c273458612386bc5887119efd32fd7
parent 56791937ff83c804d1776d850fb4b413d52a53d0
Author: panr <radoslaw.koziel@gmail.com>
Date: Tue, 21 Jun 2022 17:14:59 +0200
refactor from PostCSS to SASS
Diffstat:
39 files changed, 1206 insertions(+), 1246 deletions(-)
diff --git a/assets/css/buttons.css b/assets/css/buttons.css
@@ -1,94 +0,0 @@
-.button-container {
- display: table;
- margin-left: auto;
- margin-right: auto;
-}
-
-button,
-.button,
-a.button {
- position: relative;
- display: flex;
- align-items: center;
- justify-content: center;
- padding: 8px 18px;
- margin-bottom: 5px;
- text-decoration: none;
- text-align: center;
- border-radius: 0;
- border: 1px solid var(--accent);
- background: var(--accent);
- font: inherit;
- font-weight: bold;
- appearance: none;
- cursor: pointer;
- outline: none;
-
- &:hover {
- background: color-mod(var(--accent) a(90%));
- }
-
- /* variants */
-
- &.outline {
- background: transparent;
- box-shadow: none;
- padding: 8px 18px;
-
- :hover {
- transform: none;
- box-shadow: none;
- }
- }
-
- &.link {
- background: none;
- font-size: 1rem;
- }
-
- /* sizes */
-
- &.small {
- font-size: .8rem;
- }
-
- &.wide {
- min-width: 200px;
- padding: 14px 24px;
- }
-}
-
-a.read-more,
-a.read-more:hover,
-a.read-more:active {
- display: inline-flex;
- border: none;
- color: var(--accent);
- background: none;
- box-shadow: none;
- padding: 0;
- margin: 20px 0;
- max-width: 100%;
-}
-
-.code-toolbar {
- margin-bottom: 20px;
-
- .toolbar-item a {
- position: relative;
- display: inline-flex;
- align-items: center;
- justify-content: center;
- padding: 3px 8px;
- margin-bottom: 5px;
- text-decoration: none;
- text-align: center;
- font-size: 13px;
- font-weight: 500;
- border-radius: 8px;
- border: 1px solid transparent;
- appearance: none;
- cursor: pointer;
- outline: none;
- }
-}
diff --git a/assets/css/buttons.scss b/assets/css/buttons.scss
@@ -0,0 +1,94 @@
+.button-container {
+ display: table;
+ margin-left: auto;
+ margin-right: auto;
+}
+
+button,
+.button,
+a.button {
+ position: relative;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ padding: 8px 18px;
+ margin-bottom: 5px;
+ text-decoration: none;
+ text-align: center;
+ border-radius: 0;
+ border: 1px solid $accent;
+ background: $accent;
+ font: inherit;
+ font-weight: bold;
+ appearance: none;
+ cursor: pointer;
+ outline: none;
+
+ &:hover {
+ background: opacify($accent, .9);
+ }
+
+ /* variants */
+
+ &.outline {
+ background: transparent;
+ box-shadow: none;
+ padding: 8px 18px;
+
+ :hover {
+ transform: none;
+ box-shadow: none;
+ }
+ }
+
+ &.link {
+ background: none;
+ font-size: 1rem;
+ }
+
+ /* sizes */
+
+ &.small {
+ font-size: .8rem;
+ }
+
+ &.wide {
+ min-width: 200px;
+ padding: 14px 24px;
+ }
+}
+
+a.read-more,
+a.read-more:hover,
+a.read-more:active {
+ display: inline-flex;
+ border: none;
+ color: $accent;
+ background: none;
+ box-shadow: none;
+ padding: 0;
+ margin: 20px 0;
+ max-width: 100%;
+}
+
+.code-toolbar {
+ margin-bottom: 20px;
+
+ .toolbar-item a {
+ position: relative;
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ padding: 3px 8px;
+ margin-bottom: 5px;
+ text-decoration: none;
+ text-align: center;
+ font-size: 13px;
+ font-weight: 500;
+ border-radius: 8px;
+ border: 1px solid transparent;
+ appearance: none;
+ cursor: pointer;
+ outline: none;
+ }
+}
diff --git a/assets/css/code.css b/assets/css/code.css
@@ -1,84 +0,0 @@
-.collapsable-code {
- --border-color: color-mod(var(--accent) blend(#999 90%));
-
- position: relative;
- width: 100%;
- margin: 40px 0;
-
- input[type="checkbox"] {
- position: absolute;
- visibility: hidden;
- }
-
- input[type="checkbox"]:checked {
- ~ pre,
- ~ .code-toolbar pre {
- height: 0;
- padding: 0;
- border-top: none;
- }
-
- ~ .code-toolbar {
- padding: 0;
- border-top: none;
-
- .toolbar {
- display: none;
- }
- }
-
- ~ label .collapsable-code__toggle:after {
- content: attr(data-label-expand);
- }
- }
-
- label {
- position: relative;
- display: flex;
- justify-content: space-between;
- min-width: 30px;
- min-height: 30px;
- margin: 0;
- border-bottom: 1px solid var(--border-color);
- cursor: pointer;
- }
-
- &__title {
- flex: 1;
- color: var(--accent);
- padding: 3px 10px;
- text-overflow: ellipsis;
- white-space: nowrap;
- overflow: hidden;
- }
-
- &__language {
- color: var(--accent);
- border: 1px solid var(--border-color);
- border-bottom: none;
- text-transform: uppercase;
- padding: 3px 10px;
- }
-
- &__toggle {
- color: var(--accent);
- font-size: 16px;
- padding: 3px 10px;
-
- &:after {
- content: attr(data-label-collapse);
- }
- }
-
- pre {
- margin-top: 0;
-
- &::first-line {
- line-height: 0;
- }
- }
-
- .code-toolbar {
- margin: 0;
- }
-}
diff --git a/assets/css/code.scss b/assets/css/code.scss
@@ -0,0 +1,84 @@
+.collapsable-code {
+ $border-color: mix($accent, #999, 90%);
+
+ position: relative;
+ width: 100%;
+ margin: 40px 0;
+
+ input[type="checkbox"] {
+ position: absolute;
+ visibility: hidden;
+ }
+
+ input[type="checkbox"]:checked {
+ ~ pre,
+ ~ .code-toolbar pre {
+ height: 0;
+ padding: 0;
+ border-top: none;
+ }
+
+ ~ .code-toolbar {
+ padding: 0;
+ border-top: none;
+
+ .toolbar {
+ display: none;
+ }
+ }
+
+ ~ label .collapsable-code__toggle:after {
+ content: attr(data-label-expand);
+ }
+ }
+
+ label {
+ position: relative;
+ display: flex;
+ justify-content: space-between;
+ min-width: 30px;
+ min-height: 30px;
+ margin: 0;
+ border-bottom: 1px solid $border-color;
+ cursor: pointer;
+ }
+
+ &__title {
+ flex: 1;
+ color: $accent;
+ padding: 3px 10px;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ overflow: hidden;
+ }
+
+ &__language {
+ color: $accent;
+ border: 1px solid $border-color;
+ border-bottom: none;
+ text-transform: uppercase;
+ padding: 3px 10px;
+ }
+
+ &__toggle {
+ color: $accent;
+ font-size: 16px;
+ padding: 3px 10px;
+
+ &:after {
+ content: attr(data-label-collapse);
+ }
+ }
+
+ pre {
+ margin-top: 0;
+
+ &::first-line {
+ line-height: 0;
+ }
+ }
+
+ .code-toolbar {
+ margin: 0;
+ }
+}
diff --git a/assets/css/color/blue.css b/assets/css/color/blue.css
@@ -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
@@ -0,0 +1 @@
+$accent: #23B0FF;
diff --git a/assets/css/color/green.css b/assets/css/color/green.css
@@ -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
@@ -0,0 +1 @@
+$accent: #78E2A0;
diff --git a/assets/css/color/orange.css b/assets/css/color/orange.css
@@ -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
@@ -0,0 +1 @@
+$accent: #FFA86A;
diff --git a/assets/css/color/pink.css b/assets/css/color/pink.css
@@ -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
@@ -0,0 +1 @@
+$accent: #EE72F1;
diff --git a/assets/css/color/red.css b/assets/css/color/red.css
@@ -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
@@ -0,0 +1 @@
+$accent: #FF6266;
diff --git a/assets/css/font.css b/assets/css/font.scss
diff --git a/assets/css/footer.css b/assets/css/footer.css
@@ -1,50 +0,0 @@
-.footer {
- padding: 40px 0;
- flex-grow: 0;
- opacity: .5;
-
- &__inner {
- display: flex;
- align-items: center;
- justify-content: space-between;
- margin: 0;
- width: 760px;
- max-width: 100%;
-
- @media (--tablet) {
- flex-direction: column;
- }
- }
-
- a {
- color: inherit;
- }
-
- .copyright {
- display: flex;
- flex-direction: row;
- align-items: center;
- font-size: 1rem;
- color: var(--light-color-secondary);
-
- &--user {
- margin: auto;
- text-align: center;
- }
-
- & > *:first-child:not(:only-child) {
- margin-right: 10px;
-
- @media (--tablet) {
- border: none;
- padding: 0;
- margin: 0;
- }
- }
-
- @media (--tablet) {
- flex-direction: column;
- margin-top: 10px;
- }
- }
-}
diff --git a/assets/css/footer.scss b/assets/css/footer.scss
@@ -0,0 +1,49 @@
+.footer {
+ padding: 40px 0;
+ flex-grow: 0;
+ opacity: .5;
+
+ &__inner {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ margin: 0;
+ width: 760px;
+ max-width: 100%;
+
+ @media ($tablet) {
+ flex-direction: column;
+ }
+ }
+
+ a {
+ color: inherit;
+ }
+
+ .copyright {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ font-size: 1rem;
+
+ &--user {
+ margin: auto;
+ text-align: center;
+ }
+
+ & > *:first-child:not(:only-child) {
+ margin-right: 10px;
+
+ @media ($tablet) {
+ border: none;
+ padding: 0;
+ margin: 0;
+ }
+ }
+
+ @media ($tablet) {
+ flex-direction: column;
+ margin-top: 10px;
+ }
+ }
+}
diff --git a/assets/css/form.css b/assets/css/form.css
@@ -1,30 +0,0 @@
-input, textarea, select {
- background: transparent;
- color: var(--accent);
- border: 1px solid var(--accent);
- border-radius: 0;
- padding: 10px;
- font: inherit;
- appearance: none;
-
- &:focus, :active {
- border-color: var(--color);
- outline: 1px solid var(--color);
- }
-
- &:active {
- box-shadow: none;
- }
-}
-
-select {
- background: var(--background);
-
- option {
- background: var(--background);
- }
-}
-
-::placeholder {
- color: color-mod(var(--accent) a(50%));
-}
diff --git a/assets/css/form.scss b/assets/css/form.scss
@@ -0,0 +1,30 @@
+input, textarea, select {
+ background: transparent;
+ color: $accent;
+ border: 1px solid $accent;
+ border-radius: 0;
+ padding: 10px;
+ font: inherit;
+ appearance: none;
+
+ &:focus, :active {
+ border-color: $color;
+ outline: 1px solid $color;
+ }
+
+ &:active {
+ box-shadow: none;
+ }
+}
+
+select {
+ background: $background;
+
+ option {
+ background: $background;
+ }
+}
+
+::placeholder {
+ color: color-mod($accent) a(50%);
+}
diff --git a/assets/css/gist.css b/assets/css/gist.scss
diff --git a/assets/css/header.css b/assets/css/header.css
@@ -1,163 +0,0 @@
-@define-mixin menu {
- position: absolute;
- background: var(--background);
- box-shadow: var(--shadow);
- color: white;
- border: 2px solid;
- margin: 0;
- padding: 10px;
- list-style: none;
- z-index: 99;
-}
-
-.header {
- display: flex;
- flex-direction: column;
- position: relative;
-
- @media print {
- display: none;
- }
-
- &__inner {
- display: flex;
- align-items: center;
- justify-content: space-between;
- }
-
- &__logo {
- display: flex;
- flex: 1;
-
- &:after {
- content: '';
- background: repeating-linear-gradient(90deg, var(--accent), var(--accent) 2px, transparent 0, transparent 10px);
- display: block;
- width: 100%;
- right: 10px;
- }
-
- a {
- flex: 0 0 auto;
- max-width: 100%;
- text-decoration: none;
- }
- }
-
- .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;
- top: 50px;
- right: 0;
- }
-
- &__inner {
- display: flex;
- flex-wrap: wrap;
- list-style: none;
- margin: 0;
- padding: 0;
-
- &--desktop {
- @media (--phone) {
- display: none;
- }
- }
-
- &--mobile {
- display: none;
-
- @media (--phone) {
- display: block;
- }
- }
-
- li {
- &:not(:last-of-type) {
- margin-right: 20px;
- margin-bottom: 10px;
- flex: 0 0 auto;
- }
- }
-
- @media (--phone) {
- flex-direction: column;
- align-items: flex-start;
- padding: 0;
-
- li {
- margin: 0;
- padding: 5px;
- }
- }
- }
-
- &__sub-inner {
- position: relative;
- list-style: none;
- padding: 0;
- margin: 0;
-
- &:not(:only-child) {
- margin-left: 20px;
- }
-
- &-more {
- @mixin menu;
- top: 35px;
- left: 0;
-
- &-trigger {
- color: var(--accent);
- user-select: none;
- cursor: pointer;
- }
-
- li {
- margin: 0;
- padding: 5px;
- white-space: nowrap;
- }
- }
- }
-
- .spacer {
- flex-grow: 1;
- }
-
- .language-selector {
- position: relative;
- list-style: none;
- margin: 0;
-
- &-current {
- list-style-type: none;
- display: flex;
- flex-direction: row;
- color: var(--accent);
- cursor: pointer;
- margin: 0;
- }
-
- &__more {
- @mixin menu;
- top: 35px;
- right: 0;
- }
- }
-
- &-trigger {
- color: var(--accent);
- border: 2px solid;
- margin-left: 10px;
- height: 100%;
- padding: 3px 8px;
- position: relative;
- cursor: pointer;
- }
- }
-}
diff --git a/assets/css/header.scss b/assets/css/header.scss
@@ -0,0 +1,172 @@
+@mixin menu {
+ $shadow-color: opacify($background, .8);
+ $shadow: 0 10px $shadow-color, -10px 10px $shadow-color, 10px 10px $shadow-color;
+ position: absolute;
+ background: $background;
+ box-shadow: $shadow;
+ color: white;
+ border: 2px solid;
+ margin: 0;
+ padding: 10px;
+ list-style: none;
+ z-index: 99;
+}
+
+.header {
+ display: flex;
+ flex-direction: column;
+ position: relative;
+
+ @media print {
+ display: none;
+ }
+
+ &__inner {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ }
+
+ &__logo {
+ display: flex;
+ flex: 1;
+
+ &:after {
+ content: '';
+ background: repeating-linear-gradient(90deg, $accent, $accent 2px, transparent 0, transparent 10px);
+ display: block;
+ width: 100%;
+ right: 10px;
+ }
+
+ a {
+ flex: 0 0 auto;
+ max-width: 100%;
+ text-decoration: none;
+ }
+ }
+
+ .menu {
+ margin: 20px 1px;
+
+ @media ($phone) {
+ @include menu;
+ top: 50px;
+ right: 0;
+
+ &.hidden-on-mobile {
+ display: none;
+ }
+ }
+
+ &__inner {
+ display: flex;
+ flex-wrap: wrap;
+ list-style: none;
+ margin: 0;
+ padding: 0;
+
+ &--desktop {
+ @media ($phone) {
+ display: none;
+ }
+ }
+
+ &--mobile {
+ display: none;
+
+ @media ($phone) {
+ display: block;
+ }
+ }
+
+ li {
+ &:not(:last-of-type) {
+ margin-right: 20px;
+ margin-bottom: 10px;
+ flex: 0 0 auto;
+ }
+ }
+
+ @media ($phone) {
+ flex-direction: column;
+ align-items: flex-start;
+ padding: 0;
+
+ li {
+ margin: 0;
+ padding: 5px;
+ }
+ }
+ }
+
+ &__sub-inner {
+ position: relative;
+ list-style: none;
+ padding: 0;
+ margin: 0;
+
+ &:not(:only-child) {
+ margin-left: 20px;
+ }
+
+ &-more {
+ @include menu;
+ top: 35px;
+ left: 0;
+
+ &-trigger {
+ color: $accent;
+ user-select: none;
+ cursor: pointer;
+ }
+
+ li {
+ margin: 0;
+ padding: 5px;
+ white-space: nowrap;
+ }
+ }
+ }
+
+ .spacer {
+ flex-grow: 1;
+ }
+
+ .language-selector {
+ position: relative;
+ list-style: none;
+ margin: 0;
+
+ &-current {
+ list-style-type: none;
+ display: flex;
+ flex-direction: row;
+ color: $accent;
+ cursor: pointer;
+ margin: 0;
+ }
+
+ &__more {
+ @include menu;
+ top: 35px;
+ right: 0;
+ }
+ }
+
+ &-trigger {
+ 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.css
@@ -1,8 +0,0 @@
-.logo {
- display: flex;
- align-items: center;
- text-decoration: none;
- background: var(--accent);
- color: black;
- padding: 5px 10px;
-}
diff --git a/assets/css/logo.scss b/assets/css/logo.scss
@@ -0,0 +1,8 @@
+.logo {
+ display: flex;
+ align-items: center;
+ text-decoration: none;
+ background: $accent;
+ color: black;
+ padding: 5px 10px;
+}
diff --git a/assets/css/main.css b/assets/css/main.css
@@ -1,346 +0,0 @@
-html {
- box-sizing: border-box;
-}
-
-*,
-*:before,
-*:after {
- box-sizing: inherit;
-}
-
-body {
- margin: 0;
- padding: 0;
- font-family: 'Fira Code', Monaco, Consolas, Ubuntu Mono, monospace;
- font-size: 1rem;
- line-height: 1.54;
- letter-spacing: -0.02em;
- background-color: color-mod(var(--accent) blend(#1D1E28 98%));
- color: var(--color);
- text-rendering: optimizeLegibility;
- -webkit-font-smoothing: antialiased;
- font-feature-settings: "liga", "tnum", "zero", "ss01", "locl";
- font-variant-ligatures: contextual;
- -webkit-overflow-scrolling: touch;
- -webkit-text-size-adjust: 100%;
-
- @media (--phone) {
- font-size: 1rem;
- }
-}
-
-.headings--one-size {
- h1,
- h2,
- h3,
- h4,
- h5,
- h6 {
- line-height: 1.3;
-
- &:not(first-child) {
- margin-top: 40px;
- }
- }
-
- h1,
- h2,
- h3 {
- font-size: 1.4rem;
- }
-
- h4,
- h5,
- h6 {
- font-size: 1.2rem;
- }
-}
-
-a {
- color: inherit;
-
- /* Waiting for a better times... */
- /* &:has(code) {
- text-decoration-color: var(--accent);
- } */
-}
-
-img {
- display: block;
- max-width: 100%;
-
- &.left {
- margin-right: auto;
- }
-
- &.center {
- margin-left: auto;
- margin-right: auto;
- }
-
- &.right {
- margin-left: auto;
- }
-}
-
-p {
- margin-bottom: 20px;
-}
-
-figure {
- display: table;
- max-width: 100%;
- margin: 25px 0;
-
- &.left {
- margin-right: auto;
- }
-
- &.center {
- margin-left: auto;
- margin-right: auto;
- }
-
- &.right {
- margin-left: auto;
- }
-
- figcaption {
- font-size: 14px;
- padding: 5px 10px;
- margin-top: 5px;
- background: var(--accent);
- color: var(--background);
- /* opacity: .8; */
-
- &.left {
- text-align: left;
- }
-
- &.center {
- text-align: center;
- }
-
- &.right {
- text-align: right;
- }
- }
-}
-
-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);
- padding: 1px 6px;
- margin: 0 2px;
- font-size: .95rem;
-
- code, kbd {
- background: transparent;
- padding: 0;
- margin: 0;
- }
-}
-
-pre {
- background: transparent !important;
- padding: 20px 10px;
- margin: 40px 0;
- font-size: .95rem !important;
- overflow: auto;
- border-top: 1px solid rgba(255, 255, 255, .1);
- border-bottom: 1px solid rgba(255, 255, 255, .1);
-
- + pre {
- border-top: 0;
- margin-top: -40px;
- }
-
- @media (--phone) {
- white-space: pre-wrap;
- word-wrap: break-word;
- }
-
- code {
- background: none !important;
- margin: 0;
- padding: 0;
- font-size: inherit;
- border: none;
- }
-}
-
-blockquote {
- border-top: 1px solid var(--accent);
- border-bottom: 1px solid var(--accent);
- margin: 40px 0;
- padding: 25px;
-
- @media (--phone) {
- padding-right: 0;
- }
-
- p:first-of-type {
- margin-top: 0;
- }
-
- p:last-of-type {
- margin-bottom: 0;
- }
-
- p {
- position: relative;
- }
-
- p:first-of-type:before {
- content: '>';
- display: block;
- position: absolute;
- left: -25px;
- color: var(--accent);
- }
-
- &.twitter-tweet {
- position: relative;
- background: color-mod(var(--accent) a(10%));
- font: inherit;
- color: inherit;
- border: 1px solid var(--accent);
- padding-top: 60px;
-
- p:before {
- content: '';
- }
-
- &:before {
- content: '> From Twitter:';
- position: absolute;
- top: 20px;
- color: var(--accent);
- font-weight: bold;
- }
-
- a {
- color: var(--accent);
- }
- }
-}
-
-table {
- table-layout: auto;
- border-collapse: collapse;
- width: 100%;
- margin: 40px 0;
-}
-
-table,
-th,
-td {
- border: 1px dashed var(--accent);
- padding: 10px;
-}
-
-th {
- color: var(--accent);
-}
-
-ul,
-ol {
- margin-left: 22px;
- padding: 0;
-
- li {
- position: relative;
- }
-
- @media (--phone) {
- margin-left: 20px;
- }
-}
-
-ol {
- list-style: none;
- counter-reset: li;
-
- li {
- counter-increment: li;
- }
-
- li:before {
- content: counter(li);
- position: absolute;
- right: calc(100% + 10px);
- color: var(--accent);
- display: inline-block;
- text-align: right;
- }
-
- ol {
- margin-left: 38px;
-
- li {
- counter-increment: li;
- }
-
- li:before {
- content: counters(li, ".") " ";
- }
- }
-}
-
-mark {
- background: var(--accent);
- color: var(--background);
-}
-
-.container {
- display: flex;
- flex-direction: column;
- padding: 40px;
- max-width: 864px;
- min-height: 100vh;
- border-right: 1px solid rgba(255, 255, 255, 0.1);
-
- &.full,
- &.center {
- border: none;
- margin: 0 auto;
- }
-
- &.full {
- max-width: 100%;
- }
-
- @media (--phone) {
- padding: 20px;
- }
-
- @media print {
- display: initial;
- }
-}
-
-.content {
- display: flex;
- flex-direction: column;
-
- @media print {
- display: initial;
- }
-}
-
-hr {
- width: 100%;
- border: none;
- background: var(--border-color);
- height: 1px;
-}
-
-.hidden {
- display: none;
-}
-
-sup {
- line-height: 0;
-}
diff --git a/assets/css/main.scss b/assets/css/main.scss
@@ -0,0 +1,346 @@
+html {
+ box-sizing: border-box;
+}
+
+*,
+*:before,
+*:after {
+ box-sizing: inherit;
+}
+
+body {
+ margin: 0;
+ padding: 0;
+ font-family: 'Fira Code', Monaco, Consolas, Ubuntu Mono, monospace;
+ font-size: 1rem;
+ line-height: 1.54;
+ letter-spacing: -0.02em;
+ background-color: $background;
+ color: $color;
+ text-rendering: optimizeLegibility;
+ -webkit-font-smoothing: antialiased;
+ font-feature-settings: "liga", "tnum", "zero", "ss01", "locl";
+ font-variant-ligatures: contextual;
+ -webkit-overflow-scrolling: touch;
+ -webkit-text-size-adjust: 100%;
+
+ @media ($phone) {
+ font-size: 1rem;
+ }
+}
+
+.headings--one-size {
+ h1,
+ h2,
+ h3,
+ h4,
+ h5,
+ h6 {
+ line-height: 1.3;
+
+ &:not(first-child) {
+ margin-top: 40px;
+ }
+ }
+
+ h1,
+ h2,
+ h3 {
+ font-size: 1.4rem;
+ }
+
+ h4,
+ h5,
+ h6 {
+ font-size: 1.2rem;
+ }
+}
+
+a {
+ color: inherit;
+
+ /* Waiting for a better times... */
+ /* &:has(code) {
+ text-decoration-color: $accent;
+ } */
+}
+
+img {
+ display: block;
+ max-width: 100%;
+
+ &.left {
+ margin-right: auto;
+ }
+
+ &.center {
+ margin-left: auto;
+ margin-right: auto;
+ }
+
+ &.right {
+ margin-left: auto;
+ }
+}
+
+p {
+ margin-bottom: 20px;
+}
+
+figure {
+ display: table;
+ max-width: 100%;
+ margin: 25px 0;
+
+ &.left {
+ margin-right: auto;
+ }
+
+ &.center {
+ margin-left: auto;
+ margin-right: auto;
+ }
+
+ &.right {
+ margin-left: auto;
+ }
+
+ figcaption {
+ font-size: 14px;
+ padding: 5px 10px;
+ margin-top: 5px;
+ background: $accent;
+ color: $background;
+ /* opacity: .8; */
+
+ &.left {
+ text-align: left;
+ }
+
+ &.center {
+ text-align: center;
+ }
+
+ &.right {
+ text-align: right;
+ }
+ }
+}
+
+code, kbd {
+ font-family: 'Fira Code', Monaco, Consolas, Ubuntu Mono, monospace !important;
+ font-feature-settings: normal;
+ background: color-mod($accent) a(20%);
+ color: $accent;
+ padding: 1px 6px;
+ margin: 0 2px;
+ font-size: .95rem;
+
+ code, kbd {
+ background: transparent;
+ padding: 0;
+ margin: 0;
+ }
+}
+
+pre {
+ background: transparent !important;
+ padding: 20px 10px;
+ margin: 40px 0;
+ font-size: .95rem !important;
+ overflow: auto;
+ border-top: 1px solid rgba(255, 255, 255, .1);
+ border-bottom: 1px solid rgba(255, 255, 255, .1);
+
+ + pre {
+ border-top: 0;
+ margin-top: -40px;
+ }
+
+ @media ($phone) {
+ white-space: pre-wrap;
+ word-wrap: break-word;
+ }
+
+ code {
+ background: none !important;
+ margin: 0;
+ padding: 0;
+ font-size: inherit;
+ border: none;
+ }
+}
+
+blockquote {
+ border-top: 1px solid $accent;
+ border-bottom: 1px solid $accent;
+ margin: 40px 0;
+ padding: 25px;
+
+ @media ($phone) {
+ padding-right: 0;
+ }
+
+ p:first-of-type {
+ margin-top: 0;
+ }
+
+ p:last-of-type {
+ margin-bottom: 0;
+ }
+
+ p {
+ position: relative;
+ }
+
+ p:first-of-type:before {
+ content: '>';
+ display: block;
+ position: absolute;
+ left: -25px;
+ color: $accent;
+ }
+
+ &.twitter-tweet {
+ position: relative;
+ background: color-mod($accent) a(10%);
+ font: inherit;
+ color: inherit;
+ border: 1px solid $accent;
+ padding-top: 60px;
+
+ p:before {
+ content: '';
+ }
+
+ &:before {
+ content: '> From Twitter:';
+ position: absolute;
+ top: 20px;
+ color: $accent;
+ font-weight: bold;
+ }
+
+ a {
+ color: $accent;
+ }
+ }
+}
+
+table {
+ table-layout: auto;
+ border-collapse: collapse;
+ width: 100%;
+ margin: 40px 0;
+}
+
+table,
+th,
+td {
+ border: 1px dashed $accent;
+ padding: 10px;
+}
+
+th {
+ color: $accent;
+}
+
+ul,
+ol {
+ margin-left: 22px;
+ padding: 0;
+
+ li {
+ position: relative;
+ }
+
+ @media ($phone) {
+ margin-left: 20px;
+ }
+}
+
+ol {
+ list-style: none;
+ counter-reset: li;
+
+ li {
+ counter-increment: li;
+ }
+
+ li:before {
+ content: counter(li);
+ position: absolute;
+ right: calc(100% + 10px);
+ color: $accent;
+ display: inline-block;
+ text-align: right;
+ }
+
+ ol {
+ margin-left: 38px;
+
+ li {
+ counter-increment: li;
+ }
+
+ li:before {
+ content: counters(li, ".") " ";
+ }
+ }
+}
+
+mark {
+ background: $accent;
+ color: $background;
+}
+
+.container {
+ display: flex;
+ flex-direction: column;
+ padding: 40px;
+ max-width: 864px;
+ min-height: 100vh;
+ border-right: 1px solid rgba(255, 255, 255, 0.1);
+
+ &.full,
+ &.center {
+ border: none;
+ margin: 0 auto;
+ }
+
+ &.full {
+ max-width: 100%;
+ }
+
+ @media ($phone) {
+ padding: 20px;
+ }
+
+ @media print {
+ display: initial;
+ }
+}
+
+.content {
+ display: flex;
+ flex-direction: column;
+
+ @media print {
+ display: initial;
+ }
+}
+
+hr {
+ width: 100%;
+ border: none;
+ background: $border-color;
+ height: 1px;
+}
+
+.hidden {
+ display: none;
+}
+
+sup {
+ line-height: 0;
+}
diff --git a/assets/css/pagination.css b/assets/css/pagination.css
@@ -1,86 +0,0 @@
-.pagination {
- margin-top: 50px;
-
- @media print {
- display: none;
- }
-
- &__title {
- display: flex;
- text-align: center;
- position: relative;
- margin: 100px 0 20px;
-
- &-h {
- text-align: center;
- margin: 0 auto;
- padding: 5px 10px;
- background: color-mod(var(--accent) blend(#1D1E28 98%));
- font-size: .8rem;
- text-transform: uppercase;
- text-decoration: none;
- letter-spacing: .1em;
- z-index: 1;
- }
-
- hr {
- position: absolute;
- left: 0;
- right: 0;
- width: 100%;
- margin-top: 15px;
- z-index: 0;
- }
- }
-
- &__buttons {
- display: flex;
- align-items: center;
- justify-content: center;
-
- a {
- text-decoration: none;
- }
- }
-}
-
-.button {
- position: relative;
- display: inline-flex;
- flex: 1;
- align-items: center;
- justify-content: center;
- font-size: 1rem;
- border-radius: 8px;
- padding: 0;
- cursor: pointer;
- appearance: none;
- overflow: hidden;
-
- + .button {
- margin-left: 10px;
- }
-
- a {
- display: flex;
- padding: 8px 16px;
- text-decoration: none;
- text-overflow: ellipsis;
- white-space: nowrap;
- overflow: hidden;
- }
-
- &__text {
- text-overflow: ellipsis;
- white-space: nowrap;
- overflow: hidden;
- }
-
- &.next .button__icon {
- margin-left: 8px;
- }
-
- &.previous .button__icon {
- margin-right: 8px;
- }
-}
diff --git a/assets/css/pagination.scss b/assets/css/pagination.scss
@@ -0,0 +1,86 @@
+.pagination {
+ margin-top: 50px;
+
+ @media print {
+ display: none;
+ }
+
+ &__title {
+ display: flex;
+ text-align: center;
+ position: relative;
+ margin: 100px 0 20px;
+
+ &-h {
+ text-align: center;
+ margin: 0 auto;
+ padding: 5px 10px;
+ background: mix($accent, #1D1E28, 98%);
+ font-size: .8rem;
+ text-transform: uppercase;
+ text-decoration: none;
+ letter-spacing: .1em;
+ z-index: 1;
+ }
+
+ hr {
+ position: absolute;
+ left: 0;
+ right: 0;
+ width: 100%;
+ margin-top: 15px;
+ z-index: 0;
+ }
+ }
+
+ &__buttons {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ a {
+ text-decoration: none;
+ }
+ }
+}
+
+.button {
+ position: relative;
+ display: inline-flex;
+ flex: 1;
+ align-items: center;
+ justify-content: center;
+ font-size: 1rem;
+ border-radius: 8px;
+ padding: 0;
+ cursor: pointer;
+ appearance: none;
+ overflow: hidden;
+
+ + .button {
+ margin-left: 10px;
+ }
+
+ a {
+ display: flex;
+ padding: 8px 16px;
+ text-decoration: none;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ overflow: hidden;
+ }
+
+ &__text {
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ overflow: hidden;
+ }
+
+ &.next .button__icon {
+ margin-left: 8px;
+ }
+
+ &.previous .button__icon {
+ margin-right: 8px;
+ }
+}
diff --git a/assets/css/post.css b/assets/css/post.css
@@ -1,132 +0,0 @@
-.index-content {
- margin-top: 20px;
-}
-
-.framed {
- border: 1px solid var(--accent);
- padding: 20px;
-
- *:first-child {
- margin-top: 0;
- }
-
- *:last-child {
- margin-bottom: 0;
- }
-}
-
-.posts {
- width: 100%;
-}
-
-.post {
- width: 100%;
- text-align: left;
- margin: 20px auto;
- padding: 20px 0;
-
- @media (--tablet) {
- max-width: 660px;
- }
-
- &:not(:last-of-type) {
- border-bottom: 1px solid var(--border-color);
- }
-
- &-meta {
- font-size: 1rem;
- margin-bottom: 10px;
- color: color-mod(var(--accent) a(70%));
- }
-
- &-title {
- --border: 3px dotted var(--accent);
- position: relative;
- color: var(--accent);
- margin: 0 0 15px;
- padding-bottom: 15px;
- border-bottom: var(--border);
-
- &:after {
- content: '';
- position: absolute;
- bottom: 2px;
- display: block;
- width: 100%;
- border-bottom: var(--border);
- }
-
- a {
- text-decoration: none;
- }
- }
-
- &-tags {
- display: block;
- margin-bottom: 20px;
- font-size: 1rem;
- opacity: .5;
-
- a {
- text-decoration: none;
- }
- }
-
- &-content {
- margin-top: 30px;
- }
-
- &-cover {
- border: 20px solid var(--accent);
- background: transparent;
- margin: 40px 0;
- padding: 20px;
-
- @media (--phone) {
- padding: 10px;
- border-width: 10px;
- }
- }
-
- ul {
- list-style: none;
-
- li:not(:empty):before {
- content: '-';
- position: absolute;
- left: -20px;
- color: var(--accent);
- }
- }
-}
-
-.post--regulation {
- h1 {
- justify-content: center;
- }
-
- h2 {
- justify-content: center;
- margin-bottom: 10px;
-
- & + h2 {
- margin-top: -10px;
- margin-bottom: 20px;
- }
- }
-}
-
-.hanchor {
- color: color-mod(var(--accent) alpha(90%));
- text-decoration: none;
- margin-left: 10px;
- visibility: hidden;
-}
-
-h1:hover a, h2:hover a, h3:hover a, h4:hover a {
- visibility: visible;
-}
-
-.footnotes {
- color: color-mod(var(--color) alpha(50%));
-}
diff --git a/assets/css/post.scss b/assets/css/post.scss
@@ -0,0 +1,128 @@
+.index-content {
+ margin-top: 20px;
+}
+
+.framed {
+ border: 1px solid $accent;
+ padding: 20px;
+
+ *:first-child {
+ margin-top: 0;
+ }
+
+ *:last-child {
+ margin-bottom: 0;
+ }
+}
+
+.posts {
+ width: 100%;
+}
+
+.post {
+ width: 100%;
+ text-align: left;
+ margin: 20px auto;
+ padding: 20px 0;
+
+ &:not(:last-of-type) {
+ border-bottom: 1px solid $border-color;
+ }
+
+ &-meta {
+ font-size: 1rem;
+ margin-bottom: 10px;
+ color: opcift($accent, 70%);
+ }
+
+ &-title {
+ $border: 3px dotted $accent;
+ position: relative;
+ color: $accent;
+ margin: 0 0 15px;
+ padding-bottom: 15px;
+ border-bottom: $border;
+
+ &:after {
+ content: '';
+ position: absolute;
+ bottom: 2px;
+ display: block;
+ width: 100%;
+ border-bottom: $border;
+ }
+
+ a {
+ text-decoration: none;
+ }
+ }
+
+ &-tags {
+ display: block;
+ margin-bottom: 20px;
+ font-size: 1rem;
+ opacity: .5;
+
+ a {
+ text-decoration: none;
+ }
+ }
+
+ &-content {
+ margin-top: 30px;
+ }
+
+ &-cover {
+ border: 20px solid $accent;
+ background: transparent;
+ margin: 40px 0;
+ padding: 20px;
+
+ @media ($phone) {
+ padding: 10px;
+ border-width: 10px;
+ }
+ }
+
+ ul {
+ list-style: none;
+
+ li:not(:empty):before {
+ content: '-';
+ position: absolute;
+ left: -20px;
+ color: $accent;
+ }
+ }
+}
+
+.post--regulation {
+ h1 {
+ justify-content: center;
+ }
+
+ h2 {
+ justify-content: center;
+ margin-bottom: 10px;
+
+ & + h2 {
+ margin-top: -10px;
+ margin-bottom: 20px;
+ }
+ }
+}
+
+.hanchor {
+ color: opacify($accent, .9);
+ text-decoration: none;
+ margin-left: 10px;
+ visibility: hidden;
+}
+
+h1:hover a, h2:hover a, h3:hover a, h4:hover a {
+ visibility: visible;
+}
+
+.footnotes {
+ color: opacify($color, .5);
+}
diff --git a/assets/css/prism.css b/assets/css/prism.scss
diff --git a/assets/css/style.css b/assets/css/style.css
@@ -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
@@ -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.css
@@ -1,153 +0,0 @@
-code.language-css,
-code.language-scss,
-.token.boolean,
-.token.string,
-.token.entity,
-.token.url,
-.language-css .token.string,
-.language-scss .token.string,
-.style .token.string,
-.token.attr-value,
-.token.keyword,
-.token.control,
-.token.directive,
-.token.statement,
-.token.regex,
-.token.atrule,
-.token.number,
-.token.inserted,
-.token.important {
- color: var(--accent) !important;
-}
-
-.token.tag-id,
-.token.atrule-id,
-.token.operator,
-.token.unit,
-.token.placeholder,
-.token.variable,
-.token.tag,
-.token.attr-name,
-.token.namespace,
-.token.deleted,
-.token.property,
-.token.class-name,
-.token.constant,
-.token.symbol {
- color: color-mod(var(--accent) a(70%)) !important;
-}
-
-.token.property,
-.token.function,
-.token.function-name,
-.token.deleted,
-code.language-javascript,
-code.language-html,
-.command-line-prompt > span:before {
- color: color-mod(var(--accent) blend(#999 90%)) !important;
-}
-
-.token.selector,
-.token.tag,
-.token.punctuation {
- color: white;
-}
-
-.token.comment,
-.token.prolog,
-.token.doctype,
-.token.cdata {
- color: rgba(255, 255, 255, .3) !important;
-}
-
-.token.namespace {
- opacity: .7 !important;
-}
-
-pre[data-line] {
- position: relative;
-}
-
-pre[class*="language-"] {
- margin: 0;
- padding: 0;
- overflow: auto;
-}
-
-.line-highlight {
- position: absolute;
- left: 0;
- right: 0;
- padding: 0;
- margin: 0;
- background: color-mod(var(--accent) blend(#999 90%) a(8%));
- pointer-events: none;
- line-height: inherit;
- white-space: pre;
-}
-
-.line-highlight:before,
-.line-highlight[data-end]:after {
- content: attr(data-start);
- position: absolute;
- /* top: .4em; */
- left: .6em;
- min-width: 1em;
- padding: 0 .5em;
- background-color: hsla(24, 20%, 50%, .4);
- color: hsl(24, 20%, 95%);
- font: bold 65%/1.5 sans-serif;
- text-align: center;
- vertical-align: .3em;
- border-radius: 999px;
- text-shadow: none;
- box-shadow: 0 1px white;
-}
-
-.line-highlight[data-end]:after {
- content: attr(data-end);
- top: auto;
- bottom: .4em;
-}
-
-.line-numbers .line-highlight:before,
-.line-numbers .line-highlight:after {
- content: none;
-}
-
-.code-toolbar {
- --code-margin: 40px;
- position: relative;
- margin: var(--code-margin) 0;
- padding: 20px;
- border: 1px solid rgba(255, 255, 255, .1);
-
- + .code-toolbar,
- + .highlight,
- + .highlight .code-toolbar {
- border-top: 0;
- margin-top: calc(-1 * var(--code-margin));
- }
-
- pre, code {
- border: none;
- }
-
- code {
- display: block;
- color: inherit;
- }
-
- > .toolbar {
- button {
- font-size: .8em !important;
- background: hsla(0,0%,87.8%,.2) !important;
- color: #bbb !important;
- box-shadow: 0 2px 0 0 rgba(0,0,0,.2) !important;
- border-radius: 0 !important;
- margin: 6px !important;
- padding: 10px !important;
- user-select:none
- }
- }
-}
diff --git a/assets/css/syntax.scss b/assets/css/syntax.scss
@@ -0,0 +1,153 @@
+code.language-css,
+code.language-scss,
+.token.boolean,
+.token.string,
+.token.entity,
+.token.url,
+.language-css .token.string,
+.language-scss .token.string,
+.style .token.string,
+.token.attr-value,
+.token.keyword,
+.token.control,
+.token.directive,
+.token.statement,
+.token.regex,
+.token.atrule,
+.token.number,
+.token.inserted,
+.token.important {
+ color: $accent !important;
+}
+
+.token.tag-id,
+.token.atrule-id,
+.token.operator,
+.token.unit,
+.token.placeholder,
+.token.variable,
+.token.tag,
+.token.attr-name,
+.token.namespace,
+.token.deleted,
+.token.property,
+.token.class-name,
+.token.constant,
+.token.symbol {
+ color: opacify($accent, .7) !important;
+}
+
+.token.property,
+.token.function,
+.token.function-name,
+.token.deleted,
+code.language-javascript,
+code.language-html,
+.command-line-prompt > span:before {
+ color: mix($accent, #999, .9) !important;
+}
+
+.token.selector,
+.token.tag,
+.token.punctuation {
+ color: white;
+}
+
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+ color: rgba(255, 255, 255, .3) !important;
+}
+
+.token.namespace {
+ opacity: .7 !important;
+}
+
+pre[data-line] {
+ position: relative;
+}
+
+pre[class*="language-"] {
+ margin: 0;
+ padding: 0;
+ overflow: auto;
+}
+
+.line-highlight {
+ position: absolute;
+ left: 0;
+ right: 0;
+ padding: 0;
+ margin: 0;
+ background: opacify(mix($accent, #999, 90%), .08);
+ pointer-events: none;
+ line-height: inherit;
+ white-space: pre;
+}
+
+.line-highlight:before,
+.line-highlight[data-end]:after {
+ content: attr(data-start);
+ position: absolute;
+ /* top: .4em; */
+ left: .6em;
+ min-width: 1em;
+ padding: 0 .5em;
+ background-color: hsla(24, 20%, 50%, .4);
+ color: hsl(24, 20%, 95%);
+ font: bold 65%/1.5 sans-serif;
+ text-align: center;
+ vertical-align: .3em;
+ border-radius: 999px;
+ text-shadow: none;
+ box-shadow: 0 1px white;
+}
+
+.line-highlight[data-end]:after {
+ content: attr(data-end);
+ top: auto;
+ bottom: .4em;
+}
+
+.line-numbers .line-highlight:before,
+.line-numbers .line-highlight:after {
+ content: none;
+}
+
+.code-toolbar {
+ $code-margin: 40px;
+ position: relative;
+ margin: $code-margin 0;
+ padding: 20px;
+ border: 1px solid rgba(255, 255, 255, .1);
+
+ + .code-toolbar,
+ + .highlight,
+ + .highlight .code-toolbar {
+ border-top: 0;
+ margin-top: calc(-1 * $code-margin);
+ }
+
+ pre, code {
+ border: none;
+ }
+
+ code {
+ display: block;
+ color: inherit;
+ }
+
+ > .toolbar {
+ button {
+ font-size: .8em !important;
+ background: hsla(0,0%,87.8%,.2) !important;
+ color: #bbb !important;
+ box-shadow: 0 2px 0 0 rgba(0,0,0,.2) !important;
+ border-radius: 0 !important;
+ margin: 6px !important;
+ padding: 10px !important;
+ user-select:none
+ }
+ }
+}
diff --git a/assets/css/terms.css b/assets/css/terms.css
@@ -1,9 +0,0 @@
-.terms {
- h1 {
- color: var(--accent);
- }
-
- h3 {
- font-size: initial;
- }
-}
diff --git a/assets/css/terms.scss b/assets/css/terms.scss
@@ -0,0 +1,9 @@
+.terms {
+ h1 {
+ color: $accent;
+ }
+
+ h3 {
+ font-size: initial;
+ }
+}
diff --git a/assets/css/variables.scss 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
@@ -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 -->