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/js/buttons.js b/assets/js/buttons.js new file mode 100644 index 0000000..8b45097 --- /dev/null +++ b/assets/js/buttons.js @@ -0,0 +1,49 @@ +// Randomize button positions on the laptop lid +function initializeButtons() { + const buttons = document.querySelectorAll(".button-sticker"); + const laptopLid = document.getElementById("laptop-lid"); + + if (!laptopLid) return; + + // Account for CSS padding (20px) and bezel border (15px) + const lidPadding = 20; + const bezelBorder = 15; + const totalInset = lidPadding + bezelBorder; + const displayAreaWidth = laptopLid.offsetWidth - totalInset * 2; + const displayAreaHeight = laptopLid.offsetHeight - totalInset * 2; + + buttons.forEach((button) => { + // Get button dimensions - use data attributes as fallback + const buttonWidth = button.offsetWidth || 88; + const buttonHeight = button.offsetHeight || 31; + + // Generate random position within display area bounds + const maxX = Math.max(0, displayAreaWidth - buttonWidth); + const maxY = Math.max(0, displayAreaHeight - buttonHeight); + + const randomX = Math.random() * maxX + totalInset; + const randomY = Math.random() * maxY + totalInset; + const randomRotation = (Math.random() - 0.5) * 40; + + // Set CSS custom properties for positioning and rotation + button.style.setProperty("--x", randomX + "px"); + button.style.setProperty("--y", randomY + "px"); + button.style.setProperty("--rotation", randomRotation + "deg"); + }); +} + +// Initialize on page load +if (document.readyState === "loading") { + document.addEventListener("DOMContentLoaded", initializeButtons); +} else { + // DOM already loaded + initializeButtons(); +} + +// Re-randomize on window resize +window.addEventListener("resize", () => { + // Add small delay to ensure measurements are accurate + setTimeout(() => { + initializeButtons(); + }, 100); +}); 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 new file mode 100644 index 0000000..a73b5a7 --- /dev/null +++ b/assets/sass/pages/buttons.scss @@ -0,0 +1,540 @@ +// 88x31 Buttons Collection - Laptop Lid CSS Art +// Standalone page with 3D laptop lid displaying collected IndieWeb buttons + +// Heart flash animation +@keyframes heart-flash { + 0%, + 100% { + filter: none; + color: rgba(255, 0, 0, 0.3); + } + 5%, + 15% { + filter: drop-shadow(0 0 8px #ff0000) drop-shadow(0 0 4px #ff3333); + text-shadow: 0 0 10px rgba(255, 0, 0, 0.8); + color: rgba(255, 0, 0, 0.8); + } + 20%, + 100% { + filter: none; + color: rgba(255, 0, 0, 0.3); + } +} + +.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( + 90deg, + #2a2a2a 0px, + #2a2a2a 100px, + #252525 100px, + #252525 101px + ), + linear-gradient(180deg, #1a1a1a 0%, #2a2a2a 50%, #1a1a1a 100%) !important; + + &::before, + &::after { + display: none !important; + } + } + + > .desk { + position: absolute; + top: 50vh; + left: 0; + right: 0; + width: 100%; + min-height: calc(100% - 50vh); + } + + .button-lavalamp { + width: 190px; + height: 340px; + position: absolute; + right: 10%; + bottom: 20%; + z-index: 5; + + &::after { + // Add a drop shadow under the lava lamp + content: ""; + position: absolute; + width: 220px; + height: 50px; + background: rgba(0, 0, 0, 0.6); + border-radius: 50%; + bottom: -20px; + left: 50%; + transform: translateX(-50%); + filter: blur(8px); + z-index: -1; + } + + @include media-down(lg) { + display: none; + } + } + + .buttons-header { + width: 400px; + margin: auto; + margin-top: 2rem; + transform: rotate(-3deg); + } +} + +// Override wall styling with /now page grid pattern + +.buttons-page { + width: 100%; + margin: 0 auto; + z-index: 10; + position: relative; + + header { + text-align: center; + margin-bottom: 3rem; + + h1 { + font-size: 2.5rem; + margin-bottom: 0.5rem; + } + + p { + font-size: 1.1rem; + color: #666; + } + } +} + +.laptop-container { + display: flex; + justify-content: center; + align-items: center; + perspective: 2000px; + margin: 4rem 0; + margin-top: 10%; + margin-bottom: 0; + min-height: 570px; + padding: 2rem; + position: relative; +} + +.laptop-container::before { + content: ""; + position: absolute; + width: 810px; + 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), + inset 0 1px 2px rgba(255, 255, 255, 0.05); + z-index: 1; + bottom: 0; + left: 50%; + transform: translateX(-50%) translateZ(-30px); +} + +.laptop-container::after { + content: ""; + position: absolute; + width: 770px; + height: 30px; + bottom: 10px; + left: 50%; + transform: translateX(-50%) translateZ(0px); + background: + repeating-linear-gradient( + 90deg, + #2a2a2a 0, + #2a2a2a 12px, + #1a1a1a 12px, + #1a1a1a 16px + ), + repeating-linear-gradient( + 0deg, + #2a2a2a 0, + #2a2a2a 8px, + #1a1a1a 8px, + #1a1a1a 12px + ); + border-radius: 5px; + box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.8); + z-index: 1; + pointer-events: none; +} + +.laptop-lid { + position: relative; + width: 800px; + 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), + 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); + transform-style: preserve-3d; + transform-origin: bottom center; + transition: transform 0.3s ease; + border: 3px solid #909090; + border-bottom: 8px solid #707070; + z-index: 10; + padding: 20px; + overflow: hidden; + + // Logo face + &::after { + content: "(•ᴗ•)"; + position: absolute; + background: linear-gradient(135deg, #d4d4d4 0%, #c0c0c0 40%, #b0b0b0 100%); + // clip the background to the text + background-clip: text; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + font-weight: bold; + color: #fff; + font-size: 3rem; + top: 22%; + left: 25px; + transform: translateY(-50%) rotate(-45deg); + pointer-events: none; + z-index: -1; + } + + // Animated heart + &::before { + content: "❤"; + position: absolute; + font-size: 2.5rem; + color: #ff0000; + font-size: 3rem; + top: 11%; + left: 122px; + transform: translateY(-50%) rotate(-45deg); + pointer-events: none; + animation: heart-flash 3s ease-in-out infinite; + opacity: 1; + } + + // Bezel/display frame + .laptop-lid-bezel { + position: absolute; + inset: 15px; + border: 12px solid #1a1a1a; + border-radius: 8px; + background: #0a0a0a; + box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.9); + pointer-events: none; + z-index: -1; + } + + &:hover { + transform: rotateX(0deg) translateZ(0px); + } +} + +.button-sticker { + position: absolute; + left: var(--x, 20px); + top: var(--y, 20px); + display: flex; + align-items: center; + justify-content: center; + width: 88px; + height: 31px; + border: none; + border-radius: 2px; + background: transparent; + cursor: pointer; + transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1); + transform-style: preserve-3d; + transform: rotate(var(--rotation, 0deg)) scale(0.9); + filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.15)); + + img { + width: 100%; + height: 100%; + object-fit: contain; + display: block; + pointer-events: none; + border-radius: 1px; + } + + &:hover { + transform: rotate(0deg) scale(1.2); + z-index: 100; + filter: drop-shadow(0 10px 25px rgba(0, 0, 0, 0.35)); + } + + &:focus { + outline: 2px solid #4a90e2; + outline-offset: 2px; + } + + &:focus:not(:focus-visible) { + outline: none; + } +} + +.buttons-content { + max-width: 800px; + margin: 4rem auto 0; + margin-top: 0; + padding: 2rem; + 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: #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), + 0 10px 30px rgba(0, 0, 0, 0.5); + border: 1px solid #e0e0e0; + // Lined background - matches the 1.6 line-height of paragraphs with 1.5em font-size = 2.4em + background-image: linear-gradient( + to bottom, + #d1d4cc 0%, + #d1d4cc 97%, + #5c6f90 97%, + #5c6f90 100% + ); + 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.6em; + line-height: 1.6em; + color: #2f2f2f; + } +} + +// Responsive adjustments +@media (max-width: 900px) { + .buttons-container { + > .desk { + top: 20vh; + height: 120vh; + } + } + + .laptop-container { + min-height: 100px; + } + + .laptop-container::before { + width: 600px; + height: 40px; + } + + .laptop-container::after { + width: 570px; + height: 24px; + bottom: 8px; + } + + .laptop-lid { + width: 600px; + height: 375px; + + &:after { + display: none; + } + + &:before { + left: 35px; + top: 30px; + transform: none; + font-size: 2em; + } + } + + .button-sticker { + width: 66px; + height: 23px; + + &:hover { + 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) { + .buttons-page { + padding: 1rem; + + header { + margin-bottom: 2rem; + + h1 { + font-size: 1.8rem; + } + } + } + .buttons-content { + perspective: none; + .link-me-buttons { + grid-template-columns: 1fr; + } + } + + .laptop-container { + perspective: 800px; + min-height: 50px; + } + + .laptop-container::before { + display: none; + } + + .laptop-container::after { + display: none; + } + + .laptop-lid { + width: 100%; + max-width: 400px; + height: 250px; + 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 { + width: 44px; + height: 15px; + + &:hover { + transform: rotateX(-25deg) rotate(0deg) scale(1.3) translateZ(30px); + } + } +} 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 8860c32..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"; @@ -30,6 +31,7 @@ @import "pages/button-generator"; @import "pages/lavalamp-adoptable"; @import "pages/guestbook"; +@import "pages/buttons"; @import url(https://fonts.bunny.net/css?family=abel:400|barlow-condensed:400,500|caveat:400|lato:300,300i,400,400i|neonderthaw:400); 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/32bitcafe.gif b/content/buttons/32bitcafe.gif new file mode 100644 index 0000000..719275f Binary files /dev/null and b/content/buttons/32bitcafe.gif differ diff --git a/content/buttons/bazzite.gif b/content/buttons/bazzite.gif new file mode 100644 index 0000000..f7b1694 Binary files /dev/null and b/content/buttons/bazzite.gif differ diff --git a/content/buttons/brennanday.gif b/content/buttons/brennanday.gif new file mode 100644 index 0000000..e6eae67 Binary files /dev/null and b/content/buttons/brennanday.gif differ diff --git a/content/buttons/bsgbutton.png b/content/buttons/bsgbutton.png new file mode 100644 index 0000000..0eecea3 Binary files /dev/null and b/content/buttons/bsgbutton.png differ diff --git a/content/buttons/dandadan.gif b/content/buttons/dandadan.gif new file mode 100644 index 0000000..8cf7b85 Binary files /dev/null and b/content/buttons/dandadan.gif differ diff --git a/content/buttons/demo1.gif b/content/buttons/demo1.gif new file mode 100644 index 0000000..0331634 Binary files /dev/null and b/content/buttons/demo1.gif differ diff --git a/content/buttons/demo2.gif b/content/buttons/demo2.gif new file mode 100644 index 0000000..e0dba28 Binary files /dev/null and b/content/buttons/demo2.gif differ diff --git a/content/buttons/demo3.gif b/content/buttons/demo3.gif new file mode 100644 index 0000000..f2bd53b Binary files /dev/null and b/content/buttons/demo3.gif differ diff --git a/content/buttons/demo4.gif b/content/buttons/demo4.gif new file mode 100644 index 0000000..1d362e1 Binary files /dev/null and b/content/buttons/demo4.gif differ diff --git a/content/buttons/drbutton2.png b/content/buttons/drbutton2.png new file mode 100644 index 0000000..13a30b0 Binary files /dev/null and b/content/buttons/drbutton2.png differ diff --git a/content/buttons/fckgoogle.gif b/content/buttons/fckgoogle.gif new file mode 100644 index 0000000..ed15649 Binary files /dev/null and b/content/buttons/fckgoogle.gif differ diff --git a/content/buttons/getflash.gif b/content/buttons/getflash.gif new file mode 100644 index 0000000..19b5ef6 Binary files /dev/null and b/content/buttons/getflash.gif differ diff --git a/content/buttons/hasmile.gif b/content/buttons/hasmile.gif new file mode 100644 index 0000000..8db76ed Binary files /dev/null and b/content/buttons/hasmile.gif differ diff --git a/content/buttons/hl.gif b/content/buttons/hl.gif new file mode 100644 index 0000000..cb79281 Binary files /dev/null and b/content/buttons/hl.gif differ diff --git a/content/buttons/htmldream.gif b/content/buttons/htmldream.gif new file mode 100644 index 0000000..28fd2c2 Binary files /dev/null and b/content/buttons/htmldream.gif differ diff --git a/content/buttons/index.md b/content/buttons/index.md new file mode 100644 index 0000000..3829b96 --- /dev/null +++ b/content/buttons/index.md @@ -0,0 +1,58 @@ +--- +title: "Button Collection" +description: "A collection of 88x31 IndieWeb buttons collected from around the web" +layout: buttons +buttons: + - name: "32bit Cafe" + url: "https://32bit.cafe/" + image: "32bitcafe.gif" + - name: "Robb Knight" + url: "https://rknight.me/" + image: "robbknight.gif" + - name: "Brennan Day" + url: "https://brennan.day/" + image: "brennanday.gif" + - name: "Bazzite" + url: "https://bazzite.gg/" + image: "bazzite.gif" + - name: "Battlestar Galactica" + image: "bsgbutton.png" + - name: "Divergent Rays" + url: "https://divergentrays.com" + image: "drbutton2.png" + - name: "I dream in HTML" + image: "htmldream.gif" + - name: "DANDADAN" + url: "https://dandadan.i-heart-you.net/" + image: "dandadan.gif" + - name: "Get Flash" + image: "getflash.gif" + - name: "Minecraft" + image: "minecraft.gif" + - name: "Ubuntu" + image: "ubuntu.gif" + - name: "Under Construction" + image: "undercon.gif" + - name: "Linux Online" + image: "linuxonline.gif" + - name: "Half Life" + image: "hl.gif" + - name: "Smile" + image: "hasmile.gif" + - name: "Jigglypuff" + 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" +--- + +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/jigglypuff.gif b/content/buttons/jigglypuff.gif new file mode 100644 index 0000000..f004561 Binary files /dev/null and b/content/buttons/jigglypuff.gif differ diff --git a/content/buttons/linuxonline.gif b/content/buttons/linuxonline.gif new file mode 100644 index 0000000..c4e533d Binary files /dev/null and b/content/buttons/linuxonline.gif differ diff --git a/content/buttons/minecraft.gif b/content/buttons/minecraft.gif new file mode 100644 index 0000000..a149b45 Binary files /dev/null and b/content/buttons/minecraft.gif differ 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/content/buttons/robbknight.gif b/content/buttons/robbknight.gif new file mode 100644 index 0000000..045dbc9 Binary files /dev/null and b/content/buttons/robbknight.gif differ diff --git a/content/buttons/ubuntu.gif b/content/buttons/ubuntu.gif new file mode 100644 index 0000000..f5faf5f Binary files /dev/null and b/content/buttons/ubuntu.gif differ diff --git a/content/buttons/undercon.gif b/content/buttons/undercon.gif new file mode 100644 index 0000000..f73e975 Binary files /dev/null and b/content/buttons/undercon.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/_default/baseof.html b/layouts/_default/baseof.html index 616ee96..9e4c950 100755 --- a/layouts/_default/baseof.html +++ b/layouts/_default/baseof.html @@ -52,5 +52,11 @@ {{ $guestbook := resources.Get "js/guestbook.js" | resources.Minify | resources.Fingerprint }} {{ end }} + + + {{ if eq .Type "buttons" }} + {{ $buttons := resources.Get "js/buttons.js" | resources.Minify | resources.Fingerprint }} + + {{ end }} diff --git a/layouts/buttons/single.html b/layouts/buttons/single.html new file mode 100644 index 0000000..bb874ce --- /dev/null +++ b/layouts/buttons/single.html @@ -0,0 +1,52 @@ +{{ define "main" }} +
+
+
+ +
+ {{ partial "elements/window.html" . }} +
+ +
+
+
+ {{ partial "elements/lcd-screen.html" (dict "text" .Title "placeholder" + "") }} +
+
+ +
+
+
+ {{ range .Params.buttons }} + + {{ .name }} + + {{ end }} +
+
+ +
+
+ {{ .Content }} +
+ + + + +
+
+
+ + {{ partial "responsive-image.html" (dict "src" + "images/misc/thinkpad_t480s.jpg" "alt" "My Thinkpad T480s with stickerbomb" "width" "900x" "page" .) }} +
+
+
+
+{{ end }} 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) }}