Skip to content

Commit b653fcb

Browse files
garryinggarrying
committed
sass update
1 parent efb340a commit b653fcb

24 files changed

+1079
-353
lines changed

‎.stylelintrc‎

Lines changed: 2 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,6 @@
11
{
2-
"extends": "stylelint-config-standard",
2+
"extends": "stylelint-config-standard-scss",
33
"ignoreFiles": [
44
"assets/src/styles/vendor/**/*.scss"
5-
],
6-
"plugins": [
7-
"stylelint-scss"
8-
],
9-
"rules": {
10-
"at-rule-no-unknown": null,
11-
"scss/at-rule-no-unknown": true
12-
}
5+
]
136
}

‎assets/dist/main.css‎

Lines changed: 1 addition & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎assets/src/styles/components/_helpers.scss‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
@use "variables";
2+
13
// Helper classes
24

35
.hidden {
@@ -17,10 +19,9 @@
1719
}
1820

1921
.input-reset {
20-
-webkit-appearance: none;
21-
-moz-appearance: none;
22+
appearance: none;
2223
}
2324

2425
.accent {
25-
color: $color-accent;
26+
color: variables.$color-accent;
2627
}

‎assets/src/styles/components/_variables.scss‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,22 +9,26 @@ $white: #fff;
99
$black: #000;
1010
$off-black: #0e0e0f;
1111
$color-accent: #fa8072;
12-
1312
$site-background: $white;
1413
$site-font-color: #000;
1514

1615
// Breakpoints
1716

1817
// Reference: Apple Thunderbolt Display
1918
$largest-vp: 2560px;
19+
2020
// Reference: 1080p
2121
$large-vp: 1920px;
22+
2223
// Reference: 720p
2324
$medium-vp: 1024px;
25+
2426
// Reference: iPhone 6 Landscape
2527
$ipad-vp: 768px;
28+
2629
// Reference: iPhone 6 Landscape
2730
$small-vp: 667px;
31+
2832
// Reference: iPhone 5
2933
$smallest-vp: 320px;
3034

‎assets/src/styles/components/_vwfontsize.scss‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
1+
@use "sass:math";
2+
13
@mixin rsp-font($responsive, $min, $max: false, $fallback: false) {
24
$responsive-unitless: $responsive / ($responsive - $responsive + 1);
3-
$dimension: if(unit($responsive) == "vh", "height", "width");
5+
$dimension: if(math.unit($responsive) == "vh", "height", "width");
46
$min-breakpoint: $min / $responsive-unitless * 100;
57

68
@media (max-#{$dimension}: #{$min-breakpoint}) {

‎assets/src/styles/main.scss‎

Lines changed: 22 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,28 @@
1-
@import "vendor/reset";
1+
@use "vendor/reset";
22

33
// Component styles (e.g. mixins, vars)
44

5-
@import "components/font-face";
6-
@import "components/variables";
7-
@import "components/helpers";
8-
@import "components/vwfontsize";
5+
@use "components/font-face";
6+
@use "components/variables";
7+
@use "components/helpers";
8+
@use "components/vwfontsize";
99

1010
// Modules styles (e.g. layouts, typography)
1111

12-
@import "modules/typography";
13-
@import "modules/base";
14-
@import "modules/figures";
15-
@import "modules/lists";
16-
@import "modules/forms";
17-
@import "modules/bricks";
18-
@import "modules/panels";
19-
@import "modules/search";
20-
@import "modules/page";
21-
@import "modules/page_error";
22-
@import "modules/yearselect";
23-
@import "modules/header";
24-
@import "modules/layout";
25-
@import "modules/miniview";
26-
@import "modules/title";
27-
@import "modules/home";
28-
@import "modules/loader";
12+
@use "modules/typography";
13+
@use "modules/base";
14+
@use "modules/figures";
15+
@use "modules/lists";
16+
@use "modules/forms";
17+
@use "modules/bricks";
18+
@use "modules/panels";
19+
@use "modules/search";
20+
@use "modules/page";
21+
@use "modules/page_error";
22+
@use "modules/yearselect";
23+
@use "modules/header";
24+
@use "modules/layout";
25+
@use "modules/miniview";
26+
@use "modules/title";
27+
@use "modules/home";
28+
@use "modules/loader";

‎assets/src/styles/modules/_base.scss‎

Lines changed: 18 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
1+
@use "sass:color";
2+
@use "../components/variables";
3+
@use "typography";
4+
15
// General background
26

37
.lock-scroll {
@@ -6,38 +10,38 @@
610

711
html {
812
overflow-x: hidden;
9-
-webkit-tap-highlight-color: rgba($black, 0);
13+
-webkit-tap-highlight-color: color.adjust(variables.$black, $alpha: -0%);
1014
}
1115

1216
body {
1317
height: 100%;
14-
font-family: $sans-serif;
18+
font-family: variables.$sans-serif;
1519
font-size: 75%;
1620
line-height: 1.5em;
17-
color: $site-font-color;
18-
background: $site-background;
21+
color: variables.$site-font-color;
22+
background: variables.$site-background;
1923

20-
@include font-smoothing(on);
24+
@include typography.font-smoothing(on);
2125
}
2226

2327
::selection {
24-
background: rgba($color-accent, 0.2);
28+
background: color.adjust(variables.$color-accent, $alpha: -0.8%);
2529
}
2630

2731
mark {
28-
background: rgba($color-accent, 0.2);
32+
background: color.adjust(variables.$color-accent, $alpha: -0.8%);
2933
}
3034

3135
// Links
3236

3337
a {
3438
text-decoration: none;
35-
color: $color-accent;
39+
color: variables.$color-accent;
3640
transition: color 180ms ease-in-out;
3741

3842
&:hover,
3943
&:focus {
40-
color: darken($color-accent, 20%);
44+
color: color.adjust(variables.$color-accent, $lightness: -20%);
4145
}
4246

4347
img {
@@ -48,7 +52,7 @@ a {
4852
// Tab shortcut reveal
4953

5054
.screen-reader-shortcut {
51-
@include font-smoothing(on);
55+
@include typography.font-smoothing(on);
5256

5357
position: absolute;
5458
top: 0;
@@ -57,12 +61,12 @@ a {
5761
height: 1px;
5862
overflow: hidden;
5963
clip: rect(1px, 1px, 1px, 1px);
60-
color: $white;
61-
background: $off-black;
64+
color: variables.$white;
65+
background: variables.$off-black;
6266

6367
&:focus {
64-
color: $white;
65-
z-index: $z-important;
68+
color: variables.$white;
69+
z-index: variables.$z-important;
6670
width: auto;
6771
height: auto;
6872
padding: 0 10px;

‎assets/src/styles/modules/_bricks.scss‎

Lines changed: 12 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
@use "../components/variables";
2+
13
.grid {
24
display: flex;
35
align-items: flex-start;
@@ -21,7 +23,7 @@
2123
}
2224

2325
.bricklayer-column {
24-
@media screen and (max-width: $small-vp) {
26+
@media screen and (max-width: variables.$small-vp) {
2527
flex-basis: 50%;
2628
}
2729
}
@@ -31,15 +33,15 @@
3133
display: none;
3234
width: 33.333%;
3335

34-
@media screen and (max-width: $small-vp) {
36+
@media screen and (max-width: variables.$small-vp) {
3537
width: 50%;
3638
}
3739

38-
@media screen and (max-width: $smallest-vp) {
40+
@media screen and (max-width: variables.$smallest-vp) {
3941
width: 100%;
4042
}
4143

42-
@media screen and (min-width: $large-vp) {
44+
@media screen and (min-width: variables.$large-vp) {
4345
width: 25%;
4446
}
4547
}
@@ -48,24 +50,24 @@
4850
.bricklayer-column-sizer {
4951
width: 50%;
5052

51-
@media screen and (max-width: $ipad-vp) {
53+
@media screen and (max-width: variables.$ipad-vp) {
5254
width: 100%;
5355
}
5456

55-
@media screen and (max-width: $small-vp) {
57+
@media screen and (max-width: variables.$small-vp) {
5658
width: 100%;
5759
}
5860

59-
@media screen and (min-width: $large-vp) {
60-
width: 33.3333333333%;
61+
@media screen and (min-width: variables.$large-vp) {
62+
width: 33.3333%;
6163
}
6264
}
6365

64-
@media screen and (max-width: $ipad-vp) {
66+
@media screen and (max-width: variables.$ipad-vp) {
6567
margin: 90px 0 0;
6668
}
6769

68-
@media screen and (max-width: $small-vp) {
70+
@media screen and (max-width: variables.$small-vp) {
6971
margin: 0;
7072

7173
.bricklayer-column:last-child {

‎assets/src/styles/modules/_figures.scss‎

Lines changed: 13 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,6 @@
1+
@use "sass:color";
2+
@use "../components/variables";
3+
14
figure {
25
margin: 0;
36

@@ -15,7 +18,7 @@ figure {
1518

1619
.image-modal-container-full-image {
1720
position: relative;
18-
z-index: $z-middle;
21+
z-index: variables.$z-middle;
1922
max-width: 100%;
2023
max-height: 100%;
2124
user-select: none;
@@ -38,11 +41,11 @@ figure {
3841
right: 0;
3942
bottom: 0;
4043
left: 0;
41-
z-index: $z-foreground;
44+
z-index: variables.$z-foreground;
4245
overflow: auto;
43-
background: $site-background;
46+
background: variables.$site-background;
4447

45-
@media screen and (max-width: $medium-vp) {
48+
@media screen and (max-width: variables.$medium-vp) {
4649
left: 0;
4750
}
4851

@@ -61,22 +64,21 @@ figure {
6164
position: absolute;
6265
right: 20px;
6366
bottom: 20px;
64-
z-index: $z-foreground;
67+
z-index: variables.$z-foreground;
6568
max-width: 350px;
6669
padding: 1em 0 0 1em;
6770
font-size: 0.95em;
6871
line-height: 1.3em;
69-
background: rgba($site-background, 0.7);
72+
background: color.adjust(variables.$site-background, $alpha: -0.3%);
7073
backdrop-filter: blur(2px);
71-
-webkit-backdrop-filter: blur(2px);
7274

73-
@media screen and (max-width: $ipad-vp) {
75+
@media screen and (max-width: variables.$ipad-vp) {
7476
bottom: 0;
7577
left: 20px;
7678
padding: 1em;
7779
}
7880

79-
@media screen and (max-width: $small-vp) {
81+
@media screen and (max-width: variables.$small-vp) {
8082
bottom: 75px;
8183
}
8284
}
@@ -86,14 +88,14 @@ figure {
8688
top: 2em;
8789
right: 2em;
8890

89-
@media screen and (max-width: $medium-vp) {
91+
@media screen and (max-width: variables.$medium-vp) {
9092
top: auto;
9193
}
9294
}
9395

9496
.close-btn {
9597
path {
96-
stroke: $color-accent;
98+
stroke: variables.$color-accent;
9799
}
98100
}
99101
}

‎assets/src/styles/modules/_forms.scss‎

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,17 @@
1+
@use "../components/variables";
2+
@use "typography";
3+
14
input {
2-
@include font-features-body;
3-
@include font-smoothing(on);
5+
@include typography.font-features-body;
6+
@include typography.font-smoothing(on);
47

5-
font-family: $sans-serif;
8+
font-family: variables.$sans-serif;
69
border-radius: 0;
7-
-webkit-appearance: none;
10+
appearance: none;
811
}
912

1013
button {
11-
@include font-features-body;
14+
@include typography.font-features-body;
1215

1316
font-size: inherit;
1417
cursor: pointer;

0 commit comments

Comments
 (0)