Skip to content

Commit 6a75244

Browse files
smorimotosmorimoto
committed
sass-embedded
Signed-off-by: Sora Morimoto <[email protected]>
1 parent fda9984 commit 6a75244

13 files changed

+346
-1206
lines changed

‎_sass/_a11y.scss

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
@use "variables";
2+
13
.sr-only {
24
position: absolute;
35
width: 1px;
@@ -15,7 +17,7 @@
1517
}
1618

1719
.logo-box a:focus {
18-
outline-color: $color-nav;
20+
outline-color: variables.$color-nav;
1921
}
2022

2123
.submenu {

‎_sass/_content.scss

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
@use "variables";
2+
13
.main-content {
24
padding: 50px 0;
35
font-size: 1rem;
@@ -8,29 +10,29 @@
810
h4,
911
h5,
1012
h6 {
11-
font-weight: $font-weight-semi-bold;
12-
color: $color-text;
13+
font-weight: variables.$font-weight-semi-bold;
14+
color: variables.$color-text;
1315
}
1416

1517
h3 {
1618
padding: 10px 15px;
1719
margin-right: -15px;
1820
margin-left: -15px;
1921
color: white;
20-
background-color: $color-primary;
22+
background-color: variables.$color-primary;
2123
}
2224

2325
.section-headline {
2426
margin-top: 0;
2527
font-size: 2rem;
26-
font-weight: $font-weight-semi-bold;
28+
font-weight: variables.$font-weight-semi-bold;
2729
}
2830

2931
p {
30-
margin: 0 0 $spacing-paragraph;
32+
margin: 0 0 variables.$spacing-paragraph;
3133
}
3234

33-
@media (min-width: $bp-tablet) {
35+
@media (min-width: variables.$bp-tablet) {
3436
padding: 130px 0;
3537

3638
.section-headline {
@@ -50,8 +52,8 @@
5052
}
5153

5254
a {
53-
font-weight: $font-weight-semi-bold;
54-
color: $color-link;
55+
font-weight: variables.$font-weight-semi-bold;
56+
color: variables.$color-link;
5557
}
5658

5759
.text-end {

‎_sass/_featurelist.scss

Lines changed: 23 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,12 @@
1+
@use "variables";
2+
13
.featurelist {
24
&__item {
35
padding: 0 1rem;
46
margin-bottom: 1.125rem;
57
font-size: 0.9em;
68
background-color: white;
7-
border-bottom: 1px solid $color-spacer;
9+
border-bottom: 1px solid variables.$color-spacer;
810

911
&__info {
1012
max-height: 0;
@@ -44,23 +46,23 @@
4446
margin-top: 0.5rem;
4547
font-weight: 550;
4648
color: white;
47-
background-color: $color-dim-gray;
48-
border: 2px solid $color-dim-gray;
49+
background-color: variables.$color-dim-gray;
50+
border: 2px solid variables.$color-dim-gray;
4951
border-radius: 10px;
5052
}
5153
}
5254
/* stylelint-disable-next-line no-descending-specificity */
5355
&__translation a {
54-
background-color: $tag-translation;
55-
border: 2px solid $tag-translation;
56+
background-color: variables.$tag-translation;
57+
border: 2px solid variables.$tag-translation;
5658
border-radius: 10px;
5759

5860
&:focus {
59-
color: $tag-translation;
61+
color: variables.$tag-translation;
6062
}
6163

6264
&:hover {
63-
color: $tag-translation;
65+
color: variables.$tag-translation;
6466
}
6567
}
6668

@@ -71,7 +73,7 @@
7173
clear: both;
7274
list-style: none;
7375

74-
@media (min-width: $bp-tablet) {
76+
@media (min-width: variables.$bp-tablet) {
7577
float: right;
7678
padding: 0 5px;
7779
margin-top: 0.5rem;
@@ -90,44 +92,44 @@
9092
}
9193
/* stylelint-disable-next-line no-descending-specificity */
9294
&__tests a {
93-
background-color: $tag-tests;
94-
border: 2px solid $tag-tests;
95+
background-color: variables.$tag-tests;
96+
border: 2px solid variables.$tag-tests;
9597
border-radius: 10px;
9698

9799
&:focus {
98-
color: $tag-tests;
100+
color: variables.$tag-tests;
99101
}
100102

101103
&:hover {
102-
color: $tag-tests;
104+
color: variables.$tag-tests;
103105
}
104106
}
105107
/* stylelint-disable-next-line no-descending-specificity */
106108
&__spec a {
107-
background-color: $tag-spec;
108-
border: 2px solid $tag-spec;
109+
background-color: variables.$tag-spec;
110+
border: 2px solid variables.$tag-spec;
109111
border-radius: 10px;
110112

111113
&:focus {
112-
color: $tag-spec;
114+
color: variables.$tag-spec;
113115
}
114116

115117
&:hover {
116-
color: $tag-spec;
118+
color: variables.$tag-spec;
117119
}
118120
}
119121
/* stylelint-disable-next-line no-descending-specificity */
120122
&__presented a {
121-
background-color: $tag-presented;
122-
border: 2px solid $tag-presented;
123+
background-color: variables.$tag-presented;
124+
border: 2px solid variables.$tag-presented;
123125
border-radius: 10px;
124126

125127
&:focus {
126-
color: $tag-presented;
128+
color: variables.$tag-presented;
127129
}
128130

129131
&:hover {
130-
color: $tag-presented;
132+
color: variables.$tag-presented;
131133
}
132134
}
133135

@@ -197,7 +199,7 @@
197199
padding: 0;
198200
list-style: none;
199201

200-
@media (min-width: $bp-tablet) {
202+
@media (min-width: variables.$bp-tablet) {
201203
padding-inline-start: 2em;
202204
}
203205
}

‎_sass/_grid.scss

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,16 @@
11
@use "sass:math";
2+
@use "variables";
23

34
.intro {
4-
margin: 0 math.div($grid-gutter, -2) (2 * $grid-gutter);
5+
margin: 0 math.div(variables.$grid-gutter, -2) (2 * variables.$grid-gutter);
56

67
[class*="g-col-"] {
7-
padding: 0 math.div($grid-gutter, 2);
8+
padding: 0 math.div(variables.$grid-gutter, 2);
89
}
910
}
1011

1112
.g-row {
12-
@media (min-width: $bp-tablet) {
13+
@media (min-width: variables.$bp-tablet) {
1314
display: flex;
1415
flex-direction: row;
1516

‎_sass/_layout.scss

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
@use "sass:math";
2+
@use "variables";
23

34
*,
45
*::before,
@@ -15,15 +16,15 @@ body {
1516
margin: 0;
1617
font-family: "Open Sans", sans-serif;
1718
font-size: 16px;
18-
font-weight: $font-weight-regular;
19+
font-weight: variables.$font-weight-regular;
1920
line-height: 1.5;
20-
background: $color-bg;
21+
background: variables.$color-bg;
2122
}
2223

2324
.container {
2425
width: 100%;
2526
max-width: 1280px;
26-
padding: 0 math.div($grid-gutter, 2);
27+
padding: 0 math.div(variables.$grid-gutter, 2);
2728
margin: 0 auto;
2829
}
2930

@@ -33,7 +34,7 @@ body {
3334
line-height: 54px;
3435
}
3536

36-
@media (min-width: $bp-tablet) {
37+
@media (min-width: variables.$bp-tablet) {
3738
.container {
3839
padding: 0 45px;
3940
}

‎_sass/_logo-box.scss

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
@use "variables";
2+
13
.logo-box {
24
z-index: 3;
35
flex-shrink: 0;
@@ -8,7 +10,7 @@
810
height: 90px;
911
}
1012

11-
@media (min-width: $bp-tablet) {
13+
@media (min-width: variables.$bp-tablet) {
1214
img {
1315
width: 120px;
1416
height: 120px;
@@ -25,7 +27,7 @@
2527
width: 120px;
2628
}
2729

28-
@media (min-width: $bp-tablet) {
30+
@media (min-width: variables.$bp-tablet) {
2931
img {
3032
width: 120px;
3133
}

‎_sass/_page-footer.scss

Lines changed: 19 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
@use "sass:color";
2+
@use "variables";
23

34
.synopsis {
45
width: 100%;
5-
padding: 0 4% $grid-gutter;
6+
padding: 0 4% variables.$grid-gutter;
67
overflow: auto;
78
clear: both;
89
font-weight: 400;
@@ -16,42 +17,44 @@
1617

1718
.synopsis a,
1819
.synopsis h3 {
19-
font-weight: $font-weight-regular;
20+
font-weight: variables.$font-weight-regular;
2021
}
2122

2223
.page-footer {
2324
width: 100%;
2425
min-height: 100px;
2526
font-size: 12px;
26-
color: $color-dim-gray;
27+
color: variables.$color-dim-gray;
2728
}
2829

2930
.page-footer h3 {
3031
padding-bottom: 1em;
3132
margin-top: 1.25rem;
3233
margin-bottom: 1.25rem;
33-
border-bottom: 1px solid color.mix($color-bg, $color-dim-gray, $weight: 80%);
34+
border-bottom: 1px solid
35+
color.mix(variables.$color-bg, variables.$color-dim-gray, $weight: 80%);
3436
}
3537

36-
@media (min-width: $bp-tablet) {
38+
@media (min-width: variables.$bp-tablet) {
3739
.page-footer h3 {
3840
margin-top: 0;
3941
}
4042

4143
.page-footer .synopsis .g-col-3:not(:last-child) {
42-
padding-right: $grid-gutter;
43-
border-right: solid 1px color.mix($color-bg, $color-dim-gray, $weight: 80%);
44+
padding-right: variables.$grid-gutter;
45+
border-right: solid 1px
46+
color.mix(variables.$color-bg, variables.$color-dim-gray, $weight: 80%);
4447
}
4548

4649
.page-footer .synopsis .g-col-3:not(:first-child) {
47-
padding-left: $grid-gutter;
50+
padding-left: variables.$grid-gutter;
4851
}
4952
}
5053

5154
.page-footer a {
52-
font-weight: $font-weight-regular;
55+
font-weight: variables.$font-weight-regular;
5356
line-height: 24px;
54-
color: $color-link;
57+
color: variables.$color-link;
5558
text-decoration: underline;
5659

5760
.icon {
@@ -61,13 +64,13 @@
6164
}
6265

6366
.icon path {
64-
fill: $color-dim-gray;
67+
fill: variables.$color-dim-gray;
6568
}
6669

6770
&:active .icon path,
6871
&:focus .icon path,
6972
&:hover .icon path {
70-
fill: $color-link;
73+
fill: variables.$color-link;
7174
}
7275

7376
span {
@@ -97,10 +100,11 @@
97100
}
98101

99102
.page-footer .grid-container {
100-
padding: $grid-gutter 0;
103+
padding: variables.$grid-gutter 0;
101104
margin: 0 auto;
102105
overflow: auto;
103-
border-top: solid 1px color.mix($color-bg, $color-dim-gray, $weight: 80%);
106+
border-top: solid 1px
107+
color.mix(variables.$color-bg, variables.$color-dim-gray, $weight: 80%);
104108
}
105109

106110
.page-footer .grid-start {
@@ -114,7 +118,7 @@
114118
text-align: center;
115119
}
116120

117-
@media (min-width: $bp-tablet) {
121+
@media (min-width: variables.$bp-tablet) {
118122
.page-footer .grid-start {
119123
float: left;
120124
text-align: left;

‎_sass/_page-header.scss

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,12 @@
1+
@use "variables";
2+
13
.page-header {
24
display: flex;
35
flex-direction: row;
46
align-items: flex-start;
57
background: inherit;
68

7-
@media (min-width: $bp-tablet) {
9+
@media (min-width: variables.$bp-tablet) {
810
$spacing: 30px;
911

1012
.page-menu {
@@ -17,7 +19,7 @@
1719
}
1820
}
1921

20-
@media (min-width: $bp-desktop) {
22+
@media (min-width: variables.$bp-desktop) {
2123
$spacing: 90px;
2224

2325
.page-menu {

0 commit comments

Comments
 (0)