Add critical CSS styles for layout and typography, enhance button styles with rounded corners, and introduce a progress card component with Safrangold accent border.
This commit is contained in:
Bastian Masanek
15
app/app.vue
15
app/app.vue
@@ -3,3 +3,18 @@
|
||||
<NuxtPage />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
/* Critical CSS - Loaded immediately to prevent FOUC */
|
||||
html {
|
||||
background-color: #1e1440; /* purple-darkest */
|
||||
color: #f8fafc; /* white/slate-50 */
|
||||
font-family: 'Roboto', system-ui, -apple-system, sans-serif;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
min-height: 100vh;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -9,20 +9,20 @@ export const buttonVariants = cva(
|
||||
variants: {
|
||||
variant: {
|
||||
default: 'btn-experimenta',
|
||||
destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/90 rounded-md',
|
||||
outline: 'border border-input bg-background hover:bg-accent hover:text-accent-foreground rounded-md',
|
||||
secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80 rounded-md',
|
||||
ghost: 'hover:bg-accent hover:text-accent-foreground rounded-md',
|
||||
destructive: 'btn-destructive',
|
||||
outline: 'border border-input bg-background hover:bg-accent hover:text-accent-foreground rounded-[25px]',
|
||||
secondary: 'btn-secondary',
|
||||
ghost: 'hover:bg-accent hover:text-accent-foreground rounded-[25px]',
|
||||
link: 'text-primary underline-offset-4 hover:underline',
|
||||
experimenta: 'btn-experimenta',
|
||||
},
|
||||
size: {
|
||||
default: 'px-[30px] py-[10px] text-lg leading-[1.7em]',
|
||||
sm: 'h-9 rounded-md px-3',
|
||||
lg: 'h-11 rounded-md px-8',
|
||||
icon: 'h-10 w-10',
|
||||
'icon-sm': 'size-9',
|
||||
'icon-lg': 'size-11',
|
||||
sm: 'h-9 rounded-[25px] px-3',
|
||||
lg: 'h-11 rounded-[25px] px-8',
|
||||
icon: 'h-10 w-10 rounded-[25px]',
|
||||
'icon-sm': 'size-9 rounded-[25px]',
|
||||
'icon-lg': 'size-11 rounded-[25px]',
|
||||
experimenta: 'px-[30px] py-[10px] text-lg leading-[1.7em]',
|
||||
},
|
||||
},
|
||||
|
||||
@@ -20,6 +20,18 @@ const handleClick = () => {
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Example: Card with Safrangold Accent Border -->
|
||||
<div class="card-progress card-accent-border mb-8">
|
||||
<div class="progress-header">
|
||||
<h3 class="progress-title">Verlängerungsfortschritt</h3>
|
||||
<div class="progress-stats">2963 / 4931</div>
|
||||
</div>
|
||||
<div class="progress-bar-wrapper">
|
||||
<div class="progress-bar" style="width: 60.1%"></div>
|
||||
<div class="progress-percentage">60.1%</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- experimenta Button Showcase -->
|
||||
<div class="card-glass mb-8">
|
||||
<h3 class="text-xl font-semibold mb-4 text-experimenta-accent">experimenta Button</h3>
|
||||
|
||||
@@ -12,6 +12,33 @@
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
/* ========================================
|
||||
FONT FACE DECLARATIONS (Roboto - Local)
|
||||
======================================== */
|
||||
|
||||
/**
|
||||
* Roboto Variable Font - Local Hosting
|
||||
*
|
||||
* Font files are hosted locally for DSGVO compliance and better performance.
|
||||
* This variable font supports all weights from 100-900.
|
||||
*
|
||||
* Format: WOFF2 (best compression, modern browsers)
|
||||
* Coverage: Latin characters
|
||||
* File location: /public/fonts/roboto/Roboto-VariableFont-latin.woff2
|
||||
*/
|
||||
|
||||
/* Roboto Variable Font - Normal Style (Latin) */
|
||||
/* Supports all weights from 100-900 (including 300, 400, 500, 700 that we use) */
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
font-style: normal;
|
||||
font-weight: 100 900;
|
||||
font-stretch: 100%;
|
||||
font-display: block;
|
||||
src: url('/fonts/roboto/Roboto-VariableFont-latin.woff2') format('woff2');
|
||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
CSS CUSTOM PROPERTIES
|
||||
======================================== */
|
||||
@@ -243,15 +270,45 @@
|
||||
}
|
||||
}
|
||||
|
||||
/* Secondary Button (White Border) */
|
||||
.btn-secondary {
|
||||
@apply bg-transparent border-2 border-accent text-accent;
|
||||
@apply px-8 py-2.5 rounded-2xl;
|
||||
@apply text-lg font-medium;
|
||||
@apply transition-all duration-300;
|
||||
@apply inline-block relative;
|
||||
@apply px-[30px] py-[10px];
|
||||
@apply text-lg font-medium text-white;
|
||||
@apply rounded-[25px];
|
||||
@apply cursor-pointer;
|
||||
@apply bg-transparent;
|
||||
@apply border-2 border-white/30;
|
||||
@apply outline-0;
|
||||
@apply no-underline;
|
||||
line-height: 1.7em;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
@apply bg-accent text-white;
|
||||
@apply bg-white text-purple-darkest;
|
||||
@apply border-white;
|
||||
}
|
||||
|
||||
/* Destructive Button (EXP Signalorange - Warning/Danger Actions) */
|
||||
.btn-destructive {
|
||||
@apply inline-block relative;
|
||||
@apply px-[30px] py-[10px];
|
||||
@apply text-lg font-medium text-white;
|
||||
@apply rounded-[25px];
|
||||
@apply cursor-pointer;
|
||||
@apply border-0 outline-0;
|
||||
@apply no-underline;
|
||||
background: #ea5b0c;
|
||||
background-image: linear-gradient(to left, #ea5b0c, #ea5b0c, #c7490a, #ea5b0c);
|
||||
background-size: 300%;
|
||||
background-position: 0%;
|
||||
line-height: 1.7em;
|
||||
transition: background-position 1s, all 0.3s ease;
|
||||
}
|
||||
|
||||
.btn-destructive:hover {
|
||||
background-position: 100%;
|
||||
}
|
||||
|
||||
/* Cards */
|
||||
@@ -280,6 +337,76 @@
|
||||
@apply text-accent font-medium mb-4;
|
||||
}
|
||||
|
||||
/* Progress Card - with Safrangold accent border */
|
||||
.card-progress {
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
@apply rounded-2xl md:rounded-lg;
|
||||
@apply p-8 md:p-6 sm:p-5;
|
||||
}
|
||||
|
||||
/* Accent Border (Left) - Safrangold (#f59d24) */
|
||||
.card-accent-border {
|
||||
border-left: 6px solid #f59d24;
|
||||
@apply rounded-l-lg;
|
||||
}
|
||||
|
||||
/* Progress Bar Components */
|
||||
.card-progress .progress-header {
|
||||
@apply flex justify-between items-center mb-5 flex-wrap gap-2;
|
||||
}
|
||||
|
||||
.card-progress .progress-title {
|
||||
@apply text-xl font-medium m-0;
|
||||
color: #f59d24;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.card-progress .progress-stats {
|
||||
@apply text-lg font-normal;
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
|
||||
.card-progress .progress-bar-wrapper {
|
||||
@apply relative w-full;
|
||||
height: 50px;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border-radius: 25px;
|
||||
overflow: hidden;
|
||||
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.card-progress .progress-bar {
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, #46c74a 0%, #66d96a 50%, #46c74a 100%);
|
||||
border-radius: 25px;
|
||||
@apply transition-all duration-300;
|
||||
position: relative;
|
||||
background-size: 200% 100%;
|
||||
animation: shimmer 3s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes shimmer {
|
||||
0% {
|
||||
background-position: -200% 0;
|
||||
}
|
||||
100% {
|
||||
background-position: 200% 0;
|
||||
}
|
||||
}
|
||||
|
||||
.card-progress .progress-percentage {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
font-size: 20px;
|
||||
@apply font-semibold text-white;
|
||||
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
|
||||
z-index: 2;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.card-info p {
|
||||
@apply text-white/90;
|
||||
}
|
||||
|
||||
@@ -89,9 +89,10 @@ withDefaults(defineProps<Props>(), {
|
||||
@apply rounded-2xl md:rounded-lg;
|
||||
}
|
||||
|
||||
/* Accent Border (Left) */
|
||||
/* Accent Border (Left) - Safrangold (#f59d24) */
|
||||
.card-accent-border {
|
||||
@apply border-l-4 border-accent;
|
||||
border-left: 6px solid #f59d24;
|
||||
@apply rounded-l-lg;
|
||||
}
|
||||
|
||||
/* Card Title */
|
||||
|
||||
Reference in New Issue
Block a user