diff --git a/content/blog/2026-01-02-week-2-new-year/thinkpad_t480s.jpg b/assets/images/misc/thinkpad_t480s.jpg similarity index 100% rename from content/blog/2026-01-02-week-2-new-year/thinkpad_t480s.jpg rename to assets/images/misc/thinkpad_t480s.jpg diff --git a/assets/sass/_handwritten.scss b/assets/sass/_handwritten.scss new file mode 100644 index 0000000..c109a19 --- /dev/null +++ b/assets/sass/_handwritten.scss @@ -0,0 +1,67 @@ +/** + +Styles to apply the handwritten effect to a thinger + +**/ + +.handwritten-wrap { + font-family: "Caveat", cursive; + + a { + position: relative; + color: inherit; + text-decoration: none; + } + + a::after { + content: ""; + position: absolute; + left: -2px; + right: -2px; + bottom: -0.15em; + height: 0.3em; + pointer-events: none; + + background: repeating-linear-gradient( + -3deg, + currentColor 0 1.5px, + transparent 1.5px 4px + ); + opacity: 0.9; + } + + del { + position: relative; + text-decoration: none; + color: inherit; + } + + del::after { + content: ""; + position: absolute; + left: -4px; + top: 50%; + width: calc(100% + 8px); + height: 1.4em; + transform: translateY(-50%); + pointer-events: none; + + background-color: currentColor; + + -webkit-mask-image: url("data:image/svg+xml;utf8,\ +\ +\ +\ +"); + -webkit-mask-repeat: repeat-x; + -webkit-mask-size: auto 100%; + + mask-image: url("data:image/svg+xml;utf8,\ +\ +\ +\ +"); + mask-repeat: repeat-x; + mask-size: auto 100%; + } +} diff --git a/assets/sass/_mixins.scss b/assets/sass/_mixins.scss index 928668f..a73a33d 100644 --- a/assets/sass/_mixins.scss +++ b/assets/sass/_mixins.scss @@ -88,7 +88,13 @@ $breakpoints: ( } } -// Usage -.scrollable-child { - @include scrollbar-custom(greenyellow, 10px); +@mixin enhance-3d-transform { + backface-visibility: hidden; + -webkit-backface-visibility: hidden; + transform-style: preserve-3d; + -webkit-transform-style: preserve-3d; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + /* Optional: Force GPU acceleration */ + will-change: transform; } diff --git a/assets/sass/pages/buttons.scss b/assets/sass/pages/buttons.scss index e68ed2d..a73b5a7 100644 --- a/assets/sass/pages/buttons.scss +++ b/assets/sass/pages/buttons.scss @@ -21,14 +21,32 @@ } } +.buttons-window { + position: absolute; + top: 0; + aspect-ratio: 16/9; + width: 50%; + left: 70%; + transform: translate(-50%, -20%); + border: 5px solid #c4b89a; + border-top-width: 5px; + border-top-style: solid; + border-top-color: rgb(196, 184, 154); + border-top: 0; +} + .buttons-container { + position: relative; + min-height: 100vh; + > .wall { position: fixed !important; width: 100vw !important; height: 100vh !important; top: 0 !important; left: 0 !important; - background: repeating-linear-gradient( + background: + repeating-linear-gradient( 90deg, #2a2a2a 0px, #2a2a2a 100px, @@ -44,7 +62,12 @@ } > .desk { - height: 37%; + position: absolute; + top: 50vh; + left: 0; + right: 0; + width: 100%; + min-height: calc(100% - 50vh); } .button-lavalamp { @@ -69,6 +92,10 @@ filter: blur(8px); z-index: -1; } + + @include media-down(lg) { + display: none; + } } .buttons-header { @@ -109,6 +136,8 @@ align-items: center; perspective: 2000px; margin: 4rem 0; + margin-top: 10%; + margin-bottom: 0; min-height: 570px; padding: 2rem; position: relative; @@ -121,7 +150,8 @@ height: 50px; background: linear-gradient(180deg, #1a1a1a 0%, #0d0d0d 100%); border-radius: 0 0 15px 15px; - box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), + box-shadow: + 0 10px 30px rgba(0, 0, 0, 0.5), inset 0 1px 2px rgba(255, 255, 255, 0.05); z-index: 1; bottom: 0; @@ -137,7 +167,8 @@ bottom: 10px; left: 50%; transform: translateX(-50%) translateZ(0px); - background: repeating-linear-gradient( + background: + repeating-linear-gradient( 90deg, #2a2a2a 0, #2a2a2a 12px, @@ -163,7 +194,8 @@ height: 480px; background: linear-gradient(135deg, #d4d4d4 0%, #c0c0c0 40%, #b0b0b0 100%); border-radius: 20px 20px 0 0; - box-shadow: 0 40px 100px rgba(0, 0, 0, 0.4), + box-shadow: + 0 40px 100px rgba(0, 0, 0, 0.4), inset 0 1px 2px rgba(255, 255, 255, 0.5), inset 0 -3px 8px rgba(0, 0, 0, 0.08); transform: rotateX(25deg) translateZ(20px); @@ -273,48 +305,122 @@ .buttons-content { max-width: 800px; margin: 4rem auto 0; + margin-top: 0; padding: 2rem; - perspective: 400px; + perspective: 1000px; // Show as a grid with 2 colums display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; + font-weight: bold; + font-size: 1.5em; + + .link-me-buttons { + margin: auto; + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: 0.5em; + + > img { + // Apply a random rotation + transform: rotate(var(--rotation, 0deg)); + filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.5)); + border: 4px solid white; + border-radius: 2px; + + &:hover { + transform: rotateY(-10deg) scale(1.2); + filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.6)); + border: 4px solid transparent; + } + } + } + .buttons-paper { position: relative; // Paper-like background - background: #f9f9f9; - padding: 1.5rem; + background: #d7d9cf; + padding: 0.5em; + padding-top: 1.6em; border-radius: 8px; - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08); + box-shadow: + 0 4px 12px rgba(0, 0, 0, 0.1), + 0 1px 3px rgba(0, 0, 0, 0.08), + 0 10px 30px rgba(0, 0, 0, 0.5); border: 1px solid #e0e0e0; - // Lined background + // Lined background - matches the 1.6 line-height of paragraphs with 1.5em font-size = 2.4em background-image: linear-gradient( to bottom, - #f9f9f9 0%, - #f9f9f9 95%, - #e0e0e0 95%, - #e0e0e0 100% + #d1d4cc 0%, + #d1d4cc 97%, + #5c6f90 97%, + #5c6f90 100% ); - background-size: 100% 24px; - // Add a slight perspective so it looks like its on the table + background-size: 100% 1.6em; + } + + // Target the parent div that contains the image + > div { transform: rotateX(25deg) translateZ(20px); transform-style: preserve-3d; transform-origin: bottom center; + @include enhance-3d-transform; + } + + .blog-img-container { + width: 80%; + margin: auto; + background-color: #fdfaf5; + padding: 0.5em; + padding-bottom: 1em; + transform: rotate(-2deg); + box-shadow: + 0 0 1px rgba(255, 255, 255, 0.5), + inset 0 0 0 1px rgba(255, 255, 255, 0.8), + 0 10px 30px rgba(0, 0, 0, 0.2), + 0 10px 30px rgba(0, 0, 0, 0.7); + @include enhance-3d-transform; + + img { + width: 100%; + aspect-ratio: 1; + object-fit: cover; + display: block; + + // Vintage Polaroid filter effects + filter: contrast(1.3) saturate(0.65) brightness(1.05) sepia(0.3); + + border: 1px solid rgba(0, 0, 0, 0.7); + } + + figcaption { + text-align: center; + transform: rotate(-3deg); + padding-top: 1em; + pointer-events: none; + } } p { - margin-bottom: 1.5rem; - line-height: 1.6; - color: #828282; + margin-bottom: 1.6em; + line-height: 1.6em; + color: #2f2f2f; } } // Responsive adjustments @media (max-width: 900px) { + .buttons-container { + > .desk { + top: 20vh; + height: 120vh; + } + } + .laptop-container { - min-height: 500px; + min-height: 100px; } .laptop-container::before { @@ -331,6 +437,17 @@ .laptop-lid { width: 600px; height: 375px; + + &:after { + display: none; + } + + &:before { + left: 35px; + top: 30px; + transform: none; + font-size: 2em; + } } .button-sticker { @@ -341,6 +458,18 @@ transform: rotateX(-25deg) rotate(0deg) scale(1.3) translateZ(30px); } } + + .buttons-content { + grid-template-columns: 1fr; + + img { + margin: auto; + } + } + + .blog-img-container { + max-width: 300px; + } } @media (max-width: 600px) { @@ -355,29 +484,49 @@ } } } + .buttons-content { + perspective: none; + .link-me-buttons { + grid-template-columns: 1fr; + } + } .laptop-container { perspective: 800px; - min-height: 400px; + min-height: 50px; } .laptop-container::before { - width: 100%; - max-width: 400px; - height: 30px; + display: none; } .laptop-container::after { - width: 370px; - height: 18px; - bottom: 6px; + display: none; } .laptop-lid { width: 100%; max-width: 400px; height: 250px; - transform: rotateX(25deg) translateZ(20px); + transform: rotateX(0) translateZ(0); + border-width: 1px; + padding: 2px; + border-radius: 10px; + + &:after { + display: none; + } + + &:before { + left: 25px; + top: 20px; + transform: none; + font-size: 1em; + } + + .laptop-lid-bezel { + inset: 6px; + } } .button-sticker { diff --git a/assets/sass/pages/homepage.scss b/assets/sass/pages/homepage.scss index b68cb33..c46f51c 100644 --- a/assets/sass/pages/homepage.scss +++ b/assets/sass/pages/homepage.scss @@ -188,9 +188,27 @@ .nav-floppy { width: 44%; + max-width: 100px; transform: rotate(5deg); position: relative; + &.top { + transform: rotate(-5deg); + left: -20px; + + .nav-floppy-text { + transform: rotate(7deg); + } + } + + &.bottom { + left: 20px; + + .nav-floppy-text { + transform: rotate(-7deg); + } + } + &:hover { .nav-floppy-text { opacity: 1; diff --git a/assets/sass/style.scss b/assets/sass/style.scss index ce56bff..7697c34 100644 --- a/assets/sass/style.scss +++ b/assets/sass/style.scss @@ -1,6 +1,7 @@ @import "normalize"; @import "mixins"; @import "animations"; +@import "handwritten"; @import "partials/global-styles"; @import "partials/form-controls"; diff --git a/content/blog/2026-01-02-week-2-new-year/index.md b/content/blog/2026-01-02-week-2-new-year/index.md index b98d91d..adc1a3a 100644 --- a/content/blog/2026-01-02-week-2-new-year/index.md +++ b/content/blog/2026-01-02-week-2-new-year/index.md @@ -12,7 +12,7 @@ draft: false - 🌐 I setup a dedicated server for this site and migrated off neocities, I am coming up with a plan on how to make sure updates keep getting posted there but redirect here. - 📺 There's been a bunch of Taskmaster recently, including Champion of Champions which was good. Traitors is back on so we're up to date on that so far. -{{< img src="thinkpad_t480s.jpg" alt="Thinkpad T480s complete with stickerbomb" width="900x" >}} +{{< img src="images/misc/thinkpad_t480s.jpg" alt="Thinkpad T480s complete with stickerbomb" width="900x" >}} ## Links I Found Interesting diff --git a/content/buttons/index.md b/content/buttons/index.md index 7945d2f..3829b96 100644 --- a/content/buttons/index.md +++ b/content/buttons/index.md @@ -43,6 +43,16 @@ buttons: image: "jigglypuff.gif" - name: "Fuck Google" image: "fckgoogle.gif" + - name: "Ritual.sh" + image: "ritual_1.gif" + - name: "Ritual.sh" + image: "ritual_2.gif" + - name: "Ritual.sh" + image: "ritual_4.gif" --- -People and things I like, stuck on my laptop - just like in real life! +Here are a bunch of ~stickers~ buttons that I've collected on my travels around the IndieWeb. + +If you want to appear on my laptop, leave me a message on my [guestbook](/guestbook) and I will add you! + +Here are some ~stickers~ buttons... feel free to take one! diff --git a/content/buttons/ritual_1.gif b/content/buttons/ritual_1.gif new file mode 100644 index 0000000..1e3ba7d Binary files /dev/null and b/content/buttons/ritual_1.gif differ diff --git a/content/buttons/ritual_2.gif b/content/buttons/ritual_2.gif new file mode 100644 index 0000000..8de5161 Binary files /dev/null and b/content/buttons/ritual_2.gif differ diff --git a/content/buttons/ritual_3.gif b/content/buttons/ritual_3.gif new file mode 100644 index 0000000..32a6cdf Binary files /dev/null and b/content/buttons/ritual_3.gif differ diff --git a/content/buttons/ritual_4.gif b/content/buttons/ritual_4.gif new file mode 100644 index 0000000..74f83df Binary files /dev/null and b/content/buttons/ritual_4.gif differ diff --git a/layouts/404.html b/layouts/404.html index 7e30c1c..51ae7fe 100755 --- a/layouts/404.html +++ b/layouts/404.html @@ -1,8 +1,6 @@ -{{ define "header" }}{{ partial "page-header.html" . }}{{ end }} -{{ define "main" }} +{{ define "header" }}{{ partial "page-header.html" . }}{{ end }} {{ define +"main" }}
-

- This is not the page you were looking for -

+

This is not the page you were looking for

-{{ end }} \ No newline at end of file +{{ end }} diff --git a/layouts/buttons/single.html b/layouts/buttons/single.html index cb6c5ec..bb874ce 100644 --- a/layouts/buttons/single.html +++ b/layouts/buttons/single.html @@ -3,18 +3,8 @@
-
- +
+ {{ partial "elements/window.html" . }}
@@ -41,8 +31,21 @@
-
-
{{ .Content }}
+
+
+ {{ .Content }} +
+ + + + +
+
+
+ + {{ partial "responsive-image.html" (dict "src" + "images/misc/thinkpad_t480s.jpg" "alt" "My Thinkpad T480s with stickerbomb" "width" "900x" "page" .) }} +
diff --git a/layouts/index.html b/layouts/index.html index d442f57..948caf7 100644 --- a/layouts/index.html +++ b/layouts/index.html @@ -265,7 +265,7 @@
-
+
{{ partial "elements/floppy.html" (dict "title" "Guestbook" "lines" (slice "" "" "DO NOT DELETE" "" "") "bgColor" "#1a4d8f" "bgColorDark" @@ -273,6 +273,14 @@
Guestbook
+
+ + {{ partial "elements/floppy.html" (dict "title" "Buttons" "lines" (slice + "" "" "NOT STICKERS" "" "") "bgColor" "#85112e" "bgColorDark" "#660a21") + }} +
Buttons & Links
+ +
{{ partial "elements/crt-tv.html" . }}
diff --git a/layouts/partials/responsive-image.html b/layouts/partials/responsive-image.html new file mode 100644 index 0000000..5d65893 --- /dev/null +++ b/layouts/partials/responsive-image.html @@ -0,0 +1,21 @@ + +{{ $src := .src }} +{{ $alt := .alt | default "" }} +{{ $width := .width | default "800x" }} + +
+{{ with .page.Resources.GetMatch $src }} + {{ $resized := .Resize $width }} + {{ $alt }} +{{ else }} + {{ with resources.Get $src }} + {{ $resized := .Resize $width }} + {{ $alt }} + {{ else }} + {{ $alt }} + {{ end }} +{{ end }} +{{ if $alt }} +
{{ $alt }}
+{{ end }} +
diff --git a/layouts/partials/site-footer.html b/layouts/partials/site-footer.html index e2abd88..32dfe74 100755 --- a/layouts/partials/site-footer.html +++ b/layouts/partials/site-footer.html @@ -4,9 +4,7 @@  •  - Follow on Neocities + Sign My Guestbook  •  diff --git a/layouts/shortcodes/img.html b/layouts/shortcodes/img.html index 45ea623..c363960 100644 --- a/layouts/shortcodes/img.html +++ b/layouts/shortcodes/img.html @@ -1,16 +1 @@ - -{{ $src := .Get "src" }} -{{ $alt := .Get "alt" | default "" }} -{{ $width := .Get "width" | default "800x" }} - -
-{{ with .Page.Resources.GetMatch $src }} - {{ $resized := .Resize $width }} - {{ $alt }} -{{ else }} - {{ $alt }} -{{ end }} -{{ if $alt }} -
{{ $alt }}
-{{ end }} -
+{{ partial "responsive-image.html" (dict "src" (.Get "src") "alt" (.Get "alt") "width" (.Get "width") "page" .Page) }}