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

Update icons and BoxCTA hover color

Browse Source
This commit is contained in:
Félix Péault
2021-10-03 19:19:38 +02:00
parent f6da3c4b55
commit 409c7fba8d
8 changed files with 42 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
src/routes/index.svelte
View File

@@ -26,9 +26,11 @@
<main class="homepage"> <main class="homepage">
<section class="homepage__intro"> <section class="homepage__intro">
<h1 class="title-huge">Houses</h1> <h1 class="title-huge">Houses</h1>
<p class="text-medium">{settings.description}</p> <p class="text-medium">{settings.description}</p>
<Button text="Explore locations" url="{path}#ctas">
<img src="/images/icons/globe.svg" alt="explore globe"> <Button text="Explore locations" url="{path}#locations">
<img src="/images/icons/earth.svg" alt="explore globe">
</Button> </Button>
</section> </section>
@@ -47,17 +49,34 @@
of <strong>{count.countries} countries</strong> of <strong>{count.countries} countries</strong>
</p> </p>
<div class="cards"> <div class="cards">
<BoxCTA url="{path}#globe" icon="/images/icons/explore.svg" label="Explore the globe" alt="Globe" /> <BoxCTA
<BoxCTA url="{path}#locations" icon="/images/icons/pin.svg" label="Discover the locations" alt="Paper pin" /> url="{path}#locations"
<BoxCTA url="/shop" icon="/images/icons/bag.svg" label="Shop the prints" alt="Shopping bag" /> icon="/images/icons/globe.svg"
label="discover locations"
alt="Globe"
/>
<BoxCTA
url="/photos"
icon="/images/icons/photos.svg"
label="Browse all photos"
alt="Photos"
/>
<BoxCTA
url="/shop"
icon="/images/icons/bag.svg"
label="Shop our products"
alt="Shopping bag"
/>
</div> </div>
</div> </div>
<InteractiveGlobe /> <section class="homepage__locations" id="locations">
<InteractiveGlobe />
<Locations <Locations
locations={location} locations={location}
/> />
</section>
<div class="grid-modules"> <div class="grid-modules">
<div class="container grid"> <div class="container grid">

2
src/style/atoms/_box-cta.scss
View File

@@ -52,7 +52,7 @@
// Hover // Hover
&:hover { &:hover {
$shadow-color: rgba(0, 0, 0, 0.05); $shadow-color: rgba(0, 0, 0, 0.05);
background-color: #77357b; background-color: #8f3d7b;
box-shadow: 0 6px 6px $shadow-color, 0 12px 12px $shadow-color, 0 24px 24px $shadow-color; box-shadow: 0 6px 6px $shadow-color, 0 12px 12px $shadow-color, 0 24px 24px $shadow-color;
.icon { .icon {

2
static/images/icons/bag.svg
View File

@@ -1,3 +1,3 @@
<svg width="48" height="48" viewBox="0 0 48 48" fill="#fff" xmlns="http://www.w3.org/2000/svg"> <svg width="48" height="48" viewBox="0 0 48 48" fill="#fff" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M16.57 13.2a7.57 7.57 0 0 1 1.9-5.26A5.87 5.87 0 0 1 22.8 6.1c3.18.03 6.16 2.56 6.22 7.1h6.37c.93 0 1.66.78 1.59 1.7l-.04.48 4.13 27.93a1.45 1.45 0 0 1-1.94 1.57l-1.58-.58a.14.14 0 0 0-.12.02l-2.83 1.85a1.59 1.59 0 0 1-1.57 1.34H8.61c-.93 0-1.66-.79-1.59-1.7l2.36-31.15c.06-.83.75-1.47 1.58-1.47h5.61Zm1.85 0a5.74 5.74 0 0 1 1.4-4 4.02 4.02 0 0 1 2.97-1.26c2.07.02 4.33 1.65 4.38 5.25h-8.75Zm10.6 1.83h6.1l-.04.4v.02L32.8 45.67H8.9l2.31-30.64h5.37v5.24a2.11 2.11 0 0 0 .92 4 2.12 2.12 0 0 0 .93-4v-5.24h8.75v5.24a2.11 2.11 0 0 0 .92 4 2.12 2.12 0 0 0 .93-4v-5.24Zm5.76 28.82 1.53-20.12 2.84 19.2-.96-.35a2 2 0 0 0-1.77.2l-1.64 1.07ZM18 22.17a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0Zm10.1.5a.5.5 0 1 0 0-1 .5.5 0 0 0 0 1Z" /> <path fill-rule="evenodd" clip-rule="evenodd" d="M16.57 13.193c.026-2.257.748-4.033 1.908-5.254A5.869 5.869 0 0 1 22.802 6.1c3.173.026 6.16 2.558 6.216 7.092h6.374c.925 0 1.655.783 1.586 1.702l-.037.485 4.13 27.93c.161 1.087-.903 1.95-1.938 1.571l-1.579-.576a.137.137 0 0 0-.121.014l-2.829 1.849a1.588 1.588 0 0 1-1.571 1.34H8.605a1.587 1.587 0 0 1-1.585-1.703l2.359-31.148a1.588 1.588 0 0 1 1.586-1.464h5.605Zm1.848 0c.026-1.858.614-3.16 1.403-3.99a4.017 4.017 0 0 1 2.965-1.262c2.073.017 4.332 1.644 4.384 5.252h-8.752Zm10.6 1.84h6.096l-.03.403h-.003l.002.01-2.29 30.221H8.884l2.32-30.634h5.366v5.233a2.111 2.111 0 0 0-1.197 1.901c0 1.166.95 2.112 2.12 2.112a2.111 2.111 0 0 0 .924-4.013v-5.233h8.755v5.233a2.111 2.111 0 0 0-1.197 1.901c0 1.166.95 2.112 2.12 2.112a2.111 2.111 0 0 0 .924-4.013v-5.233Zm5.767 28.815 1.523-20.115 2.839 19.193-.956-.349a1.991 1.991 0 0 0-1.772.203l-1.634 1.068Zm-16.789-21.68a.502.502 0 1 1-1.005-.003.502.502 0 0 1 1.005.002Zm10.099.5a.502.502 0 1 0 .002-1.004.502.502 0 0 0-.002 1.005Z" />
</svg> </svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 868 B

After

Width:  |  Height:  |  Size: 1.1 KiB

3
static/images/icons/earth.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 5.5 KiB

3
static/images/icons/explore.svg
View File

File diff suppressed because one or more lines are too long
Side by Side

Before

Width:  |  Height:  |  Size: 12 KiB

8
static/images/icons/form.svg
View File

@@ -1,7 +1,3 @@
<svg width="18" height="14" viewBox="0 0 18 14" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="20" height="16" viewBox="0 0 20 16" fill="#fff" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M1.8 12.4459L16.2 12.4459C16.4485 12.4459 16.65 12.2444 16.65 11.9959L16.65 2.00406C16.65 1.75553 16.4485 1.55406 16.2 1.55406L1.8 1.55406C1.55147 1.55406 1.35 1.75553 1.35 2.00406L1.35 11.9959C1.35 12.2444 1.55147 12.4459 1.8 12.4459ZM16.2 13.7959C17.1941 13.7959 18 12.99 18 11.9959L18 2.00406C18 1.00995 17.1941 0.204061 16.2 0.204061L1.8 0.20406C0.805888 0.20406 1.11778e-06 1.00995 1.03088e-06 2.00406L1.57361e-07 11.9959C7.04529e-08 12.99 0.805889 13.7959 1.8 13.7959L16.2 13.7959Z" fill="#333333"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M18 2.346H2a.5.5 0 0 0-.5.5v11.102a.5.5 0 0 0 .5.5h16a.5.5 0 0 0 .5-.5V2.846a.5.5 0 0 0-.5-.5ZM2 .846a2 2 0 0 0-2 2v11.102a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V2.846a2 2 0 0 0-2-2H2Zm13.75 4.25h-2v3h2v-3Zm-2-1a1 1 0 0 0-1 1v3a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1v-3a1 1 0 0 0-1-1h-2ZM3.5 6.5a.5.5 0 0 0 0 1h6a.5.5 0 0 0 0-1h-6Zm.25 3a.5.5 0 0 1 .5-.5h6a.5.5 0 0 1 0 1h-6a.5.5 0 0 1-.5-.5Zm1.25 2a.5.5 0 0 0 0 1h6a.5.5 0 1 0 0-1H5Z" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M3.82502 9.97109L5.62502 9.97109L5.62502 7.27109L3.82502 7.27109L3.82502 9.97109ZM5.62502 10.8711C6.12208 10.8711 6.52502 10.4682 6.52502 9.97109L6.52502 7.27109C6.52502 6.77404 6.12208 6.37109 5.62502 6.37109L3.82502 6.37109C3.32797 6.37109 2.92502 6.77404 2.92502 7.27109L2.92502 9.97109C2.92502 10.4681 3.32797 10.8711 3.82502 10.8711L5.62502 10.8711Z" fill="#333333"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M15.3 8.25752C15.3 8.50605 15.0985 8.70752 14.85 8.70752L9.44999 8.70752C9.20146 8.70752 8.99999 8.50605 8.99999 8.25752C8.99999 8.00899 9.20146 7.80752 9.44999 7.80752L14.85 7.80752C15.0985 7.80752 15.3 8.00899 15.3 8.25752Z" fill="#333333"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M14.625 6.00752C14.625 6.25605 14.4235 6.45752 14.175 6.45752L8.775 6.45752C8.52647 6.45752 8.325 6.25605 8.325 6.00752C8.325 5.75899 8.52647 5.55752 8.775 5.55752L14.175 5.55752C14.4235 5.55752 14.625 5.75899 14.625 6.00752Z" fill="#333333"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M13.95 3.75752C13.95 4.00605 13.7485 4.20752 13.5 4.20752L8.10001 4.20752C7.85148 4.20752 7.65001 4.00605 7.65001 3.75752C7.65001 3.50899 7.85148 3.30752 8.10001 3.30752L13.5 3.30752C13.7485 3.30752 13.95 3.50899 13.95 3.75752Z" fill="#333333"/>
</svg> </svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.9 KiB

After

Width:  |  Height:  |  Size: 577 B

4
static/images/icons/globe.svg
View File

File diff suppressed because one or more lines are too long
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 5.5 KiB

After

Width:  |  Height:  |  Size: 6.3 KiB

3
static/images/icons/photos.svg Normal file
View File

@@ -0,0 +1,3 @@
<svg width="48" height="48" viewBox="0 0 48 48" fill="#fff" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M2.018 11.594a3.209 3.209 0 0 1 2.856-3.527l29.012-3.05a3.209 3.209 0 0 1 3.523 2.825l5.566.32a3.209 3.209 0 0 1 3.016 3.437l-1.633 22.378a3.209 3.209 0 0 1-3.322 2.973l-.57-.021a3.209 3.209 0 0 1-2.86 3.484l-29.012 3.05a3.209 3.209 0 0 1-3.527-2.857l-3.05-29.012Zm38.255 23.493L37.603 9.69l5.267.302a1.375 1.375 0 0 1 1.293 1.473l-1.634 22.379a1.375 1.375 0 0 1-1.424 1.274l-.832-.031ZM5.065 9.89a1.375 1.375 0 0 0-1.224 1.511L5.9 30.982l4.415-.464-.596-5.668a2.06 2.06 0 0 1 .584-1.665l6.249-6.322c.36-.365.83-.57 1.312-.607a.915.915 0 0 1 .302-.085l5.84-.614c.302-.032.605.043.858.211l7.154 4.78c.793.53.725 1.61.074 2.112l.597 5.506 4.912-.516a.959.959 0 0 1 .047-.004L35.59 8.066a1.375 1.375 0 0 0-1.511-1.225L5.065 9.891Zm26.23 22.435-1.007-9.288-2.845.3.953 9.064c.008.076.011.152.011.227l2.887-.303Zm-8.187 2.704 2.82-.297h.01l6.082-.64a1.298 1.298 0 0 0 1.155-1.43l-.29-2.674 4.907-.515a.957.957 0 0 0 .047-.006l.8 7.61a1.375 1.375 0 0 1-1.224 1.511L8.402 41.64a1.375 1.375 0 0 1-1.511-1.224l-.8-7.61 4.414-.463.202 1.919a2.06 2.06 0 0 0 2.265 1.834l3.307-.347a2.061 2.061 0 0 0 1.834-2.266l-.42-4.003c-.073-.685.446-1.353 1.229-1.435.782-.082 1.429.462 1.5 1.148l.421 4.004a2.06 2.06 0 0 0 2.265 1.834ZM22.246 29l.42 4.004a.227.227 0 0 0 .25.202l3.454-.363a.228.228 0 0 0 .202-.25l-.99-9.415a.227.227 0 0 0-.1-.165l-7.34-4.89a.227.227 0 0 0-.287.029l-6.249 6.322a.227.227 0 0 0-.064.184l.989 9.411a.227.227 0 0 0 .25.203l3.306-.348a.227.227 0 0 0 .202-.25l-.42-4.003c-.184-1.749 1.128-3.269 2.861-3.45 1.733-.183 3.332 1.03 3.516 2.78Zm4.382-7.42 3.139-.33-5.762-3.85-3.143.331 5.637 3.756c.044.03.087.06.129.093Z" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB