Skip to content

Commit e770753

Browse files
RahicheRahiche
authored
Convert visual theme to dark mode, start utilizing Tailwind theme properties (#16)
1 parent 46eb615 commit e770753

File tree

4 files changed

+118
-27
lines changed

4 files changed

+118
-27
lines changed

‎source/_includes/layouts/content_page.jinja‎

Lines changed: 16 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -29,13 +29,22 @@
2929
<link href="/styles/tailwind.css" rel="stylesheet">
3030

3131
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/obsidian.min.css">
32+
33+
3234
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
3335
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/languages/dart.min.js"></script>
3436
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/languages/glsl.min.js"></script>
3537
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/languages/bash.min.js"></script>
3638
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/languages/yaml.min.js"></script>
3739
<script>hljs.highlightAll();</script>
3840

41+
<style>
42+
pre {
43+
background: transparent !important;
44+
padding: 0 !important;
45+
}
46+
</style>
47+
3948
<style>
4049
/* Custom styles for content page images */
4150
.prose img {
@@ -64,18 +73,15 @@
6473
</style>
6574
</head>
6675

67-
<body class="bg-[#27b6d6]">
68-
<header class="py-[64px] flex flex-col justify-center items-center bg-[#FFFFFF] text-[#444444]">
69-
<div class="absolute top-0 left-0 w-full h-[48px] flex justify-center items-center">
70-
<a href="/" class="text-[#444444] text-sm font-bold uppercase">Flutter Shaders</a>
71-
</div>
72-
73-
<h1 class="text-4xl font-bold uppercase text-center max-w-[800px] px-4">{{ title }}</h1>
74-
<p class="mt-4 text-lg text-center max-w-[600px] px-4">{{ description }}</p>
76+
<body class="bg-gray-900 text-gray-100">
77+
<header class="py-16 bg-gray-800 text-center">
78+
<a href="/" class="text-blue-400 hover:text-blue-300 font-semibold">&larr; Back to Home</a>
79+
<h1 class="mt-4 text-5xl font-extrabold tracking-tight text-white">{{ title }}</h1>
80+
<p class="mt-4 text-xl text-gray-300 max-w-2xl mx-auto">{{ description }}</p>
7581
</header>
7682

77-
<main class="ml-[auto] mr-[auto] max-w-[1000px] py-[72px] px-[48px] text-[#FFFFFFBB]">
78-
<div class="content max-w-none">
83+
<main class="max-w-3xl mx-auto py-12 px-4 sm:px-6 lg:px-8">
84+
<div class="prose prose-invert prose-lg max-w-none prose-p:leading-relaxed prose-p:mb-8 prose-headings:mt-16 prose-headings:mb-4">
7985
{{ content }}
8086
</div>
8187
</main>

‎source/_includes/layouts/shader_page.jinja‎

Lines changed: 13 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -32,19 +32,26 @@
3232
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/languages/dart.min.js"></script>
3333
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/languages/glsl.min.js"></script>
3434
<script>hljs.highlightAll();</script>
35+
36+
<style>
37+
pre {
38+
background: transparent !important;
39+
padding: 0 !important;
40+
}
41+
</style>
3542
</head>
3643

37-
<body class="bg-[#27b6d6]">
38-
<header class="py-[128px] flex flex-col justify-center items-center bg-[#FFFFFF] text-[#444444]">
44+
<body class="bg-gray-900 text-gray-100">
45+
<header class="py-[128px] flex flex-col justify-center items-center bg-gray-800 text-gray-100">
3946
<div class="absolute top-0 left-0 w-full h-[48px] flex justify-center items-center">
40-
<a href="/" class="text-[#444444] text-sm font-bold uppercase">Flutter Shaders</a>
47+
<a href="/" class="text-gray-100 text-sm font-bold uppercase">Flutter Shaders</a>
4148
</div>
4249

43-
<img src="{{ shader.screenshot }}" class="max-w-[400px]">
50+
<img src="{{ shader.screenshot }}" class="max-w-[400px] rounded-lg">
4451
<h1 class="mt-8 text-4xl font-bold uppercase">{{ shader.title }}</h1>
4552
</header>
4653

47-
<main class="ml-[auto] mr-[auto] max-w-[800px] py-[72px] px-[48px] flex flex-col items-center text-[#FFFFFFBB]">
54+
<main class="ml-[auto] mr-[auto] max-w-[800px] py-[72px] px-[48px] flex flex-col items-center text-gray-300">
4855
<p class="mb-[72px] max-w-[500px] text-2xl font-bold text-center">{{ shader.description }}</p>
4956

5057
<video width="500" height="400" autoplay loop muted class="rounded-md">
@@ -53,7 +60,7 @@
5360

5461
<p class="mt-[24px] mb-[72px] max-w-[500px]">Use the code below to add this shader to a Flutter app. If you’re not sure what to do with the provided code, check out our <a href="/usage-guide">usage guide</a>, or learn <a href="/how-shaders-work">how shaders works</a>.</p>
5562

56-
<div id="shaderCode" class="w-[100%]">
63+
<div id="shaderCode" class="w-[100%] prose prose-invert">
5764
{{ content }}
5865
</div>
5966
</main>

‎source/index.jinja‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -34,12 +34,12 @@ description: An inventory of shaders for Flutter developers to explore.
3434
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
3535
</head>
3636

37-
<body class="bg-[#27b6d6]">
38-
<header class="pt-[64px] pb-[128px] md:py-[128px] flex flex-col justify-center items-center bg-[#FFFFFF] text-[#444444]">
37+
<body class="bg-gray-900 text-gray-100">
38+
<header class="pt-[64px] pb-[128px] md:py-[128px] flex flex-col justify-center items-center bg-gray-800 text-gray-100">
3939
<div class="max-w-[800px] block md:flex md:flex-row items-center">
4040
<div class="md:flex-1 pl-[64px] pr-[64px] pb-[48px] md:pb-0">
4141
<h1 class="mb-[8px] text-5xl font-bold uppercase">Flutter Shaders</h1>
42-
<p class="mb-[24px] text-3xl text-[#27b6d6] font-bold">Shaders for every user, on every platform</p>
42+
<p class="mb-[24px] text-3xl text-blue-400 font-bold">Shaders for every user, on every platform</p>
4343
<img src="/images/platform-icons.png" class="max-w-[275px]">
4444
</div>
4545
<div class="mx-[auto] md:ml-[48px] w-[250px] h-[250px]">
@@ -48,16 +48,16 @@ description: An inventory of shaders for Flutter developers to explore.
4848
</div>
4949

5050
<div class="mt-[72px] flex flex-col md:flex-row gap-6 text-center">
51-
<a href="/getting-started" class="text-[#444444] font-bold uppercase no-underline">Getting Started Guide</a>
52-
<a href="/how-shaders-work" class="text-[#444444] font-bold uppercase no-underline">Learn how shaders work</a>
51+
<a href="/getting-started" class="text-gray-100 font-bold uppercase no-underline">Getting Started Guide</a>
52+
<a href="/how-shaders-work" class="text-gray-100 font-bold uppercase no-underline">Learn how shaders work</a>
5353
</div>
5454
</header>
55-
<main class="py-[96px] text-[#FFFFFFAA]">
55+
<main class="py-[96px] text-gray-300">
5656
<div class="max-w-[800px] ml-[auto] mr-[auto] mb-[128px]">
5757
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-[48px]">
5858
{% for page in pages.byTag("shader") %}
5959
<a href="{{ page.data["url"] }}" class="no-underline">
60-
<div class="p-[8px] border border-[#FFFFFF10] hover:border-[#FFFFFF33] hover:bg-[#FFFFFF04] rounded-lg">
60+
<div class="p-[8px] border border-gray-700 hover:border-gray-600 hover:bg-gray-800 rounded-lg">
6161
<img
6262
src="{{ page.data["directory"] }}{{ page.data["shader"]["screenshot"] }}"
6363
class="w-full ml-[auto] mr-[auto] max-w-[250px] rounded-md"
@@ -69,7 +69,7 @@ description: An inventory of shaders for Flutter developers to explore.
6969
</div>
7070
</div>
7171

72-
<h2 class="text-center font-bold uppercase text-xl text-[#FFFFFF]">Contributors</h2>
72+
<h2 class="text-center font-bold uppercase text-xl text-white">Contributors</h2>
7373
<ol class="mt-[32px] mb-[128px] flex flex-row justify-center list-none text-center">
7474
{% set contributors = github["flutter-bounty-hunters"].flutter_shaders %}
7575
{% set contributorCount = 15 %}
@@ -86,7 +86,7 @@ description: An inventory of shaders for Flutter developers to explore.
8686

8787
{% if contributors|length > contributorCount %}
8888
<li class="inline-block">
89-
<div class="inline-block w-[64px] h-[64px] rounded-full bg-[rgba(255, 255, 255, 0.05)] leading-[64px] text-center align-[middle]">
89+
<div class="inline-block w-[64px] h-[64px] rounded-full bg-gray-800 leading-[64px] text-center align-[middle]">
9090
+{{ contributors|length - contributorCount }}
9191
</div>
9292
</li>
@@ -100,8 +100,8 @@ description: An inventory of shaders for Flutter developers to explore.
100100
title="matthew-carroll"
101101
class="inline-block w-[64px] h-[64px] rounded-full bg-cover bg-no-repeat bg-center"
102102
style="background-image: url('https://avatars.githubusercontent.com/u/7259036?v=4');"></a>
103-
<p class="mt-[8px] mb-[24px] text-sm">Made with ❤️ by <a href="https://superdeclarative.com" target="_blank" class="text-[#FFFF00]">SuperDeclarative!</a></p>
104-
<a href="https://github.com/sponsors/matthew-carroll" target="_blank" class="px-[12px] py-[8px] bg-sky-600 hover:bg-sky-400 rounded-lg text-[#FFFFFFDD] hover:text-[#FFFFFFFF] no-underline text-sm"><i class="fa-brands fa-github"></i> Sponsor on GitHub</a>
103+
<p class="mt-[8px] mb-[24px] text-sm">Made with ❤️ by <a href="https://superdeclarative.com" target="_blank" class="text-yellow-400">SuperDeclarative!</a></p>
104+
<a href="https://github.com/sponsors/matthew-carroll" target="_blank" class="px-[12px] py-[8px] bg-sky-600 hover:bg-sky-400 rounded-lg text-gray-200 hover:text-white no-underline text-sm"><i class="fa-brands fa-github"></i> Sponsor on GitHub</a>
105105
</div>
106106
</main>
107107
</body>

‎tailwind.config.js‎

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,84 @@
1+
const defaultTheme = require('tailwindcss/defaultTheme')
2+
13
/** @type {import('tailwindcss').Config} */
24
module.exports = {
35
content: [
46
'./source/**/*.jinja',
57
],
8+
theme: {
9+
extend: {
10+
fontFamily: {
11+
sans: ['Inter var', ...defaultTheme.fontFamily.sans],
12+
},
13+
typography: ({ theme }) => ({
14+
invert: {
15+
css: {
16+
'--tw-prose-body': theme('colors.gray[300]'),
17+
'--tw-prose-headings': theme('colors.white'),
18+
'--tw-prose-lead': theme('colors.gray[400]'),
19+
'--tw-prose-links': theme('colors.blue[400]'),
20+
'--tw-prose-bold': theme('colors.white'),
21+
'--tw-prose-counters': theme('colors.gray[400]'),
22+
'--tw-prose-bullets': theme('colors.gray[600]'),
23+
'--tw-prose-hr': theme('colors.gray[700]'),
24+
'--tw-prose-quotes': theme('colors.gray[100]'),
25+
'--tw-prose-quote-borders': theme('colors.gray[700]'),
26+
'--tw-prose-captions': theme('colors.gray[400]'),
27+
'--tw-prose-code': theme('colors.white'),
28+
'--tw-prose-pre-code': theme('colors.gray[300]'),
29+
'--tw-prose-pre-bg': theme('colors.gray[800]'),
30+
'--tw-prose-th-borders': theme('colors.gray[600]'),
31+
'--tw-prose-td-borders': theme('colors.gray[700]'),
32+
'--tw-prose-invert-body': theme('colors.gray[300]'),
33+
'--tw-prose-invert-headings': theme('colors.white'),
34+
'--tw-prose-invert-lead': theme('colors.gray[400]'),
35+
'--tw-prose-invert-links': theme('colors.blue[400]'),
36+
'--tw-prose-invert-bold': theme('colors.white'),
37+
'--tw-prose-invert-counters': theme('colors.gray[400]'),
38+
'--tw-prose-invert-bullets': theme('colors.gray[600]'),
39+
'--tw-prose-invert-hr': theme('colors.gray[700]'),
40+
'--tw-prose-invert-quotes': theme('colors.gray[100]'),
41+
'--tw-prose-invert-quote-borders': theme('colors.gray[700]'),
42+
'--tw-prose-invert-captions': theme('colors.gray[400]'),
43+
'--tw-prose-invert-code': theme('colors.white'),
44+
'--tw-prose-invert-pre-code': theme('colors.gray[300]'),
45+
'--tw-prose-invert-pre-bg': 'transparent',
46+
'--tw-prose-invert-th-borders': theme('colors.gray[600]'),
47+
'--tw-prose-invert-td-borders': theme('colors.gray[700]'),
48+
p: {
49+
marginTop: '1.25em',
50+
marginBottom: '1.25em',
51+
},
52+
'h2, h3, h4, h5, h6': {
53+
marginTop: '2em',
54+
marginBottom: '1em',
55+
},
56+
ul: {
57+
marginTop: '1.25em',
58+
marginBottom: '1.25em',
59+
},
60+
ol: {
61+
marginTop: '1.25em',
62+
marginBottom: '1.25em',
63+
},
64+
li: {
65+
marginTop: '0.5em',
66+
marginBottom: '0.5em',
67+
},
68+
blockquote: {
69+
marginTop: '1.6em',
70+
marginBottom: '1.6em',
71+
},
72+
pre: {
73+
padding: '0',
74+
margin: '0',
75+
},
76+
},
77+
},
78+
}),
79+
},
80+
},
81+
plugins: [
82+
require('@tailwindcss/typography'),
83+
],
684
}

0 commit comments

Comments
 (0)