Catcrafts/catcrafts.net
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

style

Browse source
This commit is contained in:
Jorijn van der Graaf 2025-11-12 22:05:40 +01:00
commit d5ccdf60c1
1 changed files with 31 additions and 49 deletions
Download patch file Download diff file Expand all files Collapse all files

80
styles/styles.css
View file

@ -1,15 +1,18 @@
/* Modern CSS for catcrafts.net */ /* Modern CSS for catcrafts.net - Dark Theme */
/* Base styles */ /* Base styles */
:root { :root {
--primary-color: #4361ee; --primary-color: #4895ef;
--secondary-color: #3a0ca0; --secondary-color: #4361ee;
--accent-color: #f72585; --accent-color: #f72585;
--light-color: #f8f9fa; --light-color: #f8f9fa;
--dark-color: #212529; --dark-color: #121212;
--dark-secondary: #1e1e1e;
--text-color: #e0e0e0;
--text-secondary: #a0a0a0;
--success-color: #4cc9f0; --success-color: #4cc9f0;
--border-radius: 12px; --border-radius: 12px;
--box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); --box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
--transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); --transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
} }
@ -22,8 +25,8 @@
body { body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
line-height: 1.6; line-height: 1.6;
color: var(--dark-color); color: var(--text-color);
background: linear-gradient(135deg, #f5f7ff 0%, #e6e9ff 100%); background: linear-gradient(135deg, #0f0c29, #302b63, #24243e);
min-height: 100vh; min-height: 100vh;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -32,7 +35,7 @@ body {
/* Header and Navigation */ /* Header and Navigation */
header { header {
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)); background: linear-gradient(135deg, var(--dark-secondary), #1a1a1a);
color: white; color: white;
padding: 1rem 0; padding: 1rem 0;
box-shadow: var(--box-shadow); box-shadow: var(--box-shadow);
@ -40,7 +43,7 @@ header {
top: 0; top: 0;
z-index: 100; z-index: 100;
backdrop-filter: blur(10px); backdrop-filter: blur(10px);
border-bottom: 1px solid rgba(255, 255, 255, 0.2); border-bottom: 1px solid rgba(255, 255, 255, 0.1);
} }
.nav-container { .nav-container {
@ -75,7 +78,7 @@ nav ul {
} }
nav a { nav a {
color: white; color: var(--text-color);
text-decoration: none; text-decoration: none;
font-weight: 500; font-weight: 500;
padding: 0.5rem 1rem; padding: 0.5rem 1rem;
@ -87,7 +90,7 @@ nav a {
nav a:hover, nav a:hover,
nav a.active { nav a.active {
background-color: rgba(255, 255, 255, 0.2); background-color: rgba(255, 255, 255, 0.1);
} }
/* Add underline effect for active nav items */ /* Add underline effect for active nav items */
@ -120,17 +123,17 @@ main {
text-align: center; text-align: center;
padding: 3rem 2rem; padding: 3rem 2rem;
margin-bottom: 2rem; margin-bottom: 2rem;
background: linear-gradient(135deg, #e0f7fa, #bbdefb); background: linear-gradient(135deg, #1e1e1e, #2d2d2d);
border-radius: var(--border-radius); border-radius: var(--border-radius);
box-shadow: var(--box-shadow); box-shadow: var(--box-shadow);
border: 1px solid rgba(255, 255, 255, 0.5); border: 1px solid rgba(255, 255, 255, 0.1);
animation: fadeInUp 0.8s ease-out; animation: fadeInUp 0.8s ease-out;
} }
.hero h1 { .hero h1 {
font-size: 2.8rem; font-size: 2.8rem;
margin-bottom: 1rem; margin-bottom: 1rem;
color: var(--secondary-color); color: var(--primary-color);
background: linear-gradient(to right, var(--primary-color), var(--accent-color)); background: linear-gradient(to right, var(--primary-color), var(--accent-color));
-webkit-background-clip: text; -webkit-background-clip: text;
-webkit-text-fill-color: transparent; -webkit-text-fill-color: transparent;
@ -141,7 +144,7 @@ main {
font-size: 1.3rem; font-size: 1.3rem;
max-width: 600px; max-width: 600px;
margin: 0 auto 1.5rem; margin: 0 auto 1.5rem;
color: var(--dark-color); color: var(--text-color);
font-weight: 300; font-weight: 300;
} }
@ -153,7 +156,7 @@ main {
} }
.post { .post {
background: white; background: var(--dark-secondary);
border-radius: var(--border-radius); border-radius: var(--border-radius);
padding: 2rem; padding: 2rem;
box-shadow: var(--box-shadow); box-shadow: var(--box-shadow);
@ -171,7 +174,7 @@ main {
.post:hover { .post:hover {
transform: translateY(-5px); transform: translateY(-5px);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
} }
.post-header { .post-header {
@ -185,7 +188,7 @@ main {
.post-title { .post-title {
font-size: 1.8rem; font-size: 1.8rem;
color: var(--secondary-color); color: var(--primary-color);
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
flex: 1; flex: 1;
} }
@ -193,7 +196,7 @@ main {
.post-date { .post-date {
color: var(--accent-color); color: var(--accent-color);
font-weight: 600; font-weight: 600;
background-color: rgba(247, 37, 133, 0.1); background-color: rgba(247, 37, 133, 0.2);
padding: 0.5rem 1rem; padding: 0.5rem 1rem;
border-radius: 20px; border-radius: 20px;
font-size: 0.9rem; font-size: 0.9rem;
@ -203,7 +206,7 @@ main {
.post-content { .post-content {
font-size: 1.1rem; font-size: 1.1rem;
line-height: 1.8; line-height: 1.8;
color: #333; color: var(--text-color);
animation: fadeIn 0.6s ease-out 0.2s forwards; animation: fadeIn 0.6s ease-out 0.2s forwards;
opacity: 0; opacity: 0;
} }
@ -221,29 +224,7 @@ main {
.post-content a:hover { .post-content a:hover {
text-decoration: underline; text-decoration: underline;
color: var(--secondary-color); color: var(--accent-color);
}.post-content {
font-size: 1.1rem;
line-height: 1.8;
color: #333;
animation: fadeIn 0.6s ease-out 0.2s forwards;
opacity: 0;
}
.post-content p {
margin-bottom: 1.2rem;
}
.post-content a {
color: var(--primary-color);
text-decoration: none;
font-weight: 600;
transition: var(--transition);
}
.post-content a:hover {
text-decoration: underline;
color: var(--secondary-color);
} }
.post-footer { .post-footer {
@ -263,7 +244,7 @@ main {
/* Footer */ /* Footer */
footer { footer {
background-color: var(--dark-color); background-color: var(--dark-color);
color: white; color: var(--text-color);
text-align: center; text-align: center;
padding: 2rem; padding: 2rem;
margin-top: auto; margin-top: auto;
@ -279,7 +260,7 @@ footer {
} }
.footer-links a { .footer-links a {
color: #4cc9f0; color: var(--success-color);
text-decoration: none; text-decoration: none;
transition: var(--transition); transition: var(--transition);
display: inline-block; display: inline-block;
@ -404,7 +385,7 @@ footer {
/* Code blocks styling */ /* Code blocks styling */
.post-content pre { .post-content pre {
background-color: #2d2d2d; background-color: #1e1e1e;
color: #f8f8f2; color: #f8f8f2;
padding: 1rem; padding: 1rem;
border-radius: var(--border-radius); border-radius: var(--border-radius);
@ -415,11 +396,12 @@ footer {
} }
.post-content code { .post-content code {
background-color: #f0f0f0; background-color: #2d2d2d;
padding: 0.2rem 0.4rem; padding: 0.2rem 0.4rem;
border-radius: 4px; border-radius: 4px;
font-family: 'Courier New', monospace; font-family: 'Courier New', monospace;
font-size: 0.9em; font-size: 0.9em;
color: #f8f8f2;
} }
/* Card hover effect */ /* Card hover effect */
@ -435,7 +417,7 @@ footer {
left: -100%; left: -100%;
width: 100%; width: 100%;
height: 100%; height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
transition: left 0.5s; transition: left 0.5s;
} }
@ -449,7 +431,7 @@ footer {
} }
::-webkit-scrollbar-track { ::-webkit-scrollbar-track {
background: #f1f1f1; background: #1e1e1e;
} }
::-webkit-scrollbar-thumb { ::-webkit-scrollbar-thumb {