Skip to content

Commit 7311d7d

Browse files
scottleechuascottleechua
committed
Update SASS syntax in base (non-font) files
1 parent cf8e02f commit 7311d7d

File tree

5 files changed

+72
-66
lines changed

5 files changed

+72
-66
lines changed

‎_sass/_base.scss

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@
22
* Styles for the base elements of the theme.
33
******************************************************************************/
44

5+
@use "variables" as v;
6+
57
// Typography
68

79
p,
@@ -629,12 +631,12 @@ footer.sticky-bottom {
629631
padding: 0.75rem 1.15rem;
630632

631633
&:hover {
632-
color: $black-color;
634+
color: v.$black-color;
633635
}
634636
}
635637

636638
&.active .page-link {
637-
color: $white-color;
639+
color: v.$white-color;
638640
background-color: var(--global-theme-color);
639641

640642
&:hover {
@@ -817,7 +819,7 @@ footer.sticky-bottom {
817819
padding-bottom: 0.5rem;
818820
span {
819821
display: inline-block;
820-
color: $black-color;
822+
color: v.$black-color;
821823
height: 100%;
822824
padding-right: 0.5rem;
823825
vertical-align: middle;

‎_sass/_layout.scss

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@
22
* Content
33
******************************************************************************/
44

5+
@use "variables" as v;
6+
57
body {
68
padding-bottom: 70px;
79
color: var(--global-text-color);
@@ -28,7 +30,7 @@ body.sticky-bottom-footer {
2830
}
2931

3032
.container {
31-
max-width: $max-content-width;
33+
max-width: v.$max-content-width;
3234
}
3335

3436
// Profile

‎_sass/_themes.scss

Lines changed: 43 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,34 @@
11
/*******************************************************************************
22
* Themes
33
******************************************************************************/
4-
4+
@use "variables" as v;
55
@use "sass:color";
66

77
:root {
88
color-scheme: light;
9-
--global-bg-color: #{$white-color};
10-
--global-code-bg-color: #{$code-bg-color-light};
11-
--global-text-color: #{$black-color};
12-
--global-text-color-light: #{$grey-color};
13-
--global-theme-color: #{$purple-color};
14-
--global-hover-color: #{$purple-color};
15-
--global-hover-text-color: #{$white-color};
16-
--global-footer-bg-color: #{$grey-color-dark};
17-
--global-footer-text-color: #{$grey-color-light};
18-
--global-footer-link-color: #{$white-color};
19-
--global-distill-app-color: #{$grey-color};
9+
--global-bg-color: #{v.$white-color};
10+
--global-code-bg-color: #{v.$code-bg-color-light};
11+
--global-text-color: #{v.$black-color};
12+
--global-text-color-light: #{v.$grey-color};
13+
--global-theme-color: #{v.$purple-color};
14+
--global-hover-color: #{v.$purple-color};
15+
--global-hover-text-color: #{v.$white-color};
16+
--global-footer-bg-color: #{v.$grey-color-dark};
17+
--global-footer-text-color: #{v.$grey-color-light};
18+
--global-footer-link-color: #{v.$white-color};
19+
--global-distill-app-color: #{v.$grey-color};
2020
--global-divider-color: rgba(0, 0, 0, 0.1);
21-
--global-card-bg-color: #{$white-color};
22-
--global-highlight-color: #{$red-color-dark};
21+
--global-card-bg-color: #{v.$white-color};
22+
--global-highlight-color: #{v.$red-color-dark};
2323
--global-back-to-top-bg-color: rgba(
24-
#{color.channel($black-color, "red", $space: rgb)},
25-
#{color.channel($black-color, "green", $space: rgb)},
26-
#{color.channel($black-color, "blue", $space: rgb)},
24+
#{color.channel(v.$black-color, "red", v.$space: rgb)},
25+
#{color.channel(v.$black-color, "green", v.$space: rgb)},
26+
#{color.channel(v.$black-color, "blue", v.$space: rgb)},
2727
0.4
2828
);
29-
--global-back-to-top-text-color: #{$white-color};
30-
--global-newsletter-bg-color: #{$white-color};
31-
--global-newsletter-text-color: #{$black-color};
29+
--global-back-to-top-text-color: #{v.$white-color};
30+
--global-newsletter-bg-color: #{v.$white-color};
31+
--global-newsletter-text-color: #{v.$black-color};
3232

3333
--global-tip-block: #42b983;
3434
--global-tip-block-bg: #e2f5ec;
@@ -68,38 +68,38 @@
6868
#back-to-top {
6969
color: var(--global-back-to-top-text-color);
7070
background: var(--global-back-to-top-bg-color);
71-
bottom: $back-to-top-bottom;
72-
right: $back-to-top-right;
73-
height: $back-to-top-height;
74-
width: $back-to-top-width;
75-
z-index: $back-to-top-z-index;
71+
bottom: v.$back-to-top-bottom;
72+
right: v.$back-to-top-right;
73+
height: v.$back-to-top-height;
74+
width: v.$back-to-top-width;
75+
z-index: v.$back-to-top-z-index;
7676
}
7777
}
7878

7979
html[data-theme="dark"] {
8080
color-scheme: dark;
81-
--global-bg-color: #{$grey-color-dark};
82-
--global-code-bg-color: #{$code-bg-color-dark};
83-
--global-text-color: #{$grey-color-light};
84-
--global-text-color-light: #{$grey-color};
85-
--global-theme-color: #{$cyan-color};
86-
--global-hover-color: #{$cyan-color};
87-
--global-hover-text-color: #{$white-color};
88-
--global-footer-bg-color: #{$grey-color-light};
89-
--global-footer-text-color: #{$grey-color-dark};
90-
--global-footer-link-color: #{$black-color};
91-
--global-distill-app-color: #{$grey-color-light};
81+
--global-bg-color: #{v.$grey-color-dark};
82+
--global-code-bg-color: #{v.$code-bg-color-dark};
83+
--global-text-color: #{v.$grey-color-light};
84+
--global-text-color-light: #{v.$grey-color};
85+
--global-theme-color: #{v.$cyan-color};
86+
--global-hover-color: #{v.$cyan-color};
87+
--global-hover-text-color: #{v.$white-color};
88+
--global-footer-bg-color: #{v.$grey-color-light};
89+
--global-footer-text-color: #{v.$grey-color-dark};
90+
--global-footer-link-color: #{v.$black-color};
91+
--global-distill-app-color: #{v.$grey-color-light};
9292
--global-divider-color: #424246;
93-
--global-card-bg-color: #{$grey-900};
93+
--global-card-bg-color: #{v.$grey-900};
9494
--global-back-to-top-bg-color: rgba(
95-
#{color.channel($white-color, "red", $space: rgb)},
96-
#{color.channel($white-color, "green", $space: rgb)},
97-
#{color.channel($white-color, "blue", $space: rgb)},
95+
#{color.channel(v.$white-color, "red", v.$space: rgb)},
96+
#{color.channel(v.$white-color, "green", v.$space: rgb)},
97+
#{color.channel(v.$white-color, "blue", v.$space: rgb)},
9898
0.5
9999
);
100-
--global-back-to-top-text-color: #{$black-color};
101-
--global-newsletter-bg-color: #{$grey-color-light};
102-
--global-newsletter-text-color: #{$grey-color-dark};
100+
--global-back-to-top-text-color: #{v.$black-color};
101+
--global-newsletter-bg-color: #{v.$grey-color-light};
102+
--global-newsletter-text-color: #{v.$grey-color-dark};
103103

104104
--global-tip-block: #42b983;
105105
--global-tip-block-bg: #e2f5ec;

‎_sass/_variables.scss

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -50,3 +50,6 @@ $back-to-top-right: 30px;
5050
$back-to-top-diameter: 40px;
5151
$back-to-top-height: $back-to-top-diameter;
5252
$back-to-top-width: $back-to-top-diameter;
53+
54+
// Max width default
55+
$max-content-width: 930px !default;

‎assets/css/main.scss

Lines changed: 18 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -3,23 +3,22 @@
33
---
44
@charset "utf-8";
55

6-
// Dimensions
7-
$max-content-width: {{ site.max_width }};
6+
/* Built-in Sass modules you’ll likely use across partials */
7+
@use "sass:math";
8+
@use "sass:string";
89

9-
@import
10-
"variables",
11-
"themes",
12-
"layout",
13-
"base",
14-
"distill",
15-
"cv",
16-
"tabs",
17-
"typograms",
18-
"font-awesome/fontawesome",
19-
"font-awesome/brands",
20-
"font-awesome/solid",
21-
"font-awesome/regular",
22-
"tabler-icons/tabler-icons.scss",
23-
"tabler-icons/tabler-icons-filled.scss",
24-
"tabler-icons/tabler-icons-outline.scss"
25-
;
10+
/* Configure your design tokens BEFORE loading any of your partials.
11+
Make sure `_sass/_variables.scss` declares `$max-content-width: 72rem !default;` */
12+
@use "variables" with (
13+
$max-content-width: {{ site.max_width | default: "930px" }}
14+
);
15+
16+
/* Your project partials — convert these files to `@use "variables";`
17+
(or `@use "variables" as *;`) inside each file and qualify variables if needed. */
18+
@use "themes";
19+
@use "layout";
20+
@use "base";
21+
@use "distill";
22+
@use "cv";
23+
@use "tabs";
24+
@use "typograms";

0 commit comments

Comments
 (0)