diff --git a/includes/layouts/base.njk b/includes/layouts/base.njk
index 8c1034b..7c9efea 100644
--- a/includes/layouts/base.njk
+++ b/includes/layouts/base.njk
@@ -1,5 +1,5 @@
-
+
{{ title or metadata.title }}
diff --git a/sites/coderdojo/_data/theme.json b/sites/coderdojo/_data/theme.json
new file mode 100644
index 0000000..2f9c0ae
--- /dev/null
+++ b/sites/coderdojo/_data/theme.json
@@ -0,0 +1,3 @@
+{
+ "coderdojo": true
+}
diff --git a/styles/components/_actions.scss b/styles/components/_actions.scss
index 04a83f0..3de305d 100644
--- a/styles/components/_actions.scss
+++ b/styles/components/_actions.scss
@@ -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;
}
diff --git a/styles/components/_banner.scss b/styles/components/_banner.scss
index 4cf1791..6f53d78 100644
--- a/styles/components/_banner.scss
+++ b/styles/components/_banner.scss
@@ -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;
+ }
}
}
}
diff --git a/styles/components/_markup.scss b/styles/components/_markup.scss
index a24563c..e4c90b7 100644
--- a/styles/components/_markup.scss
+++ b/styles/components/_markup.scss
@@ -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;
+ }
}
diff --git a/styles/components/_page.scss b/styles/components/_page.scss
index 91829ad..58d985d 100644
--- a/styles/components/_page.scss
+++ b/styles/components/_page.scss
@@ -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;
+ }
}
}
diff --git a/styles/components/_timeline.scss b/styles/components/_timeline.scss
index 0604d41..9fafa88 100644
--- a/styles/components/_timeline.scss
+++ b/styles/components/_timeline.scss
@@ -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;
}
}
}
diff --git a/styles/lib/_colors.scss b/styles/lib/_colors.scss
index 47e2d5e..39f35a9 100644
--- a/styles/lib/_colors.scss
+++ b/styles/lib/_colors.scss
@@ -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;
+ }
+}