Skip to content

Commit 1aec6f7

Browse files
lundeeelllundeeell
authored
feat: margins (#132)
* feat: suggested styling changes * fix: margins * fix: coworker hight
1 parent 2ead9ee commit 1aec6f7

File tree

12 files changed

+473
-547
lines changed

12 files changed

+473
-547
lines changed

‎sapper/src/components/Footer.svelte

+59-63
Original file line numberDiff line numberDiff line change
@@ -5,69 +5,65 @@
55
import SocialMedia from './SocialMedia.svelte'
66
</script>
77

8-
<div class="bg-grey-cod pt-8 pb-24">
9-
<Layout.Base>
10-
<Layout.Content>
11-
<div class="flex items-start md:items-end flex-col md:flex-row">
12-
<div class="w-2/3 flex flex-col sm:flex-row gap-8">
13-
<div>
14-
<div class="mb-4">
15-
<CityIcon />
16-
</div>
17-
<p class="text-white font-medium tracking-wide">Iteam Stockholm</p>
18-
<p class="text-white font-light text-sm leading-7">
19-
Östermalmsgatan 26A
20-
<br />
21-
114 26 Stockholm
22-
<br />
23-
<a
24-
href="https://goo.gl/maps/cVxFADSToWkbwCjBA"
25-
target="_blank"
26-
class="underline">
27-
Google Maps
28-
</a>
29-
</p>
30-
<p class="text-white font-light text-sm leading-7 mt-3">
31-
<a href="tel:08267090">08-26 70 90</a>
32-
</p>
33-
<p class="text-white font-light text-sm leading-7">
34-
<a class="underline" href="mailto:[email protected]">[email protected]</a>
35-
</p>
36-
</div>
37-
<div class="md:pt-0 sm:px-20">
38-
<div class="mb-4">
39-
<HarborIcon />
40-
</div>
41-
<p class="text-white font-medium tracking-wide">Iteam Göteborg</p>
42-
<p class="text-white font-light text-sm leading-7">
43-
Järntorgsgatan 12-14
44-
<br />
45-
413 01 Göteborg
46-
<br />
47-
<a
48-
href="https://goo.gl/maps/fDzuuDuUSxU6jLGb8"
49-
target="_blank"
50-
class="underline">
51-
Google Maps
52-
</a>
53-
</p>
54-
55-
<p class="text-white font-light text-sm leading-7 mt-3">
56-
<a href="tel:0734029112">073-402 91 12</a>
57-
</p>
58-
<p class="text-white font-light text-sm leading-7">
59-
<a
60-
class="underline"
61-
href="mailto:[email protected]">[email protected]</a>
62-
</p>
63-
64-
<div />
65-
</div>
8+
<Layout.Container background={'bg-grey-cod'}>
9+
<div class="flex items-start md:items-end flex-col md:flex-row text-white">
10+
<div class="w-2/3 flex flex-col sm:flex-row gap-8">
11+
<div>
12+
<div class="mb-4">
13+
<CityIcon />
6614
</div>
67-
<div class="pt-20 md:pt-0 w-auto md:w-1/3 flex justify-end text-white">
68-
<SocialMedia />
15+
<p class="font-medium tracking-wide">Iteam Stockholm</p>
16+
<p class="font-light text-sm leading-7">
17+
Östermalmsgatan 26A
18+
<br />
19+
114 26 Stockholm
20+
<br />
21+
<a
22+
href="https://goo.gl/maps/cVxFADSToWkbwCjBA"
23+
target="_blank"
24+
class="underline">
25+
Google Maps
26+
</a>
27+
</p>
28+
<p class="font-light text-sm leading-7 mt-3">
29+
<a href="tel:08267090">08-26 70 90</a>
30+
</p>
31+
<p class="font-light text-sm leading-7">
32+
<a class="underline" href="mailto:[email protected]">[email protected]</a>
33+
</p>
34+
</div>
35+
<div class="md:pt-0 sm:px-20">
36+
<div class="mb-4">
37+
<HarborIcon />
6938
</div>
39+
<p class="font-medium tracking-wide">Iteam Göteborg</p>
40+
<p class="font-light text-sm leading-7">
41+
Järntorgsgatan 12-14
42+
<br />
43+
413 01 Göteborg
44+
<br />
45+
<a
46+
href="https://goo.gl/maps/fDzuuDuUSxU6jLGb8"
47+
target="_blank"
48+
class="underline">
49+
Google Maps
50+
</a>
51+
</p>
52+
53+
<p class="font-light text-sm leading-7 mt-3">
54+
<a href="tel:0734029112">073-402 91 12</a>
55+
</p>
56+
<p class="font-light text-sm leading-7">
57+
<a
58+
class="underline"
59+
href="mailto:[email protected]">[email protected]</a>
60+
</p>
61+
62+
<div />
7063
</div>
71-
</Layout.Content>
72-
</Layout.Base>
73-
</div>
64+
</div>
65+
<div class="pt-20 md:pt-0 w-auto md:w-1/3 flex justify-end">
66+
<SocialMedia />
67+
</div>
68+
</div>
69+
</Layout.Container>

‎sapper/src/components/contact/Layout.svelte

+19-28
Original file line numberDiff line numberDiff line change
@@ -11,32 +11,23 @@
1111
</script>
1212

1313
<Animation.WithScrollFadeIn threshold={0.5}>
14-
<div class="bg-grey-medium">
15-
<Layout.Base>
16-
<Layout.Content>
17-
<div
18-
class="grid grid-cols-1 gap-12 md:grid-cols-2 items-center text-white justify-items-center md:justify-items-end pb-16">
19-
<div class="mb-12 md:mb-0">
20-
<h2
21-
class="text-4xl w-full lg:w-4/5 font-medium tracking-wide mb-10">
22-
{title}
23-
</h2>
24-
<div>
25-
<Typography.ParagraphLg>{text}</Typography.ParagraphLg>
26-
</div>
27-
<div class="mt-10">
28-
<Animation.ButtonHover>
29-
<a class="block" href="/kontakta-oss">
30-
<Buttons.Default width={'w-full md:w-auto'}>
31-
{ctaText}
32-
</Buttons.Default>
33-
</a>
34-
</Animation.ButtonHover>
35-
</div>
36-
</div>
37-
<slot />
38-
</div>
39-
</Layout.Content>
40-
</Layout.Base>
41-
</div>
14+
<Layout.Container background={'bg-grey-medium'}>
15+
<div
16+
class="grid gap-12 md:grid-cols-2 items-center text-white justify-items-center md:justify-items-end">
17+
<div class="grid gap-y-10">
18+
<h2 class="text-4xl w-full lg:w-4/5 font-medium tracking-wide">
19+
{title}
20+
</h2>
21+
<Typography.ParagraphLg>{text}</Typography.ParagraphLg>
22+
<Animation.ButtonHover>
23+
<a class="block" href="/kontakta-oss">
24+
<Buttons.Default width={'w-full md:w-auto'}>
25+
{ctaText}
26+
</Buttons.Default>
27+
</a>
28+
</Animation.ButtonHover>
29+
</div>
30+
<slot />
31+
</div>
32+
</Layout.Container>
4233
</Animation.WithScrollFadeIn>

‎sapper/src/components/layout/Container.svelte

+5-1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
1-
<div class="px-8 flex justify-between lg:max-w-screen-xl mx-auto">
1+
<script>
2+
export let background = ''
3+
</script>
4+
5+
<div class="iteam-width gap-y-16 py-16 md:py-32 {background} ">
26
<slot />
37
</div>

‎sapper/src/components/layout/Post.svelte

+1-2
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@
22
export let type
33
</script>
44

5-
<div
6-
class="post {type} max-w-screen-xl mx-auto pb-10 sm:pb-12 md:pb-16 lg:pb-20 xl:pb-24">
5+
<div class="post {type} max-w-screen-xl mx-auto">
76
<slot />
87
</div>

‎sapper/src/routes/GreenBlock.svelte

+59-71
Original file line numberDiff line numberDiff line change
@@ -7,84 +7,72 @@
77
</script>
88

99
<Animation.WithScrollFadeIn>
10-
<div class="bg-green bg-opacity-30">
11-
<Layout.Base>
12-
<Layout.Content>
13-
<div class="flex flex-col">
14-
<div class="grid md:grid-cols-2">
15-
<h3
16-
class="text-4xl font-medium mb-6 leading-10 max-w-md lg:max-w-xl">
17-
Våra dedikerade team löser utmaningar tillsammans med er
18-
</h3>
19-
<Typography.ParagraphMd>
20-
Vi utvecklar din tjänst tillsammans med dig. Det blir mycket
21-
bättre så. Vi hjälper dig att fokusera på det som är viktigt och
22-
som skapar värde för dig och dina kunder.
23-
</Typography.ParagraphMd>
24-
</div>
25-
</div>
26-
</Layout.Content>
27-
</Layout.Base>
10+
<Layout.Container background={'bg-green bg-opacity-30'}>
11+
<div class="grid md:grid-cols-2">
12+
<div class="col-start-1">
13+
<h3 class="text-4xl font-medium mb-6 leading-10 max-w-md lg:max-w-xl">
14+
Våra dedikerade team löser utmaningar tillsammans med er
15+
</h3>
16+
<Typography.ParagraphMd>
17+
Vi utvecklar din tjänst tillsammans med dig. Det blir mycket bättre
18+
så. Vi hjälper dig att fokusera på det som är viktigt och som skapar
19+
värde för dig och dina kunder.
20+
</Typography.ParagraphMd>
21+
</div>
22+
</div>
2823
<div class="flex flex-row">
29-
<Layout.Content>
30-
<div class="grid grid-cols-12 grid-rows-6 w-full">
31-
<div
32-
class="grid col-start-1 col-end-6 row-start-2 row-span-full hidden md:block max-w-xl z-50">
33-
<img
34-
class="h-auto"
35-
src="Radu-Amir-working-Lowres.jpg"
36-
alt="illustration" />
37-
</div>
38-
24+
<div class="grid grid-cols-12 grid-rows-6 w-full">
25+
<div
26+
class="grid col-start-1 col-end-6 row-start-2 row-span-full hidden md:block max-w-xl z-50">
27+
<img
28+
class="h-auto"
29+
src="Radu-Amir-working-Lowres.jpg"
30+
alt="illustration" />
31+
</div>
32+
<div
33+
class="grid col-span-full row-span-full md:col-start-5 md:col-end-13 row-start-1 md:row-end-5">
3934
<div
40-
class="grid col-span-full row-span-full md:col-start-5 md:col-end-13 row-start-1 md:row-end-5">
41-
<div
42-
class="flex flex-col bg-grey-dark text-white px-8 md:pl-20 py-12 justify-center">
43-
<div class="md:pl-20">
44-
<div class="md:max-w-3xl">
45-
<h3
46-
class="text-4xl font-medium mb-6 leading-10 max-w-md lg:max-w-xl">
47-
Vi gillar våra kunder
48-
</h3>
35+
class="flex flex-col bg-grey-dark text-white px-8 md:pl-20 py-12 justify-center">
36+
<div class="md:pl-20">
37+
<div class="md:max-w-3xl">
38+
<h3
39+
class="text-4xl font-medium mb-6 leading-10 max-w-md lg:max-w-xl">
40+
Vi gillar våra kunder
41+
</h3>
4942

50-
<Typography.ParagraphMd>
51-
Vi vill bidra till en bättre värld på alla sätt vi kan.
52-
Därför väljer vi uppdrag med omsorg. Det betyder också att
53-
om vi jobbar ihop så tror vi 100% på din tjänst.
54-
</Typography.ParagraphMd>
55-
<div
56-
class="grid grid-cols-3 justify-items-center items-center mt-4 md:w-3/5">
57-
{#each customers as customer}
58-
<img
59-
class="h-auto"
60-
src="{customer}.png"
61-
alt="customer {customer}" />
62-
{/each}
63-
</div>
43+
<Typography.ParagraphMd>
44+
Vi vill bidra till en bättre värld på alla sätt vi kan. Därför
45+
väljer vi uppdrag med omsorg. Det betyder också att om vi
46+
jobbar ihop så tror vi 100% på din tjänst.
47+
</Typography.ParagraphMd>
48+
<div
49+
class="grid grid-cols-3 justify-items-center items-center mt-4 md:w-3/5">
50+
{#each customers as customer}
51+
<img
52+
class="h-auto"
53+
src="{customer}.png"
54+
alt="customer {customer}" />
55+
{/each}
6456
</div>
6557
</div>
6658
</div>
6759
</div>
6860
</div>
69-
</Layout.Content>
61+
</div>
7062
</div>
71-
<Layout.Base>
72-
<Layout.Content>
73-
<div class="grid md:grid-cols-2">
74-
<div class="col-start-2">
75-
<h3
76-
class="text-4xl font-medium mb-6 leading-10 max-w-md lg:max-w-xl">
77-
Långsiktigt engagemang
78-
</h3>
79-
<Typography.ParagraphMd>
80-
Med ett långsiktigt engagemang hjälper vi er att navigera i den
81-
digitala världen. Vi omvandlar visioner till verklighet, utmanar
82-
föråldrade metoder och tillsammans utvecklar vi digitala tjänster
83-
som era kunder älskar att använda.
84-
</Typography.ParagraphMd>
85-
</div>
86-
</div>
87-
</Layout.Content>
88-
</Layout.Base>
89-
</div>
63+
64+
<div class="grid md:grid-cols-2">
65+
<div class="col-start-2">
66+
<h3 class="text-4xl font-medium mb-6 leading-10 max-w-md lg:max-w-xl">
67+
Långsiktigt engagemang
68+
</h3>
69+
<Typography.ParagraphMd>
70+
Med ett långsiktigt engagemang hjälper vi er att navigera i den
71+
digitala världen. Vi omvandlar visioner till verklighet, utmanar
72+
föråldrade metoder och tillsammans utvecklar vi digitala tjänster som
73+
era kunder älskar att använda.
74+
</Typography.ParagraphMd>
75+
</div>
76+
</div>
77+
</Layout.Container>
9078
</Animation.WithScrollFadeIn>

0 commit comments

Comments
 (0)