hero section and quality-improvements

This commit is contained in:
Jannik Menzel 2025-05-17 19:16:32 +02:00
parent 477ef2dde8
commit ffb6e66b78
11 changed files with 157 additions and 44 deletions

View file

@ -11,6 +11,7 @@
--color-link: #607C0E;
--color-error: #d9534f;
--color-off: #F3F3F3;
--color-off-dark: #1D1F29;
--color-light: #F8F9Fa;
}
@ -20,6 +21,7 @@
--color-text-dark: #191A23;
--color-link: #BBE04C;
--color-off: #1D1F29;
--color-off-dark: #F3F3F3;
}
/* ========================
@ -312,6 +314,42 @@ li .dropdown-item-mobile {
bottom: 12rem;
}
/* ========================
About
======================== */
.about-section {
margin: 9rem 0 3rem 0;
}
.about-image {
max-height: 28rem;
object-fit: cover;
overflow: hidden;
display: block;
border-radius: 30px;
}
.card {
background-color: var(--color-off);
color: var(--color-text);
border: 1px solid var(--color-text);
border-radius: 30px;
box-shadow: 0 4px 0 0 var(--color-text);
}
.card-header {
font-weight: 600;
font-size: 1.25rem;
background-color: transparent;
border-bottom: none;
color: var(--color-text);
padding: 1.5rem 0 0 1.25rem;
}
.card-body, .card-button {
padding: 1rem 1.25rem;
}
/* ========================
Button
======================== */
@ -322,9 +360,9 @@ li .dropdown-item-mobile {
}
.btn-primary:hover, .btn-primary:active {
color: var(--color-primary-button-dark);
background-color: transparent;
border: 1px solid var(--color-primary-button-dark);
color: var(--color-primary-button-dark) !important;
background-color: transparent !important;
border: 1px solid var(--color-primary-button-dark) !important;
box-shadow: 0 4px 0 0 var(--color-primary-button-dark);
}
@ -335,9 +373,9 @@ li .dropdown-item-mobile {
}
.dark .btn-primary:hover, .dark.btn.btn-primary:active {
color: var(--color-text);
color: var(--color-text) !important;
background-color: transparent;
border: 1px solid var(--color-accent);
border: 1px solid var(--color-accent) !important;
box-shadow: 0 4px 0 0 var(--color-accent);
}
@ -348,27 +386,25 @@ li .dropdown-item-mobile {
}
.btn-secondary:hover, .btn-secondary:active {
color: var(--color-primary-button-dark);
background-color: transparent;
color: var(--color-primary-button-dark) !important;
background-color: transparent !important;
border-color: var(--color-primary-button-dark);
box-shadow: 0 4px 0 0 var(--color-primary-button-dark);
}
.dark .btn-secondary {
background-color: transparent;
color: var(--color-primary-button-light);
border: 1px solid var(--color-primary-button-light);
}
.dark .btn-secondary:hover {
color: var(--color-primary-button-light);
.dark .btn-secondary:hover, .dark .btn-secondary:active {
background-color: transparent;
color: var(--color-primary-button-light) !important;
border-color: var(--color-primary-button-light);
box-shadow: 0 4px 0 0 var(--color-primary-button-light);
}
.dark .btn-secondary:active {
color: var(--color-primary-button-light) !important;
}
/* ========================
Footer
======================== */
@ -377,7 +413,7 @@ footer {
}
.footer {
padding: 1.5rem 0;
padding: 3rem 0;
width: 100%;
margin-top: auto;
text-align: center;

View file

@ -98,7 +98,6 @@
}
#markdown th {
background-color: var(--color-off);
color: var(--color-text);
font-weight: bolder;
}

View file

@ -45,11 +45,12 @@
.details {
cursor: pointer;
background-color: var(--color-off);
padding: 5px 10px 10px 20px;
padding: 5px 20px 10px 20px;
color: var(--color-text);
border: 1px solid var(--color-text);
border-radius: 30px;
box-shadow: 0 4px 0 0 var(--color-text);
margin: 2rem 0 2rem 0;
}
.details.expanded {
@ -59,11 +60,10 @@
.dark #markdown .details.expanded {
border: 1px solid var(--color-off) !important;
box-shadow: 0 4px 0 0 var(--color-off) !important;
color: var(--color-text-dark) !important;
}
.dark #markdown .details.expanded .details-content * {
color: var(--color-text-dark) !important;
color: var(--color-text-dark);
}
.details-header {
@ -91,11 +91,28 @@
line-height: 1;
}
#markdown .details.expanded .details-text,
#markdown .details.expanded .details-number {
.dark #markdown .details.expanded .details-text,
.dark #markdown .details.expanded .details-number {
color: var(--color-text-dark) !important;
}
.dark #markdown .details.expanded blockquote {
background-color: var(--color-off-dark);
border: 1px solid var(--color-text-dark);
box-shadow: 0 4px 0 0 var(--color-text-dark);
}
.dark #markdown .details.expanded table {
color: var(--color-text);
border: 1px solid var(--color-text-dark);
box-shadow: 0 4px 0 0 var(--color-text-dark);
}
.dark #markdown .details.expanded th,
.dark #markdown .details.expanded td {
background-color: var(--color-off-dark);
}
.details-icon {
display: flex;
justify-content: center;
@ -117,10 +134,5 @@
}
#markdown .details.expanded .details-content {
color: var(--color-text-dark) !important;
display: block;
}
#markdown .details.expanded .details-content * {
color: inherit !important;
}