mirror of
https://github.com/jannikmenzel/iFSR-Website.git
synced 2025-06-05 09:08:48 +02:00
hero section and quality-improvements
This commit is contained in:
parent
477ef2dde8
commit
ffb6e66b78
11 changed files with 157 additions and 44 deletions
|
@ -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;
|
||||
|
|
|
@ -98,7 +98,6 @@
|
|||
}
|
||||
|
||||
#markdown th {
|
||||
background-color: var(--color-off);
|
||||
color: var(--color-text);
|
||||
font-weight: bolder;
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
}
|
Loading…
Add table
Add a link
Reference in a new issue