mirror of
https://github.com/informaticker/network-website.git
synced 2024-10-18 20:25:03 +02:00
111 lines
2.2 KiB
CSS
111 lines
2.2 KiB
CSS
@font-face {
|
|
font-family: 'workbench';
|
|
src: url('../assets/font.woff2') format('woff2');
|
|
}
|
|
@media (min-width: 600px){
|
|
body {
|
|
background-color: #2e2e2e;
|
|
background-image:
|
|
linear-gradient(to bottom,
|
|
#000000,
|
|
#1a5c008a,
|
|
#000000
|
|
);
|
|
background-size: 100% 3px;
|
|
background-repeat: repeat-y;
|
|
margin: 0;
|
|
font-family: 'workbench', sans-serif;
|
|
}
|
|
}
|
|
@media (max-width: 600px){
|
|
body {
|
|
background-color: #2e2e2e;
|
|
background-image:
|
|
linear-gradient(to bottom,
|
|
#000000,
|
|
#1a5c008a,
|
|
#000000
|
|
);
|
|
background-size: 100% 3.5px;
|
|
background-repeat: repeat-y;
|
|
margin: 0;
|
|
font-family: 'workbench', sans-serif;
|
|
}
|
|
}
|
|
.navbar {
|
|
background:
|
|
radial-gradient(
|
|
farthest-corner at 50% 50%,
|
|
rgba(0, 0, 0, 0.6),
|
|
rgba(20, 20, 20, 0.7) 50%,
|
|
rgba(40, 40, 40, 0.6) 100%
|
|
);
|
|
background-size: 100% 300px;
|
|
background-position: 0% 100%;
|
|
padding: 1rem;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
pointer-events: none;
|
|
}
|
|
.logo {
|
|
font-size: 1.5rem;
|
|
color: #33ccffca;
|
|
text-shadow: 0 0 10px #33ccffbe;
|
|
}
|
|
.nav-links {
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.nav-links li {
|
|
margin-right: 20px;
|
|
}
|
|
.nav-links a {
|
|
font-size: 1.2rem;
|
|
color: #33ccffab;
|
|
text-decoration: none;
|
|
transition: color 0.2s ease;
|
|
text-shadow: 0 0 3px #33ccffaf;
|
|
pointer-events: initial;
|
|
}
|
|
.nav-links a:hover {
|
|
color: #33ccff;
|
|
}
|
|
|
|
.ascii-art-container {
|
|
position: fixed;
|
|
top: 50%;
|
|
left: 50% !important;
|
|
transform: translate(-50%, -50%);
|
|
font-size: 10vmin;
|
|
font-family: 'Courier New', monospace;
|
|
color: #33ccffab;
|
|
text-shadow: 0 0 3px #33ccffaf;
|
|
padding: 10px;
|
|
white-space: pre;
|
|
pointer-events: none;
|
|
max-width: 90%;
|
|
max-height: 90%;
|
|
overflow: hidden;
|
|
}
|
|
@media (max-width: 600px) {
|
|
.ascii-art-container {
|
|
top: 60% !important;
|
|
text-shadow: 0 0 3px #33ccffaf !important;
|
|
}
|
|
.navbar {
|
|
flex-direction: column;
|
|
align-items: center;
|
|
background: transparent;
|
|
}
|
|
.nav-links {
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
.nav-links li {
|
|
margin: 5px 0;
|
|
}
|
|
} |