10h30/jpadventure
1
0
Fork 0
mirror of https://github.com/10h30/jpadventure.git synced 2026-05-12 15:21:19 +09:00
Code Issues Packages Projects Releases Wiki Activity

Add global styles and enhance about page with skill presentation

Browse Source
This commit is contained in:
Thuan Bui
2025-12-21 17:08:28 +07:00
parent f3f974491d
commit a383f01141
2 changed files with 38 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/about.astro
+17 -1
View File
@@ -1,4 +1,6 @@
--- ---
import "../styles/global.css";
const pageTitle = "About Me"; const pageTitle = "About Me";
const identity = { const identity = {
firstName: "Thuan", firstName: "Thuan",
@@ -19,6 +21,9 @@ const skills = [
const happy = true; const happy = true;
const finished = false; const finished = false;
const goal = 3; const goal = 3;
const skillColor = "crimson";
const fontWeight = "bold";
const textCase = "uppercase";
--- ---
<html lang='en'> <html lang='en'>
@@ -28,6 +33,17 @@ const goal = 3;
<meta name='viewport' content='width=device-width' /> <meta name='viewport' content='width=device-width' />
<meta name='generator' content={Astro.generator} /> <meta name='generator' content={Astro.generator} />
<title>{pageTitle}</title> <title>{pageTitle}</title>
<style define:vars={{ skillColor, fontWeight, textCase }}>
h1 {
color: purple;
font-size: 4rem;
}
.skill {
color: var(--skillColor);
font-weight: var(--fontWeight);
text-transform: var(--textCase);
}
</style>
</head> </head>
<body> <body>
<a href='/'>Home</a> <a href='/'>Home</a>
@@ -62,7 +78,7 @@ const goal = 3;
</ul> </ul>
<p>My skills are:</p> <p>My skills are:</p>
<ul> <ul>
{skills.map((skill) => <li>{skill}</li>)} {skills.map((skill) => <li class='skill'>{skill}</li>)}
</ul> </ul>
{happy && <p>I am happy to be learning Astro!</p>} {happy && <p>I am happy to be learning Astro!</p>}
src/styles/global.css
+21
View File
@@ -0,0 +1,21 @@
html {
background-color: #f1f5f9;
font-family: sans-serif;
}
body {
margin: 0 auto;
width: 100%;
max-width: 80ch;
padding: 1rem;
line-height: 1.5;
}
* {
box-sizing: border-box;
}
h1 {
margin: 1rem 0;
font-size: 2.5rem;
}