flayks/housesof
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Add World title on Homepage and fix some styling

Browse Source 
- Fix photos collage positioning
- Remove Houses title centering
This commit is contained in:
Félix Péault
2021-10-11 20:24:52 +02:00
parent bda355d608
commit b6686d3ef3
3 changed files with 43 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/routes/index.svelte
View File

@@ -27,9 +27,11 @@
<main class="homepage">
<section class="homepage__intro">
<h1 class="title-huge">Houses</h1>
<p class="text-medium">{settings.description}</p>
<h1 style="display: none;">Houses Of The World</h1>
<p class="homepage__title--houses title-huge">Houses</p>
<p class="homepage__description text-medium">
{settings.description}
</p>
<Button text="Explore locations" url="{path}#locations">
<IconEarth animate={true} />
@@ -71,6 +73,7 @@
<section class="homepage__locations" id="locations">
<InteractiveGlobe />
<p class="homepage__title--world title-huge">World</p>
<Locations
locations={location}

2
src/style/_typography.scss
View File

@@ -8,6 +8,8 @@
font-weight: 200;
letter-spacing: -0.04em;
line-height: 1;
user-select: none;
pointer-events: none;
}
// House Name

59
src/style/pages/_homepage.scss
View File

@@ -1,5 +1,25 @@
// Homepage
.homepage {
// Site title
&__title {
&--houses {
margin: -20px 0 0;
color: $color-secondary;
text-align: center;
@include bp (sm) {
margin-top: -100px;
}
}
&--world {
color: $color-primary-tertiary20;
text-align: center;
@include bp (sm) {
margin-top: calc(-1 * clamp(120px, 10vw, 216px));
}
}
}
// Intro Section
&__intro {
@@ -9,18 +29,14 @@
overflow: hidden;
padding-bottom: clamp(250px, 27vw, 600px);
// Title
h1 {
color: $color-secondary;
line-height: 1;
margin-top: -20px;
@include bp (sm) {
margin-top: -100px;
// 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;
}
}
// Text
p {
&__description {
max-width: 350px;
margin: 100px auto 32px;
@@ -29,12 +45,6 @@
max-width: 524px;
}
}
// 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 {
@@ -96,29 +106,29 @@
top: clamp(16px, 3vw, 48px);
}
&:nth-child(5) {
display: none;
--rotation: 10.5deg;
display: none;
z-index: 1;
grid-column-start: 24;
grid-row: 1;
top: clamp(24px, 8vw, 128px);
@include bp (sm) {
display:block;
display: block;
}
}
// Second row
&:nth-child(6) {
display: none;
--rotation: -5.5deg;
display: none;
z-index: 10;
grid-column-start: 1;
grid-row: 2;
top: clamp(24px, 5.5vw, 132px);
@include bp (sm) {
display:block
display: block;
}
}
&:nth-child(7) {
@@ -126,10 +136,9 @@
grid-column-start: 5;
z-index: 9;
grid-row: 1;
top: clamp(24px, 5.5vw, 132px);
@include bp (sm) {
display:block;
display: block;
grid-row: 2;
}
}
@@ -148,19 +157,19 @@
top: calc(-1 * clamp(20px, 3vw, 48px));
}
&:nth-child(10) {
display: none;
--rotation: 8deg;
display: none;
z-index: 3;
grid-column-start: 21;
grid-row: 2;
@include bp (sm) {
display:block
display: block;
}
}
&:nth-child(11) {
display: none;
--rotation: 5.5deg;
display: none;
z-index: 2;
grid-column-start: 25;
grid-row: 2;
@@ -168,7 +177,7 @@
margin-right: 0;
@include bp (sm) {
display:block
display: block;
}
}
}