Elias/Website
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added studium

Browse Source
This commit is contained in:
Elias Fink
2025-06-25 17:48:22 +02:00
parent c0e9e28c97
commit 9ec73e7e86
8 changed files with 765 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

231
studium/it-lab/styles.css Normal file
View File

@@ -0,0 +1,231 @@
/* ------------------------- */
/* General */
/* ------------------------- */
:root {
--blue-1: #001A33;
--blue-2: #004D99;
--blue-3: #0080FF;
--blue-4: #66B3FF;
--blue-5: #CCE6FF;
--grey-1: #161A1D;
--grey-2: #434D56;
--grey-3: #708090;
--grey-4: #A9B3BC;
--grey-5: #E2E6E9;
--peach-fuzz: #ffbe98;
}
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
#container {
width: min(100vw, 55.555vh);
height: min(100vh, 180vw);
margin: 0 auto;
}
/* ------------------------ */
/* Header */
/* ------------------------ */
header {
height: calc(4 * 100% / 18);
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 20px;
background-color: var(--blue-3);
color: #fff;
}
#title h1 {
font-size: 40px;
margin-bottom: 5px;
}
#title p {
font-size: 20px;
}
@media (min-width: 420px) {
header {
background-image: url(images/logo.svg);
background-size: 100px;
background-position: right 20px center;
background-repeat: no-repeat;
}
}
/* ------------------------------- */
/* Playing Field */
/* ------------------------------- */
main {
position: relative;
height: calc(10 * 100% / 18);
display: flex;
flex-wrap: wrap;
align-content: space-between;
justify-content: space-between;
border: 1px solid var(--grey-3);
}
.cell {
flex-shrink: 0;
background-color: var(--blue-5);
border: 1px solid var(--grey-3);
}
.covered {
background-color: var(--grey-4);
}
.symbol-1, .symbol-2, .symbol-3, .symbol-4, .symbol-5, .symbol-6, .symbol-7, .symbol-8, .symbol-f.covered, .symbol-m {
background-size: 1000%;
background-image: url(images/symbols.svg);
}
.symbol-1 {
background-position: calc(100% * 0 / 9);
}
.symbol-2 {
background-position: calc(100% * 1 / 9);
}
.symbol-3 {
background-position: calc(100% * 2 / 9);
}
.symbol-4 {
background-position: calc(100% * 3 / 9);
}
.symbol-5 {
background-position: calc(100% * 4 / 9);
}
.symbol-6 {
background-position: calc(100% * 5 / 9);
}
.symbol-7 {
background-position: calc(100% * 6 / 9);
}
.symbol-8 {
background-position: calc(100% * 7 / 9);
}
.symbol-f.covered {
background-position: calc(100% * 8 / 9);
}
.symbol-m {
background-position: calc(100% * 9 / 9);
}
#mine-hit {
background-color: var(--peach-fuzz);
}
#overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
align-items: center;
justify-content: center;
background-color: rgba(0, 0, 0, 0.4);
}
#overlay div {
padding: 16px 32px;
border-radius: 16px;
background-color: var(--blue-4);
font-size: 48px;
}
#overlay div:hover {
opacity: 0.2;
transition: 0.2s;
}
/* ------------------------- */
/* Buttons */
/* ------------------------- */
#buttons {
height: calc(3 * 100% / 18);
display: flex;
align-items: center;
justify-content: space-around;
padding: 0 20px;
background-color: var(--grey-5);
}
button {
font-size: 16px;
text-transform: capitalize;
padding: 15px 30px;
margin: 0 2px;
color: #fff;
background-color: var(--blue-3);
border: 2px solid var(--blue-3);
cursor: pointer;
transition: 0.2s;
}
button:hover {
color: var(--blue-3);
background-color: transparent;
}
/* ------------------------ */
/* Footer */
/* ------------------------ */
footer {
height: calc(100% / 18);
display: flex;
align-items: center;
justify-content: space-around;
padding: 0 20px;
background-color: var(--grey-2);
color: #fff;
}
footer a {
color: #fff;
text-decoration: none;
border-bottom: 1px solid #fff;
}
footer a:hover {
border-bottom: 0;
}
@media (max-width: 480px) {
footer span:not(:first-child) {
display: none;
}
}