webfussel/wf4
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: optimize CSS

Browse source
This commit is contained in:
webfussel 2024-05-30 08:52:28 +02:00
parent b9e9e2d691
commit 282e2086b0
21 changed files with 217 additions and 258 deletions
Download patch file Download diff file Expand all files Collapse all files

23
components/Button.vue
View file

@ -25,26 +25,3 @@ const actualProps = () => {
}
}
</script>
<style>
.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);
}
}
</style>

2
components/Customers/Customers.vue → components/Customers.vue
View file

@ -1,5 +1,3 @@
<style scoped src="./Customers.css"/>
<template>
<section id="customers" class="Customers content">
<h2>Kunden <span class="highlight">&</span> Projekte.</h2>

115
components/Customers/Customers.css
View file

@ -1,115 +0,0 @@
.Customers {
& .customer-list {
display: flex;
flex-wrap: wrap;
& img {
height: 50px;
&.white {
filter: brightness(0) invert(1);
}
}
}
& .projects-list {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
& > article {
flex-grow: 1;
flex-shrink: 0;
flex-basis: clamp(350px, calc(33% - 3rem), 400px);
height: 350px;
display: grid;
overflow: hidden;
& .skill {
}
& .bg {
padding: 0;
height: 350px;
width: 100%;
& img {
width: 100%;
height: 100%;
object-fit: cover;
}
}
& > * {
grid-column: 1;
grid-row: 1;
}
& > div {
display: flex;
align-items: center;
justify-content: center;
background-color: rgba(0, 0, 0, 0.7);
backdrop-filter: blur(1px);
transition: var(--transition-time);
height: 100%;
text-shadow: 0 0 5px rgba(0, 0, 0, .7);
text-align: center;
padding: 1rem;
& > main {
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
max-height: 6rem;
overflow: hidden;
transition: var(--transition-time);
& .customer {
font-size: 1rem;
color: var(--color-white-transparent);
}
& .title {
margin-top: -1rem;
}
& ul {
gap: 1rem;
justify-content: center;
}
& a {
color: var(--color-orange);
&:hover {
color: var(--color-white);
}
}
}
&:hover {
backdrop-filter: blur(5px);
& > main {
max-height: 25rem;
}
}
}
}
}
}
@media (width <= 780px) {
.Customers {
& .customer-list {
align-items: center;
justify-content: center;
}
}
}

2
components/Footer/Footer.vue → components/Footer.vue
View file

@ -1,5 +1,3 @@
<style scoped src="./Footer.css"/>
<template>
<footer class="Footer flex-col default-gap">
<ul class="sitemap default-gap">

18
components/Footer/Footer.css
View file

@ -1,18 +0,0 @@
.Footer {
align-items: center;
padding: 1rem 15vw;
& a:hover {
color: var(--color-orange);
}
& p {
color: var(--color-white-transparent);
}
& .sitemap {
align-items: center;
justify-content: center;
flex-wrap: wrap;
}
}

1
components/Header/Header.vue → components/Header.vue
View file

@ -1,4 +1,3 @@
<style scoped src="./Header.css"/>
<template>
<div ref="stickyWatch" />
<header ref="header" class="Header">

202
components/Header/Header.css
View file

@ -1,202 +0,0 @@
.stickyWatch {
height: 0;
}
.Header {
padding: 15px calc(15vw - 30px);
width: 100%;
background: transparent;
top: 0;
position: fixed;
z-index: 1000;
& .logo {
fill-rule: evenodd;
clip-rule: evenodd;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 1.5;
& .fussel {
stroke: white;
fill: var(--color-black);
stroke-width: 20px;
}
& .glasses {
fill: none;
stroke: white;
stroke-width: 62px;
}
}
& h1 {
flex: 2;
cursor: default;
display: flex;
align-items: center;
gap: 1rem;
& svg {
--size: 40px;
width: var(--size);
height: var(--size);
}
}
& nav {
flex: 3;
position: relative;
font-weight: normal;
font-size: 1.2rem;
display: flex;
justify-content: space-between;
}
& > .wrapper {
display: flex;
align-items: center;
padding: 15px 30px;
transition: 750ms;
backdrop-filter: blur(10px);
border-radius: 0;
& > label {
display: none;
width: 30px;
height: 25px;
position: relative;
transform: rotate(0deg);
transition: var(--transition-time) ease-in-out;
cursor: pointer;
z-index: 20000;
& > span {
display: block;
position: absolute;
height: 5px;
width: 100%;
background: var(--color-white);
border-radius: 9px;
opacity: 1;
left: 0;
transform: rotate(0deg);
transition: .25s ease-in-out;
&:nth-child(1) {
top: 0;
}
&:nth-child(2), &:nth-child(3) {
top: 9px;
}
&:nth-child(4) {
top: 18px;
}
}
}
& > input[type="checkbox"]:checked + label span:nth-child(1) {
top: 18px;
width: 0;
left: 50%;
}
& > input[type="checkbox"]:checked + label span:nth-child(2) {
transform: rotate(45deg);
}
& > input[type="checkbox"]:checked + label span:nth-child(3) {
transform: rotate(-45deg);
}
& > input[type="checkbox"]:checked + label span:nth-child(4) {
top: 18px;
width: 0;
left: 50%;
}
}
&.sticks > .wrapper {
background: var(--color-black-transparent);
border-radius: 20px;
}
& input[type="checkbox"] {
display: none;
}
& ul {
gap: var(--spacing-standard);
transform: scale(1);
& a {
display: block;
text-align: center;
&:hover {
transform: scale(1.15);
color: var(--color-orange);
& .icon {
filter: invert(50%) sepia(84%) saturate(868%) hue-rotate(1deg) brightness(103%) contrast(100%);
}
}
}
}
nav .icon {
transition: 250ms;
filter: invert(1);
height: 30px;
}
}
@media screen and (width < 1180px) {
.Header {
& > .wrapper.wrapper > label {
display: block;
}
& input[type="checkbox"]:checked ~ nav {
transform: translateX(-15vw);
}
& nav {
background: var(--color-black);
position: absolute;
overflow: hidden;
height: 100vh;
width: 100vw;
top: -15px;
transition: var(--transition-time);
transform: translateX(100%);
color: var(--color-white);
flex-direction: column;
& .socials {
flex-direction: row;
height: max-content;
& img {
height: 75px;
}
}
& ul {
flex-direction: column;
justify-content: center;
height: 100vh;
gap: 8vh;
& li {
padding: 15px var(--spacing-standard);
font-size: 10vw;
}
}
}
}
}

2
components/Intro/Intro.vue → components/Intro.vue
View file

@ -1,5 +1,3 @@
<style scoped src="./Intro.css"/>
<template>
<section id="intro" class="Intro content full default-gap">
<div class="intro-text flex-col default-gap">

58
components/Intro/Intro.css
View file

@ -1,58 +0,0 @@
.Intro {
background-image: radial-gradient(circle at -50vw -50vh, rgba(255,145,0,0.2) 0%, rgba(0,0,0,0) 63%, rgba(0,0,0,0) 100%);
background-repeat: no-repeat;
display: grid;
grid-template-columns: 1fr 1fr;
.intro-img {
width: 750px;
display: flex;
position: absolute;
bottom: 0;
right: 0;
img {
transition: 250ms;
position: relative;
width: 100%;
}
}
.intro-text {
height: 100%;
justify-content: center;
z-index: 1;
.fulltext {
color: var(--color-white);
}
}
}
@media (width <= 430px) {
.Intro {
.intro-img{
width: 430px;
}
}
}
@media (width < 900px) {
.Intro {
grid-template-columns: 1fr;
& .intro-text, & .intro-img {
grid-column-start: 1;
}
& .intro-text,
& h2{
align-items: center;
text-align: center;
}
& .intro-img img {
filter: brightness(.5);
}
}
}

2
components/Person/Person.vue → components/Person.vue
View file

@ -1,5 +1,3 @@
<style scoped src="./Person.css"/>
<template>
<article class="Person flex-col">
<img loading="lazy" width="150" height="150" :src="img" :alt="`Bild von ${name}`" />

41
components/Person/Person.css
View file

@ -1,41 +0,0 @@
.Person {
flex-basis: clamp(350px, calc(33% - 3rem), 500px);
flex-grow: 1;
flex-shrink: 0;
align-items: center;
justify-content: stretch;
gap: 1rem;
& img {
outline: 4px solid var(--color-orange);
border-radius: 50%;
width: 150px;
height: 150px;
object-fit: cover;
}
& span {
font-family: 'Roboto Condensed', sans-serif;
font-weight: bold;
&:not(:last-child):after {
content: " | "
}
}
& p {
text-align: center;
white-space: pre-wrap;
&:first-of-type {
margin-top: -1rem;
}
}
& .flavour {}
& .button {
margin-top: auto;
}
}

2
components/Services/Services.vue → components/Services.vue
View file

@ -1,5 +1,3 @@
<style scoped src="./Services.css"/>
<template>
<section id="services" class="Services content">
<h2>Services.</h2>

72
components/Services/Services.css
View file

@ -1,72 +0,0 @@
.Services {
background-image: radial-gradient(circle at 100vw 100vh, rgba(255,145,0,0.2) 0%, rgba(0,0,0,0) 63%, rgba(0,0,0,0) 100%);
background-color: var(--color-orange-black);
background-repeat: no-repeat;
.service-list {
display: flex;
flex-wrap: wrap;
align-items: stretch;
& article {
flex-grow: 1;
flex-shrink: 0;
flex-basis: clamp(350px, calc(33% - 3rem), 500px);
position: relative;
& .chip {
position: absolute;
right: -1rem;
top: calc(-1rem - 3px);
}
& header {
display: flex;
}
& ul {
gap: 1rem;
& li {
display: flex;
align-items: center;
gap: 1rem;
}
}
& .extra {
margin-top: auto;
}
}
}
.network-list {
width: 100%;
overflow-x: auto;
padding-top: 4px;
& .scroll-container {
display: flex;
padding-bottom: 3rem;
}
}
}
@media (width < 600px) {
.Services {
& .service-list {
width: 80vw;
& article {
flex-basis: 100%;
}
}
& .network-list {
--height: 380px;
& article {
flex-basis: 80vw;
}
}
}
}

2
components/Skills/Skills.vue → components/Skills.vue
View file

@ -1,5 +1,3 @@
<style scoped src="./Skills.css"/>
<template>
<section id="skills" class="Skills content">
<h2>Meine Expertise.</h2>

20
components/Skills/Skills.css
View file

@ -1,20 +0,0 @@
.Skills {
background: var(--color-orange-black);
background-image: radial-gradient(circle at 90vw 0, rgba(255,145,0,0.2) 0%, rgba(0,0,0,0) 63%, rgba(0,0,0,0) 100%);
background-repeat: no-repeat;
& .skill-list {
display: flex;
flex-wrap: wrap;
}
& .tech-list ul {
flex-wrap: wrap;
align-items: center;
justify-content: center;
}
& .bottom {
align-items: center;
}
}

2
components/Technology/Technology.vue → components/Technology.vue
View file

@ -1,5 +1,3 @@
<style scoped src="./Technology.css"/>
<template>
<div class="Technology flex-col" :class="[size]">
<a v-if="link" :href="link" target="_blank" rel="noopener noreferrer">

28
components/Technology/Technology.css
View file

@ -1,28 +0,0 @@
.Technology {
position: relative;
align-items: center;
&.m img {
height: 30px;
}
&.l img {
height: 50px;
}
& span {
scale: 0;
position: absolute;
top: -3rem;
width: max-content;
border: 1px solid var(--color-white);
border-radius: 999px;
background-color: var(--color-black);
padding: .5em 1.5rem;
transition: 150ms;
}
&:hover span {
scale: 1;
}
}