diff --git a/app.vue b/app.vue index 77bf3ef..742c9a1 100644 --- a/app.vue +++ b/app.vue @@ -25,222 +25,3 @@ useSeoMeta({ twitterUrl: 'https://webfussel.de', }) - - diff --git a/assets/css/button.css b/assets/css/button.css new file mode 100644 index 0000000..11d433d --- /dev/null +++ b/assets/css/button.css @@ -0,0 +1,20 @@ +.Button { + all: unset; + transition: 250ms; + background: var(--color-orange); + color: var(--color-black); + cursor: pointer; + padding: 1rem 1.5rem; + outline: 3px solid var(--color-black); + box-shadow: 0 0 0 0 var(--color-orange); + border-radius: 99999px; + text-align: center; + + &:hover { + box-shadow: 0 0 0 6px var(--color-orange); + } + + &.cta { + font-size: clamp(1rem, 2vw, 1.5rem); + } +} diff --git a/components/Customers/Customers.css b/assets/css/customers.css similarity index 100% rename from components/Customers/Customers.css rename to assets/css/customers.css diff --git a/components/Footer/Footer.css b/assets/css/footer.css similarity index 100% rename from components/Footer/Footer.css rename to assets/css/footer.css diff --git a/assets/css/global.css b/assets/css/global.css new file mode 100644 index 0000000..a44cc6e --- /dev/null +++ b/assets/css/global.css @@ -0,0 +1,186 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +::selection { + background: var(--color-orange); + color: var(--color-black); +} + +::-webkit-scrollbar { + width: 10px; + height: 10px; +} + +::-webkit-scrollbar-button { + display: none; +} + +::-webkit-scrollbar-thumb { + border-radius: 20px; + background: #b2bec3; + transition: var(--transition-time); +} + +::-webkit-scrollbar-track { + border-radius: 20px; + background: rgba(0, 0, 0, 0.3); +} + +::-webkit-scrollbar-corner { + border-radius: 100%; + background: #b2bec3; +} + +:root { + --spacing-standard: 3rem; + --transition-time: 250ms; + --radius-standard: 4px; + + --color-white: #ecf0f1; + --color-white-transparent: rgba(236, 240, 241, 0.7); + + --color-black: #2a2723; + --color-black-transparent: #2a2723aa; + + --color-orange: #ff9100; + --color-orange-black: #332b22; +} + +html, +body { + min-height: 100vh; + width: 100vw; +} + +html { + scroll-behavior: smooth; + scrollbar-gutter: auto; + overflow-y: auto; + overflow-x: hidden; + + &.layer { + overflow: hidden; + } +} + +body { + font-family: 'Open Sans', sans-serif; + color: var(--color-white); + background: var(--color-black); +} + +h1, h2, h3, h4, h5, h6 { + text-align: left; + font-family: 'Roboto Condensed', sans-serif; +} + +h2 { + font-size: 4rem; +} + +h3 { + font-size: 1.5rem; +} + +a { + text-decoration: none; + color: var(--color-white); + transition: var(--transition-time); +} + +ul { + list-style: none; + display: flex; +} + +span.highlight { + color: var(--color-orange); +} + +span.chip { + background: var(--color-orange); + border-radius: 999px; + font-size: 1rem; + color: var(--color-black); + height: max-content; + padding: .5em 1em; + user-select: none; +} + +.card { + padding: 2rem; + background: var(--color-black); + border-radius: 20px; + min-width: 300px; + flex: 1; +} + +.color-icon { + filter: invert(50%) sepia(84%) saturate(868%) hue-rotate(1deg) brightness(103%) contrast(100%); +} + +.content { + position: relative; + z-index: 100; + padding: 150px 15vw; +} + +.full { + min-height: 100vh; +} + +.margin-top { + margin-top: 3rem; +} + +.margin-top-big { + margin-top: 6rem; +} + +.flex-col { + display: flex; + flex-direction: column; +} + +.default-gap { + gap: 3rem; +} + +.z-0 { + box-shadow: 0 0 0 rgba(0, 0, 0, 0), 0 0 0 rgba(0, 0, 0, 0); +} + +.z-1 { + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); +} + +.z-2 { + box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); +} + +.z-3 { + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23); +} + +.z-4 { + box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22); +} + +.z-5 { + box-shadow: 0 19px 38px rgba(0, 0, 0, 0.30), 0 15px 12px rgba(0, 0, 0, 0.22); +} + +@media (width <= 780px) { + h1, h2, h3, h4, h5, h6, p { + text-align: center; + } +} + +@media (width <= 450px) { + .content { + padding: 150px 10vw; + } +} diff --git a/components/Header/Header.css b/assets/css/header.css similarity index 100% rename from components/Header/Header.css rename to assets/css/header.css diff --git a/components/Intro/Intro.css b/assets/css/intro.css similarity index 100% rename from components/Intro/Intro.css rename to assets/css/intro.css diff --git a/components/Person/Person.css b/assets/css/person.css similarity index 100% rename from components/Person/Person.css rename to assets/css/person.css diff --git a/components/Services/Services.css b/assets/css/services.css similarity index 100% rename from components/Services/Services.css rename to assets/css/services.css diff --git a/components/Skills/Skills.css b/assets/css/skills.css similarity index 100% rename from components/Skills/Skills.css rename to assets/css/skills.css diff --git a/components/Technology/Technology.css b/assets/css/technology.css similarity index 100% rename from components/Technology/Technology.css rename to assets/css/technology.css diff --git a/components/Button.vue b/components/Button.vue index e2b0633..3ed7132 100644 --- a/components/Button.vue +++ b/components/Button.vue @@ -25,26 +25,3 @@ const actualProps = () => { } } - - diff --git a/components/Customers/Customers.vue b/components/Customers.vue similarity index 99% rename from components/Customers/Customers.vue rename to components/Customers.vue index a3d502b..288fb3b 100644 --- a/components/Customers/Customers.vue +++ b/components/Customers.vue @@ -1,5 +1,3 @@ -