adafruit-mirror/circuitpython-org
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Merge pull request #1609 from jwcooper/design-cleanup

Browse source 
Some more clean up to the new design
This commit is contained in:
Dan Halbert 2025-04-01 11:00:22 -04:00 committed by GitHub
commit a21066bb9f
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
9 changed files with 61 additions and 39 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
_includes/downloads/board_image.html
View file

@ -1,7 +1,12 @@
{% assign small_image = "/assets/images/boards/small/" | append: include.board_image | absolute_url %} {% assign small_image = "/assets/images/boards/small/" | append:
{% assign large_image = "/assets/images/boards/large/" | append: include.board_image | absolute_url %} include.board_image | absolute_url %} {% assign large_image =
<img srcset="{{ small_image }} 300w, "/assets/images/boards/large/" | append: include.board_image | absolute_url %}
{{ large_image }} 700w" <img
sizes="(max-width: 1024px) 700px, srcset="{{ small_image }} 300w,
300px" {{ large_image }} 800w"
src="{{ large_image }}" alt="Image of Board" loading="lazy"> sizes="(max-width: 300px) 300px,
800px"
src="{{ large_image }}"
alt="Image of Board"
loading="lazy"
/>

13
_includes/index/learn_block.html
View file

@ -1,15 +1,16 @@
<div class="image"> <div class="image">
{% assign guide = site.data.guides[include.index] %} {% assign guide = site.data.guides[include.index] %}
<img class="image-headline" alt="{{ guide.image_alt_attribute }}" <img class="image-headline"
src="{{ guide.image }}" alt="{{ guide.image_alt_attribute }}"
/> src="{{ guide.image }}"
loading="lazy" />
<span class="image-title"> <span class="image-title">
<span> <span>
<p><a href="{{ guide.guide_url }}">{{ guide.title }} by {{ guide.author }}</a></p> <p><a href="{{ guide.guide_url }}">{{ guide.title }} by {{ guide.author }}</a></p>
</span> </span>
<img alt="Made with CircuitPython Logo" <img alt="Made with CircuitPython Logo"
src="{{ "assets/images/made_with_circuitpython.svg" | src="{{ "assets/images/made_with_circuitpython.svg" |
relative_url }}" relative_url }}"
/> loading="lazy" />
</span> </span>
</div> </div>

23
assets/sass/base/_variables.scss
View file

@ -1,27 +1,28 @@
$purple: #652f8f; $purple: #652f8f;
$pink: #e90e8b; $pink: #e90e8b;
$gray: #999999; $gray: #999999;
$dark-gray: #333333;
$gray-border: #cecece; $gray-border: #cecece;
// derived from bootstrap variables // derived from bootstrap variables
// Extra small screen / phone // Extra small screen / phone
$screen-xs: 480px !default; $screen-xs: 480px !default;
$screen-phone: $screen-xs !default; $screen-phone: $screen-xs !default;
// Small screen / tablet // Small screen / tablet
$screen-sm: 768px !default; $screen-sm: 768px !default;
$screen-tablet: $screen-sm !default; $screen-tablet: $screen-sm !default;
// Medium screen / desktop // Medium screen / desktop
$screen-md: 1024px !default; $screen-md: 1024px !default;
$screen-desktop: $screen-md !default; $screen-desktop: $screen-md !default;
// Large screen / wide desktop // Large screen / wide desktop
$screen-lg: 1366px !default; $screen-lg: 1366px !default;
$screen-lg-desktop: $screen-lg !default; $screen-lg-desktop: $screen-lg !default;
// So media queries don't overlap when required, provide a maximum // So media queries don't overlap when required, provide a maximum
$screen-xs-max: ($screen-sm - 1) !default; $screen-xs-max: ($screen-sm - 1) !default;
$screen-sm-max: ($screen-md - 1) !default; $screen-sm-max: ($screen-md - 1) !default;
$screen-md-max: ($screen-lg - 1) !default; $screen-md-max: ($screen-lg - 1) !default;

19
assets/sass/layout/_header.scss
View file

@ -19,24 +19,25 @@
padding: 0 25px; padding: 0 25px;
margin: 20px 0; margin: 20px 0;
} }
a.active {
color: color.adjust(variables.$purple, $lightness: -15%, $space: hsl);
}
} }
.top-navigation { .top-navigation {
background-color: #333; background-color: variables.$dark-gray;
@include mixins.readable-content; @include mixins.readable-content;
.navigation { .navigation {
margin-left: 15px; margin-left: 15px;
padding: 10px; padding: 10px;
a { a {
font-size: 16px; font-size: 16px;
color: #aaa; color: #aaa;
margin-right: 40px; margin-right: 40px;
&.active {
color: #fff;
}
&:hover { &:hover {
color: #fff; color: #fff;
} }
@ -100,11 +101,15 @@
a { a {
margin-right: 30px; margin-right: 30px;
color: #63338f; color: variables.$purple;
white-space: nowrap; white-space: nowrap;
&.active {
color: variables.$dark-gray;
}
&:hover { &:hover {
color: color.adjust(variables.$purple, $lightness: -15%, $space: hsl); color: variables.$dark-gray;
} }
} }
} }

2
assets/sass/layout/_header_mobile.scss
View file

@ -1,7 +1,7 @@
@use "../base/variables"; @use "../base/variables";
#mobile-header { #mobile-header {
background-color: #333; background-color: variables.$dark-gray;
.header-contents { .header-contents {
padding: 9px 5px 5px 8px; padding: 9px 5px 5px 8px;

2
assets/sass/pages/_downloads.scss
View file

@ -264,7 +264,7 @@
} }
} }
.downloads-section { .downloads-section {
grid-template-columns: repeat(1, 1fr); grid-template-columns: repeat(1, 100%);
} }
} }
} }

4
assets/sass/pages/_espinstaller.scss
View file

@ -1,3 +1,5 @@
@use "../base/variables";
.cp-installer-dialog { .cp-installer-dialog {
min-width: 300px; min-width: 300px;
min-height: 100px; min-height: 100px;
@ -30,7 +32,7 @@
content: ' '; content: ' ';
height: 25px; height: 25px;
width: 2px; width: 2px;
background-color: #333; background-color: variables.$dark-gray;
} }
&:before { &:before {
transform: rotate(45deg); transform: rotate(45deg);

6
assets/sass/pages/_home.scss
View file

@ -205,8 +205,12 @@
.one-column-content { .one-column-content {
section { section {
display: grid; display: grid;
grid-template-columns: 1fr 2fr; grid-template-columns: repeat(1, 1fr);
column-gap: 20px; column-gap: 20px;
.icon-block {
grid-template-columns: repeat(1, 1fr);
}
} }
} }
} }

12
index.html
View file

@ -36,7 +36,8 @@ layout: home
<div> <div>
<img alt="Brain Circuit Icon" <img alt="Brain Circuit Icon"
src="{{ "assets/images/icons/brain-circuit.svg" | src="{{ "assets/images/icons/brain-circuit.svg" |
relative_url }}" /> relative_url }}"
loading="lazy" />
<div> <div>
<h3>Beginner Friendly</h3> <h3>Beginner Friendly</h3>
<p> <p>
@ -47,7 +48,8 @@ layout: home
<div> <div>
<img alt="Microchip Icon" <img alt="Microchip Icon"
src="{{ "assets/images/icons/microchip.svg" | src="{{ "assets/images/icons/microchip.svg" |
relative_url }}" /> relative_url }}"
loading="lazy" />
<div> <div>
<h3>File Storage</h3> <h3>File Storage</h3>
<p> <p>
@ -58,7 +60,8 @@ layout: home
<div> <div>
<img alt="Files Icon" <img alt="Files Icon"
src="{{ "assets/images/icons/files.svg" | src="{{ "assets/images/icons/files.svg" |
relative_url }}" /> relative_url }}"
loading="lazy" />
<div> <div>
<h3>Easy Code Updates</h3> <h3>Easy Code Updates</h3>
<p> <p>
@ -70,7 +73,8 @@ layout: home
<div> <div>
<img alt="Terminal Icon" <img alt="Terminal Icon"
src="{{ "assets/images/icons/terminal.svg" | src="{{ "assets/images/icons/terminal.svg" |
relative_url }}" /> relative_url }}"
loading="lazy" />
<div> <div>
<h3>Serial Console + REPL</h3> <h3>Serial Console + REPL</h3>
<p> <p>