kbe/hugo-mistergeek
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

wip tailwind theme

Browse Source
This commit is contained in:
kbe
2025-08-20 11:56:54 +02:00
parent 30a3080480
commit 248438ae8d
5 changed files with 602 additions and 149 deletions
Download Patch File Download Diff File Expand all files Collapse all files

227
static/builds/app.css
View File

@@ -9,9 +9,11 @@
"Courier New", monospace;
--color-red-100: oklch(93.6% 0.032 17.717);
--color-red-200: oklch(88.5% 0.062 18.334);
--color-red-600: oklch(57.7% 0.245 27.325);
--color-red-800: oklch(44.4% 0.177 26.899);
--color-yellow-100: oklch(97.3% 0.071 103.193);
--color-yellow-200: oklch(94.5% 0.129 101.54);
--color-yellow-600: oklch(68.1% 0.162 75.834);
--color-yellow-800: oklch(47.6% 0.114 61.907);
--color-green-100: oklch(96.2% 0.044 156.743);
--color-green-200: oklch(92.5% 0.084 155.995);
@@ -24,11 +26,14 @@
--color-blue-600: oklch(54.6% 0.245 262.881);
--color-blue-700: oklch(48.8% 0.243 264.376);
--color-blue-800: oklch(42.4% 0.199 265.638);
--color-indigo-100: oklch(93% 0.034 272.788);
--color-indigo-600: oklch(51.1% 0.262 276.966);
--color-purple-100: oklch(94.6% 0.033 307.174);
--color-purple-200: oklch(90.2% 0.063 306.703);
--color-purple-600: oklch(55.8% 0.288 302.321);
--color-purple-800: oklch(43.8% 0.218 303.724);
--color-gray-50: oklch(98.5% 0.002 247.839);
--color-gray-100: oklch(96.7% 0.003 264.542);
--color-gray-200: oklch(92.8% 0.006 264.531);
--color-gray-300: oklch(87.2% 0.01 258.338);
--color-gray-400: oklch(70.7% 0.022 261.325);
@@ -42,6 +47,9 @@
--spacing: 0.25rem;
--container-xl: 36rem;
--container-3xl: 48rem;
--container-4xl: 56rem;
--text-xs: 0.75rem;
--text-xs--line-height: calc(1 / 0.75);
--text-sm: 0.875rem;
--text-sm--line-height: calc(1.25 / 0.875);
--text-lg: 1.125rem;
@@ -50,10 +58,14 @@
--text-xl--line-height: calc(1.75 / 1.25);
--text-2xl: 1.5rem;
--text-2xl--line-height: calc(2 / 1.5);
--text-3xl: 1.875rem;
--text-3xl--line-height: calc(2.25 / 1.875);
--text-4xl: 2.25rem;
--text-4xl--line-height: calc(2.5 / 2.25);
--text-5xl: 3rem;
--text-5xl--line-height: 1;
--text-6xl: 3.75rem;
--text-6xl--line-height: 1;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-weight-bold: 700;
@@ -419,6 +431,9 @@
.col-auto {
grid-column: auto;
}
.col-span-full {
grid-column: 1 / -1;
}
.float-end {
float: inline-end;
}
@@ -605,9 +620,18 @@
.mb-8 {
margin-bottom: calc(var(--spacing) * 8);
}
.mb-10 {
margin-bottom: calc(var(--spacing) * 10);
}
.mb-12 {
margin-bottom: calc(var(--spacing) * 12);
}
.mb-auto {
margin-bottom: auto;
}
.ml-2 {
margin-left: calc(var(--spacing) * 2);
}
.block {
display: block;
}
@@ -647,6 +671,9 @@
.h-6 {
height: calc(var(--spacing) * 6);
}
.h-12 {
height: calc(var(--spacing) * 12);
}
.h-16 {
height: calc(var(--spacing) * 16);
}
@@ -662,6 +689,9 @@
.h-50 {
height: calc(var(--spacing) * 50);
}
.h-64 {
height: calc(var(--spacing) * 64);
}
.h-75 {
height: calc(var(--spacing) * 75);
}
@@ -671,9 +701,15 @@
.h-auto {
height: auto;
}
.min-h-screen {
min-height: 100vh;
}
.w-6 {
width: calc(var(--spacing) * 6);
}
.w-12 {
width: calc(var(--spacing) * 12);
}
.w-20 {
width: calc(var(--spacing) * 20);
}
@@ -698,6 +734,9 @@
.max-w-3xl {
max-width: var(--container-3xl);
}
.max-w-4xl {
max-width: var(--container-4xl);
}
.max-w-xl {
max-width: var(--container-xl);
}
@@ -766,6 +805,9 @@
.grid-cols-1 {
grid-template-columns: repeat(1, minmax(0, 1fr));
}
.grid-cols-2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.flex-col {
flex-direction: column;
}
@@ -982,12 +1024,21 @@
.bg-gray-50 {
background-color: var(--color-gray-50);
}
.bg-gray-100 {
background-color: var(--color-gray-100);
}
.bg-gray-200 {
background-color: var(--color-gray-200);
}
.bg-gray-900 {
background-color: var(--color-gray-900);
}
.bg-green-100 {
background-color: var(--color-green-100);
}
.bg-indigo-100 {
background-color: var(--color-indigo-100);
}
.bg-purple-100 {
background-color: var(--color-purple-100);
}
@@ -1190,6 +1241,10 @@
font-size: var(--text-2xl);
line-height: var(--tw-leading, var(--text-2xl--line-height));
}
.text-3xl {
font-size: var(--text-3xl);
line-height: var(--tw-leading, var(--text-3xl--line-height));
}
.text-4xl {
font-size: var(--text-4xl);
line-height: var(--tw-leading, var(--text-4xl--line-height));
@@ -1206,6 +1261,10 @@
font-size: var(--text-xl);
line-height: var(--tw-leading, var(--text-xl--line-height));
}
.text-xs {
font-size: var(--text-xs);
line-height: var(--tw-leading, var(--text-xs--line-height));
}
.leading-relaxed {
--tw-leading: var(--leading-relaxed);
line-height: var(--leading-relaxed);
@@ -1261,18 +1320,27 @@
.text-green-800 {
color: var(--color-green-800);
}
.text-indigo-600 {
color: var(--color-indigo-600);
}
.text-purple-600 {
color: var(--color-purple-600);
}
.text-purple-800 {
color: var(--color-purple-800);
}
.text-red-600 {
color: var(--color-red-600);
}
.text-red-800 {
color: var(--color-red-800);
}
.text-white {
color: var(--color-white);
}
.text-yellow-600 {
color: var(--color-yellow-600);
}
.text-yellow-800 {
color: var(--color-yellow-800);
}
@@ -1358,6 +1426,11 @@
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
transition-duration: var(--tw-duration, var(--default-transition-duration));
}
.transition-colors {
transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
transition-duration: var(--tw-duration, var(--default-transition-duration));
}
.transition-shadow {
transition-property: box-shadow;
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
@@ -1400,6 +1473,13 @@
}
}
}
.hover\:bg-gray-300 {
&:hover {
@media (hover: hover) {
background-color: var(--color-gray-300);
}
}
}
.hover\:bg-green-200 {
&:hover {
@media (hover: hover) {
@@ -1435,6 +1515,13 @@
}
}
}
.hover\:text-blue-800 {
&:hover {
@media (hover: hover) {
color: var(--color-blue-800);
}
}
}
.hover\:text-white {
&:hover {
@media (hover: hover) {
@@ -1492,6 +1579,11 @@
display: none;
}
}
.md\:grid-cols-2 {
@media (width >= 48rem) {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.md\:grid-cols-3 {
@media (width >= 48rem) {
grid-template-columns: repeat(3, minmax(0, 1fr));
@@ -1513,16 +1605,42 @@
line-height: var(--tw-leading, var(--text-5xl--line-height));
}
}
.lg\:grid-cols-2 {
@media (width >= 64rem) {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.lg\:grid-cols-3 {
@media (width >= 64rem) {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
.lg\:grid-cols-6 {
@media (width >= 64rem) {
grid-template-columns: repeat(6, minmax(0, 1fr));
}
}
.lg\:px-8 {
@media (width >= 64rem) {
padding-inline: calc(var(--spacing) * 8);
}
}
.lg\:py-20 {
@media (width >= 64rem) {
padding-block: calc(var(--spacing) * 20);
}
}
.lg\:py-24 {
@media (width >= 64rem) {
padding-block: calc(var(--spacing) * 24);
}
}
.lg\:text-6xl {
@media (width >= 64rem) {
font-size: var(--text-6xl);
line-height: var(--tw-leading, var(--text-6xl--line-height));
}
}
}
.cs-header {
position: relative;
@@ -1663,8 +1781,90 @@
border-radius: 4px;
cursor: pointer;
}
:root {
--primary-blue: #3b82f6;
--primary-blue-dark: #2563eb;
--gray-50: #f9fafb;
--gray-100: #f3f4f6;
--gray-200: #e5e7eb;
--gray-300: #d1d5db;
--gray-600: #4b5563;
--gray-700: #374151;
--gray-800: #1f2937;
--gray-900: #111827;
}
body {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
background: #fdfdff;
color: var(--gray-800);
line-height: 1.6;
}
.gradient-bg {
background: linear-gradient(120deg, #f0f9ff 0%, #e0f2fe 100%);
}
.gradient-bg-dark {
background: linear-gradient(120deg, #1e293b 0%, #334155 100%);
}
.article-card {
transition: all 0.3s ease;
transform: translateY(0);
}
.article-card:hover {
transform: translateY(-5px);
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}
.featured-article {
transition: transform 0.3s ease;
}
.featured-article:hover {
transform: scale(1.02);
}
.tag {
transition: all 0.2s ease;
}
.tag:hover {
transform: translateY(-2px);
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}
.btn-primary {
background: var(--primary-blue);
color: white;
transition: background-color 0.2s ease;
}
.btn-primary:hover {
background: var(--primary-blue-dark);
}
@media (max-width: 768px) {
.text-hero {
font-size: 2.25rem;
line-height: 2.5rem;
}
}
.newsletter-form {
max-width: 500px;
margin: 0 auto;
}
.footer-section {
background: var(--gray-900);
color: white;
}
.footer-link {
color: #9ca3af;
transition: color 0.2s ease;
}
.footer-link:hover {
color: white;
}
.mobile-menu {
transition: all 0.3s ease;
}
.mobile-menu-enter {
opacity: 0;
transform: translateY(-10px);
}
.mobile-menu-enter-active {
opacity: 1;
transform: translateY(0);
}
.breadcrumb-nav {
width: 100%;
@@ -1690,40 +1890,29 @@ body {
display: flex;
align-items: center;
font-size: 0.875rem;
color: #64748b;
color: var(--gray-600);
}
.breadcrumb-item a {
color: #64748b;
color: var(--gray-600);
text-decoration: none;
transition: color 0.2s ease;
display: flex;
align-items: center;
gap: 0.25rem;
}
.breadcrumb-item a:hover {
color: #3b82f6;
color: var(--primary-blue);
}
.breadcrumb-item:not(:last-child)::after {
content: "/";
margin: 0 0.5rem;
color: #cbd5e1;
color: var(--gray-300);
}
.breadcrumb-item.active {
color: #3b82f6;
color: var(--primary-blue);
font-weight: 500;
}
.breadcrumb-item i {
font-size: 0.75rem;
}
@media (max-width: 768px) {
.breadcrumb-list {
padding: 0.5rem 0.75rem;
}
.breadcrumb-item {
font-size: 0.8125rem;
}
.breadcrumb-item:not(:last-child)::after {
margin: 0 0.25rem;
.container {
padding-left: 1rem;
padding-right: 1rem;
}
}
@property --tw-translate-x {