Merge pull request #2 from gowin20/gwen

css updates and stuff

package.json

@@ -4,6 +4,7 @@
   "description": "G+O wen's blog",
   "main": ".eleventy.js",
   "dependencies": {
+    "@splidejs/splide": "^4.1.4",
     "clean-css": "^5.3.3"
   },
   "devDependencies": {

src/_includes/components/image-slideshow.njk

@@ -0,0 +1,36 @@
+{% macro imageCarousel(prefix,imageNames) %}
+<style>
+    .splide__slide img {
+        height:auto;
+        max-height:500px;
+        width:100%;
+        object-fit:contain;
+    }
+    #imageCarousel {
+        width:100%;
+        max-width:500px;
+    }
+</style>
+<link href="
+https://cdn.jsdelivr.net/npm/@splidejs/[email protected]/dist/css/splide.min.css
+" rel="stylesheet">
+<script src="
+https://cdn.jsdelivr.net/npm/@splidejs/[email protected]/dist/js/splide.min.js
+"></script>
+<section id="imageCarousel" class="splide" aria-label="Image collection">
+  <div class="splide__track">
+		<ul class="splide__list">
+        {% for imageName in imageNames %}
+            <li class="splide__slide">
+                <img src="{{prefix+imageName}}" alt="{{imageName}}"/>
+            </li>
+        {% endfor %}
+		</ul>
+  </div>
+</section>
+<script type='module'>
+    new Splide( '#imageCarousel',{
+    type:'loop'
+    }).mount();
+</script>
+{% endmacro %}

src/_includes/style/sidebar.css

@@ -14,28 +14,29 @@
     z-index:0;
 }
 
-.mapSmall {
-    height:50px !important;
-}
-.cornerimg {
-    width:200px;
-}
-
 .side-name {
+    width:180px;
     height:40px;
     color: #5e5e5e;
     text-decoration: none;
-    margin:0px;
-    padding:10px 10px 0px 13px;
-    font-size: 23px;
+    margin:0px 5px;
+    padding:5px 5px 0px 5px;
+    text-align: center;
+    font-size: 25px;
     line-height:1.2;
-    letter-spacing:-1px;
+    letter-spacing:0px;
     font-family: 'Montserrat', sans-serif;
     font-weight:300;
     z-index:5;
     position:absolute;
     top:125px;
     background-color: #e7e7e7;
+    cursor:pointer;
+}
+
+.side-name:hover {
+    color:black;
+    text-decoration: underline;
 }
 
 .name-full {
@@ -50,13 +51,14 @@
 
 /* nav menu */
 .nav {
-    margin: auto 5px;
-    padding: 7px;
+    margin: 0px 5px;
+    padding: 0px 5px;
     position:absolute;
     top:165px;
     left:0;
     z-index:5;
-    border-radius:0px 30px 0px 30px;
+    border-radius:0px;
+    width:180px;
     background-color: #e7e7e7;
 }
 #navlist {
@@ -74,19 +76,18 @@
 #navlist li {
     height:44px;
     width:75px;
-    border-radius:8px;
+
     margin: 12px 0px 12px 12.5px;
     display:flex;
     flex-direction: row;
 
     color: #5e5e5e;
     text-align: center;
     text-decoration: none;
-    border-radius:8px;
 }
 
 #navlist li span {
-    margin:0px 0px 0px 0px;
+    margin:0px;
 }
 
 #navlist li:hover {
@@ -101,8 +102,8 @@
 }
 
 .nav-img img {
-height:100%;
-margin:0px;
+    height:100%;
+    margin:0px;
 }
 
 .activeNav {
@@ -147,10 +148,4 @@ margin:0px;
         width:150px;
         margin: 12px 0px 12px 25px;
     }
-    #navlist li:hover {
-        text-decoration: underline;
-    }
-    .activeNav {
-        text-decoration:underline !important;
-    }
 }

src/index.md

@@ -7,7 +7,19 @@ templateEngineOverride: njk,md
 
 This domain hosts my blog and assorted web projects. For my photography, see [Instagram]() 🌇.
 
-{% image "./src/images/frontpage/gwen-neonjacket.jpg", "it's me" %}
+{% from "components/image-slideshow.njk" import imageCarousel %}
+{% set images = [
+'gwen-neonjacket.jpg',
+'rave-step.png',
+'gwen-firstwig.jpg',
+'gwen-preppy.jpg',
+'rave-kick.jpg',
+'go-graduation-stand.jpg',
+'gwen-crode.jpg',
+'desert-profile.jpg'
+]%}
+{{ imageCarousel('/images/frontpage/',images) }}
+
 
 # About me
 

src/projects/meat-grinder/index.html

@@ -149,7 +149,7 @@
                     if (!document.getElementById("lever").checked) {return}
 
                     sausage = sausages[Math.floor(Math.random() * sausages.length)];
-                    floor.innerHTML += `<img src="/content/meat-grinder/${sausage}.svg" alt="" class="sausage"/>`;
+                    floor.innerHTML += `<img src="/projects/meat-grinder/${sausage}.svg" alt="" class="sausage"/>`;
 
                     lyricCount+=1;
                     if (lyricCount==35) {
@@ -171,7 +171,7 @@
     <body>
         <div class="panel">
             <a href="/">back</a>
-            <img src="/content/meat-grinder/meat-grinder.png" alt="release the meat"/>
+            <img src="/projects/meat-grinder/meat-grinder.png" alt="release the meat"/>
             <div style="display:flex; flex-direction:row;">
                 <p style="margin:auto 10px;">for the vienna-pilled sausage-maxxers</p>            
                 <label class="toggle">