From 042440188e3656176a43cf050cdb82ea47f93389 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fe=CC=81lix=20Pe=CC=81ault?= Date: Wed, 26 Feb 2020 15:52:13 +0100 Subject: [PATCH] Add a credit page and make style reusable --- src/atoms/TitleSite.svelte | 19 +++++ src/molecules/Footer.svelte | 25 ++++--- src/routes/_layout.svelte | 2 + src/routes/choose.svelte | 36 +++------- src/routes/credits.svelte | 71 +++++++++++++++++++ src/style/_base.scss | 37 ++++++++-- src/style/layouts/_explore.scss | 13 ++++ src/style/molecules/_footer.scss | 50 +++++++++---- src/style/pages/{_explore.scss => _page.scss} | 26 ++++++- src/style/style.scss | 5 +- 10 files changed, 225 insertions(+), 59 deletions(-) create mode 100644 src/atoms/TitleSite.svelte create mode 100644 src/routes/credits.svelte create mode 100644 src/style/layouts/_explore.scss rename src/style/pages/{_explore.scss => _page.scss} (65%) diff --git a/src/atoms/TitleSite.svelte b/src/atoms/TitleSite.svelte new file mode 100644 index 0000000..7ccd076 --- /dev/null +++ b/src/atoms/TitleSite.svelte @@ -0,0 +1,19 @@ + + +
+
+
+ {@html fn.lettersToSpan('Houses')} +
+
+ + of the + +
+
+ {@html fn.lettersToSpan('World')} +
+
+
diff --git a/src/molecules/Footer.svelte b/src/molecules/Footer.svelte index ffec8a4..768ff40 100644 --- a/src/molecules/Footer.svelte +++ b/src/molecules/Footer.svelte @@ -12,19 +12,24 @@ -
-
- - Instagram - Instagram - -
-
+
-
+ + diff --git a/src/routes/_layout.svelte b/src/routes/_layout.svelte index 02aae49..38e9ad5 100644 --- a/src/routes/_layout.svelte +++ b/src/routes/_layout.svelte @@ -12,6 +12,8 @@ explore_globe explore_list instagram + credits_text + credits_list } } continents { diff --git a/src/routes/choose.svelte b/src/routes/choose.svelte index 40d7630..0a9b88e 100644 --- a/src/routes/choose.svelte +++ b/src/routes/choose.svelte @@ -1,18 +1,21 @@ + + + Houses Of - Credits + + +
+
+
+ + + + + +
+ +
+

A little page to thank all the nice people who helped building with this humble project

+
+ +
+ {#each credits as category} +
+

{category.name}

+ {#each category.credits as person} +
+
+ {#if person.url} + + {person.name} + + {:else} + {person.name} + {/if} +
+
{person.role}
+
+ {/each} +
+ {/each} +
+
+ +
diff --git a/src/style/_base.scss b/src/style/_base.scss index 04cc155..ef483ed 100644 --- a/src/style/_base.scss +++ b/src/style/_base.scss @@ -6,6 +6,7 @@ html { body { @include font-smooth; background: $color-primary; + color: #fff; cursor: default; overflow-x: hidden; } @@ -67,6 +68,15 @@ button { } } + +// Title: Category +.title-category { + font-family: $font-serif; + font-size: rem(28px); + line-height: 1; + color: $color-secondary; +} + // Title: Locations .title-location { font-family: $font-serif; @@ -150,25 +160,40 @@ button { /* Text Styles ========================================================================== */ .style-location { + font-family: $font-serif; + font-size: rem(24px); + color: #fff; + line-height: 1; text-align: center; + a { + color: #fff; + text-decoration: none; + + &:hover { + text-decoration: underline; + } + } + + @include breakpoint (sm) { + font-size: rem(28px); + } + .street { margin-bottom: 8px; - font-family: $font-serif; - font-size: rem(24px); - - @include breakpoint (sm) { - font-size: rem(28px); - } } } .style-caps { + font-family: $font-sans; font-size: rem(14px); color: $color-tertiary; text-transform: uppercase; letter-spacing: 1px; } +.style-caps--transparent { + color: rgba($color-tertiary, 0.5); +} .style-description { color: $color-tertiary; diff --git a/src/style/layouts/_explore.scss b/src/style/layouts/_explore.scss new file mode 100644 index 0000000..b27aca7 --- /dev/null +++ b/src/style/layouts/_explore.scss @@ -0,0 +1,13 @@ +.explore { + // Description + &__description { + max-width: 312px; + margin: 0 auto; + margin-bottom: 72px; + + @include breakpoint (sm) { + max-width: 472px; + margin-bottom: 120px; + } + } +} diff --git a/src/style/molecules/_footer.scss b/src/style/molecules/_footer.scss index a4470f3..ba9cc7f 100644 --- a/src/style/molecules/_footer.scss +++ b/src/style/molecules/_footer.scss @@ -33,36 +33,56 @@ // Right part &__right { font-size: 14px; + text-align: center; @include breakpoint (sm) { display: flex; - align-items: center; + align-items: baseline; + } + + li { + display: block; + text-align: center; + + & > ul { + display: flex; + justify-content: center; + margin-bottom: 32px; + + @include breakpoint (sm) { + margin-bottom: 0; + margin-right: 24px; + } + + li { + margin: 0 20px; + } + } + } + a { + text-decoration: none; + color: #fff; + + img { + margin-right: 16px; + } } // Instagram .instagram { - margin-bottom: 32px; - - @include breakpoint (sm) { - margin: 0 40px 0 0; - } - a { - display: flex; + display: inline-flex; align-items: center; justify-content: center; - text-decoration: none; - color: #fff; - - span { - margin-left: 16px; - } + } + img { + display: inline-block; } } // Collective .cetrucflotte { - display: flex; + display: inline-flex; align-items: center; justify-content: center; diff --git a/src/style/pages/_explore.scss b/src/style/pages/_page.scss similarity index 65% rename from src/style/pages/_explore.scss rename to src/style/pages/_page.scss index 81974c5..7814977 100644 --- a/src/style/pages/_explore.scss +++ b/src/style/pages/_page.scss @@ -1,5 +1,4 @@ -.explore { - background-color: $color-primary; +.page { overflow-x: hidden; // Top part @@ -40,4 +39,27 @@ margin-bottom: 120px; } } + + // List + &__list { + // Category + &--category { + margin-bottom: 96px; + text-align: center; + + &:last-child { + margin-bottom: 0; + } + + h2 { + margin-bottom: 56px; + } + dl { + margin-bottom: 40px; + } + dt { + margin-bottom: 8px; + } + } + } } diff --git a/src/style/style.scss b/src/style/style.scss index 77f6755..4bdb912 100644 --- a/src/style/style.scss +++ b/src/style/style.scss @@ -32,11 +32,14 @@ @import "organisms/carousel"; @import "organisms/photos"; +// Layouts +@import "layouts/explore"; + // Pages +@import "pages/page"; @import "pages/homepage"; @import "pages/viewer"; @import "pages/place"; -@import "pages/explore"; // Animations @import "animations";