add Blender Launcher V2

zeptofine · Dec 26, 2023 · b7ca67f · b7ca67f
1 parent 072d4ce
commit b7ca67f
Show file tree

Hide file tree

Showing 6 changed files with 46 additions and 33 deletions.
diff --git a/css/project-images.css b/css/project-images.css
@@ -12,4 +12,8 @@
 
 #DCREATOR {
     background-image: url('../images/projects/dc_empty.png');
+}
+
+#BLV2 {
+    background-image: url('../images/projects/bl_logo.png');
 }
diff --git a/css/projects.css b/css/projects.css
@@ -26,18 +26,10 @@
     margin-bottom: var(--gap);
 }
 
-.linkcell-div {
+.linkcell div {
     width: 100%;
     height: 100%;
-}
-
-
-.linkcell:is(:nth-child(1)) {
-    margin-top: 0;
-}
 
-.linkcell:is(:nth-last-child(1)) {
-    margin-bottom: 0
 }
 
 .linkcell * {
@@ -68,6 +60,10 @@
 }
 
 
+.selected {
+    outline: var(--outline-thickness) solid var(--col-selected);
+}
+
 
 #source {
     width: 100%;

diff --git a/css/styles.css b/css/styles.css
@@ -3,6 +3,7 @@
   --col-text-1: #d6caf6;
   --col-text-button: #9391e7;
   --col-links: #feffe8;
+  --col-selected: white;
   --col-base-border: #9566b5;
   --col-sub-border: #61407744;
   --col-background: #2b2342;
@@ -18,6 +19,7 @@
   --outline-thickness: 3px;
   --gap: 10px;
 
+
   --height-multiplier: 6;
   --width-multiplier: 6;
   --height-controller: calc(min(var(--height-multiplier) * 120px, 100%));
@@ -142,7 +144,7 @@ a:visited {
   transition: 100ms var(--easer) all;
 }
 
-.outlined-hovered:hover {
+.outlined-hovered:hover:not(.selected) {
   outline: var(--outline-thickness) solid var(--col-base-border);
 }
 
@@ -184,13 +186,6 @@ a:visited {
   background-color: var(--dot-color);
 }
 
-.nowrap {
-  white-space: nowrap;
-}
-
-.clip-hidden {
-  overflow: hidden;
-}
 
 .pad-x {
   padding-inline: var(--gap);
@@ -207,7 +202,7 @@ a:visited {
     backdrop-filter: blur(64px);
   }
 
-  .linkcell-div {
+  .linkcell div {
     -webkit-backdrop-filter: blur(10px);
     backdrop-filter: blur(10px);
   }

diff --git a/images/projects/bl_logo.png b/images/projects/bl_logo.png
diff --git a/index.html b/index.html
@@ -51,36 +51,44 @@ <h1 class="row">Hi! I'm Zeptofine</h1>
                     </div> -->
                     <div id="linksbox" class="row tables sharp-tl sharp-tr" data-name="Projects" data-width="8">
                         <div id="projectlinks" class="buttonlist pad-x pad-y">
+                            <button id="BLV2" class="linkcell outlined-hovered whitetext" type="button"
+                                data-link="https://victor-ix.github.io/Blender-Launcher-V2"
+                                data-source="https://github.com/Victor-IX/Blender-Launcher-V2">
+                                <div class="boxed-inset">
+                                    <p>Blender Launcher V2</p>
+                                    <p>A Blender launcher that I've<br>been helping with recently.</p>
+                                </div>
+                            </button>
                             <button id="DCREATOR" class="linkcell outlined-hovered" type="button"
                                 data-link="https://zeptofine.github.io/dataset-creator/"
                                 data-source="https://github.com/zeptofine/dataset-creator">
-                                <div class="linkcell-div boxed-inset">
-                                    <p>Dataset Creator: </p>
+                                <div class="boxed-inset">
+                                    <p>Dataset Creator</p>
                                     <p>A tool I use to make image datasets</p>
                                 </div>
                             </button>
                             <button id="PXSORTER" class="linkcell outlined-hovered" type="button"
                                 data-link="https://zeptofine.github.io/pixelsorter"
                                 data-source="https://github.com/zeptofine/pixelsorter">
-                                <div class="linkcell-div boxed-inset">
-                                    <p>Pixelsorter:</p>
-                                    <p>A small-ish pixelsorter script i made to learn.</p>
+                                <div class="boxed-inset">
+                                    <p>Pixelsorter</p>
+                                    <p>A small-ish pixelsorter script<br>i made to learn.</p>
                                 </div>
                             </button>
                             <button id="TH264" class="linkcell outlined-hovered whitetext" type="button"
                                 data-link="https://zeptofine.github.io/TurnH264/"
                                 data-source="https://github.com/zeptofine/TurnH264">
-                                <div class="linkcell-div boxed-inset">
-                                    <p>TurnH264: </p>
+                                <div class="boxed-inset">
+                                    <p>TurnH264</p>
                                     <p>A TurnH264 fork with a lot of changes</p>
                                 </div>
                             </button>
                             <button id="CIMUTILS" class="linkcell outlined-hovered whitetext" type="button"
                                 data-link="https://zeptofine.github.io/Console_Image_Utils"
                                 data-source="https://github.com/zeptofine/Console_Image_Utils">
-                                <div class="linkcell-div boxed-inset">
-                                    <p>Console_Image_Utils:</p>
-                                    <p>A set of utilities to help with managing images</p>
+                                <div class="boxed-inset">
+                                    <p>Console_Image_Utils</p>
+                                    <p>A set of utilities to<br>help with managing images</p>
                                 </div>
                             </button>
                         </div>

diff --git a/scripts/links.js b/scripts/links.js
@@ -1,14 +1,13 @@
 
 
 const container = document.getElementById("base");
-const links = document.getElementById("linksbox").getElementsByClassName("linkcell");
+const links = Array.from(document.getElementById("linksbox").getElementsByClassName("linkcell"));
 const iframe = document.getElementById("embedframe");
 const div = document.getElementById("embedbox");
 
 const sourceLink = document.getElementById("source");
 const linkParagraph = document.getElementById("link");
 
-
 function selectSrc(idx) {
 
     if (iframe.style.opacity != 1) {
@@ -19,7 +18,10 @@ function selectSrc(idx) {
     let button = links[idx];
     let dataset = button.dataset;
 
-    if (iframe.src != links[idx].dataset.link) {
+
+
+
+    if (iframe.src != button.dataset.link) {
         iframe.src = dataset.link;
         iframe.title = dataset.link;
 
@@ -30,9 +32,17 @@ function selectSrc(idx) {
         } else {
             sourceLink.text = "";
         }
+
+        links.forEach(  (b) => {
+            if (b !== button) {
+                b.classList.remove("selected");
+            } else {
+                b.classList.add("selected")
+            }
+        }
+        );
 
-
-        console.log("selected source: ", links[idx]);
+        console.log("selected source: ", button);
     }
 
 }