From bd89e28e155090468f2b3fdb002e59afd25cb1af Mon Sep 17 00:00:00 2001 From: Shelby Kay Date: Mon, 27 Sep 2021 23:23:16 +0200 Subject: [PATCH] Create homepage Photo-card layout, button, typography --- src/components/atoms/Button.svelte | 11 +- src/components/molecules/PhotoCard.svelte | 10 ++ src/routes/index.svelte | 57 +++++++++- src/style/_typography.scss | 24 ++++ src/style/_variables.scss | 1 + src/style/atoms/_button.scss | 18 +++ src/style/molecules/_photo-card.scss | 15 +++ src/style/pages/_homepage.scss | 132 ++++++++++++++++++++++ src/style/style.scss | 7 +- static/images/icons/globe.svg | 3 + 10 files changed, 269 insertions(+), 9 deletions(-) create mode 100644 src/components/molecules/PhotoCard.svelte create mode 100644 src/style/atoms/_button.scss create mode 100644 src/style/molecules/_photo-card.scss create mode 100644 src/style/pages/_homepage.scss create mode 100644 static/images/icons/globe.svg diff --git a/src/components/atoms/Button.svelte b/src/components/atoms/Button.svelte index 215464f..30f6cb0 100644 --- a/src/components/atoms/Button.svelte +++ b/src/components/atoms/Button.svelte @@ -1,10 +1,17 @@ {#if tag === 'button'} - +{:else if tag === 'a'} + + + {text} + {/if} \ No newline at end of file diff --git a/src/components/molecules/PhotoCard.svelte b/src/components/molecules/PhotoCard.svelte new file mode 100644 index 0000000..ff9ae59 --- /dev/null +++ b/src/components/molecules/PhotoCard.svelte @@ -0,0 +1,10 @@ + + +
+ {alt} +
\ No newline at end of file diff --git a/src/routes/index.svelte b/src/routes/index.svelte index f36c60b..8dbd534 100644 --- a/src/routes/index.svelte +++ b/src/routes/index.svelte @@ -1,8 +1,12 @@ @@ -13,8 +17,51 @@ image="" /> -

Houses Of

+
+
+

Houses

+

Houses Of is a project that showcases houses of character around the world.

+ +
- \ No newline at end of file +
+
+ {#each photos as { image: { id, title } }} + + {/each} +
+
+ + +
+ + + + \ No newline at end of file diff --git a/src/style/_typography.scss b/src/style/_typography.scss index e69de29..5d7e7c8 100644 --- a/src/style/_typography.scss +++ b/src/style/_typography.scss @@ -0,0 +1,24 @@ +// TYPOGRAPHY + +// Titles +.title-huge { + font-size: clamp(200px, 38vw, 700px); + font-family: $font-serif; + font-weight: 200; + letter-spacing: -0.04em; +} + +// Texts +.text-medium { + font-size: rem(28px); + font-family: $font-sans; + font-weight: 300; + line-height: 1.5; +} + +.text-large { + font-size: rem(32px); + font-family: $font-sans; + font-weight: 400; + line-height: 1.5; +} \ No newline at end of file diff --git a/src/style/_variables.scss b/src/style/_variables.scss index 7e095e4..047a79c 100644 --- a/src/style/_variables.scss +++ b/src/style/_variables.scss @@ -10,6 +10,7 @@ $color-tertiary: #FFE0C5; $color-lightpurple: #8B50B2; $color-gray: #666; $color-lightgray: #999; +$color-shadow-brown: #7A5D44; // CSS Variables :root { diff --git a/src/style/atoms/_button.scss b/src/style/atoms/_button.scss new file mode 100644 index 0000000..e9403d1 --- /dev/null +++ b/src/style/atoms/_button.scss @@ -0,0 +1,18 @@ +.button { + display: inline-flex; + align-items: center; + background: #fff; + border-radius: 100vh; + padding: 12px 24px; + text-decoration: none; + font-size: rem(18px); + color: $color-text; + font-weight: 600; + border: none; + + // Icon + img { + display: block; + margin-right: 12px; + } +} \ No newline at end of file diff --git a/src/style/molecules/_photo-card.scss b/src/style/molecules/_photo-card.scss new file mode 100644 index 0000000..2978843 --- /dev/null +++ b/src/style/molecules/_photo-card.scss @@ -0,0 +1,15 @@ +.photo-card { + picture { + width: 100%; + height: 100%; + overflow: hidden; + border-radius: 8px; + box-shadow: 0 16px 12px rgba(#000, 0.15), 0 26px 52px rgba(#000, 0.2); + } + img { + display: block; + width: 100%; + height: 100%; + object-fit: cover; + } +} \ No newline at end of file diff --git a/src/style/pages/_homepage.scss b/src/style/pages/_homepage.scss new file mode 100644 index 0000000..9580e17 --- /dev/null +++ b/src/style/pages/_homepage.scss @@ -0,0 +1,132 @@ +// Homepage +.homepage { + + // Intro Section + &__intro { + background-color: $color-tertiary; + color: $color-text; + text-align: center; + overflow: hidden; + padding-bottom: clamp(100px, 27vw, 600px); + + // Title + h1 { + color: $color-secondary; + line-height: 1; + margin-top: -100px; + } + // Text + p { + max-width: 524px; + margin: 0 auto 32px; + } + // Button + .button { + box-shadow: 0 1px 1px rgba($color-shadow-brown, 0.05), 0 2px 2px rgba($color-shadow-brown, 0.05), 0 4px 4px rgba($color-shadow-brown, 0.05), 0 16px 16px rgba($color-shadow-brown, 0.05); + margin-bottom: 40px; + } + } + + // Photos Collage + &__photos { + position: relative; + max-width: 2000px; + height: clamp(500px, 45vw, 900px); + margin: calc(-1 * clamp(300px, 20vw, 500px)) auto 0; + } + &__collage { + display: grid; + grid-template-columns: repeat(32, 1fr); + grid-template-rows: repeat(2, 1fr); + margin: 0 -140px; + + .photo-card { + position: relative; + display: block; + grid-column-end: span 8; + height: clamp(133px, 18vw, 400px); + margin-left: auto; + margin-right: auto; + transform: rotate(var(--rotation)) translateZ(0); + + // First row + &:nth-child(1) { + --rotation: -10.5deg; + z-index: 11; + grid-column-start: 2; + grid-row: 1; + top: clamp(24px, 8vw, 128px); + } + &:nth-child(2) { + --rotation: 3deg; + z-index: 7; + grid-column-start: 7; + grid-row: 1; + margin-left: 0; + top: clamp(16px, 3vw, 48px); + } + &:nth-child(3) { + z-index: 6; + grid-column-start: 13; + grid-row: 1; + } + &:nth-child(4) { + --rotation: -3deg; + z-index: 2; + grid-column-start: 19; + grid-row: 1; + top: clamp(16px, 3vw, 48px); + } + &:nth-child(5) { + --rotation: 10.5deg; + z-index: 1; + grid-column-start: 24; + grid-row: 1; + top: clamp(24px, 8vw, 128px); + } + + // Second row + &:nth-child(6) { + --rotation: -5.5deg; + z-index: 10; + grid-column-start: 1; + grid-row: 2; + top: clamp(24px, 5.5vw, 132px); + } + &:nth-child(7) { + --rotation: -8deg; + grid-column-start: 5; + z-index: 9; + grid-row: 2; + } + &:nth-child(8) { + --rotation: 8deg; + z-index: 5; + grid-column-start: 11; + grid-row: 2; + top: calc(-1 * clamp(20px, 3vw, 48px)); + } + &:nth-child(9) { + --rotation: 2deg; + z-index: 4; + grid-column-start: 15; + grid-row: 2; + top: calc(-1 * clamp(20px, 3vw, 48px)); + } + &:nth-child(10) { + --rotation: 8deg; + z-index: 3; + grid-column-start: 21; + grid-row: 2; + } + &:nth-child(11) { + --rotation: 5.5deg; + z-index: 2; + grid-column-start: 25; + grid-row: 2; + top: clamp(24px, 5.5vw, 132px); + margin-right: 0; + } + } + } +} \ No newline at end of file diff --git a/src/style/style.scss b/src/style/style.scss index ec7cc6a..62d1a34 100644 --- a/src/style/style.scss +++ b/src/style/style.scss @@ -17,13 +17,16 @@ // Layout @import "layout/grid"; +// Pages +@import "pages/homepage"; + // Atomic Design System // Atoms -// @import "atoms/atom"; +@import "atoms/button"; // Molecules -// @import "molecules/molecule"; +@import "molecules/photo-card"; // Organisms // @import "organisms/organism"; diff --git a/static/images/icons/globe.svg b/static/images/icons/globe.svg new file mode 100644 index 0000000..386f178 --- /dev/null +++ b/static/images/icons/globe.svg @@ -0,0 +1,3 @@ + + +