initial design updates

aslilac · Jan 27, 2024 · 9bc5c7d · 9bc5c7d
1 parent 146fe2b
commit 9bc5c7d
Show file tree

Hide file tree

Showing 3 changed files with 58 additions and 30 deletions.
diff --git a/content/resources/blog.css b/content/resources/blog.css
@@ -1,19 +1,40 @@
+@font-face {
+	font-family: "Reenie Beanie";
+	font-weight: 400;
+	font-style: normal;
+	font-display: swap;
+	src: url("https://cdn.mckayla.cloud/fonts/ReenieBeanie-Regular.woff2") format(woff2);
+}
+
 @font-face {
 	font-family: "Outfit";
 	font-style: normal;
 	font-display: swap;
 	src: url("https://cdn.mckayla.cloud/fonts/Outfit.woff2") format(woff2);
 }
 
+@font-face {
+	font-family: "Cormorant";
+	font-style: normal;
+	font-display: swap;
+	src: url("https://cdn.mckayla.cloud/fonts/Cormorant.woff2") format(woff2);
+}
+
+@font-face {
+	font-family: "Cascadia Code";
+	font-style: normal;
+	font-display: swap;
+	src: url("https://cdn.mckayla.cloud/fonts/CascadiaCode.woff2") format(woff2);
+}
+
 html {
 	font-family: "Outfit", sans-serif;
 	font-size: 18px;
 	line-height: 1.75;
 }
 
 main {
-	margin: auto;
-	padding: 3em 1em;
+	padding: 3em 5em;
 	max-width: 70ch;
 }
 
@@ -28,23 +49,11 @@ h4,
 h5,
 h6 {
 	margin: 3em 0 1em;
-}
-
-@font-face {
-	font-family: "Cormorant";
-	font-style: normal;
-	font-display: swap;
-	src: url("https://cdn.mckayla.cloud/fonts/Cormorant.woff2") format(woff2);
-}
-
-@font-face {
-	font-family: "Cascadia Code";
-	font-style: normal;
-	font-display: swap;
-	src: url("https://cdn.mckayla.cloud/fonts/CascadiaCode.woff2") format(woff2);
+	line-height: 1.2;
 }
 
 body {
+	background-color: #fff7ec;
 	margin: 0;
 }
 
@@ -60,18 +69,35 @@ article {
 	margin: 2em 0 3em;
 }
 
+.post-summary sub {
+	opacity: 0.8;
+}
+
 .post-summary p {
-	margin: 0;
+	margin: 0.5em 0 0;
 }
 
 a {
 	/*color: #caab00;*/
 	/*color: #ca0075;*/
-	color: #f8c;
+	/* color: #f8c; */
+	color: #1441e0;
 }
 
 .index-header {
-	text-align: center;
+	color: #1441e0;
+}
+
+.site-links {
+	font-family: "Reenie Beanie";
+	display: flex;
+	align-items: baseline;
+	gap: 64px;
+	font-size: 24px;
+}
+
+.main-title {
+	font-size: 54px;
 }
 
 aside {
@@ -145,7 +171,7 @@ footer nav {
 
 @media (prefers-color-scheme: dark) {
 	body {
-		background-color: #1b1b1b;
+		background-color: #060607;
 		color: #fff;
 	}
 

diff --git a/src/config.rs b/src/config.rs
@@ -26,8 +26,8 @@ pub static BLOG: Lazy<BlogMetadata> = Lazy::new(|| BlogMetadata {
 	canonical_origin: Url::parse("https://mckayla.blog").unwrap(),
 	favicon: "https://cdn.mckayla.cloud/-/764b1512ee1f490a951e9c00d9ded4b2/Doodle.avif",
 	thumbnail: "https://cdn.mckayla.cloud/-/764b1512ee1f490a951e9c00d9ded4b2/Doodle.avif",
-	title: "Kayla",
-	subtitle: "Aspiring wannabe, human shaped, slightly minty • she/her 🏳️‍⚧️",
+	title: "McKayla",
+	subtitle: "Senior UX Engineer, aspiring wannabe, human shaped • she/her 🏳️‍⚧️",
 	og_title: "mckayla.blog",
 	og_image: "https://cdn.mckayla.cloud/-/97ef05b2b92b44c687dfcccfb32dff16/cute3.avif",
 	updated: Utc::now().format("%Y-%m-%dT%H:%M:00.000Z").to_string(),

diff --git a/src/templates/index.html b/src/templates/index.html
@@ -5,6 +5,8 @@
 <title>{{title}}</title>
 <meta charset="utf-8" />
 <link rel="icon" href="{{favicon}}" />
+<link rel="preload" href="https://cdn.mckayla.cloud/fonts/ReenieBeanie-Regular.woff2"
+	as="font" type="font/woff2" crossorigin="anonymous" />
 <link rel="preload" href="https://cdn.mckayla.cloud/fonts/Outfit.woff2"
 	as="font" type="font/woff2" crossorigin="anonymous" />
 <link rel="stylesheet" href="/resources/blog.css" />
@@ -17,29 +19,29 @@
 <body>
 <main class="index">
 <header class="index-header">
-<picture>
-<source type="image/avif" width=200 height=200 srcset="https://cdn.mckayla.cloud/-/764b1512ee1f490a951e9c00d9ded4b2/Doodle.avif" />
-<source type="image/webp" width=200 height=200 srcset="https://cdn.mckayla.cloud/-/764b1512ee1f490a951e9c00d9ded4b2/Doodle.webp" />
-<img width=200 height=200 src="https://cdn.mckayla.cloud/-/764b1512ee1f490a951e9c00d9ded4b2/Doodle.png" />
-</picture>
-<h1>{{title}}</h1>
+<nav class="site-links">
+<h1 class="main-title">{{title}}</h1>
+<a href="https://mckayla.blog" style="text-decoration: underline;">Blog</a>
+<a href="https://mckayla.art" style="text-decoration: none;">Photolog</a>
+<a href="https://mckayla.dev" style="text-decoration: none;">Worklog</a>
+</nav>
 <p>{{subtitle}}</p>
 </header>
 {{/with}}
 <hr />
 {{#each posts}}
 <article class="post-summary">
 	<a href="{{path}}"><h1>{{{title}}}</h1></a>
-	{{#if summary}}<div>{{{summary}}}</div>{{/if}}
 	<sub>by {{author}}{{#if date}} &mdash; {{date}}{{/if}}</sub>
+	{{#if summary}}<div>{{{summary}}}</div>{{/if}}
 	<!-- <a href="{{path}}">Read more</a> -->
 </article>
 {{/each}}
 <footer>
 <nav>
 &hearts;
 <a href="https://mckayla.dev">McKayla</a> &middot;
-<a href="https://github.com/aslilac">Github</a> &middot;
+<a href="https://github.com/aslilac">Git</a> &middot;
 <a href="https://twitch.tv/aslilac">Twitch</a> &middot;
 <a href="https://youtube.com/@aslilac">YouTube</a> &middot;
 <a href="/feed.xml">RSS</a>