DerGrumpf/garde-studios.de
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Init

Browse Source
This commit is contained in:
DerGrumpf
2025-05-16 01:22:20 +02:00
parent 27189d8a22
commit ee9f04bf46
11 changed files with 778 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

145
html/css/catppuccin.css Normal file
View File

@@ -0,0 +1,145 @@
[data-theme="latte"] {
--theme-rosewater: #dc8a78;
--theme-flamingo: #dd7878;
--theme-pink: #ea76cb;
--theme-mauve: #8839ef;
--theme-red: #d20f39;
--theme-maroon: #e64553;
--theme-peach: #fe640b;
--theme-yellow: #df8e1d;
--theme-green: #40a02b;
--theme-teal: #179299;
--theme-sky: #04a5e5;
--theme-sapphire: #209fb5;
--theme-blue: #1e66f5;
--theme-lavender: #7287fd;
--theme-text: #4c4f69;
--theme-subtext1: #5c5f77;
--theme-subtext0: #6c6f85;
--theme-overlay2: #7c7f93;
--theme-overlay1: #8c8fa1;
--theme-overlay0: #9ca0b0;
--theme-surface2: #acb0be;
--theme-surface1: #bcc0cc;
--theme-surface0: #ccd0da;
--theme-base: #eff1f5;
--theme-mantle: #e6e9ef;
--theme-crust: #dce0e8;
}
[data-theme="frappe"] {
--theme-rosewater: #f2d5cf;
--theme-flamingo: #eebebe;
--theme-pink: #f4b8e4;
--theme-mauve: #ca9ee6;
--theme-red: #e78284;
--theme-maroon: #ea999c;
--theme-peach: #ef9f76;
--theme-yellow: #e5c890;
--theme-green: #a6d189;
--theme-teal: #81c8be;
--theme-sky: #99d1db;
--theme-sapphire: #85c1dc;
--theme-blue: #8caaee;
--theme-lavender: #babbf1;
--theme-text: #c6d0f5;
--theme-subtext1: #b5bfe2;
--theme-subtext0: #a5adce;
--theme-overlay2: #949cbb;
--theme-overlay1: #838ba7;
--theme-overlay0: #737994;
--theme-surface2: #626880;
--theme-surface1: #51576d;
--theme-surface0: #414559;
--theme-base: #303446;
--theme-mantle: #292c3c;
--theme-crust: #232634;
}
[data-theme="macchiato"] {
--theme-rosewater: #f4dbd6;
--theme-flamingo: #f0c6c6;
--theme-pink: #f5bde6;
--theme-mauve: #c6a0f6;
--theme-red: #ed8796;
--theme-maroon: #ee99a0;
--theme-peach: #f5a97f;
--theme-yellow: #eed49f;
--theme-green: #a6da95;
--theme-teal: #8bd5ca;
--theme-sky: #91d7e3;
--theme-sapphire: #7dc4e4;
--theme-blue: #8aadf4;
--theme-lavender: #b7bdf8;
--theme-text: #cad3f5;
--theme-subtext1: #b8c0e0;
--theme-subtext0: #a5adcb;
--theme-overlay2: #939ab7;
--theme-overlay1: #8087a2;
--theme-overlay0: #6e738d;
--theme-surface2: #5b6078;
--theme-surface1: #494d64;
--theme-surface0: #363a4f;
--theme-base: #24273a;
--theme-mantle: #1e2030;
--theme-crust: #181926;
}
[data-theme="mocha"] {
--theme-rosewater: #f5e0dc;
--theme-flamingo: #f2cdcd;
--theme-pink: #f5c2e7;
--theme-mauve: #cba6f7;
--theme-red: #f38ba8;
--theme-maroon: #eba0ac;
--theme-peach: #fab387;
--theme-yellow: #f9e2af;
--theme-green: #a6e3a1;
--theme-teal: #94e2d5;
--theme-sky: #89dceb;
--theme-sapphire: #74c7ec;
--theme-blue: #89b4fa;
--theme-lavender: #b4befe;
--theme-text: #cdd6f4;
--theme-subtext1: #bac2de;
--theme-subtext0: #a6adc8;
--theme-overlay2: #9399b2;
--theme-overlay1: #7f849c;
--theme-overlay0: #6c7086;
--theme-surface2: #585b70;
--theme-surface1: #45475a;
--theme-surface0: #313244;
--theme-base: #1e1e2e;
--theme-mantle: #181825;
--theme-crust: #11111b;
}
/* Color indicators for each theme */
[data-theme-color="latte"] { background: var(--theme-red); }
[data-theme-color="frappe"] { background: var(--theme-yellow); }
[data-theme-color="macchiato"] { background: var(--theme-green); }
[data-theme-color="mocha"] { background: var(--theme-blue); }
/* Theme Switcher Styles */
.theme-switcher {
display: flex;
justify-content: center;
gap: 8px;
}
.theme-option {
width: 24px;
height: 24px;
border-radius: 50%;
cursor: pointer;
border: 2px solid transparent;
transition: transform 0.2s;
}
.theme-option:hover {
transform: scale(1.3);
}
.theme-option .active {
border-color: var(--theme-text);
}

224
html/css/style.css Normal file
View File

@@ -0,0 +1,224 @@
@charset "UTF-8";
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Helvetica Neue', Arial, sans-serif;
line-height: 1.6;
padding-top: 80px; /* Offset for fixed navbar */
background-color: var(--theme-base);
color: var(--theme-text);
}
a {
color: var(--theme-red);
text-decoration: none;
}
a:hover {
color: var(--theme-peach);
}
/* Navbar Styles */
.navbar {
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: var(--theme-base);
box-shadow: 0 2px 10px var(--theme-blue);
z-index: 1000;
}
.container {
width: 90%;
max-width: 1200px;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem 0;
}
.logo {
font-size: 1.5rem;
font-weight: 700;
color: var(--theme-text);
text-decoration: none;
}
.logo:hover {
color: var(--theme-text);
}
.nav-links ul {
display: flex;
list-style: none;
}
.nav-links li {
margin-left: 2rem;
}
.nav-links a {
color: var(--theme-sky);
text-decoration: none;
font-weight: 500;
transition: color 0.3s;
}
.nav-links a:hover {
color: var(--theme-lavender);
}
/* Mobile Menu */
.hamburger {
display: none;
background: none;
border: none;
cursor: pointer;
padding: 0.5rem;
}
.hamburger span {
display: block;
width: 25px;
height: 2px;
background: var(--theme-blue);
margin: 5px 0;
transition: all 0.3s ease;
}
/* Hero Section */
.hero {
height: 80vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
padding: 2rem;
}
/* Responsive Design */
@media (max-width: 768px) {
.nav-links {
position: fixed;
top: 80px;
left: -100%;
width: 100%;
height: calc(100vh - 80px);
background-color: var(--theme-base);
transition: left 0.3s ease;
}
.nav-links.active {
left: 0;
}
.nav-links ul {
flex-direction: column;
padding: 2rem;
}
.nav-links li {
margin: 1rem 0;
}
.hamburger {
display: block;
}
.hamburger.active span:nth-child(1) {
transform: rotate(45deg) translate(5px, 5px);
}
.hamburger.active span:nth-child(2) {
opacity: 0;
}
.hamburger.active span:nth-child(3) {
transform: rotate(-45deg) translate(5px, -5px);
}
}
/* Section Styles */
.section {
padding: 5rem 0;
}
.container {
width: 90%;
max-width: 1200px;
margin: 0 auto;
}
h2 {
font-size: 2.5rem;
margin-bottom: 2rem;
text-align: center;
}
/* Section Styling */
#games .container {
display: flex;
flex-direction: column;
gap: 2rem;
}
/* Server Card Styling */
.server-card {
width: 100%;
padding: 1.5rem;
background: var(--theme-base);
border-radius: 8px;
box-shadow: 0 2px 10px var(--theme-blue);
}
.server-card h3 {
color: var(--theme-text);
margin-bottom: 1rem;
font-size: 1.3rem;
}
/* Server Info Styling (keep your existing styles) */
.server-info {
font-family: 'Courier New', monospace;
line-height: 1.8;
}
.server-info p {
margin: 0.2rem 0;
}
.arrow {
margin: 0.3rem;
}
.highlight {
font-weight: bold;
}
.card-description {
margin: 12px 0;
color: var(--theme-subtext0);
font-size: 0.9rem;
line-height: 1.4;
}
/* Status indicators (keep your existing styles) */
.status.online {
color: var(--theme-green);
}
.status.offline {
color: var(--theme-red);
}
.status.unknown {
color: var(--theme-yellow);
}