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 {
|
h1, h2, h3, h4, h5, h6 {
|
||||||
|
text-align: left;
|
||||||
font-family: 'Roboto Condensed', sans-serif;
|
font-family: 'Roboto Condensed', sans-serif;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -152,10 +153,6 @@ span.chip {
|
||||||
position: relative;
|
position: relative;
|
||||||
z-index: 100;
|
z-index: 100;
|
||||||
padding: 150px 15vw;
|
padding: 150px 15vw;
|
||||||
|
|
||||||
& h2 {
|
|
||||||
text-align: left;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.full {
|
.full {
|
||||||
|
@ -202,3 +199,15 @@ span.chip {
|
||||||
.z-5 {
|
.z-5 {
|
||||||
box-shadow: 0 19px 38px rgba(0, 0, 0, 0.30), 0 15px 12px rgba(0, 0, 0, 0.22);
|
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);
|
box-shadow: 0 0 0 0 var(--color-orange);
|
||||||
border-radius: 99999px;
|
border-radius: 99999px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
white-space: nowrap;
|
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
box-shadow: 0 0 0 6px var(--color-orange);
|
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 {
|
& article {
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
flex-basis: clamp(400px, calc(33% - 3rem), 500px);
|
flex-basis: clamp(350px, calc(33% - 3rem), 500px);
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
& .chip {
|
& .chip {
|
||||||
|
@ -43,33 +43,24 @@
|
||||||
|
|
||||||
.network-list {
|
.network-list {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (width < 600px) {
|
||||||
|
.Services {
|
||||||
|
& .service-list {
|
||||||
|
width: 80vw;
|
||||||
|
|
||||||
& article {
|
& article {
|
||||||
width: clamp(400px, calc(33% - 3rem), 500px);
|
flex-basis: 100%;
|
||||||
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: " | "
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
& p {
|
& .network-list {
|
||||||
text-align: center;
|
--height: 380px;
|
||||||
|
& article {
|
||||||
|
flex-basis: 80vw;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -25,22 +25,22 @@
|
||||||
</div>
|
</div>
|
||||||
<h3 class="margin-top-big">Mein Netzwerk</h3>
|
<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>
|
<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">
|
<div class="network-list default-gap margin-top" :style="{'--width': `${width}px`, '--children': network.length }">
|
||||||
<article v-for="person in network" class="flex-col">
|
<Person ref="persons" v-for="person in network" v-bind="person" />
|
||||||
<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>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import check from 'iconoir/icons/regular/double-check.svg'
|
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 = [
|
const services = [
|
||||||
{
|
{
|
||||||
|
@ -48,7 +48,7 @@ const services = [
|
||||||
price: '99 € / Einmalig',
|
price: '99 € / Einmalig',
|
||||||
availability: 'Frei',
|
availability: 'Frei',
|
||||||
smallClaim: 'Du hast einen Bug, aber weißt nicht woher? Kein Ding.',
|
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',
|
link: 'https://tidycal.com/webfussel/bug-research',
|
||||||
list: [
|
list: [
|
||||||
'Untersuchung des Source Code',
|
'Untersuchung des Source Code',
|
||||||
|
@ -65,7 +65,6 @@ const services = [
|
||||||
link: 'https://tidycal.com/webfussel/project-booking',
|
link: 'https://tidycal.com/webfussel/project-booking',
|
||||||
list: [
|
list: [
|
||||||
'Aufstellung der Anforderungen',
|
'Aufstellung der Anforderungen',
|
||||||
'Untersuchung geeigneter Technologien',
|
|
||||||
'Regelmäßige Projektupdates',
|
'Regelmäßige Projektupdates',
|
||||||
'Fixe Kosten und Featuresets',
|
'Fixe Kosten und Featuresets',
|
||||||
'Nur 50% Projektpreis als Anzahlung'
|
'Nur 50% Projektpreis als Anzahlung'
|
||||||
|
@ -93,13 +92,13 @@ const network = [
|
||||||
img: '/img/network/robert.jpg',
|
img: '/img/network/robert.jpg',
|
||||||
tags: ['Digitalberatung', 'Webentwicklung', 'eCommerce'],
|
tags: ['Digitalberatung', 'Webentwicklung', 'eCommerce'],
|
||||||
flavour: 'Website, SEO und Conversions. Auf einen Klick.',
|
flavour: 'Website, SEO und Conversions. Auf einen Klick.',
|
||||||
link: 'https://roberjanus.de/webertoire',
|
link: 'https://robertjanus.de/webertoire',
|
||||||
}, {
|
}, {
|
||||||
name: 'Matthias Lehmann',
|
name: 'Matthias Lehmann',
|
||||||
img: '/img/network/matthias.jpg',
|
img: '/img/network/matthias.jpg',
|
||||||
tags: ['Onlineportale für Patienten', 'Kunden', 'Mitarbeiter'],
|
tags: ['Onlineportale für Patienten', 'Kunden', 'Mitarbeiter'],
|
||||||
flavour: 'Software die macht, was DU willst!',
|
flavour: 'Software die macht, was DU willst!',
|
||||||
link: 'https://mind-deploy.de',
|
link: 'https://mind-deploy.de',
|
||||||
}
|
},
|
||||||
]
|
]
|
||||||
</script>
|
</script>
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue