wip theme update for 2024
This commit is contained in:
Ava Gaiety W
parent
a650a54907
commit
bfc2670d87
6 changed files with 1099 additions and 310 deletions
13
.eleventy.js
13
.eleventy.js
|
|
@ -5,15 +5,20 @@ const markdownIt = require('markdown-it');
|
|||
const markdownItClass = require('@toycode/markdown-it-class');
|
||||
|
||||
const markdownClassMapping = {
|
||||
h1: ['hide'],
|
||||
// h1: ['hide'],
|
||||
h2: ['text-3xl', 'mt-6'],
|
||||
h3: ['text-2xl', 'mt-4'],
|
||||
h4: ['text-xl', 'mt-2'],
|
||||
h5: ['text-lg', 'mt-2'],
|
||||
h6: ['font-bold', 'mt-2'],
|
||||
blockquote: ['border-l-4', 'border-gray-200', 'pl-2'],
|
||||
a: ['text-pink-700', 'hover:underline', 'focus:text-white', 'focus:bg-pink-700', 'focus:outline-link'],
|
||||
p: ['mb-2', 'text-gray-500'],
|
||||
blockquote: ['border-l-4', 'border-slate-900', 'px-4'],
|
||||
a: [
|
||||
'text-slate-200', 'underline',
|
||||
'hover:text-white', 'hover:bg-rose-950', 'hover:outline', 'hover:outline-width-1', 'hover:outline-rose-950',
|
||||
'active:text-white', 'active:bg-rose-900', 'active:outline', 'active:outline-width-1', 'active:outline-rose-900',
|
||||
'focus:text-white', 'focus:bg-rose-900', 'focus:outline', 'focus:outline-width-1', 'focus:outline-rose-900'
|
||||
],
|
||||
p: ['mb-2', 'text-slate-400', 'leading-7'],
|
||||
img: ['max-w-full', 'rounded-lg', 'max-h-600px'],
|
||||
ul: ['list-disc', 'ml-4'],
|
||||
};
|
||||
|
|
|
|||
|
|
@ -22,88 +22,19 @@
|
|||
<link rel="icon" type="image/png" sizes="32x32" href="/img/site/favicons/favicon-32x32.png">
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="/img/site/favicons/favicon-16x16.png">
|
||||
<link rel="manifest" href="/img/site/favicons/site.webmanifest">
|
||||
|
||||
<script defer data-domain="gaiety.me" src="https://plausible.io/js/script.js"></script>
|
||||
|
||||
<script>
|
||||
let isOpen = false;
|
||||
function mobileToggle() {
|
||||
isOpen = !isOpen;
|
||||
|
||||
document.getElementById('mobileToggleButton').setAttribute('aria-expanded', isOpen);
|
||||
document.getElementById('mobileToggleText').innerText = `${isOpen ? 'Close' : 'Open'} Navigation`;
|
||||
document.getElementById('mobileToggleIconOpened').classList.add('block');
|
||||
document.getElementById('mobileToggleIconOpened').classList.remove('hidden');
|
||||
document.getElementById('mobileToggleIconClosed').classList.add('hidden');
|
||||
document.getElementById('mobileToggleIconClosed').classList.remove('block');
|
||||
document.getElementById('mobileNavigation').classList.add(isOpen ? 'block' : 'hidden');
|
||||
document.getElementById('mobileNavigation').classList.remove(isOpen ? 'hidden' : 'block');
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body class="bg-gray-100">
|
||||
<header>
|
||||
<nav class="bg-white shadow">
|
||||
<div class="max-w-7xl mx-auto px-2 sm:px-6 lg:px-8">
|
||||
<div class="relative flex justify-between h-16">
|
||||
<div class="absolute inset-y-0 left-0 flex justify-between w-full sm:hidden">
|
||||
<button
|
||||
class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-link"
|
||||
aria-expanded="false"
|
||||
onclick="mobileToggle()"
|
||||
id="mobileToggleButton">
|
||||
<span id="mobileToggleText" class="sr-only">Open navigation</span>
|
||||
<svg id="mobileToggleIconClosed" class="block h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
|
||||
</svg>
|
||||
<svg id="mobileToggleIconOpened" class="hidden h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
<a
|
||||
href="/"
|
||||
class="focus:outline-link"
|
||||
{% if page.url == navItem.url %}aria-current="page"{% endif %}
|
||||
>
|
||||
<img class="h-12 w-12 mt-2 rounded-full" src="/img/site/avatar.gif" alt="Home">
|
||||
</a>
|
||||
</div>
|
||||
<div class="flex-1 flex justify-between sm:items-stretch sm:justify-start">
|
||||
<div class="hidden sm:flex sm:space-x-8">
|
||||
<a
|
||||
href="/"
|
||||
class="focus:outline-link"
|
||||
{% if page.url == navItem.url %}aria-current="page"{% endif %}
|
||||
>
|
||||
<img class="h-12 w-12 mt-2 rounded-full" src="/img/site/avatar.gif" alt="Home">
|
||||
</a>
|
||||
{%- for navItem in navigation -%}
|
||||
<a
|
||||
href="{{navItem.url}}"
|
||||
class="{% if page.url == navItem.url %}border-pink-700 text-gray-900{% else %}border-transparent hover:border-pink-700 text-gray-500{% endif %} inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium focus:outline-link"
|
||||
{% if page.url == navItem.url %}aria-current="page"{% endif %}
|
||||
>
|
||||
{{navItem.title}}
|
||||
</a>
|
||||
{%- endfor -%}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="mobileNavigation" class="hidden sm:hidden">
|
||||
<div class="pt-2 pb-4 space-y-1">
|
||||
{%- for navItem in navigation -%}
|
||||
<a
|
||||
href="{{navItem.url}}"
|
||||
class="{% if page.url == navItem.url %}border-pink-700 bg-pink-50 text-pink-700{% else %}border-transparent hover:border-pink-700 text-gray-500{% endif %} block pl-3 pr-4 py-2 border-l-4 text-base font-medium focus:outline-link"
|
||||
{% if page.url == navItem.url %}aria-current="page"{% endif %}
|
||||
>
|
||||
{{navItem.title}}
|
||||
</a>
|
||||
{%- endfor -%}
|
||||
</div>
|
||||
</div>
|
||||
<body class="bg-slate-950">
|
||||
<header class="bg-slate-900 bg-contain bg-left bg-no-repeat justify-end flex" style="background-image: url('https://voyager.neocities.org/img/sidebar.png')">
|
||||
<nav class="inline-flex flex-col relative">
|
||||
{%- for navItem in navigation -%}
|
||||
<a
|
||||
href="{{navItem.url}}"
|
||||
class="{% if page.url == navItem.url %} border-rose-700 text-slate-100 {% else %} border-transparent hover:border-rose-950 active:border-rose-950 text-slate-500 hover:text-slate-400 active:text-slate-400 {% endif %} inline-flex items-center pl-1 pr-4 pt-1 border-b-2 text-lg font-medium focus:outline-link"
|
||||
{% if page.url == navItem.url %}aria-current="page"{% endif %}
|
||||
>
|
||||
{{navItem.title}}
|
||||
</a>
|
||||
{%- endfor -%}
|
||||
</nav>
|
||||
</header>
|
||||
|
|
|
|||
|
|
@ -1,12 +1,12 @@
|
|||
{% include "base-header.html" %}
|
||||
|
||||
<main class="mt-12 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="relative max-w-lg mx-auto divide-y-2 divide-gray-200 lg:max-w-7xl">
|
||||
<main class="max-w-7xl mx-auto px-4">
|
||||
<div class="relative max-w-lg mx-auto divide-y-2 divide-slate-900 lg:max-w-7xl">
|
||||
<div>
|
||||
<h2 class="text-3xl tracking-tight font-extrabold text-gray-900 sm:text-4xl">
|
||||
<h2 class="my-8 text-3xl tracking-tight font-extrabold text-slate-200 sm:text-4xl">
|
||||
{{ title }}
|
||||
</h2>
|
||||
<div class="mt-3 text-xl text-gray-500 sm:mt-4">
|
||||
<div class="mt-3 text-xl text-slate-500 sm:mt-4">
|
||||
{{ content | safe }}
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -26,7 +26,7 @@
|
|||
<span class="absolute z-10 inset-3">{{ content.data.title }}</span>
|
||||
<img class="absolute grayscale opacity-20 contrast-50 scale-110 bottom-1/2 left-0 right-0 translate-y-1/2" src="{{ content.data.image }}" alt="" role="presentation" />
|
||||
</h3>
|
||||
<div class="relative overflow-hidden h-24 rounded-bl-lg rounded-br-lg pt-3 text-base text-gray-500">
|
||||
<div class="relative overflow-hidden h-24 rounded-bl-lg rounded-br-lg pt-3 text-base text-slate-500">
|
||||
<div class="absolute contrast-50 scale-110 bottom-1/2 left-0 -right-0 translate-y-1/2">
|
||||
<img class="mb-40 grayscale opacity-10" src="{{ content.data.image }}" alt="" role="presentation" />
|
||||
</div>
|
||||
|
|
|
|||
1278
package-lock.json
generated
1278
package-lock.json
generated
File diff suppressed because it is too large
Load diff
|
|
@ -29,7 +29,7 @@
|
|||
"nunjucks-date": "^1.5.0",
|
||||
"postcss": "^8.3.11",
|
||||
"postcss-cli": "^9.0.1",
|
||||
"tailwindcss": "^3.2.4"
|
||||
"tailwindcss": "^3.4.1"
|
||||
},
|
||||
"dependencies": {
|
||||
"@toycode/markdown-it-class": "^1.2.4"
|
||||
|
|
|
|||
|
|
@ -1,16 +1,5 @@
|
|||
module.exports = {
|
||||
purge: ['./_site/**/*.html'],
|
||||
darkMode: false, // or 'media' or 'class'
|
||||
theme: {
|
||||
extend: {
|
||||
outline: {
|
||||
link: ['1px dashed rgba(190, 24, 93)', '2px'],
|
||||
},
|
||||
maxHeight: {
|
||||
'600px': '600px',
|
||||
},
|
||||
},
|
||||
},
|
||||
content: ['./_site/**/*.html'],
|
||||
variants: {
|
||||
extend: {},
|
||||
},
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue