Skip to content

Add dark styling for system theme #102

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
danielh-official wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Add dark styling for system theme #102

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion source/404.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
@extends('_layouts.main')

@section('body')
<div class="flex flex-col items-center text-gray-700 mt-32">
<div class="flex flex-col items-center mt-32">
<h1 class="text-6xl font-light leading-none mb-2">404</h1>

<h2 class="text-3xl">Page not found.</h2>
Expand Down
7 changes: 7 additions & 0 deletions source/_assets/css/base.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,8 @@ a {
@apply no-underline;
@apply text-blue-500;
@apply hover:text-blue-700;
@apply dark:text-blue-300;
@apply dark:hover:text-blue-500;
}

blockquote {
Expand All @@ -18,6 +20,8 @@ blockquote {
@apply text-gray-800;
@apply border-l-4;
@apply border-blue-400;
@apply dark:text-gray-300;
@apply dark:border-blue-400;
}

code {
Expand All @@ -26,6 +30,7 @@ code {
@apply text-sm;
@apply bg-gray-300;
@apply rounded-sm;
@apply dark:bg-gray-700;
}

code.hljs {
Expand All @@ -50,6 +55,7 @@ h6 {
@apply mb-4;
@apply text-gray-900;
@apply leading-tight;
@apply dark:text-gray-300;

&:first-child {
@apply mt-0;
Expand Down Expand Up @@ -127,6 +133,7 @@ pre {
@apply my-6;
@apply text-base;
@apply bg-gray-200;
@apply dark:bg-gray-800;
@apply leading-loose;
@apply rounded-sm;
@apply shadow-sm;
Expand Down
4 changes: 3 additions & 1 deletion source/_assets/css/main.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,9 @@

:not(pre) > code[class*="language-"],
pre[class*="language-"] {
background: #e5e7eb;
@apply bg-[#e5e7eb];
@apply dark:bg-[#1f2937];
@apply dark:text-white;
}

.token.operator,
Expand Down
8 changes: 4 additions & 4 deletions source/_components/newsletter-signup.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
<div class="flex justify-center items-center bg-gray-200 border border-gray-400 rounded-lg p-4 md:p-8 md:px-12 my-12 shadow-sm lg:-mx-12">
<div class="flex justify-center items-center border border-gray-400 rounded-lg p-4 md:p-8 md:px-12 my-12 shadow-sm lg:-mx-12">
<form action="" method="post" class="w-full max-w-3xl">
<div class="flex flex-col items-center w-full gap-3 md:gap-4">
<div class="text-xl md:text-2xl font-bold text-gray-900 text-center">Sign up for our newsletter</div>
<div class="text-xl md:text-2xl font-bold text-center">Sign up for our newsletter</div>
<div class="flex w-full max-w-lg">
<input type="email" required name="email" placeholder="Email address" class="text-sm flex-1 rounded-l-md px-3 py-3 border-none focus:ring-2 focus:ring-blue-400 focus:outline-none bg-white text-gray-700 placeholder-gray-400">
<button type="submit" class="text-sm rounded-r-md px-4 md:px-8 py-3 font-medium bg-blue-400 text-white hover:bg-blue-500 transition-colors duration-150">Subscribe</button>
<input type="email" required name="email" placeholder="Email address" class="text-sm flex-1 rounded-l-md px-3 py-3 border-gray-400 border-2 focus:ring-2 focus:ring-blue-400 focus:outline-none placeholder-gray-400">
<button type="submit" class="text-sm rounded-r-md px-4 md:px-8 py-3 font-medium bg-blue-400 hover:bg-blue-500 transition-colors duration-150">Subscribe</button>
</div>
<div class="text-sm">Need forms? Try <a href="https://fieldgoal.io/" class="underline" target="_blank">FieldGoal</a></div>
</div>
Expand Down
4 changes: 2 additions & 2 deletions source/_components/post-preview-inline.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
<div class="flex flex-col mb-4">
<p class="text-gray-700 font-medium my-2">
<p class="font-medium my-2">
{{ $post->getDate()->format('F j, Y') }}
</p>

<h2 class="text-3xl mt-0">
<a
href="{{ $post->getUrl() }}"
title="Read more - {{ $post->title }}"
class="text-gray-900 font-extrabold"
class="font-extrabold"
>{{ $post->title }}</a>
</h2>

Expand Down
14 changes: 7 additions & 7 deletions source/_components/search.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@
class="flex flex-1 justify-end items-center text-right px-4"
>
<div
class="absolute md:relative w-full justify-end bg-white left-0 top-0 z-10 mt-7 md:mt-0 px-4 md:px-0"
class="absolute md:relative w-full justify-end left-0 top-0 z-10 mt-7 md:mt-0 px-4 md:px-0"
:class="{'hidden md:flex': ! searching}"
>
<label for="search" class="hidden">Search</label>
Expand All @@ -42,7 +42,7 @@ class="absolute md:relative w-full justify-end bg-white left-0 top-0 z-10 mt-7 m
id="search"
x-model="query"
x-ref="search"
class="relative block h-10 w-full lg:w-1/2 lg:focus:w-3/4 bg-gray-100 border border-gray-500 focus:border-blue-400 outline-none cursor-pointer text-gray-700 px-4 pb-0 pt-px transition-all duration-200 ease-out bg-no-repeat bg-[0.8rem] indent-[1.2em]"
class="relative block h-10 w-full lg:w-1/2 lg:focus:w-3/4 border border-gray-500 focus:border-blue-400 outline-none cursor-pointer px-4 pb-0 pt-px transition-all duration-200 ease-out bg-no-repeat bg-position-[0.8rem] indent-[1.2em]"
:class="{ 'rounded-b-none rounded-t-lg': query, 'rounded-3xl': !query }"
style="background-image: url('/assets/img/magnifying-glass.svg')"
autocomplete="off"
Expand Down Expand Up @@ -70,10 +70,10 @@ class="absolute top-0 right-0 leading-snug font-400 text-3xl text-blue-500 hover
x-transition:leave-end="opacity-0"
class="absolute left-0 right-0 md:inset-auto w-full lg:w-3/4 text-left mb-4 md:mt-10"
>
<div class="flex flex-col bg-white border border-b-0 border-t-0 border-blue-400 rounded-b-lg shadow-search mx-4 md:mx-0">
<div class="flex flex-col border border-b-0 border-t-0 border-blue-400 rounded-b-lg shadow-search mx-4 md:mx-0 bg-gray-300 dark:bg-gray-700">
<template x-for="(result, index) in results">
<a
class="bg-white hover:bg-blue-100 border-b border-blue-400 text-xl cursor-pointer p-4"
class="hover:bg-blue-100 dark:hover:bg-gray-600 border-b border-blue-400 text-xl cursor-pointer p-4"
:class="{ 'rounded-b-lg': (index === results.length - 1) }"
:href="result.item.link"
:title="result.item.title"
Expand All @@ -82,12 +82,12 @@ class="bg-white hover:bg-blue-100 border-b border-blue-400 text-xl cursor-pointe
>
<span x-html="result.item.title"></span>

<span class="block font-normal text-gray-700 text-sm my-1" x-html="result.item.snippet"></span>
<span class="block font-normal text-sm my-1" x-html="result.item.snippet"></span>
</a>
</template>
<div
x-show="! results.length"
class="bg-white w-full hover:bg-blue-100 border-b border-blue-400 rounded-b-lg shadow cursor-pointer p-4"
class="w-full hover:bg-blue-100 dark:hover:bg-gray-600 border-b border-blue-400 rounded-b-lg shadow cursor-pointer p-4"
>
<p class="my-0">No results for <strong x-html="query"></strong></p>
</div>
Expand All @@ -98,7 +98,7 @@ class="bg-white w-full hover:bg-blue-100 border-b border-blue-400 rounded-b-lg s
<button
title="Start searching"
type="button"
class="flex md:hidden bg-gray-100 hover:bg-blue-100 justify-center items-center border border-gray-500 rounded-full focus:outline-none h-10 px-3"
class="flex md:hidden hover:bg-blue-100 justify-center items-center border border-gray-500 rounded-full focus:outline-none h-10 px-3"
@click.prevent="showInput"
>
<img src="/assets/img/magnifying-glass.svg" alt="search icon" class="h-4 w-4 max-w-none">
Expand Down
8 changes: 4 additions & 4 deletions source/_layouts/main.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,14 +29,14 @@
<script defer type="module" src="{{ vite('source/_assets/js/main.js') }}"></script>
</head>

<body class="flex flex-col justify-between min-h-screen bg-gray-100 text-gray-800 leading-normal font-sans">
<header class="flex items-center shadow bg-white border-b h-24 py-4" role="banner">
<body class="flex flex-col justify-between min-h-screen bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-white leading-normal font-sans">
<header class="flex items-center shadow border-b h-24 py-4" role="banner">
<div class="container flex items-center max-w-8xl mx-auto px-4 lg:px-8">
<div class="flex items-center">
<a href="/" title="{{ $page->siteName }} home" class="inline-flex items-center">
<img class="h-8 md:h-10 mr-3" src="/assets/img/logo.svg" alt="{{ $page->siteName }} logo" />

<h1 class="text-lg md:text-2xl text-blue-800 font-semibold hover:text-blue-600 my-0">{{ $page->siteName }}</h1>
<h1 class="text-lg md:text-2xl font-semibold hover:text-blue-600 my-0">{{ $page->siteName }}</h1>
</a>
</div>

Expand All @@ -56,7 +56,7 @@
@yield('body')
</main>

<footer class="bg-white text-center text-sm mt-12 py-4" role="contentinfo">
<footer class="text-center text-sm mt-12 py-4" role="contentinfo">
<ul class="flex flex-col md:flex-row justify-center list-none">
<li class="md:mr-2">
&copy; <a href="https://tighten.co" title="Tighten website">Tighten</a> {{ date('Y') }}.
Expand Down
4 changes: 2 additions & 2 deletions source/_layouts/post.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,14 +11,14 @@

<h1 class="leading-none mb-2">{{ $page->title }}</h1>

<p class="text-gray-700 text-xl md:mt-0">{{ $page->author }} • {{ date('F j, Y', $page->date) }}</p>
<p class="text-gray-700 dark:text-gray-300 text-xl md:mt-0">{{ $page->author }} • {{ date('F j, Y', $page->date) }}</p>

@if ($page->categories)
@foreach ($page->categories as $i => $category)
<a
href="{{ '/blog/categories/' . $category }}"
title="View posts in {{ $category }}"
class="inline-block bg-gray-300 hover:bg-blue-200 leading-loose tracking-wide text-gray-800 uppercase text-xs font-semibold rounded-sm mr-4 px-3 pt-px"
class="inline-block bg-gray-300 dark:bg-gray-500 hover:bg-blue-200 leading-loose tracking-wide uppercase text-xs font-semibold rounded-sm mr-4 px-3 pt-px"
>{{ $category }}</a>
@endforeach
@endif
Expand Down
2 changes: 1 addition & 1 deletion source/_nav/menu-responsive.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<nav id="js-nav-menu" class="w-auto px-2 pt-6 pb-2 bg-gray-200 shadow hidden lg:hidden">
<nav id="js-nav-menu" class="w-auto px-2 pt-6 pb-2 shadow hidden lg:hidden">
<ul class="my-0">
<li class="pl-4">
<a
Expand Down
6 changes: 3 additions & 3 deletions source/_nav/menu.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,16 @@
<nav class="hidden lg:flex items-center justify-end text-lg">
<a title="{{ $page->siteName }} Blog" href="/blog"
class="ml-6 text-gray-700 hover:text-blue-600 {{ $page->isActive('/blog') ? 'active text-blue-600' : '' }}">
class="ml-6 hover:text-blue-600 {{ $page->isActive('/blog') ? 'active text-blue-600' : '' }}">
Blog
</a>

<a title="{{ $page->siteName }} About" href="/about"
class="ml-6 text-gray-700 hover:text-blue-600 {{ $page->isActive('/about') ? 'active text-blue-600' : '' }}">
class="ml-6 hover:text-blue-600 {{ $page->isActive('/about') ? 'active text-blue-600' : '' }}">
About
</a>

<a title="{{ $page->siteName }} Contact" href="/contact"
class="ml-6 text-gray-700 hover:text-blue-600 {{ $page->isActive('/contact') ? 'active text-blue-600' : '' }}">
class="ml-6 hover:text-blue-600 {{ $page->isActive('/contact') ? 'active text-blue-600' : '' }}">
Contact
</a>
</nav>
6 changes: 3 additions & 3 deletions source/blog.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,23 +26,23 @@
<a
href="{{ $previous }}"
title="Previous Page"
class="bg-gray-200 hover:bg-gray-400 rounded mr-3 px-5 py-3"
class="bg-gray-200 hover:bg-gray-400 dark:bg-white dark:hover:bg-gray-200 rounded mr-3 px-5 py-3"
>&LeftArrow;</a>
@endif

@foreach ($pagination->pages as $pageNumber => $path)
<a
href="{{ $path }}"
title="Go to Page {{ $pageNumber }}"
class="bg-gray-200 hover:bg-gray-400 rounded mr-3 px-5 py-3 {{ $pagination->currentPage == $pageNumber ? 'text-blue-600' : 'text-blue-700' }}"
class="bg-gray-200 hover:bg-gray-400 dark:bg-white dark:hover:bg-gray-200 rounded mr-3 px-5 py-3 {{ $pagination->currentPage == $pageNumber ? 'text-blue-600' : 'text-blue-700' }}"
>{{ $pageNumber }}</a>
@endforeach

@if ($next = $pagination->next)
<a
href="{{ $next }}"
title="Next Page"
class="bg-gray-200 hover:bg-gray-400 rounded mr-3 px-5 py-3"
class="bg-gray-200 hover:bg-gray-400 dark:bg-white dark:hover:bg-gray-200 rounded mr-3 px-5 py-3"
>&RightArrow;</a>
@endif
</nav>
Expand Down
14 changes: 7 additions & 7 deletions source/contact.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
<form action="/contact" class="mb-12">
<div class="flex flex-wrap mb-6 -mx-3">
<div class="w-full md:w-1/2 mb-6 md:mb-0 px-3">
<label class="block mb-2 text-gray-800 text-sm font-semibold" for="contact-name">
<label class="block mb-2 text-sm font-semibold" for="contact-name">
Name
</label>

Expand All @@ -23,13 +23,13 @@
id="contact-name"
placeholder="Jane Doe"
name="name"
class="bg-white block w-full border shadow-sm rounded-lg outline-hidden mb-2 px-4 py-3"
class="block w-full border shadow-sm rounded-lg outline-hidden mb-2 px-4 py-3"
required
>
</div>

<div class="w-full px-3 md:w-1/2">
<label class="block text-gray-800 text-sm font-semibold mb-2" for="contact-email">
<label class="block text-sm font-semibold mb-2" for="contact-email">
Email Address
</label>

Expand All @@ -38,22 +38,22 @@ class="bg-white block w-full border shadow-sm rounded-lg outline-hidden mb-2 px-
id="contact-email"
placeholder="email@domain.com"
name="email"
class="bg-white block w-full border shadow-sm rounded-lg outline-hidden mb-2 px-4 py-3"
class="block w-full border shadow-sm rounded-lg outline-hidden mb-2 px-4 py-3"
required
>
</div>
</div>

<div class="w-full mb-12">
<label class="block text-gray-800 text-sm font-semibold mb-2" for="contact-message">
<label class="block text-sm font-semibold mb-2" for="contact-message">
Message
</label>

<textarea
id="contact-message"
rows="4"
name="message"
class="bg-white block w-full border shadow-sm rounded-lg outline-hidden appearance-none mb-2 px-4 py-3"
class="block w-full border shadow-sm rounded-lg outline-hidden appearance-none mb-2 px-4 py-3"
placeholder="A lovely message here."
required
></textarea>
Expand All @@ -63,7 +63,7 @@ class="bg-white block w-full border shadow-sm rounded-lg outline-hidden appearan
<input
type="submit"
value="Submit"
class="block bg-blue-500 hover:bg-blue-600 text-white text-sm font-semibold leading-snug tracking-wide uppercase shadow-sm rounded-lg cursor-pointer px-6 py-3"
class="block bg-blue-500 hover:bg-blue-600 text-sm font-semibold leading-snug tracking-wide uppercase shadow-sm rounded-lg cursor-pointer px-6 py-3"
>
</div>
</form>
Expand Down
4 changes: 2 additions & 2 deletions source/index.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,12 +7,12 @@
<img src="{{ $featuredPost->cover_image }}" alt="{{ $featuredPost->title }} cover image" class="mb-6">
@endif

<p class="text-gray-700 font-medium my-2">
<p class="font-medium my-2">
{{ $featuredPost->getDate()->format('F j, Y') }}
</p>

<h2 class="text-3xl mt-0">
<a href="{{ $featuredPost->getUrl() }}" title="Read {{ $featuredPost->title }}" class="text-gray-900 font-extrabold">
<a href="{{ $featuredPost->getUrl() }}" title="Read {{ $featuredPost->title }}" class="font-extrabold">
{{ $featuredPost->title }}
</a>
</h2>
Expand Down