add style for inline code

bablr-lang · Oct 31, 2024 · 463d718 · 463d718
1 parent 2ffccfb
commit 463d718
Show file tree

Hide file tree

Showing 2 changed files with 116 additions and 109 deletions.
diff --git a/src/layouts/BlogLayout.astro b/src/layouts/BlogLayout.astro
@@ -4,64 +4,70 @@ import Layout from "./Layout.astro"
 const {frontmatter} = Astro.props
 ---
 
-<Layout title={frontmatter.title}>
-	<main>
-		<titleBlock>
-			<h1>{frontmatter.title}</h1>
-			<author>{frontmatter.author}</author>
-			<date>{frontmatter.date}</date>
-		</titleBlock>
-		<content>
-			<slot />
-		</content>
-	</main>
+<Layout title="{frontmatter.title}">
+  <main>
+    <titleBlock>
+      <h1>{frontmatter.title}</h1>
+      <author>{frontmatter.author}</author>
+      <date>{frontmatter.date}</date>
+    </titleBlock>
+    <content>
+      <slot />
+    </content>
+  </main>
 </Layout>
 
 <style>
-h1 {
-	font-size: 3rem;
-	font-weight: 700;
-	line-height: 1;
-	margin-bottom: .25em;
-}
-titleBlock {
-	text-align: left;
-	display: block;
-	margin: auto;
-}
-author {
-	font-style: italic;
-	color: #dc322f;
-}
-date {
-	padding-left: 0.5rem;
-	color: grey;
-}
-content {
-	margin: auto;
-	display: block;
-	text-align: left;
-}
+  h1 {
+    font-size: 3rem;
+    font-weight: 700;
+    line-height: 1;
+    margin-bottom: 0.25em;
+  }
+  titleBlock {
+    text-align: left;
+    display: block;
+    margin: auto;
+  }
+  author {
+    font-style: italic;
+    color: var(--accent-text);
+  }
+  date {
+    padding-left: 0.5rem;
+    color: grey;
+  }
+  content {
+    margin: auto;
+    display: block;
+    text-align: left;
+  }
+  code {
+    color: var(--accent-text);
+    background: var(--background02);
+    padding: 0px 5px;
+    border-radius: 10px;
+  }
 
-@media screen and (min-width: 636px) {
-	h1 {
-		font-size: 4rem;
-		font-weight: 700;
-		line-height: 1;
-		margin-bottom: .25em;
-	}
-	content { 
-		font-size: 18px;
-		margin: auto;
-		display: block;
-		text-align: left;
-		max-width: 75%;
-	}
-	titleBlock {
-		text-align: center;
-		display: block;
-		margin: auto;
-		max-width: 75%;
-	}
-}
-</style>
+  @media screen and (min-width: 636px) {
+    h1 {
+      font-size: 4rem;
+      font-weight: 700;
+      line-height: 1;
+      margin-bottom: 0.25em;
+    }
+    content {
+      font-size: 18px;
+      margin: auto;
+      display: block;
+      text-align: left;
+      max-width: 75%;
+    }
+    titleBlock {
+      text-align: center;
+      display: block;
+      margin: auto;
+      max-width: 75%;
+    }
+  }
+</style>
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
@@ -8,59 +8,60 @@ const { title } = Astro.props;
 
 <!doctype html>
 <html lang="en">
-	<head>
-		<meta charset="UTF-8" />
-		<meta name="description" content="The Bablr language" />
-		<meta name="viewport" content="width=device-width" />
-		<link rel="icon" href="/favicon.ico" />
-		<meta name="generator" content={Astro.generator} />
-		<title>{title}</title>
-	</head>
-	<body>
-		<Header />
-		<slot />
-		<Footer/>
-	</body>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="description" content="The Bablr language" />
+    <meta name="viewport" content="width=device-width" />
+    <link rel="icon" href="/favicon.ico" />
+    <meta name="generator" content="{Astro.generator}" />
+    <title>{title}</title>
+  </head>
+  <body>
+    <header />
+    <slot />
+    <footer />
+  </body>
 </html>
 
 <style is:global>
-:root {
-		--accent: #e28743;
-/*		--accent-light: #e0ccfa;*/
-		--accent-light: #dffacc;
-		--accent-dark: #28650a;
-		--accent-gradient: linear-gradient(
-			45deg,
-			var(--accent),
-			var(--accent-light) 30%,
-			white 60%
-		);
-		--accent-text: #dc322f;
-	}
-main {
-	margin: auto;
-	width: 960px;
-	max-width: calc(100% - 2rem);
-	color: Black;
-	font-size: 20px;
-}
-body {
-	margin: auto;
-	width: 100%;
-}
-html {
-	font-family: system-ui, sans-serif;
-	background: #fdf6e3;
-}
-code {
-	font-family:
-		Menlo,
-		Monaco,
-		Lucida Console,
-		Liberation Mono,
-		DejaVu Sans Mono,css
-		Bitstream Vera Sans Mono,
-		Courier New,
-		monospace;
-}
+  :root {
+    --accent: #e28743;
+    /*		--accent-light: #e0ccfa;*/
+    --accent-light: #dffacc;
+    --accent-dark: #28650a;
+    --accent-gradient: linear-gradient(
+      45deg,
+      var(--accent),
+      var(--accent-light) 30%,
+      white 60%
+    );
+    --accent-text: #dc322f;
+    --background02: #eee8d5;
+  }
+  main {
+    margin: auto;
+    width: 960px;
+    max-width: calc(100% - 2rem);
+    color: Black;
+    font-size: 20px;
+  }
+  body {
+    margin: auto;
+    width: 100%;
+  }
+  html {
+    font-family: system-ui, sans-serif;
+    background: #fdf6e3;
+  }
+  code {
+    font-family:
+      Menlo,
+      Monaco,
+      Lucida Console,
+      Liberation Mono,
+      DejaVu Sans Mono,
+      css Bitstream Vera Sans Mono,
+      Courier New,
+      monospace;
+  }
 </style>