Skip to content

Commit e773c7c

Browse files
adamscottadamscott
committed
Add color-{top,bottom}-muted
1 parent 8c17522 commit e773c7c

File tree

3 files changed

+108
-66
lines changed

3 files changed

+108
-66
lines changed

‎_sass/common/_release.scss‎

Lines changed: 43 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -17,34 +17,58 @@
1717
$i: index($sections, $section);
1818
$diff: $i - $base-category-i;
1919
$base-color-top: offset-hue($base-color, $offset, $diff);
20-
$base-color-bottom: adjust-color(offset-hue($base-color, $offset, $diff + 1), $lightness: -10);
20+
$base-color-bottom: adjust-color(
21+
offset-hue($base-color, $offset, $diff + 1),
22+
$lightness: -10
23+
);
2124
$color-top: adjust-color($base-color-top, $saturation: -10);
2225
$color-bottom: adjust-color($base-color-bottom, $saturation: -10);
26+
$color-top-muted: adjust-color($base-color-top, $saturation: -25);
27+
$color-bottom-muted: adjust-color($base-color-bottom, $saturation: -25);
2328
$color-selection: adjust-color($base-color-bottom, $saturation: -30);
24-
$color-invert: adjust-color($base-color-top, $hue: 180, $lightness: 0, $saturation: 30);
25-
$color-highlight: adjust-color($base-color-top, $lightness: 0, $saturation: 30);
26-
$color-highlight--dark: adjust-color($base-color-top, $lightness: 30, $saturation: 30);
27-
$color-invert-highlight: adjust-color($color-invert, $lightness: 20, $saturation: 30);
28-
$return-value: map-merge($return-value, (
29-
#{$section}: (
30-
color-top: $color-top,
31-
color-bottom: $color-bottom,
32-
color-selection: $color-selection,
33-
color-invert: $color-invert,
34-
color-highlight: $color-highlight,
35-
color-highlight--dark: $color-highlight--dark,
36-
color-invert-highlight: $color-invert-highlight
29+
$color-invert: adjust-color(
30+
$base-color-top,
31+
$hue: 180,
32+
$lightness: 0,
33+
$saturation: 30
34+
);
35+
$color-highlight: adjust-color(
36+
$base-color-top,
37+
$lightness: 0,
38+
$saturation: 30
39+
);
40+
$color-highlight--dark: adjust-color(
41+
$base-color-top,
42+
$lightness: 30,
43+
$saturation: 30
44+
);
45+
$color-invert-highlight: adjust-color(
46+
$color-invert,
47+
$lightness: 20,
48+
$saturation: 30
49+
);
50+
$return-value: map-merge(
51+
$return-value,
52+
(
53+
#{$section}: (
54+
color-top: $color-top,
55+
color-bottom: $color-bottom,
56+
color-top-muted: $color-top-muted,
57+
color-bottom-muted: $color-bottom-muted,
58+
color-selection: $color-selection,
59+
color-invert: $color-invert,
60+
color-highlight: $color-highlight,
61+
color-highlight--dark: $color-highlight--dark,
62+
color-invert-highlight: $color-invert-highlight,
63+
)
3764
)
38-
));
65+
);
3966
}
4067
@return $return-value;
4168
}
4269

4370
@function r-desktop-mobile($sizes...) {
44-
@return (
45-
"desktop": nth($sizes, 1),
46-
"mobile": nth($sizes, 2)
47-
);
71+
@return ("desktop": nth($sizes, 1), "mobile": nth($sizes, 2));
4872
}
4973

5074
@function r-get-desktop($value) {

‎_sass/common/_release_style.scss‎

Lines changed: 56 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -96,12 +96,6 @@ $donate-robot-size: 500px;
9696
}
9797
}
9898

99-
$subsection-base-color: grey;
100-
@mixin subsection-color() {
101-
--color-top: #{adjust-color($subsection-base-color, $lightness: 10)};
102-
--color-bottom: #{$subsection-base-color};
103-
}
104-
10599
#scroll-to-top {
106100
position: fixed;
107101
top: 0;
@@ -289,21 +283,36 @@ $subsection-base-color: grey;
289283
.link {
290284
display: flex;
291285
min-width: 50px;
292-
font-weight: 700;
293286
align-items: center;
294287
justify-content: center;
295288
padding: calc(var(--card-padding) / 2);
296289
border-radius: calc(var(--card-padding) / 2);
297290
text-decoration: none;
298291
color: white;
292+
299293
font-size: 1em;
294+
font-weight: 800;
300295

301296
background: linear-gradient(
302297
to bottom,
303298
var(--color-top),
304299
var(--color-bottom)
305300
);
306-
@include subsection-color();
301+
302+
@at-root #{selector-replace(&, ".links-container", ".links-container.links-container-subsections")} {
303+
font-weight: 600;
304+
--color-top: var(--color-top-muted);
305+
--color-bottom: var(--color-bottom-muted);
306+
}
307+
@at-root #{selector-replace(&, ".links-container", ".links-container.main-list")} {
308+
font-size: 150%;
309+
@each $section-name, $section-colors in $sections {
310+
&.link-#{$section-name} {
311+
--color-top: #{map-get($section-colors, "color-top")};
312+
--color-bottom: #{map-get($section-colors, "color-bottom")};
313+
}
314+
}
315+
}
307316

308317
&:hover {
309318
& > span {
@@ -1307,36 +1316,9 @@ $subsection-base-color: grey;
13071316
margin-bottom: 0;
13081317
}
13091318

1310-
@each $section-name, $section-colors in $sections {
1311-
&.section-#{$section-name} {
1312-
--color-top: #{map-get($section-colors, "color-top")};
1313-
--color-bottom: #{map-get($section-colors, "color-bottom")};
1314-
--color-selection: #{map-get($section-colors, "color-selection")};
1315-
--color-invert: #{map-get($section-colors, "color-invert")};
1316-
--color-highlight: #{map-get($section-colors, "color-highlight")};
1317-
--color-highlight-switch: #{map-get(
1318-
$section-colors,
1319-
"color-highlight--dark"
1320-
)};
1321-
--color-invert-highlight: #{map-get(
1322-
$section-colors,
1323-
"color-invert-highlight"
1324-
)};
1325-
@include is-dark() {
1326-
--color-highlight: #{map-get(
1327-
$section-colors,
1328-
"color-highlight--dark"
1329-
)};
1330-
--color-highlight-switch: #{map-get(
1331-
$section-colors,
1332-
"color-highlight"
1333-
)};
1334-
}
1335-
}
1336-
}
1337-
13381319
&.subsection {
1339-
@include subsection-color();
1320+
--color-top: var(--color-top-muted);
1321+
--color-bottom: var(--color-bottom-muted);
13401322
}
13411323

13421324
// Remove margins from the .subsection under a .section
@@ -1355,13 +1337,19 @@ $subsection-base-color: grey;
13551337

13561338
.section-title h3 {
13571339
position: relative;
1358-
font-size: clamp(4cqw, 50px, 6cqw);
13591340
background: var(--color-top)
13601341
linear-gradient(to bottom, var(--color-top), var(--color-bottom));
13611342
padding: calc(var(--card-padding) * 2);
13621343
border-radius: var(--card-padding);
13631344
margin-bottom: 0;
13641345

1346+
font-size: clamp(4cqw, 50px, 6cqw);
1347+
font-weight: 800;
1348+
@at-root #{selector-replace(&, ".section", ".section.subsection")} {
1349+
font-size: clamp(2cqw, 35px, 4cqw);
1350+
font-weight: 600;
1351+
}
1352+
13651353
contain: paint;
13661354
.section-robot {
13671355
position: absolute;
@@ -1385,6 +1373,36 @@ $subsection-base-color: grey;
13851373
}
13861374
}
13871375
}
1376+
1377+
@each $section-name, $section-colors in $sections {
1378+
.section-#{$section-name} {
1379+
--color-top: #{map-get($section-colors, "color-top")};
1380+
--color-bottom: #{map-get($section-colors, "color-bottom")};
1381+
--color-top-muted: #{map-get($section-colors, "color-top-muted")};
1382+
--color-bottom-muted: #{map-get($section-colors, "color-bottom-muted")};
1383+
--color-selection: #{map-get($section-colors, "color-selection")};
1384+
--color-invert: #{map-get($section-colors, "color-invert")};
1385+
--color-highlight: #{map-get($section-colors, "color-highlight")};
1386+
--color-highlight-switch: #{map-get(
1387+
$section-colors,
1388+
"color-highlight--dark"
1389+
)};
1390+
--color-invert-highlight: #{map-get(
1391+
$section-colors,
1392+
"color-invert-highlight"
1393+
)};
1394+
@include is-dark() {
1395+
--color-highlight: #{map-get(
1396+
$section-colors,
1397+
"color-highlight--dark"
1398+
)};
1399+
--color-highlight-switch: #{map-get(
1400+
$section-colors,
1401+
"color-highlight"
1402+
)};
1403+
}
1404+
}
1405+
}
13881406
}
13891407
}
13901408

‎pages/releases/_includes/section.html‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -20,22 +20,22 @@
2020
{% endfor %}
2121
{% endif %}
2222
{% if section_features.size > 0 %}
23-
<div id="{{ section.anchor }}" class="section section-{{ section.anchor }}">
23+
<div id="{{section.anchor}}" class="section section-{{section.anchor}}">
2424
<div class="section-title">
2525
<div class="container">
2626
<h3>
27-
<a href="#{{ section.anchor }}">{{ section.name }}</a>
27+
<a href="#{{section.anchor}}">{{section.name}}</a>
2828
<div class="section-robot godot-icon-godot" aria-disabled="true"></div>
2929
</h3>
3030
</div>
31-
<div class="container">
31+
<div class="container section-{{section.anchor}}">
3232
{% if section.subsections != null %}
33-
<div id="{{ section.anchor }}-links" class="release-card transparent-card span-3">
33+
<div id="{{section.anchor}}-links" class="release-card transparent-card span-3">
3434
<div class="release-card-container">
3535
<div class="release-card-content">
3636
<div class="release-card-content-container">
3737
<div class="c-content">
38-
<ul class="links-container">
38+
<ul class="links-container links-container-subsections">
3939
{% for subsection in section.subsections %}
4040
{% assign subsection_features = data | where: "section", section.anchor | where: "subsection", subsection.anchor | sort: "rank" %}
4141
{% if subsection_features.size > 0 %}
@@ -61,7 +61,7 @@ <h3>
6161
</div>
6262

6363
{% if section.subsections == null %}
64-
<div class="container">
64+
<div class="container section-{{section.anchor}}">
6565
<div class="release-cards {{two_column_class}}">
6666
{% assign features = data | where: "section", section.anchor | sort: "rank" %}
6767
{% for feature in features %}
@@ -77,17 +77,17 @@ <h3>
7777
{% assign features = data | where: "section", section.anchor | where: "subsection", subsection.anchor | sort: "rank" %}
7878
{% if features.size > 0 %}
7979
{% assign is_two_columns = subsection.two_columns | default: false %}
80-
<div id="{{ section.anchor }}-{{ subsection.anchor }}" class="section subsection section-{{ section.anchor }} section-{{ section.anchor }}-{{ subsection.anchor }}">
80+
<div id="{{section.anchor}}-{{subsection.anchor}}" class="section subsection section-{{section.anchor}} section-{{section.anchor}}-{{subsection.anchor}}">
8181
<div class="section-title">
8282
<div class="container">
8383
<h3>
84-
<a href="#{{ section.anchor }}-{{ subsection.anchor }}">{{ subsection.name }}</a>
84+
<a href="#{{section.anchor}}-{{subsection.anchor}}">{{subsection.name}}</a>
8585
<div class="section-robot godot-icon-godot" aria-disabled="true"></div>
8686
</h3>
8787
</div>
8888
</div>
8989
</div>
90-
<div class="container">
90+
<div class="container section-{{section.anchor}}">
9191
<div class="release-cards {{two_column_class}}">
9292
{% for feature in features %}
9393
{%

0 commit comments

Comments
 (0)