Skip to content

Commit

Permalink
feat: margins (#132)
Browse files Browse the repository at this point in the history 
* feat: suggested styling changes

* fix: margins

* fix: coworker hight
  • Loading branch information
@lundeeell
lundeeell authored Nov 26, 2020
1 parent 2ead9ee commit 1aec6f7
Show file tree
Hide file tree
Showing 12 changed files with 473 additions and 547 deletions.
122 changes: 59 additions & 63 deletions sapper/src/components/Footer.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,69 +5,65 @@
import SocialMedia from './SocialMedia.svelte'
</script>

<div class="bg-grey-cod pt-8 pb-24">
<Layout.Base>
<Layout.Content>
<div class="flex items-start md:items-end flex-col md:flex-row">
<div class="w-2/3 flex flex-col sm:flex-row gap-8">
<div>
<div class="mb-4">
<CityIcon />
</div>
<p class="text-white font-medium tracking-wide">Iteam Stockholm</p>
<p class="text-white font-light text-sm leading-7">
Östermalmsgatan 26A
<br />
114 26 Stockholm
<br />
<a
href="https://goo.gl/maps/cVxFADSToWkbwCjBA"
target="_blank"
class="underline">
Google Maps
</a>
</p>
<p class="text-white font-light text-sm leading-7 mt-3">
<a href="tel:08267090">08-26 70 90</a>
</p>
<p class="text-white font-light text-sm leading-7">
<a class="underline" href="mailto:[email protected]">[email protected]</a>
</p>
</div>
<div class="md:pt-0 sm:px-20">
<div class="mb-4">
<HarborIcon />
</div>
<p class="text-white font-medium tracking-wide">Iteam Göteborg</p>
<p class="text-white font-light text-sm leading-7">
Järntorgsgatan 12-14
<br />
413 01 Göteborg
<br />
<a
href="https://goo.gl/maps/fDzuuDuUSxU6jLGb8"
target="_blank"
class="underline">
Google Maps
</a>
</p>

<p class="text-white font-light text-sm leading-7 mt-3">
<a href="tel:0734029112">073-402 91 12</a>
</p>
<p class="text-white font-light text-sm leading-7">
<a
class="underline"
href="mailto:[email protected]">[email protected]</a>
</p>

<div />
</div>
<Layout.Container background={'bg-grey-cod'}>
<div class="flex items-start md:items-end flex-col md:flex-row text-white">
<div class="w-2/3 flex flex-col sm:flex-row gap-8">
<div>
<div class="mb-4">
<CityIcon />
</div>
<div class="pt-20 md:pt-0 w-auto md:w-1/3 flex justify-end text-white">
<SocialMedia />
<p class="font-medium tracking-wide">Iteam Stockholm</p>
<p class="font-light text-sm leading-7">
Östermalmsgatan 26A
<br />
114 26 Stockholm
<br />
<a
href="https://goo.gl/maps/cVxFADSToWkbwCjBA"
target="_blank"
class="underline">
Google Maps
</a>
</p>
<p class="font-light text-sm leading-7 mt-3">
<a href="tel:08267090">08-26 70 90</a>
</p>
<p class="font-light text-sm leading-7">
<a class="underline" href="mailto:[email protected]">[email protected]</a>
</p>
</div>
<div class="md:pt-0 sm:px-20">
<div class="mb-4">
<HarborIcon />
</div>
<p class="font-medium tracking-wide">Iteam Göteborg</p>
<p class="font-light text-sm leading-7">
Järntorgsgatan 12-14
<br />
413 01 Göteborg
<br />
<a
href="https://goo.gl/maps/fDzuuDuUSxU6jLGb8"
target="_blank"
class="underline">
Google Maps
</a>
</p>

<p class="font-light text-sm leading-7 mt-3">
<a href="tel:0734029112">073-402 91 12</a>
</p>
<p class="font-light text-sm leading-7">
<a
class="underline"
href="mailto:[email protected]">[email protected]</a>
</p>

<div />
</div>
</Layout.Content>
</Layout.Base>
</div>
</div>
<div class="pt-20 md:pt-0 w-auto md:w-1/3 flex justify-end">
<SocialMedia />
</div>
</div>
</Layout.Container>
47 changes: 19 additions & 28 deletions sapper/src/components/contact/Layout.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,32 +11,23 @@
</script>

<Animation.WithScrollFadeIn threshold={0.5}>
<div class="bg-grey-medium">
<Layout.Base>
<Layout.Content>
<div
class="grid grid-cols-1 gap-12 md:grid-cols-2 items-center text-white justify-items-center md:justify-items-end pb-16">
<div class="mb-12 md:mb-0">
<h2
class="text-4xl w-full lg:w-4/5 font-medium tracking-wide mb-10">
{title}
</h2>
<div>
<Typography.ParagraphLg>{text}</Typography.ParagraphLg>
</div>
<div class="mt-10">
<Animation.ButtonHover>
<a class="block" href="/kontakta-oss">
<Buttons.Default width={'w-full md:w-auto'}>
{ctaText}
</Buttons.Default>
</a>
</Animation.ButtonHover>
</div>
</div>
<slot />
</div>
</Layout.Content>
</Layout.Base>
</div>
<Layout.Container background={'bg-grey-medium'}>
<div
class="grid gap-12 md:grid-cols-2 items-center text-white justify-items-center md:justify-items-end">
<div class="grid gap-y-10">
<h2 class="text-4xl w-full lg:w-4/5 font-medium tracking-wide">
{title}
</h2>
<Typography.ParagraphLg>{text}</Typography.ParagraphLg>
<Animation.ButtonHover>
<a class="block" href="/kontakta-oss">
<Buttons.Default width={'w-full md:w-auto'}>
{ctaText}
</Buttons.Default>
</a>
</Animation.ButtonHover>
</div>
<slot />
</div>
</Layout.Container>
</Animation.WithScrollFadeIn>
6 changes: 5 additions & 1 deletion sapper/src/components/layout/Container.svelte
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,7 @@
<div class="px-8 flex justify-between lg:max-w-screen-xl mx-auto">
<script>
export let background = ''
</script>

<div class="iteam-width gap-y-16 py-16 md:py-32 {background} ">
<slot />
</div>
3 changes: 1 addition & 2 deletions sapper/src/components/layout/Post.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@
export let type
</script>

<div
class="post {type} max-w-screen-xl mx-auto pb-10 sm:pb-12 md:pb-16 lg:pb-20 xl:pb-24">
<div class="post {type} max-w-screen-xl mx-auto">
<slot />
</div>
130 changes: 59 additions & 71 deletions sapper/src/routes/GreenBlock.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,84 +7,72 @@
</script>

<Animation.WithScrollFadeIn>
<div class="bg-green bg-opacity-30">
<Layout.Base>
<Layout.Content>
<div class="flex flex-col">
<div class="grid md:grid-cols-2">
<h3
class="text-4xl font-medium mb-6 leading-10 max-w-md lg:max-w-xl">
Våra dedikerade team löser utmaningar tillsammans med er
</h3>
<Typography.ParagraphMd>
Vi utvecklar din tjänst tillsammans med dig. Det blir mycket
bättre så. Vi hjälper dig att fokusera på det som är viktigt och
som skapar värde för dig och dina kunder.
</Typography.ParagraphMd>
</div>
</div>
</Layout.Content>
</Layout.Base>
<Layout.Container background={'bg-green bg-opacity-30'}>
<div class="grid md:grid-cols-2">
<div class="col-start-1">
<h3 class="text-4xl font-medium mb-6 leading-10 max-w-md lg:max-w-xl">
Våra dedikerade team löser utmaningar tillsammans med er
</h3>
<Typography.ParagraphMd>
Vi utvecklar din tjänst tillsammans med dig. Det blir mycket bättre
så. Vi hjälper dig att fokusera på det som är viktigt och som skapar
värde för dig och dina kunder.
</Typography.ParagraphMd>
</div>
</div>
<div class="flex flex-row">
<Layout.Content>
<div class="grid grid-cols-12 grid-rows-6 w-full">
<div
class="grid col-start-1 col-end-6 row-start-2 row-span-full hidden md:block max-w-xl z-50">
<img
class="h-auto"
src="Radu-Amir-working-Lowres.jpg"
alt="illustration" />
</div>

<div class="grid grid-cols-12 grid-rows-6 w-full">
<div
class="grid col-start-1 col-end-6 row-start-2 row-span-full hidden md:block max-w-xl z-50">
<img
class="h-auto"
src="Radu-Amir-working-Lowres.jpg"
alt="illustration" />
</div>
<div
class="grid col-span-full row-span-full md:col-start-5 md:col-end-13 row-start-1 md:row-end-5">
<div
class="grid col-span-full row-span-full md:col-start-5 md:col-end-13 row-start-1 md:row-end-5">
<div
class="flex flex-col bg-grey-dark text-white px-8 md:pl-20 py-12 justify-center">
<div class="md:pl-20">
<div class="md:max-w-3xl">
<h3
class="text-4xl font-medium mb-6 leading-10 max-w-md lg:max-w-xl">
Vi gillar våra kunder
</h3>
class="flex flex-col bg-grey-dark text-white px-8 md:pl-20 py-12 justify-center">
<div class="md:pl-20">
<div class="md:max-w-3xl">
<h3
class="text-4xl font-medium mb-6 leading-10 max-w-md lg:max-w-xl">
Vi gillar våra kunder
</h3>

<Typography.ParagraphMd>
Vi vill bidra till en bättre värld på alla sätt vi kan.
Därför väljer vi uppdrag med omsorg. Det betyder också att
om vi jobbar ihop så tror vi 100% på din tjänst.
</Typography.ParagraphMd>
<div
class="grid grid-cols-3 justify-items-center items-center mt-4 md:w-3/5">
{#each customers as customer}
<img
class="h-auto"
src="{customer}.png"
alt="customer {customer}" />
{/each}
</div>
<Typography.ParagraphMd>
Vi vill bidra till en bättre värld på alla sätt vi kan. Därför
väljer vi uppdrag med omsorg. Det betyder också att om vi
jobbar ihop så tror vi 100% på din tjänst.
</Typography.ParagraphMd>
<div
class="grid grid-cols-3 justify-items-center items-center mt-4 md:w-3/5">
{#each customers as customer}
<img
class="h-auto"
src="{customer}.png"
alt="customer {customer}" />
{/each}
</div>
</div>
</div>
</div>
</div>
</Layout.Content>
</div>
</div>
<Layout.Base>
<Layout.Content>
<div class="grid md:grid-cols-2">
<div class="col-start-2">
<h3
class="text-4xl font-medium mb-6 leading-10 max-w-md lg:max-w-xl">
Långsiktigt engagemang
</h3>
<Typography.ParagraphMd>
Med ett långsiktigt engagemang hjälper vi er att navigera i den
digitala världen. Vi omvandlar visioner till verklighet, utmanar
föråldrade metoder och tillsammans utvecklar vi digitala tjänster
som era kunder älskar att använda.
</Typography.ParagraphMd>
</div>
</div>
</Layout.Content>
</Layout.Base>
</div>

<div class="grid md:grid-cols-2">
<div class="col-start-2">
<h3 class="text-4xl font-medium mb-6 leading-10 max-w-md lg:max-w-xl">
Långsiktigt engagemang
</h3>
<Typography.ParagraphMd>
Med ett långsiktigt engagemang hjälper vi er att navigera i den
digitala världen. Vi omvandlar visioner till verklighet, utmanar
föråldrade metoder och tillsammans utvecklar vi digitala tjänster som
era kunder älskar att använda.
</Typography.ParagraphMd>
</div>
</div>
</Layout.Container>
</Animation.WithScrollFadeIn>
Loading

0 comments on commit 1aec6f7

Please sign in to comment.