angestoepselt/homepage
5
0
Fork 0
mirror of https://codeberg.org/angestoepselt/homepage.git synced 2026-03-21 22:32:17 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Add CSS reset, migrate global layout and typography to base.scss

Browse source
This commit is contained in:
Yannik Rödel 2026-01-13 22:46:17 +01:00
parent ec07ec65e3
commit c2bd57bf1a
11 changed files with 140 additions and 74 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

83
styles/base.scss
View file

@ -1,14 +1,81 @@
@use 'lib/colors';
@use 'lib/layout';
@use 'lib/typography';
@use "sass:math";
@use "lib/fluids" with (
$lower-harmonic-ratio: 1.25,
$upper-harmonic-ratio: 1.3
);
@use "lib/reset";
@use 'components/markup';
@use 'components/site';
@use 'components/page';
@use 'components/banner';
@include layout.setup;
@include typography.setup;
* {
box-sizing: border-box;
@layer reset {
@include reset.setup;
}
$-comfortaa-weights: (
'Light': 300,
'Regular': 400,
'Medium': 500,
'Semi-bold': 600,
'Bold': 700,
);
@each $name, $weight in $-comfortaa-weights {
@font-face {
font-family: 'Comfortaa';
font-style: normal;
font-weight: $weight;
font-display: swap;
src: url('/assets/fonts/Comfortaa-#{$name}.ttf') format('truetype');
}
}
@font-face {
font-family: 'Comfortaa Variable';
font-style: normal;
font-display: swap;
src: url('/assets/fonts/Comfortaa-VariableFont_wght.ttf') format('truetype');
}
:root {
$-text-lower-base: math.div(1rem, 20) * 16;
$-text-upper-base: 1rem;
--text-m: #{fluids.harmonic-value(0, $-text-lower-base, $-text-upper-base)};
--text-l: #{fluids.harmonic-value(1, $-text-lower-base, $-text-upper-base)};
--text-xl: #{fluids.harmonic-value(2, $-text-lower-base, $-text-upper-base)};
--text-2xl: #{fluids.harmonic-value(3, $-text-lower-base, $-text-upper-base)};
$-line-height-factor: 1.5;
--scale-s: #{0.8 * $-line-height-factor};
--scale-m: #{$-line-height-factor};
--scale-l: #{1.5 * $-line-height-factor};
--scale-xl: #{1.7 * $-line-height-factor};
$-gap-lower-base: $-text-lower-base * $-line-height-factor;
$-gap-upper-base: $-text-upper-base * $-line-height-factor;
--gap-xs: #{fluids.harmonic-value(-3, $-gap-lower-base, $-gap-upper-base)};
--gap-s: #{fluids.harmonic-value(-2, $-gap-lower-base, $-gap-upper-base)};
--gap-m: #{fluids.harmonic-value(0, $-gap-lower-base, $-gap-upper-base)};
--gap-l: #{fluids.harmonic-value(2, $-gap-lower-base, $-gap-upper-base)};
--gap-xl: #{fluids.harmonic-value(3, $-gap-lower-base, $-gap-upper-base)};
--gap-2xl: #{fluids.harmonic-value(5, $-gap-lower-base, $-gap-upper-base)};
--weight-normal: 400;
--weight-emph: 600;
}
html {
font-size: 125%; // Scale from 16px to 20px
font-family: var(--font-override, Comfortaa, var(--system-fonts));
font-weight: var(--weight-normal);
@supports (font-variation-settings: normal) {
font-family: var(--font-override, 'Comfortaa Variable', var(--system-fonts));
}
}
body {
font-size: var(--text-m);
line-height: var(--scale-m);
}

3
styles/components/_banner.scss
View file

@ -1,6 +1,5 @@
@use '../lib/colors';
@use '../lib/layout';
@use '../lib/typography';
// Banners can be put at the top of a page to draw attention. A banner has
// two children:
@ -68,7 +67,7 @@
padding: 0 var(--gap-m);
line-height: var(--scale-xl);
font-size: var(--text-2xl);
font-weight: typography.$emphasized-weight;
font-weight: var(--weight-emph);
background-color: colors.$teal-500;
@include colors.coderdojo-theme {

5
styles/components/_form-elements.scss
View file

@ -1,7 +1,6 @@
@use '../lib/colors';
@use '../lib/layout';
@use '../lib/motion';
@use '../lib/typography';
%form-item {
@extend %narrow-content-gutter;
@ -16,7 +15,7 @@
}
%form-label {
font-weight: typography.$emphasized-weight;
font-weight: var(--weight-emph);
color: colors.$blue-800;
@include colors.coderdojo-theme {
@ -111,7 +110,7 @@
&:checked {
+ .form-input > label {
font-weight: typography.$emphasized-weight;
font-weight: var(--weight-emph);
color: colors.$teal-800;
border-color: colors.$teal-800;

5
styles/components/_markup.scss
View file

@ -1,7 +1,6 @@
@use '../lib/colors';
@use '../lib/layout';
@use '../lib/motion';
@use '../lib/typography';
body {
margin: 0;
@ -77,7 +76,7 @@ li {
dt {
margin: var(--gap-m) 0;
font-weight: typography.$emphasized-weight;
font-weight: var(--weight-emph);
color: colors.$blue-800;
@include colors.coderdojo-theme {
@ -150,7 +149,7 @@ blockquote {
&:hover {
border-color: colors.$blue-800;
font-weight: typography.$emphasized-weight;
font-weight: var(--weight-emph);
@include colors.coderdojo-theme {
border-color: colors.$brown-800;

1
styles/components/_page.scss
View file

@ -1,6 +1,5 @@
@use '../lib/colors';
@use '../lib/layout';
@use '../lib/typography';
.page-section {
padding-top: var(--gap-l);

3
styles/components/_site.scss
View file

@ -1,7 +1,6 @@
@use '../lib/colors';
@use '../lib/layout';
@use '../lib/motion';
@use '../lib/typography';
@mixin header-item {
padding: 0 var(--gap-m);
@ -97,7 +96,7 @@
a {
display: block;
padding: var(--gap-s);
font-weight: typography.$emphasized-weight;
font-weight: var(--weight-emph);
text-align: center;
text-decoration: none;
text-transform: lowercase;

3
styles/components/_tabs.scss
View file

@ -1,6 +1,5 @@
@use '../lib/colors';
@use '../lib/layout';
@use '../lib/typography';
// This is an HTML/CSS-only tabs component. It expects the following markup:
//
@ -45,7 +44,7 @@
display: block;
+ a {
font-weight: typography.$emphasized-weight;
font-weight: var(--weight-emph);
color: colors.$blue-800;
}
}

3
styles/components/_timeline.scss
View file

@ -2,7 +2,6 @@
@use '../lib/colors';
@use '../lib/layout';
@use '../lib/motion';
@use '../lib/typography';
.timeline {
$stampSize: 4rem;
@ -48,7 +47,7 @@
display: block;
padding-inline: var(--gap-s);
font-size: var(--text-m);
font-weight: typography.$normal-weight;
font-weight: var(--weight-normal);
}
}
}

5
styles/lib/_layout.scss
View file

@ -1,8 +1,3 @@
@use "fluids" with (
$lower-harmonic-ratio: 1.25,
$upper-harmonic-ratio: 1.3
);
$breakpoint: 80rem;
$narrow-content-width: 50rem;

57
styles/lib/_reset.scss Normal file
View file

@ -0,0 +1,57 @@
@mixin setup {
:root {
--system-fonts: Avenir, Montserrat, Corbel, "URW Gothic", source-sans-pro,
"Source Sans 3", Ubuntu, Roboto, Noto, system-ui, sans-serif;
--monospace-system-fonts: ui-monospace, "Source Code Pro", "Ubuntu Mono",
"Cascadia Code", Menlo, Consolas, Monaco, "Andale Mono", "Liberation Mono",
"Lucida Console", monospace;
font-synthesis: none;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color-scheme: light dark;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
font-size: 100%;
hanging-punctuation: first last;
orphans: 3;
}
body {
margin: 0;
}
input,
button,
textarea,
select {
font: inherit;
color: inherit;
}
@media (prefers-reduced-data: reduce) {
// Use var(--font-override, "The Font you actually want") to disable loading
// web fonts when prefers-reduce-data is on.
:root {
--font-override: var(--system-fonts);
--monospace-font-override: var(--monospace-system-fonts);
}
}
@media (prefers-reduced-motion) {
// Similar to the above, use something like var(--timing-override, 2s) to
// disable animations where appropriate.
:root {
--timing-override: 0;
--timing-state-override: paused;
}
}
}

46
styles/lib/_typography.scss
View file

@ -1,46 +0,0 @@
$normal-weight: 400;
$emphasized-weight: 600;
$comfortaa-weights: (
'Light': 300,
'Regular': 400,
'Medium': 500,
'Semi-bold': 600,
'Bold': 700,
);
@mixin setup {
@each $name, $weight in $comfortaa-weights {
@font-face {
font-family: 'Comfortaa';
font-style: normal;
font-weight: $weight;
font-display: swap;
src: url('/assets/fonts/Comfortaa-#{$name}.ttf') format('truetype');
}
}
@font-face {
font-family: 'Comfortaa Variable';
font-style: normal;
font-display: swap;
src: url('/assets/fonts/Comfortaa-VariableFont_wght.ttf') format('truetype');
}
html {
$fallback-fonts: Roboto, Arial, sans-serif;
font-size: 125%; // Scale from 16px to 20px
font-family: Comfortaa, $fallback-fonts;
font-weight: $normal-weight;
@supports (font-variation-settings: normal) {
font-family: 'Comfortaa Variable', $fallback-fonts;
}
}
body {
font-size: var(--text-m);
line-height: var(--scale-m);
}
}