Skip to content

Commit d34c132

Browse files
mirus-uamirus-ua
authored
Merge pull request #7 from mirus-ua/next
v2.0.0 CSS Variables update
2 parents 22dc46f + 58e5516 commit d34c132

32 files changed

+256
-110
lines changed

‎.github/workflows/firebase-hosting-merge.yml

+1-1
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ jobs:
2626
extended: true # optional, default is false
2727

2828
- name: Build
29-
run: hugo --config exampleSite/config.toml --minify
29+
run: hugo --config demoSite/config.toml --minify
3030

3131
- uses: FirebaseExtended/action-hosting-deploy@v0
3232
with:

‎.github/workflows/firebase-hosting-pull-request.yml

+1-1
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ jobs:
2424
extended: true # optional, default is false
2525

2626
- name: Build
27-
run: hugo --config exampleSite/config.toml --minify
27+
run: hugo --config demoSite/config.toml --minify
2828

2929
- uses: FirebaseExtended/action-hosting-deploy@v0
3030
with:

‎.gitignore

+3
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,9 @@
44
# firebase
55
.firebase
66

7+
# mac
8+
**/.DS_Store
9+
710
### Node ###
811
# Logs
912
logs

‎assets/css/banner.scss

+2-2
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
height: 2rem;
44
display: grid;
55
grid-template-columns: 1fr auto;
6-
background: $accent;
6+
background: var(--accent);
77

88
& span {
99
display: flex;
@@ -12,7 +12,7 @@
1212
}
1313

1414
& a {
15-
color: #1d212c;
15+
color: var(--accent-contrast-color);
1616
display: inline;
1717
}
1818

‎assets/css/buttons.scss

+5-5
Original file line numberDiff line numberDiff line change
@@ -16,17 +16,17 @@ a.button {
1616
text-decoration: none;
1717
text-align: center;
1818
border-radius: 8;
19-
border: 1px solid $accent;
20-
background: $accent;
21-
color: $background;
19+
border: 1px solid var(--accent);
20+
background: var(--accent);
21+
color: var(--accent-contrast-color);
2222
font: inherit;
2323
font-weight: bold;
2424
appearance: none;
2525
cursor: pointer;
2626
outline: none;
2727

2828
&:hover {
29-
background: transparentize($accent, .1);
29+
background: color-mix(in srgb, var(--accent), transparent 10%);
3030
}
3131

3232
/* variants */
@@ -64,7 +64,7 @@ a.read-more:hover,
6464
a.read-more:active {
6565
display: inline-flex;
6666
border: none;
67-
color: $accent;
67+
color: var(--accent);
6868
background: none;
6969
box-shadow: none;
7070
padding: 0;

‎assets/css/code.scss

+6-6
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
.collapsable-code {
2-
$border-color: mix($accent, #999, 90%);
2+
--border-color: color-mix(in srgb, var(--accent) 90%, #999 10%);
33

44
position: relative;
55
width: 100%;
@@ -39,29 +39,29 @@
3939
min-width: 30px;
4040
min-height: 30px;
4141
margin: 0;
42-
border-bottom: 1px solid $border-color;
42+
border-bottom: 1px solid var(--border-color);
4343
cursor: pointer;
4444
}
4545

4646
&__title {
4747
flex: 1;
48-
color: $accent;
48+
color: var(--accent);
4949
padding: 3px 10px;
5050
text-overflow: ellipsis;
5151
white-space: nowrap;
5252
overflow: hidden;
5353
}
5454

5555
&__language {
56-
color: $accent;
57-
border: 1px solid $border-color;
56+
color: var(--accent);
57+
border: 1px solid var(--border-color);
5858
border-bottom: none;
5959
text-transform: uppercase;
6060
padding: 3px 10px;
6161
}
6262

6363
&__toggle {
64-
color: $accent;
64+
color: var(--accent);
6565
font-size: 16px;
6666
padding: 3px 10px;
6767

‎assets/css/color/blue.scss

+3-1
Original file line numberDiff line numberDiff line change
@@ -1 +1,3 @@
1-
$accent: #23B0FF;
1+
:root {
2+
--accent: #23B0FF;
3+
}

‎assets/css/color/green.scss

+3-1
Original file line numberDiff line numberDiff line change
@@ -1 +1,3 @@
1-
$accent: #78E2A0;
1+
:root {
2+
--accent: #78E2A0;
3+
}

‎assets/css/color/orange.scss

+3-1
Original file line numberDiff line numberDiff line change
@@ -1 +1,3 @@
1-
$accent: #FFA86A;
1+
:root {
2+
--accent: #FFA86A;
3+
}

‎assets/css/color/pink.scss

+3-1
Original file line numberDiff line numberDiff line change
@@ -1 +1,3 @@
1-
$accent: #EE72F1;
1+
:root {
2+
--accent: #EE72F1;
3+
}

‎assets/css/color/red.scss

+3-1
Original file line numberDiff line numberDiff line change
@@ -1 +1,3 @@
1-
$accent: #FF6266;
1+
:root {
2+
--accent: #FF6266;
3+
}

‎assets/css/footer.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
width: 760px;
1212
max-width: 100%;
1313

14-
@media ($tablet) {
14+
@media (var(--tablet)) {
1515
flex-direction: column;
1616
}
1717
}

‎assets/css/form.scss

+9-9
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,16 @@
11
input, textarea, select {
22
background: transparent;
3-
color: $accent;
4-
border: 1px solid $accent;
3+
color: var(--accent);
4+
border: 1px solid var(--accent);
55
border-radius: 0;
66
padding: 10px;
77
margin: 5px 0;
88
font: inherit;
99
appearance: none;
1010

1111
&:focus, :active {
12-
border-color: $color;
13-
outline: 1px solid $color;
12+
border-color: var(--color);
13+
outline: 1px solid var(--color);
1414
}
1515

1616
&:active {
@@ -19,25 +19,25 @@ input, textarea, select {
1919
}
2020

2121
select {
22-
background: $background;
22+
background: var(--background);
2323

2424
option {
25-
background: $background;
25+
background: var(--background);
2626
}
2727
}
2828

2929
::placeholder {
30-
color: transparentize($accent, .5);
30+
color: color-mix(in srgb, var(--accent), transparent 50%);
3131
}
3232

3333
input {
3434
&[type="checkbox"] {
3535
vertical-align: middle;
3636
padding: 10px;
37-
box-shadow: inset 0 0 0 3px $background;
37+
box-shadow: inset 0 0 0 3px var(--background);
3838

3939
&:checked {
40-
background: $accent;
40+
background: var(--accent);
4141
}
4242
}
4343
}

‎assets/css/header.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@
1919

2020
&:after {
2121
content: '';
22-
background: repeating-linear-gradient(90deg, $accent, $accent 2px, transparent 0, transparent 10px);
22+
background: repeating-linear-gradient(90deg, var(--accent), var(--accent) 2px, transparent 0, transparent 10px);
2323
display: block;
2424
width: 100%;
2525
right: 10px;

‎assets/css/logo.scss

+2-2
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
display: flex;
33
align-items: center;
44
text-decoration: none;
5-
background: $accent;
6-
color: black;
5+
background: var(--accent);
6+
color: color-mix(in srgb, var(--accent), var(--accent-contrast-color) 90%);;
77
padding: 5px 10px;
88
}

0 commit comments

Comments
 (0)