Implement starry night theme

This commit is contained in:
Xander Bazzi 2024-02-25 12:05:29 -07:00
parent 7c80a3b363
commit 97cbfd4541
9 changed files with 35 additions and 25 deletions

BIN
assets/img/banner-cloud.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 187 KiB

BIN
assets/img/bg-beach3.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.0 MiB

BIN
assets/img/bg-space.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 245 KiB

BIN
assets/img/space-2.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.9 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 78 KiB

View File

@ -0,0 +1,10 @@
██╗ ██╗██████╗ █████╗ ███████╗███████╗██╗ ██████╗ ██████╗ ███╗ ███╗
╚██╗██╔╝██╔══██╗██╔══██╗╚══███╔╝╚══███╔╝██║ ██╔════╝██╔═══██╗████╗ ████║
╚███╔╝ ██████╔╝███████║ ███╔╝ ███╔╝ ██║ ██║ ██║ ██║██╔████╔██║
██╔██╗ ██╔══██╗██╔══██║ ███╔╝ ███╔╝ ██║ ██║ ██║ ██║██║╚██╔╝██║
██╔╝ ██╗██████╔╝██║ ██║███████╗███████╗██║██╗╚██████╗╚██████╔╝██║ ╚═╝ ██║
╚═╝ ╚═╝╚═════╝ ╚═╝ ╚═╝╚══════╝╚══════╝╚═╝╚═╝ ╚═════╝ ╚═════╝ ╚═╝ ╚═╝

View File

@ -8,11 +8,11 @@
--background: rgba(150, 150, 150, 0.95);
--main-color:#bf00ff;
--main-color-dk:#441261;
--accent-1: #0000ff;
--accent-1: #8d0081;
--accent-2:#00FFFF;
--content-spacing:5px;
--background-img:url('../img/beach-night-bg.webp');
--banner:url('../img/bg_ascii2.png');
--background-img:url('../img/bg-beach3.png');
--banner:url('../img/banner-cloud.png');
--banner-footer: url('../img/tiny-bar-green.png');
--titleBars:url('../img/tiny-bar-green.png');
--text-color: white;
@ -96,30 +96,34 @@ body::before {
aside {
font-weight: bold;
width: 25%;
margin: 5px; /* Add some space around the text */
height: 10%;
margin-left:var(--content-spacing);
border-left:var(--border);
background-color: var(--background);
}
.sidebar-title {
.sidebar-title {
padding: 3px 10px; /* Adjust top/bottom and left/right padding as needed */
background-image:var(--titleBars);
font-weight:bold;
font-size: 25px;
font-size: 20px;
border:var(--border);
color: var(--title-text-color);
text-shadow: var(--text-shadow-custom);
}
.title {
background-image:var(--titleBars);
background-size: 100% 100%;
padding: 5px;
padding: 3px 10px; /* Adjust top/bottom and left/right padding as needed */
font-weight: bold;
font-size: 25px;
font-size: 20px;
border: var(--border);
color: var(--title-text-color);
text-shadow: var(--text-shadow-custom);
/*position: sticky;*/
background-image: var(--titleBars);
background-size: 100% 100%;
/* Remove text-indent if it's not needed */
/* Ensure padding does not prevent text from reaching the ends */
box-sizing: border-box; /* Ensures padding is included in the element's total width and height */
}
.navclass {
@ -153,7 +157,7 @@ nav ul li a {
padding:25px;
opacity: 1;
background-color: var(--background);
font-size: 20px;
font-size: 10;
}
footer {

View File

@ -19,8 +19,8 @@
<main>
<div class="wrapper">
<div class="title">&nbsp;
Home "datacenter" is what Americans needed, but didn't deserve.
<div class="title">
Home "datacenter" is what Americans needed, but diddfn't deserve.
</div>
<div class="content">
<p>

View File

@ -19,7 +19,7 @@
<main>
<div class="wrapper">
<div class="title">&nbsp;<span class="fa-solid fa-user"></span> whoami</div>
<div class="title"><span class="fa-solid fa-user"></span> whoami</div>
<div class="contentDaddy">
<div class="content">
<p>
@ -28,7 +28,7 @@
software-defined networking, and serverless architectures.
</p>
</div>
<div class="title">&nbsp; <span class="fa-solid fa-wrench"></span> updates
<div class="title"><span class="fa-solid fa-wrench"></span> updates
</div>
<div class="content">
<p class="update">01/10/2024: Generated the cool bg image with DALL-E.</p>
@ -38,21 +38,17 @@
datacenter project.</p>
</div>
<div class="title">&nbsp; <span class="fa-solid fa-commenting"></span> blog </div>
<div class="title"><span class="fa-solid fa-lightbulb"></span> projects </div>
<div class="content">
<p class="blog"><a href='./homenetwork.html'>
Home "datacenter" is what Americans needed,
but didn't deserve.
</a></p>
<p class="blog"><a href='./juniperfanmod.html'>
Bribing a loud enterprise switch with Noctua fans.
Home datacenter
</a></p>
</div>
</div>
</main>
<aside>
<div class="sidebar-title">&nbsp; Navigation</div>
<div class="sidebar-title">Navigation</div>
<div class="navclass">
<nav id="nav">
<ul>