tweak blink animation & add gallery

Change-Id: I1a1cd568e7982bf4e8e31f9e21897db53e59727f

hswaw/site/static/BUILD.bazel

@@ -10,6 +10,10 @@ go_embed_data(
         "neon-syrenka.svg",
         "@com_npmjs_leaflet//:distfiles",
         "space.jpg",
+        "frezarka.jpg",
+        "tokarka.jpg",
+        "kuka.jpg",
+        "serwerownia.jpg",
     ],
     package = "static",
 )

hswaw/site/static/landing.css

@@ -1,5 +1,5 @@
 :root {
-  --primary: #7347d9ff;
+  /* --primary: #7347d9ff; */
   --primary100: #cfbff1;
   --secondary: #d947adff;
   --secondary50: #fae2f0;
@@ -126,7 +126,7 @@ body {
   text-shadow: 0 0 1px var(--secondary), 0 0 5px var(--secondary),
     0 0 20px var(--secondary);
   font-size: 60px;
-  animation: neon ease-in-out 4s infinite alternate, blink 10s infinite;
+  animation: neon ease-in-out 4s infinite alternate, blink 5s infinite;
 }
 
 @keyframes neon {
@@ -147,12 +147,12 @@ body {
     opacity: 1;
   }
   81% {
-    opacity: 0.2;
+    opacity: 0.4;
   }
-  85% {
-    opacity: 0.2;
+  82.7% {
+    opacity: 0.4;
   }
-  86% {
+  83% {
     opacity: 1;
   }
   94% {
@@ -228,11 +228,44 @@ body {
   background-color: rgba(255, 255, 255, 0.05);
 }
 
-.covid {
-  padding: 1rem 2rem;
-  background-color: rgba(150, 0, 0, 0.8);
-  font-size: 18px;
-  font-style: italic;
+.img-wrapper {
+  position: relative;
+  height: 0;
+  padding-bottom: 60%;
+}
+
+.img-wrapper > img {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  object-fit: contain;
+}
+
+#gallery-nav {
+  display: flex;
+  flex-direction: row;
+  padding: 0;
+  margin: 0;
+  justify-content: center;
+  flex-wrap: wrap;
+}
+#gallery-nav > li {
+  margin: 0;
+  padding: 0;
+}
+#gallery-nav > li:hover {
+  background-color: var(--darkbgaccent);
+}
+#gallery-nav > li.active {
+  background-color: var(--secondary);
+}
+#gallery-nav > li > a {
+  display: block;
+  text-decoration: none;
+  padding: 0 15px;
+  height: 32px;
+  padding-top: 7px;
 }
 
 .bottom {
@@ -268,6 +301,20 @@ p {
 
 h2 {
   margin-bottom: 0;
+  font-size: 26px;
+  display: inline-block;
+  font-family: "Comfortaa", sans-serif;
+  line-height: 1.1;
+}
+
+h2:after {
+  content: " ";
+  display: block;
+  background-color: var(--secondary);
+  height: 0.15em;
+  width: 100%;
+  margin-top: 0.1em;
+  margin-left: 0.3em;
 }
 
 @media screen and (max-width: 1000px) {
@@ -284,20 +331,6 @@ h2 + * {
   margin: 1rem 0 0 0;
 }
 
-h2 {
-  font-size: 26px;
-  display: inline-block;
-  font-family: "Comfortaa", sans-serif;
-}
-h2:after {
-  content: " ";
-  display: block;
-  background-color: var(--secondary);
-  height: 0.15em;
-  width: 100%;
-  margin-top: 0.1em;
-  margin-left: 0.3em;
-}
 h3 {
   font-size: 20px;
 }

hswaw/site/templates/index.html

@@ -17,15 +17,15 @@
 </div>
 </div>
 <div id="page">
-    <div id="top">
+    <header id="top">
         <div id="logo">
             <img src="/static/site/neon-syrenka.svg" />
         </div>
         <div class="type">
             <h1>Warszawski Hackerspace</h1>
         </div>
-    </div>
-    <div id="quicklinks">
+    </header>
+    <nav id="quicklinks">
         <ul>
             <li><a href="https://wiki.hackerspace.pl/">Wiki</a></li>
             <li><a href="https://profile.hackerspace.pl/">Konto</a></li>
@@ -38,7 +38,7 @@
             </li>
             {{ end }}
         </ul>
-    </div>
+    </nav>
     <div class="bottom">
         <div class="about">
             <h2>Czym jest Warszawski Hackerspace?</h2>
@@ -54,7 +54,18 @@
             <p>
               <b>Hackerspace nie zna barier.</b> Jeśli masz ciekawy pomysł i szukasz ludzi chętnych do współpracy, lub po prostu potrzebujesz miejsca i sprzętu - <a href="https://wiki.hackerspace.pl/jak-dolaczyc">zapraszamy</a>! Utrzymujemy się w całosci z wolontariatu naszych członków, <a href="https://wiki.hackerspace.pl/finanse">darowizn i składek</a> oraz drobnej aktywności komercyjnej.
             </p>
-            <img src="/static/site/space.jpg" />
+            <section id="gallery">
+                <div class="img-wrapper">
+                    <img src="/static/site/space.jpg" />
+                </div>
+                <ul id="gallery-nav">
+                    <li data-name="space" class="active"><a href="#">Spejs</a></li>
+                    <li data-name="frezarka"><a href="#">Frezarka</a></li>
+                    <li data-name="tokarka"><a href="#">Tokarka</a></li>
+                    <li data-name="kuka"><a href="#">KUKA</a></li>
+                    <li data-name="serwerownia"><a href="#">Serwerownia</a></li>
+                </ul>
+            </section>
             <h2>Czy mogę odwiedzić spejs? Jak do was dołączyć?</h2>
             <p>
               Nasze cotygodniowe otwarte spotkania są w tej chwili zawieszone z powodu pandemii. Mimo tego, <b>dalej jesteśmy otwarci na nowych członków</b> i zainteresowanych - tylko w mniejszej skali i po wcześniejszym umówieniu się. Więcej informacji znajdziesz na <a href="https://wiki.hackerspace.pl/jak-dolaczyc">wiki.hackerspace.pl/jak-dolaczyc</a>.
@@ -86,6 +97,16 @@ window.loadMap = () => {
 
     L.marker([52.24158, 20.9848]).addTo(map);
 }
+document.querySelectorAll('#gallery-nav > li > a').forEach(link => {
+    link.onclick = e => {
+        e.preventDefault()
+        document.querySelector(`#gallery-nav > li.active`).classList.remove('active')
+        const li = e.currentTarget.parentNode
+        li.classList.add('active')
+        const name = li.dataset.name
+        document.querySelector('#gallery img').src = `/static/site/${name}.jpg`
+    }
+})
 </script>
 <script src="/static/leaflet/leaflet.js" crossorigin="" onload="loadMap()"></script>
 <script src="/static/site/led.js" crossorigin="" type="module" ></script>