adrian/hugo-theme-re-terminal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #4 from mirus-ua/feature/1/migrate-to-native-css-vars

Browse Source 
[feat] migrate to native CSS variables
This commit is contained in:
Mirus 2024-07-31 09:47:30 +03:00 committed by GitHub
commit f2a0cc35f9
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
19 changed files with 110 additions and 97 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
assets/css/banner.scss
View File

@ -3,7 +3,7 @@
height: 2rem; height: 2rem;
display: grid; display: grid;
grid-template-columns: 1fr auto; grid-template-columns: 1fr auto;
background: $accent; background: var(--accent);
& span { & span {
display: flex; display: flex;

10
assets/css/buttons.scss
View File

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

12
assets/css/code.scss
View File

@ -1,5 +1,5 @@
.collapsable-code { .collapsable-code {
$border-color: mix($accent, #999, 90%); --border-color: color-mix(in srgb, var(--accent) 90%, #999 10%);
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 $border-color; border-bottom: 1px solid var(--border-color);
cursor: pointer; cursor: pointer;
} }
&__title { &__title {
flex: 1; flex: 1;
color: $accent; color: var(--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: $accent; color: var(--accent);
border: 1px solid $border-color; border: 1px solid var(--border-color);
border-bottom: none; border-bottom: none;
text-transform: uppercase; text-transform: uppercase;
padding: 3px 10px; padding: 3px 10px;
} }
&__toggle { &__toggle {
color: $accent; color: var(--accent);
font-size: 16px; font-size: 16px;
padding: 3px 10px; padding: 3px 10px;

4
assets/css/color/blue.scss
View File

@ -1 +1,3 @@
$accent: #23B0FF; :root {
--accent: #23B0FF;
}

4
assets/css/color/green.scss
View File

@ -1 +1,3 @@
$accent: #78E2A0; :root {
--accent: #78E2A0;
}

4
assets/css/color/orange.scss
View File

@ -1 +1,3 @@
$accent: #FFA86A; :root {
--accent: #FFA86A;
}

4
assets/css/color/pink.scss
View File

@ -1 +1,3 @@
$accent: #EE72F1; :root {
--accent: #EE72F1;
}

4
assets/css/color/red.scss
View File

@ -1 +1,3 @@
$accent: #FF6266; :root {
--accent: #FF6266;
}

2
assets/css/footer.scss
View File

@ -11,7 +11,7 @@
width: 760px; width: 760px;
max-width: 100%; max-width: 100%;
@media ($tablet) { @media (var(--tablet)) {
flex-direction: column; flex-direction: column;
} }
} }

18
assets/css/form.scss
View File

@ -1,7 +1,7 @@
input, textarea, select { input, textarea, select {
background: transparent; background: transparent;
color: $accent; color: var(--accent);
border: 1px solid $accent; border: 1px solid var(--accent);
border-radius: 0; border-radius: 0;
padding: 10px; padding: 10px;
margin: 5px 0; margin: 5px 0;
@ -9,8 +9,8 @@ input, textarea, select {
appearance: none; appearance: none;
&:focus, :active { &:focus, :active {
border-color: $color; border-color: var(--color);
outline: 1px solid $color; outline: 1px solid var(--color);
} }
&:active { &:active {
@ -19,25 +19,25 @@ input, textarea, select {
} }
select { select {
background: $background; background: var(--background);
option { option {
background: $background; background: var(--background);
} }
} }
::placeholder { ::placeholder {
color: transparentize($accent, .5); color: rgba(var(--accent), 0.5);
} }
input { input {
&[type="checkbox"] { &[type="checkbox"] {
vertical-align: middle; vertical-align: middle;
padding: 10px; padding: 10px;
box-shadow: inset 0 0 0 3px $background; box-shadow: inset 0 0 0 3px var(--background);
&:checked { &:checked {
background: $accent; background: var(--accent);
} }
} }
} }

2
assets/css/header.scss
View File

@ -19,7 +19,7 @@
&:after { &:after {
content: ''; content: '';
background: repeating-linear-gradient(90deg, $accent, $accent 2px, transparent 0, transparent 10px); background: repeating-linear-gradient(90deg, var(--accent), var(--accent) 2px, transparent 0, transparent 10px);
display: block; display: block;
width: 100%; width: 100%;
right: 10px; right: 10px;

2
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: $accent; background: var(--accent);
color: black; color: black;
padding: 5px 10px; padding: 5px 10px;
} }

50
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: $background; background-color: var(--background);
color: $color; color: var(--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 (var(--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: $accent; text-decoration-color: var(--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: $accent; background: var(--accent);
color: $background; color: var(--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: transparentize($accent, .8); background: rgba(var(--accent), 0.8);
color: $accent; color: var(--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 (var(--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 $accent; border-top: 1px solid var(--accent);
border-bottom: 1px solid $accent; border-bottom: 1px solid var(--accent);
margin: 40px 0; margin: 40px 0;
padding: 25px; padding: 25px;
@media ($phone) { @media (var(--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: $accent; color: var(--accent);
} }
&.twitter-tweet { &.twitter-tweet {
position: relative; position: relative;
background: transparentize($accent, .9); background: rgba(var(--accent), 0.9);
font: inherit; font: inherit;
color: inherit; color: inherit;
border: 1px solid $accent; border: 1px solid var(--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: $accent; color: var(--accent);
font-weight: bold; font-weight: bold;
} }
a { a {
color: $accent; color: var(--accent);
} }
} }
} }
@ -237,12 +237,12 @@ table {
table, table,
th, th,
td { td {
border: 1px dashed $accent; border: 1px dashed var(--accent);
padding: 10px; padding: 10px;
} }
th { th {
color: $accent; color: var(--accent);
} }
ul, ul,
@ -254,7 +254,7 @@ ol {
position: relative; position: relative;
} }
@media ($phone) { @media (var(--phone)) {
margin-left: 20px; margin-left: 20px;
} }
} }
@ -270,7 +270,7 @@ ol {
content: counter(li); content: counter(li);
position: absolute; position: absolute;
right: calc(100% + 10px); right: calc(100% + 10px);
color: $accent; color: var(--accent);
display: inline-block; display: inline-block;
text-align: right; text-align: right;
} }
@ -290,8 +290,8 @@ ol {
} }
mark { mark {
background: $accent; background: var(--accent);
color: $background; color: var(--background);
} }
.container { .container {
@ -312,7 +312,7 @@ mark {
max-width: 100%; max-width: 100%;
} }
@media ($phone) { @media (var(--phone)) {
padding: 20px; padding: 20px;
} }
@ -333,7 +333,7 @@ mark {
hr { hr {
width: 100%; width: 100%;
border: none; border: none;
background: $border-color; background: var(--border-color);
height: 1px; height: 1px;
} }

24
assets/css/menu.scss
View File

@ -1,11 +1,11 @@
@mixin menu { @mixin menu {
--shadow-color: rgba(var(--background), 0.2);
display: none; display: none;
flex-direction: column; flex-direction: column;
$shadow-color: transparentize($background, .2); --shadow: 0 10px var(--shadow-color), -10px 10px var(--shadow-color), 10px 10px var(--shadow-color);
$shadow: 0 10px $shadow-color, -10px 10px $shadow-color, 10px 10px $shadow-color;
position: absolute; position: absolute;
background: $background; background: var(--background);
box-shadow: $shadow; box-shadow: var(--shadow);
color: white; color: white;
border: 2px solid; border: 2px solid;
margin: 0; margin: 0;
@ -17,7 +17,7 @@
} }
@mixin header-menu-trigger { @mixin header-menu-trigger {
color: $accent; color: var(--accent);
border: 2px solid; border: 2px solid;
margin-left: 10px; margin-left: 10px;
height: 100%; height: 100%;
@ -33,7 +33,7 @@
justify-content: space-between; justify-content: space-between;
margin: 20px 1px; margin: 20px 1px;
@media ($phone) { @media (var(--phone)) {
margin: 0; margin: 0;
} }
@ -55,7 +55,7 @@
} }
} }
@media ($phone) { @media (var(--phone)) {
flex-direction: column; flex-direction: column;
align-items: flex-start; align-items: flex-start;
padding: 0; padding: 0;
@ -82,7 +82,7 @@
&__trigger { &__trigger {
margin-right: 0 !important; margin-right: 0 !important;
color: $accent; color: var(--accent);
user-select: none; user-select: none;
cursor: pointer; cursor: pointer;
} }
@ -109,7 +109,7 @@
} }
&--desktop { &--desktop {
@media ($phone) { @media (var(--phone)) {
display: none display: none
} }
} }
@ -119,13 +119,13 @@
@include header-menu-trigger; @include header-menu-trigger;
display: none; display: none;
@media ($phone) { @media (var(--phone)) {
display: block; display: block;
} }
} }
.menu__dropdown { .menu__dropdown {
@media ($phone) { @media (var(--phone)) {
left: auto; left: auto;
right: 0; right: 0;
} }
@ -144,7 +144,7 @@
.menu__trigger { .menu__trigger {
@include header-menu-trigger; @include header-menu-trigger;
@media ($phone) { @media (var(--phone)) {
display: none; display: none;
} }
} }

6
assets/css/pagination.scss
View File

@ -15,8 +15,8 @@
text-align: center; text-align: center;
margin: 0 auto; margin: 0 auto;
padding: 5px 10px; padding: 5px 10px;
background: $background; background: var(--background);
color: transparentize($color, .7); color: rgba(var(--color), 0.7);
font-size: .8rem; font-size: .8rem;
text-transform: uppercase; text-transform: uppercase;
text-decoration: none; text-decoration: none;
@ -56,7 +56,7 @@
padding: 0; padding: 0;
appearance: none; appearance: none;
@media($phone) { @media(var(--phone)) {
flex: 1; flex: 1;
} }

24
assets/css/post.scss
View File

@ -3,7 +3,7 @@
} }
.framed { .framed {
border: 1px solid $accent; border: 1px solid var(--accent);
padding: 20px; padding: 20px;
*:first-child { *:first-child {
@ -26,13 +26,13 @@
padding: 20px 0; padding: 20px 0;
&:not(:last-of-type) { &:not(:last-of-type) {
border-bottom: 1px solid $border-color; border-bottom: 1px solid var(--border-color);
} }
&-meta { &-meta {
font-size: 1rem; font-size: 1rem;
margin-bottom: 10px; margin-bottom: 10px;
color: transparentize($accent, .3); color: rgba(var(--accent), 0.3);
& > *:not(:first-child) { & > *:not(:first-child) {
&::before { &::before {
@ -44,12 +44,12 @@
} }
&-title { &-title {
$border: 3px dotted $accent; --border: 3px dotted var(--accent);
position: relative; position: relative;
color: $accent; color: var(--accent);
margin: 0 0 15px; margin: 0 0 15px;
padding-bottom: 15px; padding-bottom: 15px;
border-bottom: $border; border-bottom: var(--border);
&:after { &:after {
content: ''; content: '';
@ -57,7 +57,7 @@
bottom: 2px; bottom: 2px;
display: block; display: block;
width: 100%; width: 100%;
border-bottom: $border; border-bottom: var(--border);
} }
a { a {
@ -81,12 +81,12 @@
} }
&-cover { &-cover {
border: 20px solid $accent; border: 20px solid var(--accent);
background: transparent; background: transparent;
margin: 40px 0; margin: 40px 0;
padding: 20px; padding: 20px;
@media ($phone) { @media (var(--phone)) {
padding: 10px; padding: 10px;
border-width: 10px; border-width: 10px;
} }
@ -99,7 +99,7 @@
content: '-'; content: '-';
position: absolute; position: absolute;
left: -20px; left: -20px;
color: $accent; color: var(--accent);
} }
} }
} }
@ -121,7 +121,7 @@
} }
.hanchor { .hanchor {
color: transparentize($accent, .1); color: rgba(var(--accent), 0.1);
text-decoration: none; text-decoration: none;
margin-left: 10px; margin-left: 10px;
visibility: hidden; visibility: hidden;
@ -132,5 +132,5 @@ h1:hover a, h2:hover a, h3:hover a, h4:hover a {
} }
.footnotes { .footnotes {
color: transparentize($color, .5); color: rgba(var(--color), 0.5);
} }

15
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: $accent !important; color: var(--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: transparentize($accent, .3) !important; color: rgba(var(--accent), 0.3) !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: mix($accent, #999, .9) !important; color: color-mix(in srgb, var(--accent) 90%, #999 10%) !important;
} }
.token.selector, .token.selector,
@ -75,12 +75,13 @@ pre[class*="language-"] {
} }
.line-highlight { .line-highlight {
--line-highlight-mix: color-mix(in srgb, var(--accent) 90%, #999 10%);
position: absolute; position: absolute;
left: 0; left: 0;
right: 0; right: 0;
padding: 0; padding: 0;
margin: 0; margin: 0;
background: transparentize(mix($accent, #999, 90%), .92); background: rgba(var(--line-highlight-mix), 0.92);
pointer-events: none; pointer-events: none;
line-height: inherit; line-height: inherit;
white-space: pre; white-space: pre;
@ -116,9 +117,9 @@ pre[class*="language-"] {
} }
.code-toolbar { .code-toolbar {
$code-margin: 40px; --code-margin: 40px;
position: relative; position: relative;
margin: $code-margin 0; margin: var(--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 +127,7 @@ pre[class*="language-"] {
+ .highlight, + .highlight,
+ .highlight .code-toolbar { + .highlight .code-toolbar {
border-top: 0; border-top: 0;
margin-top: calc(-1 * $code-margin); margin-top: calc(-1 * var(--code-margin));
} }
pre, code { pre, code {

4
assets/css/terms.scss
View File

@ -8,7 +8,7 @@
li { li {
a { a {
color: $accent; color: var(--accent);
} }
} }
@ -16,7 +16,7 @@
content: '-'; content: '-';
position: absolute; position: absolute;
left: -20px; left: -20px;
color: $accent; color: var(--accent);
} }
} }
} }

16
assets/css/variables.scss
View File

@ -1,8 +1,10 @@
/* COLOR VARIABLES */ :root {
$background: mix($accent, #1D1E28, 2%); /* COLOR VARIABLES */
$color: white; --background: color-mix(in srgb, var(--accent) 2%, #1D1E28 98%);
$border-color: rgba(255, 255, 255, .1); --color: white;
--border-color: rgba(255, 255, 255, .1);
/* MEDIA QUERIES */ /* MEDIA QUERIES */
$phone: "max-width: 684px"; --phone: "max-width: 684px";
$tablet: "max-width: 900px"; --tablet: "max-width: 900px";
}