ADD: Responsiveness
This commit is contained in:
parent
8395825aea
commit
236aa01d6e
7 changed files with 106 additions and 43 deletions
17
Globals.css
17
Globals.css
|
|
@ -105,6 +105,7 @@ body {
|
|||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
text-align: left;
|
||||
font-family: 'Roboto Condensed', sans-serif;
|
||||
}
|
||||
|
||||
|
|
@ -152,10 +153,6 @@ span.chip {
|
|||
position: relative;
|
||||
z-index: 100;
|
||||
padding: 150px 15vw;
|
||||
|
||||
& h2 {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
.full {
|
||||
|
|
@ -202,3 +199,15 @@ span.chip {
|
|||
.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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,7 +9,6 @@
|
|||
box-shadow: 0 0 0 0 var(--color-orange);
|
||||
border-radius: 99999px;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0 0 0 6px var(--color-orange);
|
||||
|
|
|
|||
|
|
@ -107,3 +107,12 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (width <= 780px) {
|
||||
.Customers {
|
||||
& .customer-list {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
31
components/Person/Person.css
Normal file
31
components/Person/Person.css
Normal file
|
|
@ -0,0 +1,31 @@
|
|||
.Person {
|
||||
flex: 1 1;
|
||||
flex-basis: 300px;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
|
||||
& img {
|
||||
border: 4px solid var(--color-orange);
|
||||
border-radius: 50%;
|
||||
width: 150px;
|
||||
}
|
||||
|
||||
& 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
25
components/Person/Person.vue
Normal file
25
components/Person/Person.vue
Normal file
|
|
@ -0,0 +1,25 @@
|
|||
<style scoped src="./Person.css"/>
|
||||
|
||||
<template>
|
||||
<article class="Person flex-col">
|
||||
<img :src="img" :alt="`Bild von ${name}`" />
|
||||
<h3>{{name}}</h3>
|
||||
<p>
|
||||
<span v-for="tag in tags">{{tag}}</span>
|
||||
</p>
|
||||
<p>{{flavour}}</p>
|
||||
<Button :href="link" target="_blank" rel="noreferrer noopener" label="Zur Homepage" />
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
type Props = {
|
||||
img: string
|
||||
name: string
|
||||
tags: string[]
|
||||
flavour: string
|
||||
link: string
|
||||
}
|
||||
|
||||
defineProps<Props>()
|
||||
</script>
|
||||
|
|
@ -11,7 +11,7 @@
|
|||
& article {
|
||||
flex-grow: 1;
|
||||
flex-shrink: 0;
|
||||
flex-basis: clamp(400px, calc(33% - 3rem), 500px);
|
||||
flex-basis: clamp(350px, calc(33% - 3rem), 500px);
|
||||
position: relative;
|
||||
|
||||
& .chip {
|
||||
|
|
@ -43,33 +43,24 @@
|
|||
|
||||
.network-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
}
|
||||
|
||||
@media (width < 600px) {
|
||||
.Services {
|
||||
& .service-list {
|
||||
width: 80vw;
|
||||
|
||||
& article {
|
||||
width: clamp(400px, calc(33% - 3rem), 500px);
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
|
||||
& img {
|
||||
border: 4px solid var(--color-orange);
|
||||
border-radius: 50%;
|
||||
width: 150px;
|
||||
}
|
||||
|
||||
& main {
|
||||
margin-top: -1rem;
|
||||
}
|
||||
|
||||
& span {
|
||||
font-family: 'Roboto Condensed', sans-serif;
|
||||
font-weight: bold;
|
||||
|
||||
&:not(:last-child):after {
|
||||
content: " | "
|
||||
flex-basis: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
& p {
|
||||
text-align: center;
|
||||
& .network-list {
|
||||
--height: 380px;
|
||||
& article {
|
||||
flex-basis: 80vw;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -25,22 +25,22 @@
|
|||
</div>
|
||||
<h3 class="margin-top-big">Mein Netzwerk</h3>
|
||||
<p class="margin-top">Doch auch wenn ich mal voll ausgelastet bin - keine Sorge! Mein <span class="highlight">Netzwerk an Profis</span> kann dir sicher auch weiterhelfen!</p>
|
||||
<div class="network-list default-gap margin-top">
|
||||
<article v-for="person in network" class="flex-col">
|
||||
<img :src="person.img" :alt="`Bild von ${person.name}`" />
|
||||
<h3>{{person.name}}</h3>
|
||||
<main>
|
||||
<span v-for="tag in person.tags">{{tag}}</span>
|
||||
</main>
|
||||
<p>{{person.flavour}}</p>
|
||||
<Button :href="person.link" target="_blank" rel="noreferrer noopener" label="Zur Homepage" />
|
||||
</article>
|
||||
<div class="network-list default-gap margin-top" :style="{'--width': `${width}px`, '--children': network.length }">
|
||||
<Person ref="persons" v-for="person in network" v-bind="person" />
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import check from 'iconoir/icons/regular/double-check.svg'
|
||||
import type { Person } from '#components'
|
||||
|
||||
const width = ref(0)
|
||||
const persons = ref<InstanceType<typeof Person>[]>([])
|
||||
|
||||
onMounted(() => {
|
||||
width.value = persons.value[0].$el.getBoundingClientRect().width
|
||||
})
|
||||
|
||||
const services = [
|
||||
{
|
||||
|
|
@ -48,7 +48,7 @@ const services = [
|
|||
price: '99 € / Einmalig',
|
||||
availability: 'Frei',
|
||||
smallClaim: 'Du hast einen Bug, aber weißt nicht woher? Kein Ding.',
|
||||
button: 'Jetzt untersuchen lassen',
|
||||
button: 'Jetzt untersuchen',
|
||||
link: 'https://tidycal.com/webfussel/bug-research',
|
||||
list: [
|
||||
'Untersuchung des Source Code',
|
||||
|
|
@ -65,7 +65,6 @@ const services = [
|
|||
link: 'https://tidycal.com/webfussel/project-booking',
|
||||
list: [
|
||||
'Aufstellung der Anforderungen',
|
||||
'Untersuchung geeigneter Technologien',
|
||||
'Regelmäßige Projektupdates',
|
||||
'Fixe Kosten und Featuresets',
|
||||
'Nur 50% Projektpreis als Anzahlung'
|
||||
|
|
@ -93,13 +92,13 @@ const network = [
|
|||
img: '/img/network/robert.jpg',
|
||||
tags: ['Digitalberatung', 'Webentwicklung', 'eCommerce'],
|
||||
flavour: 'Website, SEO und Conversions. Auf einen Klick.',
|
||||
link: 'https://roberjanus.de/webertoire',
|
||||
link: 'https://robertjanus.de/webertoire',
|
||||
}, {
|
||||
name: 'Matthias Lehmann',
|
||||
img: '/img/network/matthias.jpg',
|
||||
tags: ['Onlineportale für Patienten', 'Kunden', 'Mitarbeiter'],
|
||||
flavour: 'Software die macht, was DU willst!',
|
||||
link: 'https://mind-deploy.de',
|
||||
}
|
||||
},
|
||||
]
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue