nathanwoodburn/fireportal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Redo theme

Browse Source
This commit is contained in:
Nathan Woodburn
2025-06-17 22:54:10 +10:00
parent 492167e1d0
commit 5b84f648bb
2 changed files with 107 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

92
public/index.html
View File

@@ -6,6 +6,94 @@
<title>Fire Portal</title> <title>Fire Portal</title>
<link rel="stylesheet" href="styles.css"> <link rel="stylesheet" href="styles.css">
<link rel="icon" href="https://woodburn.au/favicon.png" type="image/png"> <link rel="icon" href="https://woodburn.au/favicon.png" type="image/png">
<style>
:root {
--bg-color: #121212;
--card-bg-color: #1e1e1e;
--text-color: #e0e0e0;
--accent-color: #6E0E9C;
--link-color: #64b5f6;
--secondary-text: #aaaaaa;
--border-color: #333333;
}
body {
background-color: var(--bg-color);
color: var(--text-color);
font-family: Arial, sans-serif;
}
.container {
max-width: 1000px;
margin: 0 auto;
padding: 20px;
}
header {
text-align: center;
margin-bottom: 30px;
}
header h1 {
color: var(--accent-color);
}
header p {
color: var(--secondary-text);
}
section {
background-color: var(--card-bg-color);
border-radius: 8px;
padding: 20px;
margin-bottom: 20px;
border: 1px solid var(--border-color);
}
h2, h3 {
color: var(--accent-color);
}
a {
color: var(--link-color);
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
.search-form input {
background-color: #2d2d2d;
border: 1px solid var(--border-color);
color: var(--text-color);
padding: 8px 12px;
border-radius: 4px;
}
.search-form button {
background-color: var(--accent-color);
color: #ffffff;
border: none;
padding: 8px 16px;
border-radius: 4px;
cursor: pointer;
}
code {
background-color: #2d2d2d;
padding: 2px 5px;
border-radius: 3px;
}
footer {
text-align: center;
color: var(--secondary-text);
margin-top: 30px;
padding-top: 15px;
border-top: 1px solid var(--border-color);
}
</style>
</head> </head>
<body> <body>
<div class="container"> <div class="container">
@@ -24,7 +112,7 @@
<div class="example-note"> <div class="example-note">
<p>Examples:</p> <p>Examples:</p>
<ul> <ul>
<li><a href="#" class="example-link" data-domain="ipfs.act/">ipfs.act/</a> - Example Page created by Nathan.Woodburn/</li> <li><a href="#" class="example-link" data-domain="ipfs.act/">ipfs.act/</a> - Example Page created by <b>Nathan.Woodburn/</b></li>
</ul> </ul>
</div> </div>
</section> </section>
@@ -65,7 +153,7 @@
</main> </main>
<footer> <footer>
<p>&copy; 2025 <a href="https://nathan.woodburn.au">Nathan.Woodburn/</a> | <a href="https://git.woodburn.au/nathanwoodburn/fireportal">Git Repo</a></p> <p>&copy; 2025 <a href="https://nathan.woodburn.au" target="_blank">Nathan.Woodburn/</a> | <a href="https://git.woodburn.au/nathanwoodburn/fireportal" target="_blank">Git Repo</a></p>
<p><small>Status: <span id="status-indicator">Checking...</span></small></p> <p><small>Status: <span id="status-indicator">Checking...</span></small></p>
</footer> </footer>
</div> </div>

28
public/styles.css
View File

@@ -1,10 +1,16 @@
:root { :root {
--primary-color: #ff5722; --primary-color: #6E0E9C;
--secondary-color: #ffab91; --secondary-color: #9b4dca;
--dark-color: #212121; --dark-color: #121212;
--light-color: #f5f5f5; --light-color: #e0e0e0;
--accent-color: #ff9800; --accent-color: #6E0E9C;
--error-color: #f44336; --error-color: #f44336;
--bg-color: #121212;
--card-bg-color: #1e1e1e;
--text-color: #e0e0e0;
--link-color: #9b4dca;
--secondary-text: #aaaaaa;
--border-color: #333333;
} }
* { * {
@@ -16,8 +22,8 @@
body { body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
line-height: 1.6; line-height: 1.6;
color: var(--dark-color); color: var(--text-color);
background-color: var(--light-color); background-color: var(--bg-color);
} }
.container { .container {
@@ -37,20 +43,20 @@ header h1 {
} }
section { section {
background-color: white; background-color: var(--card-bg-color);
border-radius: 8px; border-radius: 8px;
padding: 2rem; padding: 2rem;
margin-bottom: 2rem; margin-bottom: 2rem;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
} }
h2 { h2 {
color: var(--dark-color); color: var(--primary-color);
margin-bottom: 1rem; margin-bottom: 1rem;
} }
h3 { h3 {
color: var(--dark-color); color: var(--primary-color);
margin: 1.5rem 0 0.5rem; margin: 1.5rem 0 0.5rem;
} }