start to define typography for theme

src/components/blog/Post.astro

@@ -50,7 +50,7 @@ const { title, writter, publishDate, alt, img, tags } = Astro.props;
 	display: flex;
 	flex-direction: column;
 	justify-content: center;
-    width: 100vh;
+    width: 160vh;
 	height: auto;
     background-color: rgb(255, 255, 255, 0.5);
     border-radius: 5px;

src/data/author.json

@@ -8,7 +8,7 @@
         "github": "https://github.com/Hopelezz",
         "githubHandle": "@Hopelezz",
         "photo": "/assets/authors/Mark.avif",
-        "bio": "I am a web developer and I love to code."
+        "bio": "Electrical Engineer, Astro & Solid DocTeam!"
     },
     "John": {
         "name": "John Spratt",

src/draft/root.css

@@ -1,5 +1,3 @@
-@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@400;500&display=swap');
-
 /* 
 --c = Color
 --th = theme

src/layouts/BlogPost.astro

@@ -1,4 +1,6 @@
 ---
+import '../styles/theme.css';
+import '../styles/index.css';
 import Meta from '../components/MetaTags.astro';
 import Navbar from '../components/Navbar.astro';
 import Cursor from '../components/cursorEffect/Cursor.astro';

src/pages/index.astro

@@ -1,6 +1,6 @@
 ---
 // https://codepen.io/ali-jasim/pen/rNeGKOR
-import '../styles/root.css';
+import '../styles/theme.css';
 // Component Imports
 import Meta from '../components/MetaTags.astro';
 import Cursor from '../components/cursorEffect/Cursor.astro';

src/styles/index.css

@@ -0,0 +1,238 @@
+
+* {
+	box-sizing: border-box;
+	margin: 0;
+}
+
+/* Global focus outline reset */
+*:focus:not(:focus-visible) {
+	outline: none;
+}
+
+:root {
+	--user-font-scale: 1rem - 16px;
+	--max-width: calc(100% - 1rem);
+}
+
+@media (min-width: 50em) {
+	:root {
+		--max-width: 46em;
+	}
+}
+
+body {
+	display: flex;
+	flex-direction: column;
+	min-height: 100vh;
+	font-family: var(--font-body);
+	font-size: 1rem;
+	font-size: clamp(0.9rem, 0.75rem + 0.375vw + var(--user-font-scale), 1rem);
+	line-height: 1.5;
+	max-width: 100vw;
+}
+
+nav ul {
+	list-style: none;
+	padding: 0;
+}
+
+.content > section > * + * {
+	margin-top: 1.25rem;
+}
+
+.content > section > :first-child {
+	margin-top: 0;
+}
+
+/* Typography */
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+	margin-bottom: 1rem;
+	font-weight: bold;
+	line-height: 1;
+}
+
+h1,
+h2 {
+	max-width: 40ch;
+}
+
+:is(h2, h3):not(:first-child) {
+	margin-top: 3rem;
+}
+
+:is(h4, h5, h6):not(:first-child) {
+	margin-top: 2rem;
+}
+
+h1 {
+	font-size: 3.25rem;
+	font-weight: 800;
+}
+
+h2 {
+	font-size: 2.5rem;
+}
+
+h3 {
+	font-size: 1.75rem;
+}
+
+h4 {
+	font-size: 1.3rem;
+}
+
+h5 {
+	font-size: 1rem;
+}
+
+p {
+	line-height: 1.65em;
+}
+
+.content ul {
+	line-height: 1.1em;
+}
+
+p,
+.content ul {
+	color: var(--theme-text-light);
+}
+
+small,
+.text_small {
+	font-size: 0.833rem;
+}
+
+a {
+	color: var(--theme-text-accent);
+	font-weight: 400;
+	text-underline-offset: 0.08em;
+	align-items: center;
+	gap: 0.5rem;
+}
+
+article > section :is(ul, ol) > * + * {
+	margin-top: 0.75rem;
+}
+
+article > section nav :is(ul, ol) > * + * {
+	margin-top: inherit;
+}
+
+article > section li > :is(p, pre, blockquote):not(:first-child) {
+	margin-top: 1rem;
+}
+
+article > section :is(ul, ol) {
+	padding-left: 1em;
+}
+
+article > section nav :is(ul, ol) {
+	padding-left: inherit;
+}
+
+article > section nav {
+	margin-top: 1rem;
+	margin-bottom: 2rem;
+}
+
+article > section ::marker {
+	font-weight: bold;
+	color: var(--theme-text-light);
+}
+
+article > section iframe {
+	width: 100%;
+	height: auto;
+	aspect-ratio: 16 / 9;
+}
+
+a > code {
+	position: relative;
+	color: var(--theme-text-accent);
+	background: transparent;
+	text-underline-offset: var(--padding-block);
+}
+
+a > code::before {
+	content: '';
+	position: absolute;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	left: 0;
+	display: block;
+	background: var(--theme-accent);
+	opacity: var(--theme-accent-opacity);
+	border-radius: var(--border-radius);
+}
+
+a:hover,
+a:focus {
+	text-decoration: underline;
+}
+
+a:focus {
+	outline: 2px solid currentColor;
+	outline-offset: 0.25em;
+}
+
+strong {
+	font-weight: 600;
+	color: inherit;
+}
+
+
+/* Supporting Content */
+
+code {
+	--border-radius: 3px;
+	--padding-block: 0.2rem;
+	--padding-inline: 0.33rem;
+
+	font-family: var(--font-mono);
+	font-size: 0.85em;
+	color: inherit;
+	background-color: var(--theme-code-inline-bg);
+	padding: var(--padding-block) var(--padding-inline);
+	margin: calc(var(--padding-block) * -1) -0.125em;
+	border-radius: var(--border-radius);
+	word-break: break-word;
+}
+
+pre.astro-code > code {
+	all: unset;
+}
+
+pre > code {
+	font-size: 1em;
+}
+
+table,
+pre {
+	position: relative;
+	--padding-block: 1rem;
+	--padding-inline: 2rem;
+	padding: var(--padding-block) var(--padding-inline);
+	padding-right: calc(var(--padding-inline) * 2);
+	margin-left: calc(var(--padding-inline) * -1);
+	margin-right: calc(var(--padding-inline) * -1);
+	font-family: var(--font-mono);
+
+	line-height: 1.5;
+	font-size: 0.85em;
+	overflow-y: hidden;
+	overflow-x: auto;
+}
+
+table {
+	width: 100%;
+	padding: var(--padding-block) 0;
+	margin: 0;
+	border-collapse: collapse;
+}

src/styles/root.css

@@ -1,4 +1,4 @@
-
+@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@400;500&display=swap');
 :root {
 	color-scheme: light;
 }
@@ -22,7 +22,7 @@
 
 body{
     background-color: #e9e9e9;
-    font-family: 'Poppins', sans-serif;
+    font-family: 'Ubuntu', sans-serif;
 }