improve fonts & animations
Change-Id: I2a586243035e84136b2a309dc6ce26ab21f8925d
diff --git a/hswaw/site/static/landing.css b/hswaw/site/static/landing.css
index 3ad4cd5..ddd08d5 100644
--- a/hswaw/site/static/landing.css
+++ b/hswaw/site/static/landing.css
@@ -1,307 +1,363 @@
:root {
- --primary: #7347d9ff;
- --primary100: #cfbff1;
- --secondary: #d947adff;
- --secondary50: #fae2f0;
- --darkbgaccent: #1a1622ff;
- --darkbg: #121212ff;
- --darkbgalpha: #121212f8;
+ --primary: #7347d9ff;
+ --primary100: #cfbff1;
+ --secondary: #d947adff;
+ --secondary50: #fae2f0;
+ --darkbgaccent: #1a1622ff;
+ --darkbg: #121212ff;
+ --darkbgalpha: #121212f8;
}
html {
- min-height: 100%;
+ min-height: 100%;
}
body {
- min-height: 100%;
+ min-height: 100%;
- margin: 0;
- padding: 0;
- color: #fffdf3;
- font-weight: 400;
- font-family: 'Courier Prime', monospace;
- font-size: 20px;
- line-height: 150%;
+ margin: 0;
+ padding: 0;
+ color: #fffdf3;
+ font-weight: 400;
+ font-family: "Inconsolata", monospace;
+ font-size: 20px;
+ line-height: 120%;
- background-color: var(--darkbgaccent);
+ background-color: var(--darkbgaccent);
}
@media screen and (max-width: 1000px) {
- body {
- font-size: 18px;
- }
+ body {
+ font-size: 18px;
+ }
}
#ledsFloater {
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- min-height: 100%;
- overflow-x: hidden;
- z-index: -11;
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ min-height: 100%;
+ overflow-x: hidden;
+ z-index: -11;
}
#ledsWrapper {
- float: left; /* oh god */
- width: 100%;
- min-height: 100%;
+ float: left; /* oh god */
+ width: 100%;
+ min-height: 100%;
}
#leds {
- width: max(60vw, 600px);
- height: max(60vw, 600px);
- transform: rotate(-15deg);
- position: relative;
- top: min(-10vw, -100px);
- left: min(-10vw, -100px);
- z-index: -10;
+ width: max(60vw, 600px);
+ height: max(60vw, 600px);
+ transform: rotate(-15deg);
+ position: relative;
+ top: min(-10vw, -100px);
+ left: min(-10vw, -100px);
+ z-index: -10;
}
#page {
- max-width: 60rem;
- margin: 6em auto 2em auto;
- background-color: var(--darkbgalpha);
+ max-width: 60rem;
+ margin: 6em auto 2em auto;
+ background-color: var(--darkbgalpha);
- display: flex;
- flex-direction: column;
+ display: flex;
+ flex-direction: column;
}
@media screen and (max-width: 1000px) {
- #page {
- background-color: #121212f0;
- }
+ #page {
+ background-color: #121212f0;
+ }
}
.about img {
- width: 100%;
- display: block;
- margin: 0 auto;
+ width: 100%;
+ display: block;
+ margin: 0 auto;
}
-.top {
- display: flex;
- flex-direction: row;
- flex-flow: row wrap;
- margin: 2em 0 1em 0;
- justify-content: center;
+#top {
+ display: flex;
+ flex-direction: row;
+ flex-flow: row wrap;
+ height: 10em;
+ margin: 2em 0 1em 0;
+ justify-content: center;
}
@media screen and (max-width: 1000px) {
- .top {
- margin: 1em 0 0 0;
- }
+ #top {
+ margin: 1em 0 1em 0;
+ }
}
-.top .logo img {
- max-height: 15rem;
+#logo,
+#logo > img {
+ height: 100%;
+}
+
+@media screen and (max-width: 600px) {
+ #top {
+ height: 5em;
+ }
+
+ #top .type {
+ font-size: 18px;
+ }
+}
+
+#top .type {
+ max-width: 15em;
+ font-size: min(35px, 2.5vw);
+ margin-left: 1em;
+ line-height: 1;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+}
+
+#top .type h1 {
+ padding: 0 0 0.5em 0.2em;
+ font-family: "Comfortaa", sans-serif;
+ color: #fff;
+ 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;
+}
+
+@keyframes neon {
+ from {
+ text-shadow: 0 0 1px var(--secondary), 0 0 3px var(--secondary),
+ 0 0 15px var(--secondary);
+ }
+ to {
+ text-shadow: 0 0 1px var(--secondary), 0 0 15px var(--secondary),
+ 0 0 40px var(--secondary);
+ }
+}
+@keyframes blink {
+ 0% {
+ opacity: 1;
+ }
+ 80% {
+ opacity: 1;
+ }
+ 81% {
+ opacity: 0.2;
+ }
+ 85% {
+ opacity: 0.2;
+ }
+ 86% {
+ opacity: 1;
+ }
+ 94% {
+ opacity: 1;
+ }
+ 95% {
+ opacity: 0.4;
+ }
+ 95.7% {
+ opacity: 0.4;
+ }
+ 96% {
+ opacity: 1;
+ }
}
@media screen and (max-width: 1000px) {
- .top .logo img {
- max-height: 8rem;
- }
+ #top .type h1 {
+ font-size: 40px;
+ }
}
-.top .type {
- max-width: 13em;
- font-size: min(35px, 4vw);
- line-height: 0.9;
- display: flex;
- flex-direction: column;
- justify-content: center;
+@media screen and (max-width: 600px) {
+ #top .type h1 {
+ font-size: 24px;
+ }
}
-.top .type h1 {
- padding: 0 0 0.5em 0.2em;
- font-family: 'Noto Sans', sans-serif;
- color: #fff;
- text-shadow: 0.05em 0.05em var(--secondary);
-}
-
-
#map {
- height: 28em;
+ height: 28em;
}
-
-.quicklinks {
- font-size: 16px;
- background-color: rgba(255, 255, 255, 0.05);
+#quicklinks {
+ font-size: 16px;
+ background-color: rgba(255, 255, 255, 0.05);
}
@media screen and (max-width: 1000px) {
- .quicklinks {
- font-size: 14px;
- }
+ #quicklinks {
+ font-size: 14px;
+ }
}
-.quicklinks ul {
- padding: 0;
- margin: 0;
- display: flex;
- flex-direction: row;
- flex-flow: row wrap;
- justify-content: center;
- font-family: 'Noto Sans', sans-serif;
+#quicklinks ul {
+ padding: 0;
+ margin: 0;
+ display: flex;
+ flex-direction: row;
+ flex-flow: row wrap;
+ justify-content: center;
+ font-family: "Comfortaa", sans-serif;
}
-.quicklinks ul li {
- display: flex;
+#quicklinks ul li {
+ display: flex;
}
-.quicklinks ul li:not(.left) {
+#quicklinks ul li.left {
+ flex-grow: 1;
+ font-style: italic;
}
-.quicklinks ul li.left {
- flex-grow: 1;
- font-style: italic;
+#quicklinks a {
+ text-decoration: none;
+ padding: 0.8rem 1rem;
+ color: #fff;
+}
+#quicklinks a:hover {
+ color: #fff;
}
-.quicklinks a {
- text-decoration: none;
- padding: 0.8rem 1rem;
- color: #fff;
-}
-.quicklinks a:hover {
- color: #fff;
-}
-
-.quicklinks li:not(.left) a:hover {
- background-color: rgba(255, 255, 255, 0.05);
+#quicklinks li:not(.left) a:hover {
+ 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;
+ padding: 1rem 2rem;
+ background-color: rgba(150, 0, 0, 0.8);
+ font-size: 18px;
+ font-style: italic;
}
.bottom {
- display: flex;
- flex-direction: column;
- padding: 1em 1em 0 1em;
+ display: flex;
+ flex-direction: column;
+ padding: 1em 1em 0 1em;
}
@media screen and (max-width: 1000px) {
- .bottom {
- padding: 2em 1em 0 1em;
- }
+ .bottom {
+ padding: 2em 1em 0 1em;
+ }
}
.bottom .about {
- padding: 1rem 2em 3rem 2em;
+ padding: 1rem 2em 3rem 2em;
}
@media screen and (max-width: 1000px) {
- .bottom .about {
- padding: 0rem 0em 1rem 0em;
- }
+ .bottom .about {
+ padding: 0rem 0em 1rem 0em;
+ }
}
-
.bottom .about li + li {
- margin-top: 0.5em;
+ margin-top: 0.5em;
}
p {
- text-align: left;
- color: #eee;
+ text-align: left;
+ color: #eee;
}
h2 {
- margin-bottom: 0;
+ margin-bottom: 0;
}
@media screen and (max-width: 1000px) {
- h2 {
- margin: 0;
- }
+ h2 {
+ margin: 0;
+ }
}
* + h2 {
- margin: 2rem 0 0 0;
+ margin: 2rem 0 0 0;
}
h2 + * {
- margin: 1rem 0 0 0;
+ margin: 1rem 0 0 0;
}
h2 {
- font-size: 26px;
- display: inline-block;
- font-family: 'Noto Sans', sans-serif;
+ 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
+ content: " ";
+ display: block;
+ background-color: var(--secondary);
+ height: 0.15em;
+ width: 100%;
+ margin-top: 0.1em;
+ margin-left: 0.3em;
}
h3 {
- font-size: 20px;
+ font-size: 20px;
}
pre {
- background-color: #141000;
- padding: 1rem;
+ background-color: #141000;
+ padding: 1rem;
}
a {
- text-decoration: underline;
- text-decoration-color: var(--primary100);
- color: #fff;
+ text-decoration: underline;
+ text-decoration-color: var(--primary100);
+ color: #fff;
}
a:hover {
- color: var(--primary100);
+ color: var(--primary100);
}
b {
- font-weight: 800;
+ font-weight: 800;
}
ul {
- padding: 0 0 0 1em;
+ padding: 0 0 0 1em;
}
@media screen and (max-width: 1000px) {
- ul {
- padding: 0;
- }
+ ul {
+ padding: 0;
+ }
}
li {
- list-style: none;
+ list-style: none;
}
li i {
- font-size: 0.9em;
+ font-size: 0.9em;
}
#footer {
- margin: 1rem 0 0 0;
- font-size: 0.8rem;
- opacity: 60%;
+ margin: 1rem 0 0 0;
+ font-size: 0.8rem;
+ opacity: 60%;
}
.atlist {
- display: inline;
- list-style: none;
+ display: inline;
+ list-style: none;
}
.atlist li {
- display: inline;
+ display: inline;
}
.atlist li:after {
- content: ", ";
+ content: ", ";
}
.atlist li:last-child:after {
- content: ".";
+ content: ".";
}
diff --git a/hswaw/site/templates/index.html b/hswaw/site/templates/index.html
index 64dfd46..2ff2554 100644
--- a/hswaw/site/templates/index.html
+++ b/hswaw/site/templates/index.html
@@ -7,7 +7,7 @@
<link rel="stylesheet" href="/static/leaflet/leaflet.css"/>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-<link href="https://fonts.googleapis.com/css2?family=Courier+Prime:wght@400;700&family=Noto+Sans&display=swap" rel="stylesheet">
+<link href="https://fonts.googleapis.com/css2?family=Inconsolata:wght@400;700&family=Comfortaa&display=swap" rel="stylesheet">
<style>
</style>
<div id="ledsFloater">
@@ -17,15 +17,15 @@
</div>
</div>
<div id="page">
- <div class="top">
- <div class="logo">
+ <div id="top">
+ <div id="logo">
<img src="/static/site/neon-syrenka.svg" />
</div>
<div class="type">
<h1>Warszawski Hackerspace</h1>
</div>
</div>
- <div class="quicklinks">
+ <div id="quicklinks">
<ul>
<li><a href="https://wiki.hackerspace.pl/">Wiki</a></li>
<li><a href="https://profile.hackerspace.pl/">Konto</a></li>