Refactor code structure for improved readability and maintainability
This commit is contained in:
parent
e1bfb87360
commit
df71903d8a
3 changed files with 139 additions and 109 deletions
BIN
images/ulud.jpg
BIN
images/ulud.jpg
Binary file not shown.
|
Before Width: | Height: | Size: 37 KiB After Width: | Height: | Size: 49 KiB |
65
index.html
65
index.html
|
|
@ -2,17 +2,14 @@
|
|||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Ulud & Arcaena</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700&family=Georgia&display=swap" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>Ulud & Arcaena</h1>
|
||||
<nav>
|
||||
<a href="#ulud">Ulud</a>
|
||||
<a href="#arcaena">Arcaena</a>
|
||||
<a href="#gallery">Gallery</a>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
|
|
@ -25,13 +22,12 @@
|
|||
</p>
|
||||
</section>
|
||||
|
||||
<!-- Ulud Section -->
|
||||
<!-- Ulud -->
|
||||
<section id="ulud" class="character">
|
||||
<img src="images/ulud.jpg" alt="Ulud portrait">
|
||||
<div class="bio">
|
||||
<div class="char-text">
|
||||
<h2>Ulud — The Wandering Soul</h2>
|
||||
<p>
|
||||
Drop Ulud’s backstory here. Who is he? Where has he been? What drives him?
|
||||
Write Ulud’s backstory here. Describe his class, struggles, and vibe.
|
||||
</p>
|
||||
<ul>
|
||||
<li><strong>Race:</strong> ???</li>
|
||||
|
|
@ -39,37 +35,48 @@
|
|||
<li><strong>Alignment:</strong> ???</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Arcaena Section -->
|
||||
<section id="arcaena" class="character alt">
|
||||
<img src="images/arcaena.jpeg" alt="Arcaena portrait">
|
||||
<div class="bio">
|
||||
<h2>Arcaena — The Silent Flame</h2>
|
||||
<p>
|
||||
Drop Arcaena’s backstory here. Her elven grace, her path, her hidden heart.
|
||||
</p>
|
||||
<ul>
|
||||
<li><strong>Race:</strong> Elf</li>
|
||||
<li><strong>Class:</strong> ???</li>
|
||||
<li><strong>Alignment:</strong> ???</li>
|
||||
</ul>
|
||||
<div class="char-img">
|
||||
<img src="images/ulud.jpg" alt="Ulud portrait">
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Gallery Section -->
|
||||
<!-- Arcaena -->
|
||||
<section id="arcaena" class="character alt">
|
||||
<div class="char-text">
|
||||
<h2>Arcaena — The Silent Flame</h2>
|
||||
<p>
|
||||
Arcaena is a short 1.5m tall elf with a slender build.
|
||||
Her vibe is empty, mysterious, and a bit eerie.
|
||||
She reads books out of habit, not passion.
|
||||
Usually just wanders into situations, and then asks herself "Why am I in this mess?"
|
||||
|
||||
Incredibly intelligent and useful, but non talkative, never eager and just plain weird.
|
||||
|
||||
</p>
|
||||
<ul>
|
||||
<li><strong>Race:</strong> Elf</li>
|
||||
<li><strong>Class:</strong> Wizard</li>
|
||||
<li><strong>Alignment:</strong> Chaotic neutral.</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="char-img">
|
||||
<img src="images/arcaena.jpeg" alt="Arcaena portrait">
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Gallery -->
|
||||
<section id="gallery" class="gallery">
|
||||
<h2>Gallery</h2>
|
||||
<div class="grid">
|
||||
<img src="images/art1.png" alt="Campaign art 1">
|
||||
<img src="images/art2.png" alt="Campaign art 2">
|
||||
<img src="images/art3.png" alt="Campaign art 3">
|
||||
<img src="images/art1.png">
|
||||
<img src="images/art2.png">
|
||||
<img src="images/art3.png">
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
<p>Made with ♥</p>
|
||||
<p>© 2025 by <a href="https://creativecommons.org">Waifu</a> is licensed under <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY-NC-SA 4.0</a><img src="https://mirrors.creativecommons.org/presskit/icons/cc.svg" alt="" style="max-width: 1em;max-height:1em;margin-left: .2em;"><img src="https://mirrors.creativecommons.org/presskit/icons/by.svg" alt="" style="max-width: 1em;max-height:1em;margin-left: .2em;"><img src="https://mirrors.creativecommons.org/presskit/icons/nc.svg" alt="" style="max-width: 1em;max-height:1em;margin-left: .2em;"><img src="https://mirrors.creativecommons.org/presskit/icons/sa.svg" alt="" style="max-width: 1em;max-height:1em;margin-left: .2em;"></p>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
93
style.css
93
style.css
|
|
@ -1,3 +1,4 @@
|
|||
/* Global */
|
||||
body {
|
||||
font-family: 'Georgia', serif;
|
||||
margin: 0;
|
||||
|
|
@ -6,6 +7,11 @@ body {
|
|||
line-height: 1.6;
|
||||
}
|
||||
|
||||
h1, h2 {
|
||||
font-family: 'Cinzel', serif;
|
||||
margin: 0.5em 0;
|
||||
}
|
||||
|
||||
header {
|
||||
background: #222;
|
||||
padding: 1em;
|
||||
|
|
@ -17,7 +23,7 @@ header {
|
|||
|
||||
nav a {
|
||||
color: #ffcc66;
|
||||
margin: 0 1em;
|
||||
margin: 0 0.8em;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
|
|
@ -31,40 +37,66 @@ nav a:hover {
|
|||
background: #111;
|
||||
}
|
||||
|
||||
/* Character Sections */
|
||||
.character {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
padding: 3em 2em;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 3em 1em;
|
||||
gap: 2em;
|
||||
border-bottom: 1px solid #333;
|
||||
}
|
||||
|
||||
.character img {
|
||||
width: 250px;
|
||||
margin-right: 2em;
|
||||
.char-text {
|
||||
flex: 1 1 300px;
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
.char-img img {
|
||||
width: 100%;
|
||||
max-width: 300px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 0 10px rgba(0,0,0,0.7);
|
||||
box-shadow: 0 0 12px rgba(0,0,0,0.7);
|
||||
}
|
||||
|
||||
.character.alt {
|
||||
flex-direction: row-reverse;
|
||||
background: #1a1a1a;
|
||||
/* 🌿 Ulud — Turtle Druid */
|
||||
#ulud {
|
||||
background: linear-gradient(135deg, #030504, #0c2216);
|
||||
}
|
||||
|
||||
.character.alt img {
|
||||
margin-right: 0;
|
||||
margin-left: 2em;
|
||||
#ulud h2 {
|
||||
color: #4de68a;
|
||||
}
|
||||
|
||||
#ulud ul li strong {
|
||||
color: #39c16d;
|
||||
}
|
||||
|
||||
/* 🌌 Arcaena — Wizard Elf */
|
||||
#arcaena {
|
||||
background: linear-gradient(135deg, #030303, #1a233f);
|
||||
}
|
||||
|
||||
#arcaena h2 {
|
||||
color: #6da7ff;
|
||||
}
|
||||
|
||||
#arcaena ul li strong {
|
||||
color: #3e72d9;
|
||||
}
|
||||
|
||||
/* Gallery */
|
||||
.gallery {
|
||||
padding: 3em 2em;
|
||||
padding: 3em 1em;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.gallery .grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
|
||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||
gap: 1em;
|
||||
margin-top: 1.5em;
|
||||
margin-top: 2em;
|
||||
}
|
||||
|
||||
.gallery img {
|
||||
|
|
@ -73,6 +105,7 @@ nav a:hover {
|
|||
box-shadow: 0 0 10px rgba(0,0,0,0.7);
|
||||
}
|
||||
|
||||
/* Footer */
|
||||
footer {
|
||||
text-align: center;
|
||||
padding: 1em;
|
||||
|
|
@ -80,30 +113,20 @@ footer {
|
|||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
/* 📱 RESPONSIVE TWEAKS */
|
||||
/* Responsive Tweaks */
|
||||
@media (max-width: 768px) {
|
||||
nav a {
|
||||
display: inline-block;
|
||||
margin: 0.5em;
|
||||
}
|
||||
|
||||
.character {
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.character img {
|
||||
margin: 0 0 1.5em 0;
|
||||
width: 70%;
|
||||
max-width: 300px;
|
||||
}
|
||||
|
||||
.character.alt {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.character.alt img {
|
||||
margin: 0 0 1.5em 0;
|
||||
}
|
||||
|
||||
nav a {
|
||||
display: inline-block;
|
||||
margin: 0.5em;
|
||||
.char-img img {
|
||||
max-width: 250px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -113,7 +136,7 @@ footer {
|
|||
}
|
||||
|
||||
h1 {
|
||||
font-size: 1.5em;
|
||||
font-size: 1.6em;
|
||||
}
|
||||
|
||||
h2 {
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue