ritual/ritual.sh
ritual/ritual.sh
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

More work on now page

Browse source
This commit is contained in:
Dan 2025-12-30 11:01:49 +00:00
parent 65b5ec1978
commit d8f0dfad31
15 changed files with 204 additions and 135 deletions
Download patch file Download diff file Expand all files Collapse all files

BIN
assets/images/android-chrome-512x512.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 16 KiB

6
assets/images/books/designing-data.svg
View file

@ -1,6 +0,0 @@
<svg width="150" height="250" xmlns="http://www.w3.org/2000/svg">
<rect width="150" height="250" fill="#2f4f4f"/>
<text x="75" y="125" font-family="Arial, sans-serif" font-size="14" fill="white" text-anchor="middle" writing-mode="tb" transform="rotate(180 75 125)">
Designing Data-Intensive Apps
</text>
</svg>
Side by side

Before

Width:  |  Height:  |  Size: 321 B

6
assets/images/books/phoenix-project.svg
View file

@ -1,6 +0,0 @@
<svg width="150" height="250" xmlns="http://www.w3.org/2000/svg">
<rect width="150" height="250" fill="#1a472a"/>
<text x="75" y="125" font-family="Arial, sans-serif" font-size="16" fill="white" text-anchor="middle" writing-mode="tb" transform="rotate(180 75 125)">
The Phoenix Project
</text>
</svg>
Side by side

Before

Width:  |  Height:  |  Size: 311 B

6
assets/images/books/rust-book.svg
View file

@ -1,6 +0,0 @@
<svg width="150" height="250" xmlns="http://www.w3.org/2000/svg">
<rect width="150" height="250" fill="#8b4513"/>
<text x="75" y="125" font-family="Arial, sans-serif" font-size="16" fill="white" text-anchor="middle" writing-mode="tb" transform="rotate(180 75 125)">
The Rust Programming Language
</text>
</svg>
Side by side

Before

Width:  |  Height:  |  Size: 321 B

BIN
assets/images/coffee-cup-9-512.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 12 KiB

12
assets/images/dvds/akira.svg
View file

@ -1,12 +0,0 @@
<svg width="120" height="180" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="akira-grad" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#8b0000;stop-opacity:1" />
<stop offset="100%" style="stop-color:#2d0000;stop-opacity:1" />
</linearGradient>
</defs>
<rect width="120" height="180" fill="url(#akira-grad)"/>
<text x="60" y="100" font-family="Arial, sans-serif" font-size="28" font-weight="bold" fill="#fff" text-anchor="middle">
AKIRA
</text>
</svg>
Side by side

Before

Width:  |  Height:  |  Size: 527 B

15
assets/images/dvds/blade-runner.svg
View file

@ -1,15 +0,0 @@
<svg width="120" height="180" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="br-grad" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#1a1a2e;stop-opacity:1" />
<stop offset="100%" style="stop-color:#0f0f1e;stop-opacity:1" />
</linearGradient>
</defs>
<rect width="120" height="180" fill="url(#br-grad)"/>
<text x="60" y="90" font-family="Arial, sans-serif" font-size="18" font-weight="bold" fill="#00ff9f" text-anchor="middle">
BLADE
</text>
<text x="60" y="110" font-family="Arial, sans-serif" font-size="18" font-weight="bold" fill="#00ff9f" text-anchor="middle">
RUNNER
</text>
</svg>
Side by side

Before

Width:  |  Height:  |  Size: 672 B

15
assets/images/dvds/ghost-in-shell.svg
View file

@ -1,15 +0,0 @@
<svg width="120" height="180" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="gits-grad" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#4a148c;stop-opacity:1" />
<stop offset="100%" style="stop-color:#1a0a3c;stop-opacity:1" />
</linearGradient>
</defs>
<rect width="120" height="180" fill="url(#gits-grad)"/>
<text x="60" y="80" font-family="Arial, sans-serif" font-size="14" fill="#00ffff" text-anchor="middle">
GHOST IN
</text>
<text x="60" y="100" font-family="Arial, sans-serif" font-size="14" fill="#00ffff" text-anchor="middle">
THE SHELL
</text>
</svg>
Side by side

Before

Width:  |  Height:  |  Size: 644 B

9
assets/images/dvds/matrix.svg
View file

@ -1,9 +0,0 @@
<svg width="120" height="180" xmlns="http://www.w3.org/2000/svg">
<rect width="120" height="180" fill="#000"/>
<text x="60" y="90" font-family="Arial, sans-serif" font-size="24" font-weight="bold" fill="#0f0" text-anchor="middle">
THE
</text>
<text x="60" y="110" font-family="Arial, sans-serif" font-size="24" font-weight="bold" fill="#0f0" text-anchor="middle">
MATRIX
</text>
</svg>
Side by side

Before

Width:  |  Height:  |  Size: 404 B

112
assets/sass/pages/now.scss
View file

@ -226,6 +226,10 @@ $dark-bg-3: #0a0a0a;
}
.storage-drive-led {
position: absolute;
top: 50%;
left: 5px;
transform: translateY(-2px);
width: 4px;
height: 4px;
}
@ -414,7 +418,6 @@ $dark-bg-3: #0a0a0a;
.patch-front {
display: flex;
align-items: center;
padding: 0 10px;
height: 100%;
gap: 10px;
}
@ -1057,7 +1060,6 @@ $dark-bg-3: #0a0a0a;
font-size: 28px;
font-weight: bold;
color: $dark-bg-1;
margin-bottom: 15px;
padding-bottom: 8px;
position: relative;
display: inline-block;
@ -1319,6 +1321,112 @@ $dark-bg-3: #0a0a0a;
background: linear-gradient(135deg, #ce93d8 0%, #ba68c8 100%);
}
// Whiteboard Media Items (Books, DVDs)
.wb-media {
display: flex;
flex-wrap: wrap;
gap: 20px;
margin-top: 40px;
justify-content: center;
}
.wb-media-item {
position: relative;
width: 120px;
flex-shrink: 0;
transition: transform 0.2s ease;
// Random rotation for each item
&:nth-child(1) {
transform: rotate(-2deg);
}
&:nth-child(2) {
transform: rotate(3deg);
}
&:nth-child(3) {
transform: rotate(-1deg);
}
&:nth-child(4) {
transform: rotate(2deg);
}
&:nth-child(5) {
transform: rotate(-3deg);
}
&:nth-child(6) {
transform: rotate(1deg);
}
&:hover {
transform: rotate(0deg) scale(1.2);
z-index: 10;
.wb-media-cover {
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
}
}
}
.wb-media-pin {
position: absolute;
top: -8px;
left: 50%;
transform: translateX(-50%);
width: 12px;
height: 12px;
background: radial-gradient(circle, #888 0%, #444 60%);
border-radius: 50%;
box-shadow:
0 2px 4px rgba(0, 0, 0, 0.4),
inset 0 1px 2px rgba(255, 255, 255, 0.3);
z-index: 2;
// Pin needle
&::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 2px;
height: 2px;
background: #222;
border-radius: 50%;
}
}
.wb-media-cover {
width: 100%;
max-width: 120px;
height: auto;
max-height: 180px;
display: block;
object-fit: cover;
border-radius: 3px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
transition: box-shadow 0.2s ease;
}
.wb-media-label {
position: absolute;
bottom: -5px;
right: -5px;
background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%);
color: #333;
font-family: "Courier New", monospace;
font-size: 10px;
font-weight: bold;
padding: 2px 6px;
border-radius: 3px;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
z-index: 3;
letter-spacing: 0.5px;
}
// Bookshelf
.bookshelf {
width: 400px;

24
assets/sass/style.scss
View file

@ -691,6 +691,19 @@ body {
top: auto;
left: auto;
}
/* Monitor stand */
> .monitor-stand {
position: absolute;
background: none;
box-shadow: none;
bottom: -80px;
left: 50%;
transform: translateX(-50%);
width: 120px;
height: 80px;
z-index: -1;
}
}
/* CRT Monitor bezel */
@ -762,17 +775,6 @@ body {
}
}
/* Monitor stand */
.monitor-stand {
position: absolute;
bottom: -80px;
left: 50%;
transform: translateX(-50%);
width: 120px;
height: 80px;
z-index: -1;
}
/* Stand neck */
.stand-neck {
width: 40px;