Bytemalte/malxte_de
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Better Bytemalte.de connection + some new links

Browse Source
This commit is contained in:
Bytemalte
2026-01-21 12:00:42 +01:00
parent 194e85a870
commit 1e95b1210d
7 changed files with 195 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

81
style.css
View File

@@ -1,18 +1,22 @@
/* Define CSS Variables for a Dark Mode theme */
:root {
--bg-color: #0f172a; /* Dark blue background */
--card-bg: #1e293b; /* Slightly lighter dark blue for cards */
--text-primary: #f8fafc; /* Bright white for main text */
--text-secondary: #94a3b8; /* Grayish-blue for secondary text */
--accent: #3b82f6; /* A pleasant blue for accents */
--hover-accent: #60a5fa; /* Lighter blue for hover effects */
--bg-color: #0f172a; /* Dark blue background */
--card-bg: #1e293b; /* Slightly lighter dark blue for cards */
--text-primary: #f8fafc; /* Bright white for main text */
--text-secondary: #94a3b8; /* Grayish-blue for secondary text */
--accent: #3b82f6; /* A pleasant blue for accents */
--hover-accent: #60a5fa; /* Lighter blue for hover effects */
}
/* Base styles for the document body */
body {
background-color: var(--bg-color);
color: var(--text-primary);
font-family: 'Inter', system-ui, -apple-system, sans-serif;
font-family:
"Inter",
system-ui,
-apple-system,
sans-serif;
margin: 0;
line-height: 1.6;
}
@@ -33,7 +37,7 @@ body {
display: flex;
flex-direction: column;
justify-content: center; /* Center content vertically */
align-items: center; /* Center content horizontally */
align-items: center; /* Center content horizontally */
text-align: center;
}
@@ -44,6 +48,7 @@ body {
/* Creates a gradient text effect */
background: linear-gradient(to right, #fff, var(--accent));
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
@@ -71,6 +76,58 @@ h2 {
display: inline-block; /* Makes the underline only cover the text */
}
/* Project Links Section Styling */
.project-links-section {
text-align: center;
}
.call-to-action-container {
background: linear-gradient(145deg, var(--card-bg), #1a2232);
padding: 4rem 2rem;
border-radius: 16px;
display: flex;
flex-direction: column;
align-items: center;
gap: 2rem;
border: 1px solid rgba(59, 130, 246, 0.2);
box-shadow: 0 20px 40px -20px rgba(0, 0, 0, 0.5);
position: relative;
overflow: hidden;
}
.call-to-action-container::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 2px;
background: linear-gradient(90deg, transparent, var(--accent), transparent);
}
.call-to-action-container p {
font-size: 1.2rem;
color: var(--text-secondary);
margin: 0;
}
.cta-button {
background-color: var(--accent);
color: white;
padding: 1rem 2rem;
border-radius: 8px;
text-decoration: none;
font-weight: 600;
transition: all 0.3s ease;
box-shadow: 0 4px 14px 0 rgba(59, 130, 246, 0.39);
}
.cta-button:hover {
background-color: var(--hover-accent);
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(59, 130, 246, 0.23);
}
/* Grid for the Social Links */
.grid-links {
display: grid;
@@ -87,7 +144,7 @@ h2 {
text-decoration: none;
color: var(--text-primary);
/* Transition for smooth hover effect */
transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
border: 1px solid transparent;
display: flex;
flex-direction: column;
@@ -147,9 +204,9 @@ h2 {
/* Uses CSS View Timeline for true scroll-based animation (modern browser feature) */
animation-timeline: view();
animation-range: entry 10% cover 30%; /* Triggers when 10% of element enters and ends when 30% of viewport is covered */
/* Fallback: Start invisible */
opacity: 0;
opacity: 0;
}
/* Fallback for browsers that do not support 'animation-timeline: view()' */
@@ -159,4 +216,4 @@ h2 {
opacity: 1;
transform: none;
}
}
}