forked from hswaw/hscloud
improve fonts & animations
Change-Id: I2a586243035e84136b2a309dc6ce26ab21f8925d
This commit is contained in:
parent
717aad4ac6
commit
d88a2e2377
2 changed files with 226 additions and 170 deletions
|
|
@ -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: ".";
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in a new issue