Merge "tweak blink animation & add gallery"
diff --git a/hswaw/site/static/BUILD.bazel b/hswaw/site/static/BUILD.bazel
index fc0f04d..d5ea71d 100644
--- a/hswaw/site/static/BUILD.bazel
+++ b/hswaw/site/static/BUILD.bazel
@@ -10,6 +10,10 @@
"neon-syrenka.svg",
"@com_npmjs_leaflet//:distfiles",
"space.jpg",
+ "frezarka.jpg",
+ "tokarka.jpg",
+ "kuka.jpg",
+ "serwerownia.jpg",
],
package = "static",
)
diff --git a/hswaw/site/static/frezarka.jpg b/hswaw/site/static/frezarka.jpg
new file mode 100644
index 0000000..56210e9
--- /dev/null
+++ b/hswaw/site/static/frezarka.jpg
Binary files differ
diff --git a/hswaw/site/static/kuka.jpg b/hswaw/site/static/kuka.jpg
new file mode 100644
index 0000000..78f57f5
--- /dev/null
+++ b/hswaw/site/static/kuka.jpg
Binary files differ
diff --git a/hswaw/site/static/landing.css b/hswaw/site/static/landing.css
index ddd08d5..cf13754 100644
--- a/hswaw/site/static/landing.css
+++ b/hswaw/site/static/landing.css
@@ -1,5 +1,5 @@
:root {
- --primary: #7347d9ff;
+ /* --primary: #7347d9ff; */
--primary100: #cfbff1;
--secondary: #d947adff;
--secondary50: #fae2f0;
@@ -126,7 +126,7 @@
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 @@
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 @@
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 @@
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 @@
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;
}
diff --git a/hswaw/site/static/serwerownia.jpg b/hswaw/site/static/serwerownia.jpg
new file mode 100644
index 0000000..04f7ec5
--- /dev/null
+++ b/hswaw/site/static/serwerownia.jpg
Binary files differ
diff --git a/hswaw/site/static/tokarka.jpg b/hswaw/site/static/tokarka.jpg
new file mode 100644
index 0000000..10db3f8
--- /dev/null
+++ b/hswaw/site/static/tokarka.jpg
Binary files differ
diff --git a/hswaw/site/templates/index.html b/hswaw/site/templates/index.html
index 06c530f..5b8bb62 100644
--- a/hswaw/site/templates/index.html
+++ b/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 @@
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>
