mikewink/mw-site
Watch
1
0
Fork
You've already forked mw-site
 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Update site with dark mode

Browse source
This commit is contained in:
Mike Wink 2022-11-18 11:48:23 +01:00
commit 8a0c36dfdd
3 changed files with 36 additions and 23 deletions
Download patch file Download diff file Expand all files Collapse all files

27
public/build/styles.css
View file

File diff suppressed because one or more lines are too long

24
public/index.php
View file

@ -15,11 +15,11 @@
href="/build/styles.css"> href="/build/styles.css">
</head> </head>
<body class="pattern bg-lightCyan md:h-screen"> <body class="pattern bg-lightCyan dark:bg-black dark:text-white md:h-screen">
<div class="md:grid md:grid-cols-layout md:h-full"> <div class="md:grid md:grid-cols-layout md:h-full">
<div class="p-8 md:order-2 md:col-start-2 md:col-end-3 bg-white shadow-md"> <div class="p-8 md:order-2 md:col-start-2 md:col-end-3 bg-white dark:bg-black shadow-md">
<article class="mb-10 prose font-din"> <article class="mb-10 prose dark:text-white font-din">
<h1 class="uppercase">Mike Wink</h1> <h1 class="uppercase text-paleCerulean">Mike Wink</h1>
<p class="prose-2xl">Specializing in Craft CMS, Kirby CMS, Laravel, Statamic, Symfony, Livewire, <p class="prose-2xl">Specializing in Craft CMS, Kirby CMS, Laravel, Statamic, Symfony, Livewire,
Alpine.js, HTMX and more. Alpine.js, HTMX and more.
</p> </p>
@ -29,7 +29,7 @@
<p> <p>
My current side project is to learn and productively use <a href="https://obsidian.md/" target="_blank" rel="nofollow noopen">Obsidian</a> as my second brain. My current side project is to learn and productively use <a href="https://obsidian.md/" target="_blank" rel="nofollow noopen">Obsidian</a> as my second brain.
</p> </p>
<p class="prose-bdazzledBlue">Working on several client projects, but there will be a full website <p>Working on several client projects, but there will be a full website
soonish. You can reach me via email at soonish. You can reach me via email at
<a href="mailto:me@mikewink.de">me@mikewink.de</a> <a href="mailto:me@mikewink.de">me@mikewink.de</a>
if you want to. if you want to.
@ -37,13 +37,13 @@
<p>Mike</p> <p>Mike</p>
</article> </article>
<ul class="flex flex-row space-x-4 align-center"> <ul class="flex flex-row space-x-4 align-center" aria-label="A list of my three social media account">
<li> <li>
<a href="https://github.com/mikewink" <a href="https://github.com/mikewink"
title="GitHub profile Mike Wink" title="GitHub profile Mike Wink"
target="_blank"> target="_blank">
<svg role="img" <svg aria-hidden="true"
class="w-6 h-6 opacity-50 fill-current text-burntSienna" class="w-6 h-6 fill-current text-burntSienna"
viewBox="0 0 24 24" viewBox="0 0 24 24"
width="24px" width="24px"
height="24px" height="24px"
@ -57,8 +57,8 @@
<a href="https://twitter.com/mikewink" <a href="https://twitter.com/mikewink"
title="Twitter profile Mike Wink" title="Twitter profile Mike Wink"
target="_blank"> target="_blank">
<svg role="img" <svg aria-hidden="true"
class="w-6 h-6 opacity-50 fill-current text-burntSienna" class="w-6 h-6 fill-current text-burntSienna"
viewBox="0 0 24 24" viewBox="0 0 24 24"
width="24px" width="24px"
height="24px" height="24px"
@ -73,8 +73,8 @@
title="Mastodon profile Mike Wink" title="Mastodon profile Mike Wink"
target="_blank" target="_blank"
rel="me"> rel="me">
<svg role="img" <svg aria-hidden="true"
class="w-6 h-6 opacity-50 fill-current text-burntSienna" class="w-6 h-6 fill-current text-burntSienna"
viewBox="0 0 24 24" viewBox="0 0 24 24"
width="24px" width="24px"
height="24px" height="24px"

8
tailwind.config.js
View file

@ -3,7 +3,7 @@ module.exports = {
purge: [ purge: [
'./public/**/*.php', './public/**/*.php',
], ],
darkMode: false, // or 'media' or 'class' darkMode: 'media', // or 'media' or 'class'
theme: { theme: {
extend: { extend: {
gridTemplateColumns: { gridTemplateColumns: {
@ -15,14 +15,13 @@ module.exports = {
typography: (theme) => ({ typography: (theme) => ({
DEFAULT: { DEFAULT: {
css: { css: {
color: theme('colors.gunMetal'),
h1: { h1: {
color: theme('colors.bdazzledBlue'), color: theme('colors.bdazzledBlue'),
}, },
a: { a: {
color: theme('colors.burntSienna'), color: theme('colors.darkPastelRed'),
'&:hover': { '&:hover': {
color: theme('colors.burntSienna'), color: theme('colors.darkPastelRed'),
}, },
}, },
}, },
@ -35,6 +34,7 @@ module.exports = {
paleCerulean: '#98c1d9', paleCerulean: '#98c1d9',
lightCyan: '#e0fbfc', lightCyan: '#e0fbfc',
burntSienna: '#ee6c4d', burntSienna: '#ee6c4d',
darkPastelRed: '#c93d19',
gunMetal: '#293241', gunMetal: '#293241',
}, },
}, },