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

Adding contact information, updating about page

Browse source
This commit is contained in:
Dan 2026-01-06 14:54:30 +00:00
parent 80b1d7634a
commit 0041a48bae
11 changed files with 526 additions and 43 deletions
Download patch file Download diff file Expand all files Collapse all files

144
assets/sass/pages/about.scss
View file

@ -2,6 +2,10 @@
color: white;
margin: auto;
.content-screen {
position: relative !important;
}
> .about-content {
width: 50%;
margin: auto;
@ -14,6 +18,125 @@
grid-column: 1 / -1;
}
.about-contact-section {
margin-top: 1rem;
p {
margin-bottom: 1.5rem;
line-height: 1.6;
}
.contact-info {
display: flex;
flex-direction: column;
gap: 1rem;
}
.contact-item {
display: flex;
flex-direction: column;
gap: 0.5rem;
@media (min-width: 600px) {
flex-direction: row;
align-items: center;
flex-wrap: wrap;
}
}
.contact-label {
font-weight: bold;
white-space: nowrap;
}
.info {
color: #0f0;
text-shadow: 0 0 5px rgba(0, 255, 0, 0.5);
text-decoration: none;
border-bottom: 1px dotted rgba(0, 255, 0, 0.5);
transition: all 0.3s ease;
&:hover {
border-bottom-style: solid;
border-bottom-color: rgba(0, 255, 0, 0.8);
text-shadow: 0 0 10px rgba(0, 255, 0, 0.8);
}
}
.pgp-actions {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
margin-left: 0;
@media (min-width: 600px) {
margin-left: 0.5rem;
}
}
.pgp-button {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 4px 10px;
background: rgba(0, 255, 0, 0.1);
border: 1px solid rgba(0, 255, 0, 0.3);
color: #0f0;
text-decoration: none;
font-family: monospace;
font-size: 0.8rem;
cursor: pointer;
transition: all 0.3s ease;
text-shadow: 0 0 5px rgba(0, 255, 0, 0.5);
border-radius: 3px;
.button-icon {
font-size: 1em;
line-height: 1;
}
&:hover {
background: rgba(0, 255, 0, 0.2);
border-color: rgba(0, 255, 0, 0.6);
box-shadow: 0 0 10px rgba(0, 255, 0, 0.4);
text-shadow: 0 0 10px rgba(0, 255, 0, 0.8);
}
&:active {
transform: translateY(1px);
}
}
.copy-feedback {
margin-top: 0.5rem;
font-size: 0.85rem;
padding: 6px 10px;
border-radius: 3px;
opacity: 0;
transform: translateY(-10px);
transition: all 0.3s ease;
&.show {
opacity: 1;
transform: translateY(0);
}
&.success {
color: #0f0;
background: rgba(0, 255, 0, 0.1);
border: 1px solid rgba(0, 255, 0, 0.3);
text-shadow: 0 0 5px rgba(0, 255, 0, 0.5);
}
&.error {
color: #f00;
background: rgba(255, 0, 0, 0.1);
border: 1px solid rgba(255, 0, 0, 0.3);
text-shadow: 0 0 5px rgba(255, 0, 0, 0.5);
}
}
}
.about-header {
position: absolute;
left: -80px;
@ -37,6 +160,10 @@
}
}
> .about-container {
position: relative;
}
> .info-badges {
display: grid;
grid-template-columns: 1fr 1fr;
@ -55,6 +182,23 @@
transform: rotate(5deg);
}
}
.about-music {
pointer-events: none;
> .music {
scale: 1.6;
.ipod-group {
top: 50%;
left: 25%;
}
.vu-meter {
position: relative;
}
}
}
}
}

136
assets/sass/pages/blog.scss
View file

@ -558,6 +558,142 @@
}
}
// Contact section styling
.blog-contact-section {
margin-top: 40px;
padding: 20px;
background: rgba(0, 255, 0, 0.05);
border: 1px solid rgba(0, 255, 0, 0.3);
border-radius: 4px;
@include media-down(lg) {
margin-top: 30px;
padding: 15px;
}
.contact-title {
font-size: 1.3rem;
margin-bottom: 15px;
color: greenyellow;
text-shadow: 0 0 10px rgba(173, 255, 47, 0.5);
@include media-down(lg) {
font-size: 1.1rem;
}
}
.contact-content {
display: flex;
flex-direction: column;
gap: 15px;
}
.contact-email,
.contact-pgp {
font-size: 0.95rem;
line-height: 1.6;
@include media-down(lg) {
font-size: 0.9rem;
}
}
.contact-label {
color: greenyellow;
font-weight: bold;
margin-right: 10px;
text-shadow: 0 0 5px rgba(173, 255, 47, 0.5);
}
.contact-email a {
color: #0f0;
text-decoration: none;
border-bottom: 1px dotted rgba(0, 255, 0, 0.5);
transition: all 0.3s ease;
&:hover {
border-bottom-style: solid;
border-bottom-color: rgba(0, 255, 0, 0.8);
text-shadow: 0 0 10px rgba(0, 255, 0, 0.8);
background: rgba(0, 255, 0, 0.05);
}
}
.pgp-actions {
display: flex;
gap: 10px;
margin-top: 10px;
flex-wrap: wrap;
}
.pgp-button {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 15px;
background: rgba(0, 255, 0, 0.1);
border: 1px solid rgba(0, 255, 0, 0.3);
color: #0f0;
text-decoration: none;
font-family: monospace;
font-size: 0.85rem;
cursor: pointer;
transition: all 0.3s ease;
text-shadow: 0 0 5px rgba(0, 255, 0, 0.5);
border-radius: 3px;
@include media-down(lg) {
font-size: 0.8rem;
padding: 6px 12px;
}
.button-icon {
font-size: 1.1em;
line-height: 1;
}
&:hover {
background: rgba(0, 255, 0, 0.2);
border-color: rgba(0, 255, 0, 0.6);
box-shadow: 0 0 10px rgba(0, 255, 0, 0.4);
text-shadow: 0 0 10px rgba(0, 255, 0, 0.8);
}
&:active {
transform: translateY(1px);
}
}
.copy-feedback {
margin-top: 10px;
font-size: 0.85rem;
padding: 8px 12px;
border-radius: 3px;
opacity: 0;
transform: translateY(-10px);
transition: all 0.3s ease;
&.show {
opacity: 1;
transform: translateY(0);
}
&.success {
color: #0f0;
background: rgba(0, 255, 0, 0.1);
border: 1px solid rgba(0, 255, 0, 0.3);
text-shadow: 0 0 5px rgba(0, 255, 0, 0.5);
}
&.error {
color: #f00;
background: rgba(255, 0, 0, 0.1);
border: 1px solid rgba(255, 0, 0, 0.3);
text-shadow: 0 0 5px rgba(255, 0, 0, 0.5);
}
}
}
// Blog image styling
.blog-img-container {
position: relative;

69
assets/sass/pages/resources.scss
View file

@ -16,7 +16,7 @@
.whiteboard {
background: linear-gradient(135deg, #f5f5f0 0%, #e8e8dd 100%);
border-radius: 8px;
padding: 3rem 2rem;
box-shadow:
0 10px 40px rgba(0, 0, 0, 0.1),
inset 0 0 100px rgba(0, 0, 0, 0.02);
@ -24,15 +24,27 @@
// Subtle texture overlay
&::before {
content: '';
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image:
repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0, 0, 0, 0.01) 2px, rgba(0, 0, 0, 0.01) 4px),
repeating-linear-gradient(90deg, transparent, transparent 2px, rgba(0, 0, 0, 0.01) 2px, rgba(0, 0, 0, 0.01) 4px);
repeating-linear-gradient(
0deg,
transparent,
transparent 2px,
rgba(0, 0, 0, 0.01) 2px,
rgba(0, 0, 0, 0.01) 4px
),
repeating-linear-gradient(
90deg,
transparent,
transparent 2px,
rgba(0, 0, 0, 0.01) 2px,
rgba(0, 0, 0, 0.01) 4px
);
pointer-events: none;
border-radius: 8px;
}
@ -77,18 +89,20 @@
.resource-pin {
position: relative;
transform: rotate(0deg);
transition: transform 0.3s ease, box-shadow 0.3s ease;
transition:
transform 0.3s ease,
box-shadow 0.3s ease;
// Random slight rotations for pins
&:nth-child(3n+1) {
&:nth-child(3n + 1) {
transform: rotate(-1deg);
}
&:nth-child(3n+2) {
&:nth-child(3n + 2) {
transform: rotate(1deg);
}
&:nth-child(3n+3) {
&:nth-child(3n + 3) {
transform: rotate(-0.5deg);
}
@ -120,7 +134,7 @@
transition: transform 0.3s ease;
&::after {
content: '';
content: "";
position: absolute;
top: 50%;
left: 50%;
@ -147,19 +161,19 @@
gap: 1rem;
// Vary note colors
.resource-pin:nth-child(4n+1) & {
.resource-pin:nth-child(4n + 1) & {
background: linear-gradient(135deg, #fef9c3 0%, #fde68a 100%); // Yellow
}
.resource-pin:nth-child(4n+2) & {
.resource-pin:nth-child(4n + 2) & {
background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%); // Blue
}
.resource-pin:nth-child(4n+3) & {
.resource-pin:nth-child(4n + 3) & {
background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%); // Green
}
.resource-pin:nth-child(4n+4) & {
.resource-pin:nth-child(4n + 4) & {
background: linear-gradient(135deg, #fce7f3 0%, #fbcfe8 100%); // Pink
}
}
@ -172,7 +186,13 @@
// Lavalamp icon
&.lavalamp {
background: linear-gradient(180deg, transparent 0%, transparent 20%, #9333ea 20%, #7c3aed 100%);
background: linear-gradient(
180deg,
transparent 0%,
transparent 20%,
#9333ea 20%,
#7c3aed 100%
);
border-radius: 10px 10px 40px 40px;
border: 3px solid #6b21a8;
position: relative;
@ -180,7 +200,7 @@
// Lamp base
&::before {
content: '';
content: "";
position: absolute;
bottom: -8px;
left: 50%;
@ -193,7 +213,7 @@
// Lava blobs
&::after {
content: '';
content: "";
position: absolute;
top: 30%;
left: 30%;
@ -219,7 +239,7 @@
// Equalizer bars
&::before,
&::after {
content: '';
content: "";
position: absolute;
bottom: 15px;
width: 8px;
@ -280,7 +300,8 @@
}
@keyframes float-blob {
0%, 100% {
0%,
100% {
transform: translateY(0) scale(1);
}
50% {
@ -289,7 +310,8 @@
}
@keyframes float-blob-2 {
0%, 100% {
0%,
100% {
transform: translateY(0) scale(1);
}
50% {
@ -298,7 +320,8 @@
}
@keyframes equalizer-1 {
0%, 100% {
0%,
100% {
height: 35px;
}
50% {
@ -307,7 +330,8 @@
}
@keyframes equalizer-2 {
0%, 100% {
0%,
100% {
height: 25px;
}
50% {
@ -316,7 +340,8 @@
}
@keyframes equalizer-3 {
0%, 100% {
0%,
100% {
height: 30px;
}
50% {

6
assets/sass/partials/_content-screens.scss
View file

@ -6,7 +6,7 @@
aspect-ratio: 300 / 245;
background: linear-gradient(145deg, #b8b8b0, #989888);
box-shadow:
0 8px 20px rgba(0, 0, 0, 0.7),
0 8px 20px #000000b3,
inset 0 2px 4px rgba(255, 255, 255, 0.3),
inset 0 -2px 4px rgba(0, 0, 0, 0.3);
padding: 6px 8px 18px 8px;
@ -20,7 +20,7 @@
&::before {
content: " ";
display: block;
position: fixed;
position: absolute;
top: 6px;
left: 8px;
bottom: 18px;
@ -44,7 +44,7 @@
&::after {
content: " ";
display: block;
position: fixed;
position: absolute;
top: 6px;
left: 8px;
bottom: 18px;

4
assets/sass/partials/_global-styles.scss
View file

@ -12,6 +12,10 @@ footer[role="contentinfo"] {
border-left: 1px solid #0f0;
border-top-left-radius: 5px;
> .crt {
position: relative;
}
@include media-down(lg) {
display: none;
}

4
assets/sass/partials/_vu-meter.scss
View file

@ -43,6 +43,10 @@
justify-content: space-around;
height: 100%;
gap: 2px;
&.crt {
position: relative;
}
}
.vu-bar {

4
assets/sass/style.scss
View file

@ -103,6 +103,7 @@ body {
pointer-events: none;
}
.crt {
position: absolute;
animation: textShadow 1.6s infinite;
background: black;
color: greenyellow;
@ -813,7 +814,6 @@ body {
text-decoration: none !important;
}
/* Desk-mounted CRT - on desk left side */
.desk-monitor {
bottom: 10%;
@ -1036,8 +1036,6 @@ body {
}
}
@keyframes pulse-slow {
0%,
100% {