344 lines
6.6 KiB
CSS
344 lines
6.6 KiB
CSS
{{- $highlightColor := .Site.Params.style.vars.highlightColor | default (.Site.Params.highlightColor | default "#e22d30") -}}
|
|
|
|
:root {
|
|
--nixie-orange: orange;
|
|
--nixie-orange-glow: #ffa500;
|
|
--nixie-green: #17e129;
|
|
}
|
|
|
|
.sensor-table * {
|
|
border: none;
|
|
}
|
|
.sensor-table {
|
|
border: none;
|
|
margin-bottom: 0;
|
|
}
|
|
.sensor-table td {
|
|
padding: 0;
|
|
}
|
|
|
|
.languages-compact {
|
|
position: absolute;
|
|
right: 0;
|
|
bottom: 0;
|
|
padding: 0 0.4rem;
|
|
padding-bottom: 0.2rem;
|
|
z-index: 100;
|
|
}
|
|
|
|
.languages-compact a,
|
|
.languages-compact span {
|
|
font-size: 1em;
|
|
transition: color .25s ease-out;
|
|
font-weight: bold;
|
|
text-shadow: 3px 2px 2px black;
|
|
}
|
|
|
|
.languages-compact a:not(:hover),
|
|
.languages-compact span {
|
|
color: white;
|
|
}
|
|
|
|
.languages-compact a.current-lang {
|
|
color: {{ $highlightColor }};
|
|
}
|
|
|
|
#main-banner {
|
|
position: relative;
|
|
}
|
|
|
|
.error__404 {
|
|
font-family: 'Comic Sans MS', 'Chalkboard SE', 'Comic Neue', sans-serif;
|
|
}
|
|
|
|
code {
|
|
padding: 5px 10px;
|
|
}
|
|
|
|
.menu-status {
|
|
margin-left: auto;
|
|
margin-right: 1rem;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.menu__btn-title {
|
|
padding-bottom: 0;
|
|
}
|
|
|
|
.tube-box {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.tube-box-title {
|
|
margin-left: auto;
|
|
}
|
|
|
|
.tube {
|
|
padding: 0.5rem;
|
|
width: 1.8rem;
|
|
text-align: center;
|
|
box-shadow: inset 0 0 25px 10px rgba(0,0,0,0.45);
|
|
color: var(--nixie-orange);
|
|
border-radius: 10px 10px 0 0;
|
|
border: 0.15rem solid rgb(20, 20, 20);
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.tube::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: radial-gradient(circle, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0) 70%);
|
|
animation: flicker 2s infinite;
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.tube > span {
|
|
color: #FAE48E;
|
|
text-shadow: 2px 0 3px var(--nixie-orange), -2px 0 3px var(--nixie-orange), 0 2px 3px var(--nixie-orange), 0 -2px 3px var(--nixie-orange), 0 0 1rem var(--nixie-orange), 0 0 2rem var(--nixie-orange), 0 0 2rem var(--nixie-orange), 0 0 3rem var(--nixie-orange);
|
|
opacity: 1;
|
|
display: inline-block;
|
|
animation: glow 1s infinite;
|
|
transition: all 0.5s ease-in-out;
|
|
}
|
|
|
|
@keyframes flicker {
|
|
0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
|
|
opacity: 0.99;
|
|
}
|
|
20%, 24%, 55% {
|
|
opacity: 0.4;
|
|
}
|
|
}
|
|
|
|
@keyframes glow {
|
|
0%, 100% {
|
|
text-shadow: 2px 0 3px var(--nixie-orange), -2px 0 3px var(--nixie-orange), 0 2px 3px var(--nixie-orange), 0 -2px 3px var(--nixie-orange), 0 0 1rem var(--nixie-orange), 0 0 2rem var(--nixie-orange), 0 0 2rem var(--nixie-orange), 0 0 3rem var(--nixie-orange);
|
|
}
|
|
50% {
|
|
text-shadow: 2px 0 4px var(--nixie-orange), -2px 0 4px var(--nixie-orange), 0 2px 4px var(--nixie-orange), 0 -2px 4px var(--nixie-orange), 0 0 1.5rem var(--nixie-orange), 0 0 3rem var(--nixie-orange), 0 0 3rem var(--nixie-orange), 0 0 4rem var(--nixie-orange);
|
|
}
|
|
}
|
|
|
|
#nyan-cat {
|
|
position: fixed;
|
|
top: 50%;
|
|
left: -200px; /* Start off-screen */
|
|
transform: translateY(-50%);
|
|
animation: nyanFly 10s linear infinite;
|
|
}
|
|
|
|
@keyframes nyanFly {
|
|
0% {
|
|
left: -200px;
|
|
}
|
|
100% {
|
|
left: 100%;
|
|
}
|
|
}
|
|
|
|
#pac-man {
|
|
position: absolute;
|
|
top: 23.5%;
|
|
left: -100px; /* Start off-screen */
|
|
z-index: 100;
|
|
transform: translateY(-50%);
|
|
transform: rotate(180deg);
|
|
animation: pacManMove 10s linear forwards;
|
|
}
|
|
|
|
#pac-man img {
|
|
width: 50px;
|
|
}
|
|
|
|
@keyframes pacManMove {
|
|
0% {
|
|
left: -100px;
|
|
}
|
|
100% {
|
|
left: 100%;
|
|
}
|
|
}
|
|
|
|
/*** FONTS ***/
|
|
@font-face {
|
|
font-family: 'Perfect DOS VGA437';
|
|
font-style: normal;
|
|
src: local(''),
|
|
url('../fonts/Perfect DOS VGA 437.woff2') format('woff2'),
|
|
url('../fonts/Perfect DOS VGA 437.woff') format('woff');
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'IBM Plex Mono Regular';
|
|
font-style: normal;
|
|
src: local(''),
|
|
url('../fonts/IBMPlexMono-Regular.woff2') format('woff2'),
|
|
url('../fonts/IBMPlexMono-Regular.woff') format('woff');
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Greybeard';
|
|
font-style: normal;
|
|
src: local(''),
|
|
url('../fonts/Greybeard-16px.woff2') format('woff2'),
|
|
url('../fonts/Greybeard-16px.woff') format('woff');
|
|
}
|
|
|
|
|
|
/*** IMAGES ***/
|
|
.image-wrapper {
|
|
max-width: 80%;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
|
|
/*** LOGO & HEADER ***/
|
|
|
|
.logo__text {
|
|
font-family: 'Perfect DOS VGA437', monospace;
|
|
text-align: center;
|
|
}
|
|
|
|
/*.header__container {
|
|
background-image: url("/images/header.svg");
|
|
background-size: cover;
|
|
}*/
|
|
|
|
#main-banner {
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
#main-banner > svg {
|
|
left: 0;
|
|
top: 0;
|
|
position: absolute;
|
|
height: auto;
|
|
width: 100%;
|
|
}
|
|
|
|
@media screen and (max-width: 1080px) {
|
|
#main-banner > svg {
|
|
height: 100%;
|
|
width: auto;
|
|
}
|
|
}
|
|
|
|
.logo__link {
|
|
width: 100%;
|
|
z-index: 1000;
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr 1fr;
|
|
align-items: center;
|
|
padding: 0 1rem;
|
|
box-sizing: border-box;
|
|
}
|
|
.logo__text {
|
|
display: inline-block;
|
|
justify-content: flex-end;
|
|
text-shadow: 3px 2px 2px black;
|
|
z-index: 100;
|
|
}
|
|
.logo__imagebox {
|
|
text-align: center;
|
|
display: inline-block;
|
|
padding: 1rem;
|
|
display: flex;
|
|
justify-content: center;
|
|
z-index: 100;
|
|
}
|
|
.logo__title {
|
|
color: #fff;
|
|
}
|
|
.logo__tagline {
|
|
color: #fff;
|
|
}
|
|
|
|
|
|
/*** DARK THEME ***/
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
body {
|
|
background: #282828;
|
|
color: #ebdbb2;
|
|
}
|
|
.wrapper {
|
|
background: #1d2021;
|
|
}
|
|
h1, h2, h3, h4, h5, h6 {
|
|
color: #ebdbb2;
|
|
}
|
|
a {
|
|
color: #ebdbb2;
|
|
}
|
|
pre, code {
|
|
background-color: #282828;
|
|
color: #ebdbb2;
|
|
}
|
|
.widget-search__form {
|
|
background: #282828;
|
|
}
|
|
.sensor-icon {
|
|
fill: white;
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: 768px) {
|
|
.menu-status #status-tube {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.logo__text:hover {
|
|
animation: rgb-glitch 1500ms ease infinite alternate;
|
|
}
|
|
@keyframes rgb-glitch {
|
|
0% {
|
|
color: rgba(255, 255, 255, 0.5);
|
|
text-shadow: 7px 3px 0px rgb(255, 0, 0), -3px 3px 0px rgb(0, 255, 0);
|
|
}
|
|
20% {
|
|
text-shadow: 7px 3px 0px rgb(0, 255, 0), -3px 3px 0px rgb(0, 0, 255),
|
|
3px -3px 0px rgb(255, 0, 0);
|
|
}
|
|
22% {
|
|
text-shadow: 3px 3px 0px rgb(0, 255, 0), -3px 3px 0px rgb(0, 0, 255),
|
|
3px -3px 0px rgb(255, 0, 0);
|
|
}
|
|
25% {
|
|
text-shadow: 3px 3px 0px rgb(0, 255, 0), -3px 3px 0px rgb(0, 0, 255),
|
|
3px -3px 0px rgb(255, 0, 0);
|
|
}
|
|
60% {
|
|
text-shadow: 4px 2px 0px rgb(0, 255, 0), -3px 3px 0px rgb(0, 0, 255),
|
|
3px -3px 0px rgb(255, 0, 0);
|
|
}
|
|
65% {
|
|
text-shadow: 4px 2px 0px rgb(0, 255, 0), -3px 7px 0px rgb(0, 0, 255),
|
|
13px -3px 0px rgb(255, 0, 0);
|
|
}
|
|
67% {
|
|
color: rgba(255, 255, 255, 1);
|
|
text-shadow: 4px 2px 0px rgb(0, 255, 0), -3px 7px 0px rgb(0, 0, 255),
|
|
3px -3px 0px rgb(255, 0, 0);
|
|
}
|
|
90% {
|
|
text-shadow: 3px 3px 0px rgb(0, 0, 255), -3px 3px 0px rgb(255, 0, 0),
|
|
3px -3px 0px rgb(0, 255, 0);
|
|
}
|
|
92% {
|
|
text-shadow: 0px 0px 0px none;
|
|
}
|
|
}
|
|
|
|
.widget-webring__button {
|
|
margin-bottom: 0.5rem;
|
|
}
|