Kenzo/Gallus_Pub
2
1
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

Event Cards Update und alle links sind Orange, einheitlich auf der ganzen Seite

Browse Source
This commit is contained in:
Selina Erci
2025-07-23 14:56:34 +02:00
parent f356b37c9e
commit f0afa677a0
9 changed files with 171 additions and 132 deletions
Download Patch File Download Diff File Expand all files Collapse all files

134
styles/components/HoverCard.css
View File

@ -1,112 +1,114 @@
.hover-card {
position: relative;
width: 350px;
height: 400px;
border-radius: var(--border-radius);
background-color: var(--color-accent-green);
box-shadow: var(--box-shadow);
transition: transform var(--transition-standard);
overflow: hidden;
margin: var(--margin-standard);
display: flex;
flex-direction: column;
position: relative;
width: 350px;
height: 400px;
border-radius: var(--border-radius);
background-color: var(--color-accent-green);
box-shadow: var(--box-shadow);
transition: transform var(--transition-standard);
overflow: hidden;
margin: var(--margin-standard);
display: flex;
flex-direction: column;
}
.hover-card:hover {
transform: translateY(-5px);
transform: translateY(-5px);
}
.card-title {
padding: 15px 15px 5px 15px;
margin: 0;
color: var(--color-accent-beige);
font-size: var(--font-size-medium);
text-align: center;
order: -2;
padding: 15px 15px 5px 15px;
margin: 0;
color: var(--color-accent-beige);
font-size: var(--font-size-medium);
text-align: center;
order: -2;
}
.card_date {
padding: 0 15px 15px 15px;
margin: 0;
color: var(--color-accent-beige);
font-size: var(--font-size-small);
text-align: center;
font-style: italic;
order: -1;
padding: 0 15px 15px 15px;
margin: 0;
color: var(--color-accent-beige);
font-size: var(--font-size-small);
text-align: center;
font-style: italic;
order: -1;
}
.image-container {
flex-grow: 1;
position: relative;
overflow: hidden;
flex-grow: 1;
position: relative;
overflow: hidden;
}
.card-image {
width: 100%;
height: 100%;
object-fit: cover;
transition: opacity 0.3s ease;
width: 100%;
height: 100%;
object-fit: cover;
transition: opacity 0.3s ease;
}
.hover-text {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: var(--color-accent-green-transparent);
display: flex;
justify-content: center;
align-items: center;
padding: 20px;
opacity: 0;
transition: opacity var(--transition-standard);
font-size: var(--font-size-small-medium);
text-align: center;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: var(--color-accent-green-transparent);
display: flex;
justify-content: center;
align-items: center;
padding: 20px;
opacity: 0;
transition: opacity var(--transition-standard);
}
.hover-text div {
color: var(--color-accent-beige);
text-align: center;
max-height: 100%;
width: 100%;
overflow-y: auto;
padding-right: 5px;
color: var(--color-accent-beige);
text-align: center;
max-height: 100%;
width: 100%;
overflow-y: auto;
padding-right: 5px;
}
.hover-text div::-webkit-scrollbar {
width: 5px;
width: 5px;
}
.hover-text div::-webkit-scrollbar-track {
background: rgba(0, 0, 0, 0.1);
border-radius: 10px;
background: rgba(0, 0, 0, 0.1);
border-radius: 10px;
}
.hover-text div::-webkit-scrollbar-thumb {
background: var(--color-accent-beige);
border-radius: 10px;
background: var(--color-accent-beige);
border-radius: 10px;
}
.hover-text div {
scrollbar-width: thin;
scrollbar-color: var(--color-accent-beige) rgba(0, 0, 0, 0.1);
scrollbar-width: thin;
scrollbar-color: var(--color-accent-beige) rgba(0, 0, 0, 0.1);
}
.hover-card:hover .hover-text {
opacity: 1;
opacity: 1;
}
.hover-card:hover .card-image {
opacity: 0.1;
opacity: 0.1;
}
.hover-text p {
margin: 0;
padding: 0;
margin: 0;
padding: 0;
}
@media (max-width: 768px) {
.hover-card {
width: 100%;
max-width: 350px;
}
}
.hover-card {
width: 100%;
max-width: 350px;
}
}

9
styles/index.css
View File

@ -23,3 +23,12 @@ body {
width: var(--container-width);
margin: 0 auto;
}
a {
color: #ffa500;
}
a:hover {
text-decoration: none;
}

54
styles/variables.css
View File

@ -1,30 +1,34 @@
:root {
/* Colors */
--color-background: #000;
--color-text: #f5f5f5;
--color-accent-green: #213b28;
--color-accent-beige: #ceb39b;
--color-accent-green-transparent: rgba(33, 59, 40, 0.95);
--color-shadow: rgba(0, 0, 0, 0.2);
/* Colors */
--color-background: #000;
--color-text: #f5f5f5;
--color-accent-green: #213b28;
--color-accent-beige: #ceb39b;
--color-accent-green-transparent: rgba(33, 59, 40, 0.95);
--color-shadow: rgba(0, 0, 0, 0.2);
--color-orange1: #ffa500;
--font-family-primary: 'Georgia', serif;
--font-size-small: 1rem;
--font-size-medium: 1.5rem;
--font-size-large: 2rem;
--line-height: 1.6;
--container-width: 100%;
--container-max-width: 1600px;
--padding-vertical: 2rem;
--padding-horizontal: 0;
--margin-standard: 1rem;
--gap-standard: 30px;
--border-radius: 8px;
--box-shadow: 0 4px 8px var(--color-shadow);
--transition-standard: 0.3s ease;
/* Font Sizes */
--font-family-primary: 'Georgia', serif;
--font-size-small: 1rem;
--font-size-small-medium: 1.2rem;
--font-size-medium: 1.5rem;
--font-size-large: 2rem;
--line-height: 1.6;
--breakpoint-mobile: 768px;
--breakpoint-desktop: 1600px;
--container-width: 100%;
--container-max-width: 1600px;
--padding-vertical: 2rem;
--padding-horizontal: 0;
--margin-standard: 1rem;
--gap-standard: 30px;
--border-radius: 8px;
--box-shadow: 0 4px 8px var(--color-shadow);
--transition-standard: 0.3s ease;
--breakpoint-mobile: 768px;
--breakpoint-desktop: 1600px;
}