mafoo.org.uk/selfdefined
1
0
Fork 0
mirror of https://github.com/fooflington/selfdefined.git synced 2025-10-31 14:18:32 +00:00
Code Issues Projects Releases Wiki Activity

🌓 Adds Dark Mode (#210)

Browse Source 
* feat(dark mode): set up first set of colors

* feat(dark mode): define state colours

* 🧹

* feat(dark mode): variablify all teh wordz

* feat(dark mode): set colors on body

* feat(dark mode): replace hard coded color value

* feat(dark mode): 🌑

* feat(a11y): update link focus styles

- restores visible focus in windows high contrast mode
- increases visibility in boxes with bg colour

* feat(dark mode): enable postcss

* 💅

* feat(dark mode): add user control

* chore: use generic headline name

* feat(dark mode): hide switch until script loads

* feat(dark mode): increase link contrast

* add content warning to footer nav partial

* feat(dark mode): replace hard coded colour value in alertbox

* feat(dark mode): tone down text colour

* feat(dark mode): properly invert code elements

* 🧹 move box styles into own partial

* feat(dark mode): use darker colour as background for links
This commit is contained in:
Oscar
2020-08-26 12:10:24 +02:00
committed by GitHub
parent 7f11b552a6
commit 7f7943d2fc
31 changed files with 880 additions and 241 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
11ty/_includes/components/base/site-footer.njk Normal file
View File

@@ -0,0 +1,29 @@
<footer class="site-footer">
<nav aria-label="Complimentary">
<ul class="navigation-list">
<li>
<a href="/documentation/">Documentation</a>
</li>
<li>
<a href="/content-warning-guidelines/">Content Warning Guidelines</a>
</li>
<li>
<a href="{{ metadata.feedPermalink | absoluteUrl(metadata.url) }}">RSS Feed</a>
</li>
</ul>
</nav>
<div role="group" class="js-theme-switch" aria-labelledby="clrmd-hl" hidden>
<h2 id="clrmd-hl" class="smcp-headline">Colour mode</h2>
{% for theme in site.themes %}
<div class="radio-wrapper">
<input
type="radio"
name="display-mode"
value="{{ theme.value }}"
id="display-mode-{{ theme.value }}"
>
<label for="display-mode-{{ theme.value }}">{{ theme.label }}</label>
</div>
{% endfor %}
</div>
</footer>

17
11ty/_includes/layouts/base.njk
View File

@@ -42,22 +42,9 @@
</head>
<body>
{% block content %}{% endblock content %}
<footer class="site-footer">
<nav aria-label="Complimentary">
<ul class="navigation-list">
<li>
<a href="/documentation/">Documentation</a>
</li>
<li>
<a href="/content-warning-guidelines/">Content Warning Guidelines</a>
</li>
<li>
<a href="{{ metadata.feedPermalink | absoluteUrl(metadata.url) }}">RSS Feed</a>
</li>
</ul>
</nav>
</footer>
{% include 'components/base/site-footer.njk' %}
{% block pageScript %}
{% endblock pageScript %}
</body>
<script defer src="/js/theme-switcher.js"></script>
</html>