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;
display: grid;
grid-template-columns: 1fr auto;
background: $accent;
background: var(--accent);
& span {
display: flex;

10
assets/css/buttons.scss
View File

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

12
assets/css/code.scss
View File

@ -1,5 +1,5 @@
.collapsable-code {
$border-color: mix($accent, #999, 90%);
--border-color: color-mix(in srgb, var(--accent) 90%, #999 10%);
position: relative;
width: 100%;
@ -39,13 +39,13 @@
min-width: 30px;
min-height: 30px;
margin: 0;
border-bottom: 1px solid $border-color;
border-bottom: 1px solid var(--border-color);
cursor: pointer;
}
&__title {
flex: 1;
color: $accent;
color: var(--accent);
padding: 3px 10px;
text-overflow: ellipsis;
white-space: nowrap;
@ -53,15 +53,15 @@
}
&__language {
color: $accent;
border: 1px solid $border-color;
color: var(--accent);
border: 1px solid var(--border-color);
border-bottom: none;
text-transform: uppercase;
padding: 3px 10px;
}
&__toggle {
color: $accent;
color: var(--accent);
font-size: 16px;
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;
max-width: 100%;
@media ($tablet) {
@media (var(--tablet)) {
flex-direction: column;
}
}

18
assets/css/form.scss
View File

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

2
assets/css/header.scss
View File

@ -19,7 +19,7 @@
&:after {
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;
width: 100%;
right: 10px;

2
assets/css/logo.scss
View File

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

50
assets/css/main.scss
View File

@ -15,8 +15,8 @@ body {
font-size: 1rem;
line-height: 1.54;
letter-spacing: -0.02em;
background-color: $background;
color: $color;
background-color: var(--background);
color: var(--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 (var(--phone)) {
font-size: 1rem;
}
}
@ -61,7 +61,7 @@ a {
/* Waiting for a better times... */
/* &:has(code) {
text-decoration-color: $accent;
text-decoration-color: var(--accent);
} */
}
@ -109,8 +109,8 @@ figure {
font-size: 14px;
padding: 5px 10px;
margin-top: 5px;
background: $accent;
color: $background;
background: var(--accent);
color: var(--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: transparentize($accent, .8);
color: $accent;
background: rgba(var(--accent), 0.8);
color: var(--accent);
padding: 1px 6px;
margin: 0 2px;
font-size: .95rem;
@ -157,7 +157,7 @@ pre {
margin-top: -40px;
}
@media ($phone) {
@media (var(--phone)) {
white-space: pre-wrap;
word-wrap: break-word;
}
@ -172,12 +172,12 @@ pre {
}
blockquote {
border-top: 1px solid $accent;
border-bottom: 1px solid $accent;
border-top: 1px solid var(--accent);
border-bottom: 1px solid var(--accent);
margin: 40px 0;
padding: 25px;
@media ($phone) {
@media (var(--phone)) {
padding-right: 0;
}
@ -198,15 +198,15 @@ blockquote {
display: block;
position: absolute;
left: -25px;
color: $accent;
color: var(--accent);
}
&.twitter-tweet {
position: relative;
background: transparentize($accent, .9);
background: rgba(var(--accent), 0.9);
font: inherit;
color: inherit;
border: 1px solid $accent;
border: 1px solid var(--accent);
padding-top: 60px;
p:before {
@ -217,12 +217,12 @@ blockquote {
content: '> From Twitter:';
position: absolute;
top: 20px;
color: $accent;
color: var(--accent);
font-weight: bold;
}
a {
color: $accent;
color: var(--accent);
}
}
}
@ -237,12 +237,12 @@ table {
table,
th,
td {
border: 1px dashed $accent;
border: 1px dashed var(--accent);
padding: 10px;
}
th {
color: $accent;
color: var(--accent);
}
ul,
@ -254,7 +254,7 @@ ol {
position: relative;
}
@media ($phone) {
@media (var(--phone)) {
margin-left: 20px;
}
}
@ -270,7 +270,7 @@ ol {
content: counter(li);
position: absolute;
right: calc(100% + 10px);
color: $accent;
color: var(--accent);
display: inline-block;
text-align: right;
}
@ -290,8 +290,8 @@ ol {
}
mark {
background: $accent;
color: $background;
background: var(--accent);
color: var(--background);
}
.container {
@ -312,7 +312,7 @@ mark {
max-width: 100%;
}
@media ($phone) {
@media (var(--phone)) {
padding: 20px;
}
@ -333,7 +333,7 @@ mark {
hr {
width: 100%;
border: none;
background: $border-color;
background: var(--border-color);
height: 1px;
}

24
assets/css/menu.scss
View File

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

6
assets/css/pagination.scss
View File

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

24
assets/css/post.scss
View File

@ -3,7 +3,7 @@
}
.framed {
border: 1px solid $accent;
border: 1px solid var(--accent);
padding: 20px;
*:first-child {
@ -26,13 +26,13 @@
padding: 20px 0;
&:not(:last-of-type) {
border-bottom: 1px solid $border-color;
border-bottom: 1px solid var(--border-color);
}
&-meta {
font-size: 1rem;
margin-bottom: 10px;
color: transparentize($accent, .3);
color: rgba(var(--accent), 0.3);
& > *:not(:first-child) {
&::before {
@ -44,12 +44,12 @@
}
&-title {
$border: 3px dotted $accent;
--border: 3px dotted var(--accent);
position: relative;
color: $accent;
color: var(--accent);
margin: 0 0 15px;
padding-bottom: 15px;
border-bottom: $border;
border-bottom: var(--border);
&:after {
content: '';
@ -57,7 +57,7 @@
bottom: 2px;
display: block;
width: 100%;
border-bottom: $border;
border-bottom: var(--border);
}
a {
@ -81,12 +81,12 @@
}
&-cover {
border: 20px solid $accent;
border: 20px solid var(--accent);
background: transparent;
margin: 40px 0;
padding: 20px;
@media ($phone) {
@media (var(--phone)) {
padding: 10px;
border-width: 10px;
}
@ -99,7 +99,7 @@
content: '-';
position: absolute;
left: -20px;
color: $accent;
color: var(--accent);
}
}
}
@ -121,7 +121,7 @@
}
.hanchor {
color: transparentize($accent, .1);
color: rgba(var(--accent), 0.1);
text-decoration: none;
margin-left: 10px;
visibility: hidden;
@ -132,5 +132,5 @@ h1:hover a, h2:hover a, h3:hover a, h4:hover a {
}
.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.inserted,
.token.important {
color: $accent !important;
color: var(--accent) !important;
}
.token.tag-id,
@ -34,7 +34,7 @@ code.language-scss,
.token.class-name,
.token.constant,
.token.symbol {
color: transparentize($accent, .3) !important;
color: rgba(var(--accent), 0.3) !important;
}
.token.property,
@ -44,7 +44,7 @@ code.language-scss,
code.language-javascript,
code.language-html,
.command-line-prompt > span:before {
color: mix($accent, #999, .9) !important;
color: color-mix(in srgb, var(--accent) 90%, #999 10%) !important;
}
.token.selector,
@ -75,12 +75,13 @@ pre[class*="language-"] {
}
.line-highlight {
--line-highlight-mix: color-mix(in srgb, var(--accent) 90%, #999 10%);
position: absolute;
left: 0;
right: 0;
padding: 0;
margin: 0;
background: transparentize(mix($accent, #999, 90%), .92);
background: rgba(var(--line-highlight-mix), 0.92);
pointer-events: none;
line-height: inherit;
white-space: pre;
@ -116,9 +117,9 @@ pre[class*="language-"] {
}
.code-toolbar {
$code-margin: 40px;
--code-margin: 40px;
position: relative;
margin: $code-margin 0;
margin: var(--code-margin) 0;
padding: 20px;
border: 1px solid rgba(255, 255, 255, .1);
@ -126,7 +127,7 @@ pre[class*="language-"] {
+ .highlight,
+ .highlight .code-toolbar {
border-top: 0;
margin-top: calc(-1 * $code-margin);
margin-top: calc(-1 * var(--code-margin));
}
pre, code {

4
assets/css/terms.scss
View File

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

12
assets/css/variables.scss
View File

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