Fix max width, center properly, switch to tailwind for some helpers

This commit is contained in:
2023-11-25 13:12:51 -06:00
parent 07336e48ed
commit e3e71eab25
3 changed files with 11 additions and 23 deletions

View File

@@ -8,7 +8,6 @@ interface Props {
const { title } = Astro.props;
const titleTag = title != undefined ? `${title} | xevion.blog` : 'xevion.blog';
const isWide = false;
---
<!doctype html>
<html lang="en">
@@ -54,7 +53,7 @@ const isWide = false;
<!-- <script src="/assets/js/custom.js"></script> -->
<!-- {% endif %} -->
</head>
<body class={isWide ? 'wide' : ''}>
<body class="flex-col align-middle w-full max-w-full">
<slot name="header">
<header id="header">
<div class="stack" style="--stacks: 3;">
@@ -64,16 +63,20 @@ const isWide = false;
</div>
</header>
</slot>
<nav>
<nav class="text-center text-xl text-[#808080] [&>a]:text-white [&>a]:underline [&>span]:select-none">
<a href="/">~/</a>
<span class="no-select">:</span>
<span>:</span>
<a href="https://xevion.dev">~/about/</a>
<span class="no-select">:</span>
<span>:</span>
<a href="https://xevion.dev/projects">~/projects/</a>
<span class="no-select">:</span>
<span>:</span>
<a href="https://xevion.dev/resume">~/resume/</a>
</nav>
<slot name="default">
</nav>
<div class="max-w-screen-lg">
<article>
<slot name="default" />
</article>
</div>
</body>
<!-- <script type="text/javascript"> -->
<!-- /** Is all of this too much effort to make the animation play in just the right way? **/ -->

View File

@@ -216,18 +216,7 @@ sup {
}
nav {
text-align: center;
font-family: "CMU Typewriter Text", monospace, monospace;
font-size: 1.25em;
color: #808080;
a {
color: white;
}
}
.post_summary {
clear: both;
}
.post_date {

View File

@@ -23,10 +23,6 @@ p {
padding: 10px;
}
body.wide {
max-width: 60rem !important;
}
.no-select {
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Safari */