opdavies/oliverdavies.uk
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

Add dark mode support

Browse source
This commit is contained in:
Oliver Davies 2021-06-30 08:00:00 +01:00
parent 9cc4952c6d
commit 534a38a63c
5 changed files with 7 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
source/_layouts/default.html.twig
View file

@ -1,12 +1,12 @@
{% extends 'app' %}
{% block body %}
<div class="font-sans text-lg font-light text-gray-900">
<div class="font-sans text-lg font-light text-gray-900 dark:bg-gray-900 dark:text-white">
<a class="sr-only focus:not-sr-only" href="#main-content">Skip to main content</a>
{% include 'navbar' %}
<div class="my-16">
<div class="py-16">
<div id="main-content" class="max-w-2xl px-4 mx-auto">
{% block content_wrapper %}
{% block content %}{% endblock %}

2
source/_pages/blog.html.twig
View file

@ -11,7 +11,7 @@ use:
{% for talk in data.posts %}
<article>
<h2 class="text-xl">
<a class="text-blue-700" href="{{ talk.url }}">
<a class="text-blue-700 dark:text-blue-400" href="{{ talk.url }}">
{{ talk.title }}
</a>
</h2>

2
source/_pages/talks.html.twig
View file

@ -11,7 +11,7 @@ use:
{% for talk in data.talks|sort((a,b) => a.sortable_date < b.sortable_date) %}
<article>
<h2 class="text-xl">
<a class="text-blue-700" href="{{ talk.url }}">
<a class="text-blue-700 dark:text-blue-400" href="{{ talk.url }}">
{{ talk.title }}
</a>
</h2>

4
source/_partials/navbar.html.twig
View file

@ -5,7 +5,7 @@
<a href="/">
<svg
aria-hidden="true"
class="w-16 h-16 text-blue-700 fill-current md:w-18 md:h-18"
class="w-16 h-16 text-blue-700 fill-current dark:text-blue-400 md:w-18 md:h-18"
viewBox="0 0 706 504"
xmlns="http://www.w3.org/2000/svg"
>
@ -21,7 +21,7 @@
<nav class="flex flex-col items-center mt-4 md:mt-0 md:flex-row md:space-x-4">
{% for item in site.menus.main %}
{% set is_active = page.url matches '#' ~ item.is_active ~ '#' %}
<a class="text-black border-b-3 py-2 {{ is_active ? 'border-blue-700' : 'border-transparent' }}" href="{{ item.href }}">{{ item.title }}</a>
<a class="text-black dark:text-white border-b-3 py-2 {{ is_active ? 'border-blue-700 dark:border-blue-400' : 'border-transparent' }}" href="{{ item.href }}">{{ item.title }}</a>
{% endfor %}
</nav>
</div>

2
tailwind.config.js
View file

@ -7,7 +7,7 @@ const typography = require('@tailwindcss/typography')
const { fontFamily } = defaultTheme
module.exports = {
darkMode: false,
darkMode: 'media',
important: true,
purge: {
content: [