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>
<html lang="{{ metadata.language }}">
<html lang="{{ metadata.language }}" {% if theme.coderdojo %}data-coderdojo="true"{% endif %}>
<head>
<meta charset="utf-8">
<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;
background-color: colors.$teal-300;
@include colors.coderdojo-theme {
background-color: colors.$orange-300;
}
> *:not(:last-child) {
margin-bottom: layout.$large-gap;
}

13
styles/components/_banner.scss
View file

@ -14,6 +14,10 @@
min-height: 60vh;
background-color: colors.$blue-800;
@include colors.coderdojo-theme {
background-color: colors.$brown-800;
}
> .background {
position: absolute;
top: 0;
@ -42,6 +46,11 @@
font-size: typography.$subheading-size;
background-color: colors.$yellow-600;
@include colors.coderdojo-theme {
background-color: colors.$brown-800;
color: colors.$inverse-text;
}
> p:first-child {
margin-top: 0;
}
@ -57,6 +66,10 @@
font-size: typography.$title-size;
font-weight: typography.$emphasized-weight;
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;
border-radius: 0.5rem;
background-color: colors.$blue-800;
@include colors.coderdojo-theme {
background-color: colors.$brown-800;
}
}
}
@ -71,6 +75,10 @@ dt {
margin: layout.$normal-gap 0;
font-weight: typography.$emphasized-weight;
color: colors.$blue-800;
@include colors.coderdojo-theme {
color: colors.$brown-800;
}
}
dd {
@ -80,6 +88,10 @@ dd {
em {
background-color: colors.$teal-300;
padding: 0 layout.$small-gap 0 layout.$small-gap;
@include colors.coderdojo-theme {
background-color: colors.$orange-300;
}
}
:any-link,
@ -89,6 +101,10 @@ a[href] {
&:hover {
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-top: $border;
border-bottom: $border;
@include colors.coderdojo-theme {
$border: colors.$orange-300;
}
}
.cta-link {
@ -115,6 +135,10 @@ blockquote {
border-color: colors.$blue-800;
font-weight: typography.$emphasized-weight;
font-size: 110%;
@include colors.coderdojo-theme {
border-color: colors.$brown-800;
}
}
}
@ -174,6 +198,10 @@ ul.link-grid {
@include colors.card-shadow;
background-color: colors.$yellow-300;
color: colors.$blue-800;
@include colors.coderdojo-theme {
background-color: colors.$green-300;
}
}
> h2 {
@ -197,4 +225,8 @@ ul.link-grid {
.post-metadata {
text-align: center;
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;
&.inverse {
$link-color: colors.$yellow-500;
color: colors.$inverse-text;
background-color: colors.$blue-800;
@include colors.coderdojo-theme {
background-color: colors.$brown-800;
$link-color: colors.$green-500;
}
h2:after {
background-color: colors.$gray-50;
}
@ -18,7 +24,7 @@
color: colors.$gray-300;
&:hover {
color: colors.$yellow-500;
color: $link-color;
}
}
@ -26,13 +32,17 @@
border-color: colors.$gray-300;
&:hover {
border-color: colors.$yellow-500;
border-color: $link-color;
}
}
}
&.footer {
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 {
$color: colors.$blue-800;
@include colors.coderdojo-theme {
$color: colors.$orange-500;
}
> .stamp {
border-color: colors.$blue-800;
background-color: colors.$blue-800;
border-color: $color;
background-color: $color;
color: colors.$inverse-text;
}
> .content {
&::before,
> 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-300: #ffffa4;
$green-600: #c4e823;
$green-500: #aaff00;
$green-300: #dbffa4;
$orange-500: #f45520;
$orange-400: #f59273;
$orange-300: #fef0ec;
$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)},
0.25rem 1rem 1rem #{transparentize($base-color, 0.9)};
}
@mixin coderdojo-theme {
@at-root [data-coderdojo] & {
@content;
}
}