Skip to content
This repository has been archived by the owner on Aug 23, 2024. It is now read-only.

Commit

Permalink
colour scheme update
Browse files Browse the repository at this point in the history
  • Loading branch information
@georgebaskervil
georgebaskervil committed Jul 31, 2024
1 parent 95397a0 commit a894ef2
Show file tree
Hide file tree
Showing 16 changed files with 589 additions and 484 deletions.
Binary file modified public/brand-assets/icon.webp
View file
Binary file not shown.
307 changes: 177 additions & 130 deletions src/components/Layout.astro
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
---
import { Config } from "../config";
import { Config } from '../config';
interface Props {
title?: string;
Expand All @@ -15,134 +15,181 @@ const currentPath = Astro.url.pathname;

<!doctype html>
<html class="bg-base-100 text-base-content overflow-y-scroll" lang="en">
<body>
<div class="mx-auto min-h-screen flex flex-col gap-9 px-10 py-8 md:gap-20 md:py-8">
<header class="flex w-full gap-3 md:gap-2 flex-row justify-between pb-5 md:pb-0">
<a href="/" class="text-sm md:text-xl lg:text-xl whitespace-nowrap mr-4 text-text">{Config.me.name}</a>
<nav class="text-xs md:text-sm lg:text-sm custom-breadcrumbs text-text">
<ul>
<li>
<a class={currentPath === "/" ? "text-purple-500" : ""} href="/">Home</a>
</li>
<li>
<a class={currentPath.startsWith("/posts") ? "text-purple-500" : ""} href="/posts">Posts</a>
</li>
<li>
<a class={currentPath.startsWith("/pictures") ? "text-purple-500" : ""} href="/pictures">Pictures</a>
</li>
<li>
<a class={currentPath.startsWith("/contact") ? "text-purple-500" : ""} href="/contact">Contact</a>
</li>
<li>
<a class={currentPath.startsWith("/licensing") ? "text-purple-500" : ""} href="/licensing">Licensing</a>
</li>
<li>
<a class={currentPath.startsWith("/extras") ? "text-purple-500" : ""} href="/extras">Extras</a>
</li>
<li>
<a class={currentPath.startsWith("/privacy") ? "text-purple-500" : ""} href="/privacy">Privacy</a>
</li>
</ul>
</nav>
</header>
<div class="flex-grow">
<slot />
</div>
</div>
<style is:global>
@font-face {
font-family: 'SpecialElite';
src: url(/fonts/SpecialElite-Regular.woff2) format('woff2');
}

html, body {
font-family: 'SpecialElite';
}

* {
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* Internet Explorer 10+ */
}

*::-webkit-scrollbar {
display: none; /* WebKit (Safari, Chrome, etc.) */
}

.custom-breadcrumbs {
max-width: 100%;
overflow-x: auto;
padding-top: 0.5%;
}

.custom-breadcrumbs > ul {
display: flex;
align-items: center;
white-space: nowrap;
min-height: min-content;
}

.custom-breadcrumbs > ul > li {
display: flex;
align-items: center;
}

.custom-breadcrumbs > ul > li > a {
display: flex;
cursor: pointer;
align-items: center;
}

@media (hover: hover) {
.custom-breadcrumbs > ul > li > a:hover {
text-decoration-line: underline;
}
}

.custom-breadcrumbs > ul > li > a:focus {
outline: 2px solid transparent;
outline-offset: 2px;
}

.custom-breadcrumbs > ul > li > a:focus-visible {
outline: 2px solid currentColor;
outline-offset: 2px;
}

.custom-breadcrumbs > ul > li + *:before {
content: "/";
margin-left: 0.5rem /* 8px */;
margin-right: 0.75rem /* 12px */;
display: block;
opacity: 0.4;
background-color: transparent;
}

[dir="rtl"] .custom-breadcrumbs > ul > li + *:before {
--tw-rotate: -180deg;
}
</style>
<script>
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function(this: HTMLAnchorElement, e: Event) {
e.preventDefault();

const href = this.getAttribute('href');
<body>
<div
class="mx-auto min-h-screen flex flex-col gap-9 px-10 py-8 md:gap-20 md:py-8"
>
<header
class="flex w-full gap-3 md:gap-2 flex-row justify-between pb-5 md:pb-0"
>
<a
href="/"
class="text-sm md:text-xl lg:text-xl whitespace-nowrap mr-4 text-text"
>{Config.me.name}</a
>
<nav class="text-xs md:text-sm lg:text-sm custom-breadcrumbs text-text">
<ul>
<li>
<a class={currentPath === '/' ? 'text-accent' : ''} href="/"
>Home</a
>
</li>
<li>
<a
class={currentPath.startsWith('/posts') ? 'text-accent' : ''}
href="/posts">Posts</a
>
</li>
<li>
<a
class={currentPath.startsWith('/pictures') ? 'text-accent' : ''}
href="/pictures">Pictures</a
>
</li>
<li>
<a
class={currentPath.startsWith('/contact') ? 'text-accent' : ''}
href="/contact">Contact</a
>
</li>
<li>
<a
class={currentPath.startsWith('/licensing')
? 'text-accent'
: ''}
href="/licensing">Licensing</a
>
</li>
<li>
<a
class={currentPath.startsWith('/extras') ? 'text-accent' : ''}
href="/extras">Extras</a
>
</li>
<li>
<a
class={currentPath.startsWith('/privacy') ? 'text-accent' : ''}
href="/privacy">Privacy</a
>
</li>
</ul>
</nav>
</header>
<div class="flex-grow">
<slot />
</div>
</div>
<style is:global>
@font-face {
font-family: 'SpecialElite';
src: url(/fonts/SpecialElite-Regular.woff2) format('woff2');
}

html,
body {
font-family: 'SpecialElite';
}

.background-animation {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #1f1f27;
z-index: -1;
}

.custom-breadcrumbs {
max-width: 100%;
overflow-x: auto;
padding-top: 0.5%;
}

.custom-breadcrumbs > ul {
display: flex;
align-items: center;
white-space: nowrap;
min-height: min-content;
}

.custom-breadcrumbs > ul > li {
display: flex;
align-items: center;
}

.custom-breadcrumbs > ul > li > a {
display: flex;
cursor: pointer;
align-items: center;
}

@media (hover: hover) {
.custom-breadcrumbs > ul > li > a:hover {
text-decoration-line: underline;
}
}

.custom-breadcrumbs > ul > li > a:focus {
outline: 2px solid transparent;
outline-offset: 2px;
}

.custom-breadcrumbs > ul > li > a:focus-visible {
outline: 2px solid currentColor;
outline-offset: 2px;
}

.custom-breadcrumbs > ul > li + *:before {
content: '/';
margin-left: 0.5rem /* 8px */;
margin-right: 0.75rem /* 12px */;
display: block;
opacity: 0.4;
background-color: transparent;
}

[dir='rtl'] .custom-breadcrumbs > ul > li + *:before {
--tw-rotate: -180deg;
}
</style>
<script>
document.querySelectorAll('a[href^="#"]').forEach((anchor) => {
anchor.addEventListener(
'click',
function (this: HTMLAnchorElement, e: Event) {
e.preventDefault();

const href = this.getAttribute('href');
if (href) {
const targetElement = document.querySelector(href);
if (targetElement) {
targetElement.scrollIntoView({
behavior: 'smooth'
});
}
}
});
});
</script>
</body>
<footer class="bottom-0 text-left p-4 text-white text-sm ml-6" style="opacity:0.4; font-style: italic">
# Built with Astro, Tailwind, and TypeScript by George Baskerville.
Based on a template that has since been taken down by Tahir Murata.
Uses the <a href="https://fonts.google.com/specimen/Special+Elite" target="_blank" rel="noopener noreferrer" class="hover:underline">Special Elite</a> font.
<a href="https://github.com/georgebaskervil/Personal-Website" target="_blank" rel="noopener noreferrer" class="hover:underline">Source code available under MIT licence</a>.
</footer>
const targetElement = document.querySelector(href);
if (targetElement) {
targetElement.scrollIntoView({
behavior: 'smooth',
});
}
}
},
);
});
</script>
</body>
<footer
class="bottom-0 text-left p-4 text-white text-sm ml-6"
style="opacity:0.4; font-style: italic"
>
# Built with Astro, Tailwind, and TypeScript by George Baskerville. Based on
a template that has since been taken down by Tahir Murata. Uses the <a
href="https://fonts.google.com/specimen/Special+Elite"
target="_blank"
rel="noopener noreferrer"
class="hover:underline">Special Elite</a
> font.
<a
href="https://github.com/georgebaskervil/Personal-Website"
target="_blank"
rel="noopener noreferrer"
class="hover:underline">Source code available under MIT licence</a
>.
</footer>
</html>
0 src/components/eagerpicturesect.astro → src/components/picturesect.astro
View file
File renamed without changes.
6 changes: 3 additions & 3 deletions src/config.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ interface IConfig {
projects: {
[name: string]: {
url: string;
tags: string[];
description: string;
};
};
og: {
Expand All @@ -35,11 +35,11 @@ export const Config: IConfig = {
projects: {
'DNS Filterlists': {
url: 'https://github.com/georgebaskervil/dnsfilterlists',
tags: ['DNS', 'DNS-Filtering', 'Privacy'],
description: 'A collection of DNS filterlists intended for use with AdGuard Home.',
},
'Personal Website': {
url: 'https://github.com/georgebaskervil/Personal-Website',
tags: ['Personal-Website', 'Astro', 'Tailwind-CSS'],
description: 'My personal website built with Astro, TypeScript, and Tailwind CSS.',
},
},
og: {
Expand Down
23 changes: 6 additions & 17 deletions src/pages/404.astro
View file
Original file line number Diff line number Diff line change
@@ -1,31 +1,20 @@
---
import Tags from "../components/tags.astro";
import Layout from "../components/Layout.astro";
import Tags from '../components/tags.astro';
import Layout from '../components/Layout.astro';
---

<Tags />
<style>
.background-animation {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to left,#110819, #000);
z-index: -1;
}
</style>
<div class="background-animation"></div>
<div class="background-animation"></div>
<Layout>

<div class="hero absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
<div class="hero-content text-center">
<div class="max-w-md">
<h1 class="text-5xl font-bold text-text">404</h1>
<p class="text-lg text-neutral-content py-5 text-text">
The page you were looking for doesn't exist.
</p>
<a href="/" class="link text-purple-500">Go back home</a>
<a href="/" class="link text-accent">Go back home</a>
</div>
</div>
</div>
</Layout>
</Layout>
Loading

0 comments on commit a894ef2

Please sign in to comment.