Changed homepage background image

2025-07-03 14:49:06 -04:00
parent fd42ecda2f
commit f12bd0b283
4 changed files with 141 additions and 124 deletions
--- a/baseTemplates/templates/base.tmpl
+++ b/baseTemplates/templates/base.tmpl
@@ -4,7 +4,7 @@
 <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link rel="stylesheet" href="/static/css/style.css?version=1">
+    <link rel="stylesheet" href="/static/css/style.css?version=2">
    <title></title>
 </head>
 <body class="{{ template "bodyClass" . }}">
--- a/static/static/css/index.scss
+++ b/static/static/css/index.scss
@@ -2,136 +2,153 @@
@use "colors";

 .page-index {
-    header {
+  header {
+    width: 100%;
+    height: 75vh;
+    background-image: url('https://kakigoori.dev/752fbeb0-b181-4ed5-bd08-f622c3fb52f4/width/2560/auto');
+    background-size: cover;
+    background-position: left center;
+    position: relative;
+
+    nav {
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      padding: 1rem;
+      background-color: transparent;
+      margin: 0;
+      width: auto;
+      font-size: 1.2rem;
+      backdrop-filter: blur(10px);
+      -webkit-backdrop-filter: blur(10px);
+
+      // https://www.tyleo.com/guides/html-glass
+      box-shadow: /* Bottom and right depth effect */
+              inset -0.75px -0.5px rgba(255, 255, 255, 0.1),
+                /* Top and left depth effect */
+              inset 0.75px 0.5px rgba(255, 255, 255, 0.025),
+                /* Shadow effect */
+              3px 2px 10px rgba(0, 0, 0, 0.25),
+                /* Short subsurface effect */
+              inset 0px 0px 10px 5px rgba(255, 255, 255, 0.025),
+                /* Long subsurface effect */
+              inset 0px 0px 40px 5px rgba(255, 255, 255, 0.025);
+
+      a, a:hover, a:focus, a:active, a:visited {
+        color: white;
+      }
+
+      & > div {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: space-between;
+        gap: 1rem;
        width: 100%;
-        height: 75vh;
-        background-image: url('https://kakigoori.dev/1c81ddd9-5cc3-4ae0-b701-5d40453b09f3/width/2560/auto');
-        background-size: cover;
-        background-position: center bottom;
-        position: relative;
+        max-width: 80%;

-        nav {
-            position: absolute;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            padding: 1rem;
-            background-color: oklch(from colors.$background-color l c h / 0.5);
-            backdrop-filter: blur(12px);
-            margin: 0;
-            width: auto;
-            font-size: 1.2rem;
-
-            & > div {
-                display: flex;
-                flex-wrap: wrap;
-                justify-content: space-between;
-                gap: 1rem;
-                width: 100%;
-                max-width: 80%;
-
-                @media screen and (max-width: 992px) {
-                    flex-direction: column;
-                    align-items: center;
-                }
-
-                img {
-                    height: 3em;
-                    border-radius: 50%;
-                }
-
-                & > div:first-child {
-                    display: flex;
-                    justify-content: center;
-                    align-items: center;
-                    gap: 1rem;
-                    font-weight: 700;
-                    font-size: 1.5rem !important;
-                }
-
-                & > div:last-child {
-                    display: flex;
-                    justify-content: center;
-                    align-items: center;
-                    gap: 1rem;
-                    flex-wrap: wrap;
-                }
-            }
+        @media screen and (max-width: 992px) {
+          flex-direction: column;
+          align-items: center;
        }
+
+        img {
+          height: 3em;
+          border-radius: 50%;
+        }
+
+        & > div:first-child {
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          gap: 1rem;
+          font-weight: 700;
+          font-size: 1.5rem !important;
+        }
+
+        & > div:last-child {
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          gap: 1rem;
+          flex-wrap: wrap;
+        }
+      }
+    }
+  }
+
+  main {
+    margin-top: 2rem;
+    margin-bottom: 2rem;
+
+    #presentation {
+      margin-bottom: 2rem;
+
+      .image-container {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
+        img {
+          max-height: 500px;
+          max-width: 100%;
+          object-fit: contain;
+          border-radius: 1rem;
+        }
+      }
+
+      @media screen and (max-width: 768px) {
+        flex-direction: column;
+      }
    }

-    main {
-        margin-top: 2rem;
-        margin-bottom: 2rem;
+    #on-the-internet {
+      img {
+        max-height: 1em;
+      }

-        #presentation {
-            margin-bottom: 2rem;
-
-            .image-container {
-                display: flex;
-                justify-content: center;
-                align-items: center;
-
-                img {
-                    max-height: 500px;
-                    max-width: 100%;
-                    object-fit: contain;
-                    border-radius: 1rem;
-                }
-            }
-
-            @media screen and (max-width: 768px) {
-                flex-direction: column;
-            }
+      .columns {
+        @media (max-width: 768px) {
+          flex-direction: column;
+          gap: 0;
        }
+      }

-        #on-the-internet {
-            img {
-                max-height: 1em;
-            }
-
-            .columns {
-                @media (max-width: 768px) {
-                    flex-direction: column;
-                    gap: 0;
-                }
-            }
-
-            .columns > div > div {
-                display: flex;
-                flex-direction: column;
-            }
-        }
-
-        #main-projects {
-            & > div {
-                display: flex;
-                gap: 2rem;
-                flex-wrap: wrap;
-                align-items: center;
-
-                img {
-                    width: 200px;
-                    max-width: 100%;
-                    object-fit: contain;
-                }
-
-                & > div {
-                    flex: 1;
-                }
-
-                @media screen and (max-width: 768px) {
-                    flex-direction: column;
-                    align-items: center;
-                }
-            }
-        }
+      .columns > div > div {
+        display: flex;
+        flex-direction: column;
+      }
    }

-    hr {
-        @include layout.light-hr;
+    #main-projects {
+      & > div {
+        display: flex;
+        gap: 2rem;
+        flex-wrap: wrap;
+        align-items: center;
+
+        img {
+          width: 200px;
+          max-width: 100%;
+          object-fit: contain;
+        }
+
+        & > div {
+          flex: 1;
+        }
+
+        @media screen and (max-width: 768px) {
+          flex-direction: column;
+          align-items: center;
+        }
+      }
    }
+  }
+
+  hr {
+    @include layout.light-hr;
+  }
 }
--- a/static/static/css/style.css
+++ b/static/static/css/style.css
--- a/static/static/css/style.css.map
+++ b/static/static/css/style.css.map
@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["layout.scss","fonts.scss","body.scss","colors.scss","index.scss","radio.scss"],"names":[],"mappings":"AAEA,SACI,aACA,eACA,SACA,6BAEA,WACI,OAIR,QACI,eACA,iBACA,kBAOJ,IACI,aACA,uBACA,mBACA,WACA,eACA,0EAEA,QACI,YACA,kBAGJ,QACI,aACA,eACA,8BACA,SACA,WACA,eAEA,qCARJ,QASQ,sBACA,oBAGJ,YACI,WACA,kBAGJ,UACI,WAEA,oBACI,qBAGJ,kBACI,WAIR,wBACI,aACA,uBACA,mBACA,SACA,gBACA,iBAGJ,uBACI,aACA,uBACA,mBACA,SACA,eAKZ,MAOI,mBALI,eACI,eAQR,gBACI,mBAGJ,sBACI,gBAGJ,gBACI,kBAGJ,gBACI,WACA,aACA,uBACA,oBAEA,+CACI,yEACA,YACA,aACA,WACA,gBACA,oBACA,YAEA,sIACI,aAIR,uBACI,yEACA,SACA,aACA,WACA,eAEA,6BACI,0EAGJ,8BACI,yEAGJ,2BACI,aAMhB,oBACI,aACA,eACA,uBACA,mBACA,SACA,mBAEA,wBACI,YC/JR,WACE,wBACA,IACE,4HAKJ,WACE,wBACA,kBACA,IACE,+ICTJ,KACI,YDcS,gJCbT,iBCLe,sBDMf,SEFA,mBACI,WACA,YACA,mGACA,sBACA,kCACA,kBAEA,uBACI,kBACA,SACA,OACA,QACA,aACA,uBACA,mBACA,aACA,iEACA,2BACA,SACA,WACA,iBAEA,2BACI,aACA,eACA,8BACA,SACA,WACA,cAEA,qCARJ,2BASQ,sBACA,oBAGJ,+BACI,WACA,kBAGJ,2CACI,aACA,uBACA,mBACA,SACA,gBACA,4BAGJ,0CACI,aACA,uBACA,mBACA,SACA,eAMhB,iBACI,gBACA,mBAEA,+BACI,mBAEA,gDACI,aACA,uBACA,mBAEA,oDACI,iBACA,eACA,mBACA,mBAIR,qCAhBJ,+BAiBQ,uBAKJ,sCACI,eAIA,yBADJ,2CAEQ,sBACA,OAIR,mDACI,aACA,sBAKJ,oCACI,aACA,SACA,eACA,mBAEA,wCACI,YACA,eACA,mBAGJ,wCACI,OAGJ,qCAhBJ,oCAiBQ,sBACA,oBAMhB,eJjHA,iCKjBA,0BACI,aACA,uBACA,mBACA,aAEA,wCACI,kBACA,cACA,gBACA,WAIR,iBACI,eACA,kBAGJ,mBACI,aACA,SACA,aACA,qCAGI,2BACI,WAGJ,8BACI,0EAGJ,yBACI,YAEA,2BACI,qBACA,WAKZ,qCAzBJ,mBA0BQ,sCAGJ,qCA7BJ,mBA8BQ,sCAGJ,qCAjCJ,mBAkCQ","file":"style.css"}
+{"version":3,"sourceRoot":"","sources":["layout.scss","fonts.scss","body.scss","colors.scss","index.scss","radio.scss"],"names":[],"mappings":"AAEA,SACI,aACA,eACA,SACA,6BAEA,WACI,OAIR,QACI,eACA,iBACA,kBAOJ,IACI,aACA,uBACA,mBACA,WACA,eACA,0EAEA,QACI,YACA,kBAGJ,QACI,aACA,eACA,8BACA,SACA,WACA,eAEA,qCARJ,QASQ,sBACA,oBAGJ,YACI,WACA,kBAGJ,UACI,WAEA,oBACI,qBAGJ,kBACI,WAIR,wBACI,aACA,uBACA,mBACA,SACA,gBACA,iBAGJ,uBACI,aACA,uBACA,mBACA,SACA,eAKZ,MAOI,mBALI,eACI,eAQR,gBACI,mBAGJ,sBACI,gBAGJ,gBACI,kBAGJ,gBACI,WACA,aACA,uBACA,oBAEA,+CACI,yEACA,YACA,aACA,WACA,gBACA,oBACA,YAEA,sIACI,aAIR,uBACI,yEACA,SACA,aACA,WACA,eAEA,6BACI,0EAGJ,8BACI,yEAGJ,2BACI,aAMhB,oBACI,aACA,eACA,uBACA,mBACA,SACA,mBAEA,wBACI,YC/JR,WACE,wBACA,IACE,4HAKJ,WACE,wBACA,kBACA,IACE,+ICTJ,KACI,YDcS,gJCbT,iBCLe,sBDMf,SEFF,mBACE,WACA,YACA,mGACA,sBACA,gCACA,kBAEA,uBACE,kBACA,SACA,OACA,QACA,aACA,uBACA,mBACA,aACA,+BACA,SACA,WACA,iBACA,2BACA,mCAGA,WACQ,mMAUR,wJACE,WAGF,2BACE,aACA,eACA,8BACA,SACA,WACA,cAEA,qCARF,2BASI,sBACA,oBAGF,+BACE,WACA,kBAGF,2CACE,aACA,uBACA,mBACA,SACA,gBACA,4BAGF,0CACE,aACA,uBACA,mBACA,SACA,eAMR,iBACE,gBACA,mBAEA,+BACE,mBAEA,gDACE,aACA,uBACA,mBAEA,oDACE,iBACA,eACA,mBACA,mBAIJ,qCAhBF,+BAiBI,uBAKF,sCACE,eAIA,yBADF,2CAEI,sBACA,OAIJ,mDACE,aACA,sBAKF,oCACE,aACA,SACA,eACA,mBAEA,wCACE,YACA,eACA,mBAGF,wCACE,OAGF,qCAhBF,oCAiBI,sBACA,oBAMR,eJlIE,iCKjBA,0BACI,aACA,uBACA,mBACA,aAEA,wCACI,kBACA,cACA,gBACA,WAIR,iBACI,eACA,kBAGJ,mBACI,aACA,SACA,aACA,qCAGI,2BACI,WAGJ,8BACI,0EAGJ,yBACI,YAEA,2BACI,qBACA,WAKZ,qCAzBJ,mBA0BQ,sCAGJ,qCA7BJ,mBA8BQ,sCAGJ,qCAjCJ,mBAkCQ","file":"style.css"}