Skip to content

Commit a21066b

Browse files
dhalbertdhalbert
authored
Merge pull request #1609 from jwcooper/design-cleanup
Some more clean up to the new design
2 parents c4c1c2a + 17ce1b8 commit a21066b

File tree

9 files changed

+61
-39
lines changed

9 files changed

+61
-39
lines changed

‎_includes/downloads/board_image.html‎

Lines changed: 12 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,12 @@
1-
{% assign small_image = "/assets/images/boards/small/" | append: include.board_image | absolute_url %}
2-
{% assign large_image = "/assets/images/boards/large/" | append: include.board_image | absolute_url %}
3-
<img srcset="{{ small_image }} 300w,
4-
{{ large_image }} 700w"
5-
sizes="(max-width: 1024px) 700px,
6-
300px"
7-
src="{{ large_image }}" alt="Image of Board" loading="lazy">
1+
{% assign small_image = "/assets/images/boards/small/" | append:
2+
include.board_image | absolute_url %} {% assign large_image =
3+
"/assets/images/boards/large/" | append: include.board_image | absolute_url %}
4+
<img
5+
srcset="{{ small_image }} 300w,
6+
{{ large_image }} 800w"
7+
sizes="(max-width: 300px) 300px,
8+
800px"
9+
src="{{ large_image }}"
10+
alt="Image of Board"
11+
loading="lazy"
12+
/>

‎_includes/index/learn_block.html‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,16 @@
11
<div class="image">
22
{% assign guide = site.data.guides[include.index] %}
3-
<img class="image-headline" alt="{{ guide.image_alt_attribute }}"
4-
src="{{ guide.image }}"
5-
/>
3+
<img class="image-headline"
4+
alt="{{ guide.image_alt_attribute }}"
5+
src="{{ guide.image }}"
6+
loading="lazy" />
67
<span class="image-title">
78
<span>
89
<p><a href="{{ guide.guide_url }}">{{ guide.title }} by {{ guide.author }}</a></p>
910
</span>
1011
<img alt="Made with CircuitPython Logo"
11-
src="{{ "assets/images/made_with_circuitpython.svg" |
12-
relative_url }}"
13-
/>
12+
src="{{ "assets/images/made_with_circuitpython.svg" |
13+
relative_url }}"
14+
loading="lazy" />
1415
</span>
1516
</div>

‎assets/sass/base/_variables.scss‎

Lines changed: 12 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,28 @@
11
$purple: #652f8f;
22
$pink: #e90e8b;
33
$gray: #999999;
4+
$dark-gray: #333333;
45
$gray-border: #cecece;
56

67
// derived from bootstrap variables
78

89
// Extra small screen / phone
9-
$screen-xs: 480px !default;
10-
$screen-phone: $screen-xs !default;
10+
$screen-xs: 480px !default;
11+
$screen-phone: $screen-xs !default;
1112

1213
// Small screen / tablet
13-
$screen-sm: 768px !default;
14-
$screen-tablet: $screen-sm !default;
14+
$screen-sm: 768px !default;
15+
$screen-tablet: $screen-sm !default;
1516

1617
// Medium screen / desktop
17-
$screen-md: 1024px !default;
18-
$screen-desktop: $screen-md !default;
18+
$screen-md: 1024px !default;
19+
$screen-desktop: $screen-md !default;
1920

2021
// Large screen / wide desktop
21-
$screen-lg: 1366px !default;
22-
$screen-lg-desktop: $screen-lg !default;
22+
$screen-lg: 1366px !default;
23+
$screen-lg-desktop: $screen-lg !default;
2324

2425
// So media queries don't overlap when required, provide a maximum
25-
$screen-xs-max: ($screen-sm - 1) !default;
26-
$screen-sm-max: ($screen-md - 1) !default;
27-
$screen-md-max: ($screen-lg - 1) !default;
26+
$screen-xs-max: ($screen-sm - 1) !default;
27+
$screen-sm-max: ($screen-md - 1) !default;
28+
$screen-md-max: ($screen-lg - 1) !default;

‎assets/sass/layout/_header.scss‎

Lines changed: 12 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -19,24 +19,25 @@
1919
padding: 0 25px;
2020
margin: 20px 0;
2121
}
22-
23-
a.active {
24-
color: color.adjust(variables.$purple, $lightness: -15%, $space: hsl);
25-
}
2622
}
2723

2824
.top-navigation {
29-
background-color: #333;
25+
background-color: variables.$dark-gray;
3026
@include mixins.readable-content;
3127

3228
.navigation {
3329
margin-left: 15px;
3430
padding: 10px;
31+
3532
a {
3633
font-size: 16px;
3734
color: #aaa;
3835
margin-right: 40px;
3936

37+
&.active {
38+
color: #fff;
39+
}
40+
4041
&:hover {
4142
color: #fff;
4243
}
@@ -100,11 +101,15 @@
100101

101102
a {
102103
margin-right: 30px;
103-
color: #63338f;
104+
color: variables.$purple;
104105
white-space: nowrap;
105106

107+
&.active {
108+
color: variables.$dark-gray;
109+
}
110+
106111
&:hover {
107-
color: color.adjust(variables.$purple, $lightness: -15%, $space: hsl);
112+
color: variables.$dark-gray;
108113
}
109114
}
110115
}

‎assets/sass/layout/_header_mobile.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
@use "../base/variables";
22

33
#mobile-header {
4-
background-color: #333;
4+
background-color: variables.$dark-gray;
55

66
.header-contents {
77
padding: 9px 5px 5px 8px;

‎assets/sass/pages/_downloads.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -264,7 +264,7 @@
264264
}
265265
}
266266
.downloads-section {
267-
grid-template-columns: repeat(1, 1fr);
267+
grid-template-columns: repeat(1, 100%);
268268
}
269269
}
270270
}

‎assets/sass/pages/_espinstaller.scss‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
@use "../base/variables";
2+
13
.cp-installer-dialog {
24
min-width: 300px;
35
min-height: 100px;
@@ -30,7 +32,7 @@
3032
content: ' ';
3133
height: 25px;
3234
width: 2px;
33-
background-color: #333;
35+
background-color: variables.$dark-gray;
3436
}
3537
&:before {
3638
transform: rotate(45deg);

‎assets/sass/pages/_home.scss‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -205,8 +205,12 @@
205205
.one-column-content {
206206
section {
207207
display: grid;
208-
grid-template-columns: 1fr 2fr;
208+
grid-template-columns: repeat(1, 1fr);
209209
column-gap: 20px;
210+
211+
.icon-block {
212+
grid-template-columns: repeat(1, 1fr);
213+
}
210214
}
211215
}
212216
}

‎index.html‎

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,8 @@ <h2>When we say easy, we mean it.</h2>
3636
<div>
3737
<img alt="Brain Circuit Icon"
3838
src="{{ "assets/images/icons/brain-circuit.svg" |
39-
relative_url }}" />
39+
relative_url }}"
40+
loading="lazy" />
4041
<div>
4142
<h3>Beginner Friendly</h3>
4243
<p>
@@ -47,7 +48,8 @@ <h3>Beginner Friendly</h3>
4748
<div>
4849
<img alt="Microchip Icon"
4950
src="{{ "assets/images/icons/microchip.svg" |
50-
relative_url }}" />
51+
relative_url }}"
52+
loading="lazy" />
5153
<div>
5254
<h3>File Storage</h3>
5355
<p>
@@ -58,7 +60,8 @@ <h3>File Storage</h3>
5860
<div>
5961
<img alt="Files Icon"
6062
src="{{ "assets/images/icons/files.svg" |
61-
relative_url }}" />
63+
relative_url }}"
64+
loading="lazy" />
6265
<div>
6366
<h3>Easy Code Updates</h3>
6467
<p>
@@ -70,7 +73,8 @@ <h3>Easy Code Updates</h3>
7073
<div>
7174
<img alt="Terminal Icon"
7275
src="{{ "assets/images/icons/terminal.svg" |
73-
relative_url }}" />
76+
relative_url }}"
77+
loading="lazy" />
7478
<div>
7579
<h3>Serial Console + REPL</h3>
7680
<p>

0 commit comments

Comments
 (0)