Infrastructure/astro
0
Fork 0
mirror of https://github.com/withastro/astro.git synced 2024-12-30 22:03:56 -05:00
Code Issues Activity

fix(examples): update Sass usage in Starlog example (#12596)

Browse source 
* fix: replace Sass @imports with @use

* fix: move nested rules under top-level declarations
This commit is contained in:
Armand Philippot 2024-12-03 16:41:25 +01:00 committed by GitHub
parent 7a02982455
commit 3be8eaba0b
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 73 additions and 62 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
examples/starlog/src/styles/colors.scss
View file

@ -1,11 +1,13 @@
@use "sass:map";
@function color($color, $tone) { @function color($color, $tone) {
// @warn map-get($palette,$color); // @warn map.get($palette,$color);
@if map-has-key($palette, $color) { @if map.has-key($palette, $color) {
$color: map-get($palette, $color); $color: map.get($palette, $color);
@if map-has-key($color, $tone) { @if map.has-key($color, $tone) {
$tone: map-get($color, $tone); $tone: map.get($color, $tone);
@return $tone; @return $tone;
} }

6
examples/starlog/src/styles/global.scss
View file

@ -1,3 +1,3 @@
@import 'colors.scss'; @use 'colors.scss';
@import 'type.scss'; @use 'type.scss';
@import 'layout.scss'; @use 'layout.scss';

92
examples/starlog/src/styles/layout.scss
View file

@ -1,3 +1,7 @@
@use 'sass:color';
@use './colors.scss' as colors;
@use './type.scss' as type;
$container: 1040px; $container: 1040px;
$tablet: 768px; $tablet: 768px;
$mobile: 420px; $mobile: 420px;
@ -11,9 +15,9 @@ body {
padding: 0 1em; padding: 0 1em;
width: 1040px; width: 1040px;
max-width: 100%; max-width: 100%;
background-color: $white; background-color: colors.$white;
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
background-color: color(gray, 950); background-color: colors.color(gray, 950);
} }
@media (max-width: $tablet) { @media (max-width: $tablet) {
font-size: 16px; font-size: 16px;
@ -39,8 +43,8 @@ body {
height: 240px; height: 240px;
background: radial-gradient( background: radial-gradient(
50% 50% at 50% 50%, 50% 50% at 50% 50%,
rgba(color(orange, 500), 0.2) 0%, rgba(colors.color(orange, 500), 0.2) 0%,
rgba(color(orange, 500), 0) 100% rgba(colors.color(orange, 500), 0) 100%
); );
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
background: radial-gradient( background: radial-gradient(
@ -53,31 +57,31 @@ body {
} }
::selection { ::selection {
background: color(orange, 200); background: colors.color(orange, 200);
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
background: color(orange, 600); background: colors.color(orange, 600);
} }
} }
a, a,
a:visited { a:visited {
color: color(orange, 600); color: colors.color(orange, 600);
@media (prefers-color-scheme: dark) {
color: color(orange, 300);
}
transition: 0.1s ease; transition: 0.1s ease;
@media (prefers-color-scheme: dark) {
color: colors.color(orange, 300);
}
&:hover { &:hover {
color: color(orange, 500); color: colors.color(orange, 500);
} }
} }
hr { hr {
margin: 1em 0; margin: 1em 0;
border: 0; border: 0;
border-bottom: 1px solid color(gray, 100); border-bottom: 1px solid colors.color(gray, 100);
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
border-color: color(gray, 900); border-color: colors.color(gray, 900);
} }
} }
@ -102,22 +106,22 @@ nav {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 10px; gap: 10px;
color: color(gray, 950); color: colors.color(gray, 950);
@media (prefers-color-scheme: dark) {
color: $white;
}
font-size: 16px; font-size: 16px;
font-weight: 700; font-weight: 700;
letter-spacing: 2px; letter-spacing: 2px;
line-height: 1; line-height: 1;
text-decoration: none; text-decoration: none;
text-transform: uppercase; text-transform: uppercase;
@media (prefers-color-scheme: dark) {
color: colors.$white;
}
} }
.links a { .links a {
margin-left: 1em; margin-left: 1em;
color: color(gray, 800); color: colors.color(gray, 800);
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
color: color(gray, 200); color: colors.color(gray, 200);
} }
} }
} }
@ -144,7 +148,7 @@ nav {
top: 0.63em; top: 0.63em;
width: 8px; width: 8px;
height: 8px; height: 8px;
background: linear-gradient(25deg, color(purple, 500), color(orange, 500)); background: linear-gradient(25deg, colors.color(purple, 500), colors.color(orange, 500));
border-radius: 99px; border-radius: 99px;
} }
} }
@ -178,12 +182,12 @@ nav {
.version_wrapper { .version_wrapper {
flex-basis: 260px; flex-basis: 260px;
@media (max-width: $container) {
flex-basis: 140px;
}
flex-grow: 0; flex-grow: 0;
flex-shrink: 0; flex-shrink: 0;
margin: 4.5em 0 0 0; margin: 4.5em 0 0 0;
@media (max-width: $container) {
flex-basis: 140px;
}
@media (max-width: $tablet) { @media (max-width: $tablet) {
flex-basis: 0; flex-basis: 0;
margin-top: 2em; margin-top: 2em;
@ -200,7 +204,7 @@ nav {
a { a {
float: left; float: left;
color: $white; color: colors.$white;
text-decoration: none; text-decoration: none;
transition: 0.1s ease; transition: 0.1s ease;
@ -212,45 +216,45 @@ nav {
.version_number { .version_number {
display: inline-block; display: inline-block;
font-family: $codeFont; font-family: type.$codeFont;
line-height: 1; line-height: 1;
margin-bottom: 8px; margin-bottom: 8px;
padding: 4px 12px; padding: 4px 12px;
color: $white; color: colors.$white;
background: linear-gradient( background: linear-gradient(
25deg, 25deg,
color(purple, 800), colors.color(purple, 800),
color(purple, 700), colors.color(purple, 700),
mix(color(purple, 500), color(orange, 500)), color.mix(colors.color(purple, 500), colors.color(orange, 500)),
color(orange, 500) colors.color(orange, 500)
); );
border-radius: 8px; border-radius: 8px;
} }
.date { .date {
clear: both; clear: both;
color: colors.color(gray, 800);
font-family: type.$codeFont;
font-size: type.$fontSizeSmall;
@media (max-width: $tablet) { @media (max-width: $tablet) {
display: inline; display: inline;
margin-left: 1em; margin-left: 1em;
} }
color: color(gray, 800);
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
color: color(gray, 200); color: colors.color(gray, 200);
} }
font-family: $codeFont;
font-size: $fontSizeSmall;
} }
.content { .content {
margin: 0; margin: 0;
padding: 4em 0; padding: 4em 0;
border-bottom: 1px solid colors.color(gray, 100);
@media (max-width: $tablet) { @media (max-width: $tablet) {
margin: 1em 0; margin: 1em 0;
padding: 0 0 2em 0; padding: 0 0 2em 0;
} }
border-bottom: 1px solid color(gray, 100);
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
border-color: color(gray, 900); border-color: colors.color(gray, 900);
} }
*:first-child { *:first-child {
margin-top: 0; margin-top: 0;
@ -259,9 +263,9 @@ nav {
max-width: 100%; max-width: 100%;
height: auto; height: auto;
border-radius: 12px; border-radius: 12px;
border: 1px solid color(gray, 200); border: 1px solid colors.color(gray, 200);
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
border-color: color(gray, 800); border-color: colors.color(gray, 800);
} }
} }
} }
@ -269,22 +273,22 @@ nav {
footer { footer {
display: flex; display: flex;
padding: 2em 0; padding: 2em 0;
color: colors.color(gray, 500);
justify-content: space-between;
border-top: 1px solid colors.color(gray, 100);
@media (max-width: $tablet) { @media (max-width: $tablet) {
padding: 1em 0; padding: 1em 0;
} }
color: color(gray, 500);
justify-content: space-between;
border-top: 1px solid color(gray, 100);
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
border-color: color(gray, 900); border-color: colors.color(gray, 900);
} }
a { a {
margin-left: 1em; margin-left: 1em;
color: color(gray, 500); color: colors.color(gray, 500);
text-decoration: none; text-decoration: none;
&:hover { &:hover {
color: color(gray, 500); color: colors.color(gray, 500);
opacity: 0.6; opacity: 0.6;
} }
} }

25
examples/starlog/src/styles/type.scss
View file

@ -1,3 +1,5 @@
@use "./colors.scss" as colors;
$baseFont: 'Lato', sans-serif; $baseFont: 'Lato', sans-serif;
$codeFont: 'Source Code Pro', monospace; $codeFont: 'Source Code Pro', monospace;
$fontSizeSmall: 15px; $fontSizeSmall: 15px;
@ -7,13 +9,14 @@ body {
font-size: 18px; font-size: 18px;
line-height: 1.65; line-height: 1.65;
font-weight: 400; font-weight: 400;
@media (prefers-color-scheme: dark) { color: colors.color(gray, 800);
color: color(gray, 200);
}
color: color(gray, 800);
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility; text-rendering: optimizeLegibility;
@media (prefers-color-scheme: dark) {
color: colors.color(gray, 200);
}
} }
h1, h1,
@ -23,11 +26,12 @@ h4,
h5 { h5 {
line-height: 1.2; line-height: 1.2;
margin: 1em 0 0.5em 0; margin: 1em 0 0.5em 0;
@media (prefers-color-scheme: dark) { color: colors.color(gray, 950);
color: $white;
}
color: color(gray, 950);
font-weight: 700; font-weight: 700;
@media (prefers-color-scheme: dark) {
color: colors.$white;
}
} }
h1 { h1 {
@ -58,8 +62,9 @@ b,
strong { strong {
font-weight: 700; font-weight: 700;
color: #fff; color: #fff;
color: colors.color(gray, 950);
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
color: $white; color: colors.$white;
} }
color: color(gray, 950);
} }