Anpassungen stylesheet global
This commit is contained in:
«schmona»
parent
56ed78b4f7
commit
601d416339
15
.vscode/launch.json
vendored
15
.vscode/launch.json
vendored
@ -1,15 +0,0 @@
|
||||
{
|
||||
// Use IntelliSense to learn about possible attributes.
|
||||
// Hover to view descriptions of existing attributes.
|
||||
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
|
||||
"version": "0.2.0",
|
||||
"configurations": [
|
||||
{
|
||||
"type": "chrome",
|
||||
"request": "launch",
|
||||
"name": "Launch Chrome against localhost",
|
||||
"url": "http://localhost:8080",
|
||||
"webRoot": "${workspaceFolder}"
|
||||
}
|
||||
]
|
||||
}
|
||||
@ -1,9 +1,7 @@
|
||||
/* Font Import */
|
||||
|
||||
/* Font Import */
|
||||
@import url('https://fonts.googleapis.com/css2?family=Bagel+Fat+One&display=swap');
|
||||
@import url('https://fonts.googleapis.com/css2?family=Jost:wght@300;400;600&display=swap');
|
||||
|
||||
|
||||
/* Reset / Normalize */
|
||||
*,
|
||||
*::before,
|
||||
@ -15,43 +13,54 @@
|
||||
|
||||
/* Colors + Main Font */
|
||||
:root {
|
||||
--max-width: 1200px;
|
||||
--padding: 1.5rem;
|
||||
|
||||
|
||||
--tomato: #D44B24;
|
||||
--tomato-dark: #D44B24;
|
||||
--olive: #6B6B05;
|
||||
--olive-dark: #5C5C05;
|
||||
--olive-light: #E5E1B7;
|
||||
--butter: #FFFBD1;
|
||||
--butter-light: #FFFDE3;
|
||||
--olive-light: #C8CC7A;
|
||||
--butter: #F5F1BC;
|
||||
--butter-light: #F7F6E6;
|
||||
--white: #ffffff;
|
||||
--black: #221C1A;
|
||||
--black: #22211A;
|
||||
--brown: #66340d;
|
||||
--blue: #3489DA;
|
||||
--blue-dark: #1D70BF;
|
||||
--error: #FF3B30;
|
||||
|
||||
--font-main: 'Jost', sans-serif;
|
||||
--font-size-base: 16px;
|
||||
--font-size-base: 1rem;
|
||||
|
||||
/* Spacing Scale */
|
||||
--space-1: 8px;
|
||||
--space-2: 12px;
|
||||
--space-3: 16px;
|
||||
--space-4: 20px;
|
||||
--space-5: 24px;
|
||||
--space-6: 32px;
|
||||
/* Spacing Scale */
|
||||
--space-1: 0.5rem;
|
||||
--space-2: 0.75rem;
|
||||
--space-3: 1rem;
|
||||
--space-4: 1.25rem;
|
||||
--space-5: 1.5rem;
|
||||
--space-6: 2rem;
|
||||
--space-7: 3rem;
|
||||
--space-8: 4rem;
|
||||
|
||||
/* Radius Scale */
|
||||
--radius-pill: 999px;
|
||||
--radius-md: 20px;
|
||||
--radius-lg: 30px;
|
||||
|
||||
/* Letter Spacing Scale */
|
||||
/* Radius Scale */
|
||||
--radius-pill: 62.4375rem;
|
||||
--radius-sm: 0.5rem;
|
||||
--radius-md: 1.5rem;
|
||||
--radius-lg: 1.875rem;
|
||||
|
||||
/* Letter Spacing */
|
||||
--ls-none: 0;
|
||||
--ls-ui: 0.03em;
|
||||
--ls-label: 0.045em;
|
||||
--ls-sm: 2.5%;
|
||||
--ls-label: 0.045rem;
|
||||
}
|
||||
|
||||
/* Base Styles */
|
||||
body {
|
||||
font-family: var(--font-main);
|
||||
font-size: 1.125em;
|
||||
font-size: 1.125rem;
|
||||
line-height: 1.5;
|
||||
color: var(--black);
|
||||
background-color: var(--butter);
|
||||
@ -66,96 +75,139 @@ img {
|
||||
|
||||
h1, h2 {
|
||||
font-family: 'Bagel Fat One';
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
font-weight: 600;
|
||||
line-height: 120%;
|
||||
letter-spacing: var(--ls-sm);
|
||||
color: var(--brown);
|
||||
}
|
||||
|
||||
p {
|
||||
font-family: 'Jost', sans-serif;
|
||||
margin-bottom: 1em;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
/* Layout */
|
||||
|
||||
.main-content {
|
||||
margin-top: var(--space-8);
|
||||
|
||||
}
|
||||
|
||||
.container {
|
||||
width: 90%;
|
||||
max-width: 1200px;
|
||||
max-width: 75rem;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* Top Navigation */
|
||||
.top-nav-wrap {
|
||||
background: var(--butter);
|
||||
padding: 6px 12px;
|
||||
position: sticky;
|
||||
height: 58px;
|
||||
top: 1rem;
|
||||
z-index: 1000;
|
||||
background: none;
|
||||
padding: 0 1rem;
|
||||
}
|
||||
|
||||
.top-nav {
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
background: var(--white);
|
||||
/*backdrop-filter: blur(3px) saturate(140%);
|
||||
-webkit-backdrop-filter: blur(3px) saturate(140%);*/
|
||||
|
||||
border-radius: var(--radius-lg);
|
||||
box-shadow: 0 3px 12px rgba(102, 52, 13, 0.1);
|
||||
box-shadow: 0 0.1875rem 0.75rem rgba(102, 52, 13, 0.1);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
min-height: 58px;
|
||||
padding: 3px 9px 3px var(--space-5);
|
||||
min-height: 3.625rem;
|
||||
padding: 0.1875rem 0.5625rem 0.1875rem var(--space-5);
|
||||
max-width: none;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.brand {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
height: 50px;
|
||||
height: 3.125rem;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.brand img {
|
||||
width: auto;
|
||||
height: 100%;
|
||||
max-width: 104px;
|
||||
max-width: 6.5rem;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.top-nav-links {
|
||||
.button-small-links {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
|
||||
gap: var(--space-1);
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
|
||||
/* Buttons */
|
||||
.button {
|
||||
display: inline-block;
|
||||
padding: 0.5rem 1.25rem;
|
||||
background-color: var(--olive);
|
||||
border: none;
|
||||
border-radius: var(--radius-lg);
|
||||
font-family: 'Jost', sans-serif;
|
||||
font-weight: 400;
|
||||
font-size: 1.25rem;
|
||||
color: var(--butter-light);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.button:hover {
|
||||
background-color: var(--olive-dark);
|
||||
}
|
||||
|
||||
.button-small {
|
||||
color: var(--black);
|
||||
line-height: 1.3;
|
||||
font-size: 1.125rem;
|
||||
font-weight: 500;
|
||||
letter-spacing: var(--ls-sm);
|
||||
line-height: 1;
|
||||
text-decoration: none;
|
||||
|
||||
padding: var(--space-1) var(--space-4);
|
||||
border-radius: var(--radius-md);
|
||||
border-width: 2px;
|
||||
border-color: none;
|
||||
border-radius: 20px
|
||||
}
|
||||
|
||||
.nav-link:hover,
|
||||
.nav-link:focus-visible {
|
||||
.button-small:hover, .button-small:active,
|
||||
.button-small:focus-visible {
|
||||
background: var(--olive-light);
|
||||
color: var(--black);
|
||||
}
|
||||
|
||||
.login-pill {
|
||||
|
||||
.button-login {
|
||||
background: var(--olive);
|
||||
border-radius: var(--radius-md);
|
||||
color: var(--butter);
|
||||
line-height: 1.3;
|
||||
padding: var(--space-1) var(--space-4);
|
||||
color: var(--butter-light);
|
||||
font-size: 1.125rem;
|
||||
font-weight: 500;
|
||||
letter-spacing: var(--ls-sm);
|
||||
line-height: 1;
|
||||
text-decoration: none;
|
||||
|
||||
padding: var(--space-1) var(--space-4);
|
||||
border-radius: var(--radius-md);
|
||||
}
|
||||
|
||||
.profile-pill {
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
border-radius: 19px;
|
||||
width: 2.375rem;
|
||||
height: 2.375rem;
|
||||
border-radius: 1.1875rem;
|
||||
background: var(--tomato);
|
||||
color: var(--butter);
|
||||
font-size: 17px;
|
||||
font-size: 1.0625rem;
|
||||
font-weight: 500;
|
||||
letter-spacing: var(--ls-ui);
|
||||
line-height: 1.3;
|
||||
@ -165,30 +217,6 @@ p {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/* Components */
|
||||
.button {
|
||||
display: inline-block;
|
||||
padding: 0.5em 1.25em;
|
||||
background-color: var(--olive-color);
|
||||
font-family: 'Jost', sans-serif;
|
||||
font-size: 1em;
|
||||
color: var(--butter-light);
|
||||
border: none;
|
||||
border-radius: 2em;
|
||||
cursor: pointer;
|
||||
|
||||
}
|
||||
|
||||
.button:hover {
|
||||
background-color: var(--olive-dark);
|
||||
}
|
||||
|
||||
/* Navigation */
|
||||
.nav {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
/* Utilities */
|
||||
.text-center {
|
||||
text-align: left;
|
||||
@ -199,7 +227,7 @@ p {
|
||||
}
|
||||
|
||||
/* Media Queries (Responsive) */
|
||||
@media (max-width: 768px) {
|
||||
@media (max-width: 48rem) {
|
||||
.container {
|
||||
width: 95%;
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user