angestoepselt/homepage
5
0
Fork 0
mirror of https://codeberg.org/angestoepselt/homepage.git synced 2025-05-24 14:46:16 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Add CoderDojo theme support

Browse source
This commit is contained in:
Yannik Rödel 2022-03-24 10:14:48 +01:00
parent aa74cd4ca9
commit f4a93edb83
8 changed files with 85 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
includes/layouts/base.njk
View file

@ -1,5 +1,5 @@
<!doctype html> <!doctype html>
<html lang="{{ metadata.language }}"> <html lang="{{ metadata.language }}" {% if theme.coderdojo %}data-coderdojo="true"{% endif %}>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>{{ title or metadata.title }}</title> <title>{{ title or metadata.title }}</title>

3
sites/coderdojo/_data/theme.json Normal file
View file

@ -0,0 +1,3 @@
{
"coderdojo": true
}

4
styles/components/_actions.scss
View file

@ -8,6 +8,10 @@
padding: layout.$large-gap; padding: layout.$large-gap;
background-color: colors.$teal-300; background-color: colors.$teal-300;
@include colors.coderdojo-theme {
background-color: colors.$orange-300;
}
> *:not(:last-child) { > *:not(:last-child) {
margin-bottom: layout.$large-gap; margin-bottom: layout.$large-gap;
} }

13
styles/components/_banner.scss
View file

@ -14,6 +14,10 @@
min-height: 60vh; min-height: 60vh;
background-color: colors.$blue-800; background-color: colors.$blue-800;
@include colors.coderdojo-theme {
background-color: colors.$brown-800;
}
> .background { > .background {
position: absolute; position: absolute;
top: 0; top: 0;
@ -42,6 +46,11 @@
font-size: typography.$subheading-size; font-size: typography.$subheading-size;
background-color: colors.$yellow-600; background-color: colors.$yellow-600;
@include colors.coderdojo-theme {
background-color: colors.$brown-800;
color: colors.$inverse-text;
}
> p:first-child { > p:first-child {
margin-top: 0; margin-top: 0;
} }
@ -57,6 +66,10 @@
font-size: typography.$title-size; font-size: typography.$title-size;
font-weight: typography.$emphasized-weight; font-weight: typography.$emphasized-weight;
background-color: colors.$teal-500; background-color: colors.$teal-500;
@include colors.coderdojo-theme {
background-color: colors.$orange-500;
}
} }
} }
} }

32
styles/components/_markup.scss
View file

@ -36,6 +36,10 @@ h1 {
margin-top: 0.2rem; margin-top: 0.2rem;
border-radius: 0.5rem; border-radius: 0.5rem;
background-color: colors.$blue-800; background-color: colors.$blue-800;
@include colors.coderdojo-theme {
background-color: colors.$brown-800;
}
} }
} }
@ -71,6 +75,10 @@ dt {
margin: layout.$normal-gap 0; margin: layout.$normal-gap 0;
font-weight: typography.$emphasized-weight; font-weight: typography.$emphasized-weight;
color: colors.$blue-800; color: colors.$blue-800;
@include colors.coderdojo-theme {
color: colors.$brown-800;
}
} }
dd { dd {
@ -80,6 +88,10 @@ dd {
em { em {
background-color: colors.$teal-300; background-color: colors.$teal-300;
padding: 0 layout.$small-gap 0 layout.$small-gap; padding: 0 layout.$small-gap 0 layout.$small-gap;
@include colors.coderdojo-theme {
background-color: colors.$orange-300;
}
} }
:any-link, :any-link,
@ -89,6 +101,10 @@ a[href] {
&:hover { &:hover {
color: colors.$blue-800; color: colors.$blue-800;
@include colors.coderdojo-theme {
color: colors.$brown-800;
}
} }
} }
@ -97,6 +113,10 @@ blockquote {
$border: 0.5em solid colors.$teal-300; $border: 0.5em solid colors.$teal-300;
border-top: $border; border-top: $border;
border-bottom: $border; border-bottom: $border;
@include colors.coderdojo-theme {
$border: colors.$orange-300;
}
} }
.cta-link { .cta-link {
@ -115,6 +135,10 @@ blockquote {
border-color: colors.$blue-800; border-color: colors.$blue-800;
font-weight: typography.$emphasized-weight; font-weight: typography.$emphasized-weight;
font-size: 110%; font-size: 110%;
@include colors.coderdojo-theme {
border-color: colors.$brown-800;
}
} }
} }
@ -174,6 +198,10 @@ ul.link-grid {
@include colors.card-shadow; @include colors.card-shadow;
background-color: colors.$yellow-300; background-color: colors.$yellow-300;
color: colors.$blue-800; color: colors.$blue-800;
@include colors.coderdojo-theme {
background-color: colors.$green-300;
}
} }
> h2 { > h2 {
@ -197,4 +225,8 @@ ul.link-grid {
.post-metadata { .post-metadata {
text-align: center; text-align: center;
color: colors.$blue-800; color: colors.$blue-800;
@include colors.coderdojo-theme {
color: colors.$brown-800;
}
} }

14
styles/components/_page.scss
View file

@ -6,9 +6,15 @@
padding: layout.$large-gap; padding: layout.$large-gap;
&.inverse { &.inverse {
$link-color: colors.$yellow-500;
color: colors.$inverse-text; color: colors.$inverse-text;
background-color: colors.$blue-800; background-color: colors.$blue-800;
@include colors.coderdojo-theme {
background-color: colors.$brown-800;
$link-color: colors.$green-500;
}
h2:after { h2:after {
background-color: colors.$gray-50; background-color: colors.$gray-50;
} }
@ -18,7 +24,7 @@
color: colors.$gray-300; color: colors.$gray-300;
&:hover { &:hover {
color: colors.$yellow-500; color: $link-color;
} }
} }
@ -26,13 +32,17 @@
border-color: colors.$gray-300; border-color: colors.$gray-300;
&:hover { &:hover {
border-color: colors.$yellow-500; border-color: $link-color;
} }
} }
} }
&.footer { &.footer {
background-color: colors.$teal-500; background-color: colors.$teal-500;
@include colors.coderdojo-theme {
background-color: colors.$gray-100;
}
} }
} }

12
styles/components/_timeline.scss
View file

@ -83,16 +83,22 @@
} }
&:hover { &:hover {
$color: colors.$blue-800;
@include colors.coderdojo-theme {
$color: colors.$orange-500;
}
> .stamp { > .stamp {
border-color: colors.$blue-800; border-color: $color;
background-color: colors.$blue-800; background-color: $color;
color: colors.$inverse-text; color: colors.$inverse-text;
} }
> .content { > .content {
&::before, &::before,
> h3:first-child::after { > h3:first-child::after {
background-color: colors.$blue-800; background-color: $color;
} }
} }
} }

11
styles/lib/_colors.scss
View file

@ -19,7 +19,12 @@ $yellow-600: #e8d823;
$yellow-500: #ffff00; $yellow-500: #ffff00;
$yellow-300: #ffffa4; $yellow-300: #ffffa4;
$green-600: #c4e823;
$green-500: #aaff00;
$green-300: #dbffa4;
$orange-500: #f45520; $orange-500: #f45520;
$orange-400: #f59273;
$orange-300: #fef0ec; $orange-300: #fef0ec;
$main-text: $gray-800; $main-text: $gray-800;
@ -34,3 +39,9 @@ $inverse-text: $gray-50;
box-shadow: 0.1rem 0.4rem 0.4rem #{transparentize($base-color, 0.9)}, box-shadow: 0.1rem 0.4rem 0.4rem #{transparentize($base-color, 0.9)},
0.25rem 1rem 1rem #{transparentize($base-color, 0.9)}; 0.25rem 1rem 1rem #{transparentize($base-color, 0.9)};
} }
@mixin coderdojo-theme {
@at-root [data-coderdojo] & {
@content;
}
}