Remove demo index, improve post base layout

This commit is contained in:
2023-11-24 04:00:39 -06:00
parent f8575fe467
commit 790d6c7156
4 changed files with 97 additions and 166 deletions

View File

@@ -1,54 +1,99 @@
---
import '../styles/global.scss';
import '../styles/fonts.scss';
import '@styles/global.scss';
import '@styles/fonts.scss';
interface Props {
title: string;
}
const { title } = Astro.props;
const titleTag = title != null ? `${title} | xevion.blog` : 'xevion.blog';
const isWide = false;
---
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="description" content="Astro description" />
<meta name="viewport" content="width=device-width" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="generator" content={Astro.generator} />
<title>{title}</title>
</head>
<body>
<slot />
</body>
<head>
<meta charset="utf-8">
<meta content="width=device-width" name="viewport">
<link as="style" href="/assets/main.css" rel="preload">
<link href="/assets/main.css" rel="stylesheet">
<!-- build-commit-id: {{ site.github.build_revision | default: site.env.GITHUB_SHA }} -->
<!-- <link rel="stylesheet" href="/assets/print.css" media="print">-->
<link href="/assets/rouge.css" rel="stylesheet">
<title>
{titleTag}
</title>
<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16">
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
<link as="font" crossorigin href="/assets/fonts/-cmunrm.woff2" rel="preload">
<link as="font" crossorigin href="/assets/fonts/-cmuntt.woff2" rel="preload">
<link as="font" crossorigin href="/assets/fonts/-cmunti.woff2" rel="preload">
<link href="/feed.xml" rel="alternate" type="application/atom+xml">
<!-- {page._preview_description and page.title or page.name == "index.html"} -->
<!-- <meta content="website" property="og:type"> -->
<!-- <meta property="og:url" content="{{ page.url | absolute_url }}"> -->
<!-- <meta property="og:title" content="{{ page.title | default: "Xevion.dev" }}"> -->
<!-- <meta name="twitter:title" content="{{ page.title | default: "Xevion.dev" }}"> -->
<!-- {% if page._preview_description -%} -->
<!-- <meta property="og:description" content="{{ page._preview_description }}"> -->
<!-- <meta property="twitter:description" content="{{ page._preview_description }}"> -->
<!-- {% endif -%} -->
<!-- {%- if page._preview_image -%} -->
<!-- <meta property="og:image" content="{{ page._preview_image | absolute_url }}"> -->
<!-- <meta name="twitter:image" content="{{ page._preview_image | absolute_url }}"> -->
<!-- <meta content="summary_large_image" name="twitter:card"> -->
<!-- {%- else -%} -->
<!-- <meta content="summary" name="twitter:card"> -->
<!-- {%- endif -%} -->
<!-- {%- endif %} -->
<!-- Hide site using inline styling until CSS loads -->
<!-- <style> -->
<!-- html, body { -->
<!-- visibility: hidden; -->
<!-- } -->
<!-- </style> -->
<!-- Prevent FireFox from displaying FOUC with fake script tag. -->
<!-- <script>0</script> -->
<!-- {% if page.layout == "default" or page.layout == "posts" %} -->
<!-- <script src="/assets/js/custom.js"></script> -->
<!-- {% endif %} -->
</head>
<body class={isWide ? 'wide' : ''}>
<slot name="header">
<header id="header">
<div class="stack" style="--stacks: 3;">
<span style="--index: 0;">ryan walters</span>
<span style="--index: 1;">ryan walters</span>
<span style="--index: 2;">ryan walters</span>
</div>
</header>
<nav>
<a href="/">~/</a>
<span class="no-select">:</span>
<a href="https://xevion.dev">~/about/</a>
<span class="no-select">:</span>
<a href="https://xevion.dev/projects">~/projects/</a>
<span class="no-select">:</span>
<a href="https://xevion.dev/resume">~/resume/</a>
</nav>
</slot>
<slot />
</body>
<script type="text/javascript">
/** Is all of this too much effort to make the animation play in just the right way? **/
window.onbeforeunload = function(){
/** Remember the origin so it can be checked for page reloads **/
sessionStorage.setItem("origin", window.location.href);
}
window.onload = function() {
/** Display the glitch effect on new page loads or reloads. **/
let glitch_seen = sessionStorage.getItem('glitch')
if (glitch_seen !== 'true' || window.location.href === sessionStorage.getItem("origin")) {
sessionStorage.setItem('glitch', 'true')
document.getElementById('header').firstElementChild.classList.add('glitch')
}
}
</script>
</html>
<style is:global>
:root {
--accent: 136, 58, 234;
--accent-light: 224, 204, 250;
--accent-dark: 49, 10, 101;
--accent-gradient: linear-gradient(
45deg,
rgb(var(--accent)),
rgb(var(--accent-light)) 30%,
white 60%
);
}
html {
font-family: system-ui, sans-serif;
background: #13151a;
background-size: 224px;
}
code {
font-family:
Menlo,
Monaco,
Lucida Console,
Liberation Mono,
DejaVu Sans Mono,
Bitstream Vera Sans Mono,
Courier New,
monospace;
}
</style>