photography

assets/css/vars.css

@@ -1,5 +1,5 @@
 :root {
-    --main-width: 780px;
+    --main-width: 1080px;
     --main-padding: 1.4em;
     --main-padding-bottom: 3rem;
 

content/photography.md

@@ -1,10 +1,7 @@
 +++
 title = "Russell's Photography"
 draft = false
+[params]
+    hideTitle = true
 +++
-
-# My Photography Gallery
-
-Here's a collection of my favorite photographs:
-
 {{< photo-gallery gallery="gallery1" >}}

hugo.toml

@@ -8,6 +8,8 @@ Copyright = "All rights reserved - 2024"
 extended = false
 min = "0.116.0"
 
+
+
 [params]
   githubName = "rustyoz"
   twitterName = "rustyoliver"

layouts/_default/single.html

@@ -10,7 +10,9 @@
 
     {{/* Title and Summary */}}
 
+    {{ if not .Params.hideTitle }}
     <h1 class="single-title">{{ .Title }}</h1>
+    {{ end}}
     {{ with .Param "summary" }}
     <p class="single-summary">{{ . }}</p>
     {{ end }}

layouts/partials/footer.html

@@ -8,5 +8,3 @@
 {{ partialCached "math.html" . }}
 {{ end }}
 
-<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
-<script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.3/js/lightbox.min.js"></script>

layouts/partials/head.html

@@ -15,8 +15,10 @@
     {{ if .IsHome }}
     {{ site.Title }}
     {{ else }}
+    {{ if not .Params.hideTitle }}
     {{ printf "%s | %s" .Title site.Title }}
     {{ end }}
+    {{ end }}
 </title>
 
 <link rel="canonical" href="{{ .Permalink }}" />
@@ -32,4 +34,3 @@
   {{ partial "umami.html" . }}
 {{ end }}
 
-<link href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.3/css/lightbox.min.css" rel="stylesheet" />

layouts/partials/header.html

@@ -24,3 +24,7 @@ <h1 class="header-title">{{ site.Title }}</h1>
     {{ end }}
 
 </div>
+
+
+<link rel="stylesheet" href="/css/carousel.css">
+<script src="/js/carousel.js" defer></script>

layouts/partials/photo-gallery.html

@@ -1,11 +1,12 @@
-<div class="photo-gallery">
-    {{ $gallery := .gallery }}
-    {{ range (readDir (printf "static/images/photos/%s" $gallery)) }}
-        {{ $imagePath := printf "/images/photos/%s/%s" $gallery .Name }}
-        <div class="gallery-item">
-            <a href="{{ $imagePath }}" data-lightbox="{{ $gallery }}" data-title="{{ .Name }}">
-                <img src="{{ $imagePath }}" alt="{{ .Name }}" loading="lazy">
-            </a>
-        </div>
-    {{ end }}
-</div>
+
+  <div class="carousel">
+      <div class="carousel-container">
+          {{ $gallery := .gallery }}
+          {{ range (readDir (printf "static/images/photos/%s" $gallery)) }}
+              {{ $imagePath := printf "/images/photos/%s/%s" $gallery .Name }}
+              <img src="{{ $imagePath }}" alt="{{ .Name }}" loading="lazy">
+          {{ end }}
+      </div>
+      <button class="carousel-button prev" aria-label="Previous image"><</button>
+      <button class="carousel-button next" aria-label="Next image">></button>
+  </div>

static/css/carousel.css

@@ -0,0 +1,39 @@
+.carousel {
+    position: relative;
+    width: 100%;
+    height: 80vh; /* Set the height to 100% of the viewport height */
+    overflow: hidden;
+}
+
+.carousel-container {
+    display: flex;
+    transition: transform 0.5s ease-in-out;
+    height: 100%; /* Ensure the container takes full height of the carousel */
+}
+
+.carousel-container img {
+    width: 100%;
+    height: 100%; /* Set the height to 100% */
+    object-fit: contain; /* Change to cover to fill the entire space */
+    flex-shrink: 0;
+    transition: opacity 0.5s ease-in-out;
+}
+
+.carousel-button {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    background: rgba(0, 0, 0, 0.5);
+    color: white;
+    border: none;
+    padding: 10px;
+    cursor: pointer;
+}
+
+.carousel-button.prev {
+    left: 10px;
+}
+
+.carousel-button.next {
+    right: 10px;
+}

static/css/colors/catpuccin.css

@@ -0,0 +1,15 @@
+:root {
+    --content-primary: rgb(76, 79, 105);
+    --content-secondary: rgb(108, 111, 133);
+    --background: rgb(239, 241, 245);
+    --code-background: rgb(230, 233, 239);
+    --code-border: rgb(188, 192, 204);
+}
+
+.dark {
+    --content-primary: rgb(198, 208, 245);
+    --content-secondary: rgb(165, 173, 206);
+    --background: rgb(48, 52, 70);
+    --code-background: rgb(41, 44, 60);
+    --code-border: rgb(81, 87, 109);
+}

static/css/colors/default.css

@@ -0,0 +1,15 @@
+:root {
+    --content-primary: rgb(36, 36, 36);
+    --content-secondary: rgb(117, 117, 117);
+    --background: rgb(255, 255, 255);
+    --code-background: rgb(249, 249, 249);
+    --code-border: rgb(229, 229, 229);
+}
+
+.dark {
+    --content-primary: rgb(218, 218, 218);
+    --content-secondary: rgb(140, 140, 140);
+    --background: rgb(20, 20, 20);
+    --code-background: rgb(30, 30, 30);
+    --code-border: rgb(50, 50, 50);
+}

static/css/colors/eink.css

@@ -0,0 +1,15 @@
+:root {
+    --content-primary: rgb(0, 0, 0);
+    --content-secondary: rgb(0, 0, 0);
+    --background: rgb(255, 255, 255);
+    --code-background: rgb(255, 255, 255);
+    --code-border: rgb(0, 0, 0);
+}
+
+.dark {
+    --content-primary: rgb(255, 255, 255);
+    --content-secondary: rgb(255, 255, 255);
+    --background: rgb(0, 0, 0);
+    --code-background: rgb(0, 0, 0);
+    --code-border: rgb(255, 255, 255);
+}

static/css/colors/gruvebox.css

@@ -0,0 +1,15 @@
+:root {
+    --content-primary: rgb(60, 56, 54);
+    --content-secondary: rgb(148, 133, 112);
+    --background: rgb(251, 241, 199);
+    --code-background: rgb(241, 231, 189);
+    --code-border: rgb(178, 163, 142);
+}
+
+.dark {
+    --content-primary: rgb(235, 219, 178);
+    --content-secondary: rgb(132, 122, 114);
+    --background: rgb(40, 40, 40);
+    --code-background: rgb(50, 50, 50);
+    --code-border: rgb(112, 102, 94);
+}

static/css/custom.css

@@ -0,0 +1 @@
+/* Place custom css here */

static/css/fonts.css

@@ -0,0 +1,41 @@
+@font-face {
+    font-family: 'Literata';
+    src: url('/fonts/Literata/Literata-Light.woff2') format('woff2');
+    font-weight: light;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'Literata';
+    src: url('/fonts/Literata/Literata-LightItalic.woff2') format('woff2');
+    font-weight: light;
+    font-style: italic;
+}
+
+@font-face {
+    font-family: 'Literata';
+    src: url('/fonts/Literata/Literata-SemiBold.woff2') format('woff2');
+    font-weight: bold;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'Literata';
+    src: url('/fonts/Literata/Literata-SemiBoldItalic.woff2') format('woff2');
+    font-weight: bold;
+    font-style: italic;
+}
+
+@font-face {
+    font-family: 'Monaspace';
+    src: url('/fonts/Monaspace/MonaspaceArgon-Regular.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'Monaspace';
+    src: url('/fonts/Monaspace/MonaspaceArgon-SemiBold.woff') format('woff');
+    font-weight: bold;
+    font-style: normal;
+}