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

Add a credit page and make style reusable

Browse Source
This commit is contained in:
Félix Péault
2020-02-26 15:52:13 +01:00
parent afb087408c
commit 042440188e
10 changed files with 225 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
src/atoms/TitleSite.svelte Normal file
View File

@@ -0,0 +1,19 @@
<script>
import * as fn from '../functions'
</script>
<div class="title-location title-location--inline">
<div role="heading" aria-level="1" aria-label="Houses" data-aos="letters-translate-bottom">
<div class="anim-mask">
{@html fn.lettersToSpan('Houses')}
</div>
</div>
<em>of the</em>
<div aria-label="World" data-aos="letters-translate-bottom">
<div class="anim-mask">
{@html fn.lettersToSpan('World')}
</div>
</div>
</div>

25
src/molecules/Footer.svelte
View File

@@ -12,19 +12,24 @@
<Switcher radius="30" />
</div>
<div class="footer__right">
<div class="instagram">
<a href="https://instagram.com/{$site.instagram}" target="_blank">
<img src="/img/icons/instagram.svg" alt="Instagram">
<span>Instagram</span>
</a>
</div>
<div class="cetrucflotte">
<ul class="footer__right">
<li>
<ul>
<li><a href="/credits">Credits</a></li>
<li class="instagram">
<a href="https://instagram.com/{$site.instagram}" target="_blank">
<img src="/img/icons/instagram.svg" alt="Instagram">
<span>Instagram</span>
</a>
</li>
</ul>
</li>
<li class="cetrucflotte">
<span>A project by</span>
<a href="https://cetrucflotte.com" target="_blank">
<img src="/img/logo-ctf.svg" alt="Cetrucflotte logo's">
</a>
</div>
</div>
</li>
</ul>
</div>
</footer>

2
src/routes/_layout.svelte
View File

@@ -12,6 +12,8 @@
explore_globe
explore_list
instagram
credits_text
credits_list
}
}
continents {

36
src/routes/choose.svelte
View File

@@ -1,18 +1,21 @@
<script>
import { onMount } from 'svelte'
import { site, currentLocation } from '../store'
import * as fn from '../functions'
import { fade, fly } from 'svelte/transition'
import { flip } from 'svelte/animate'
import { site, currentLocation, currentPhotos } from '../store'
import AOS from 'aos'
// Components
import IconArrow from '../atoms/IconArrow'
import TitleSite from '../atoms/TitleSite'
import Globe from '../molecules/InteractiveGlobe'
import Footer from '../molecules/Footer'
import Locations from '../organisms/Locations'
// Reset current location if existing
$: if ($currentLocation) {
currentLocation.set()
$: {
if ($currentLocation) currentLocation.set()
if ($currentPhotos) currentPhotos.set()
}
@@ -20,9 +23,6 @@
** Run code on browser only
*/
onMount(() => {
const titleHouses = document.getElementById('title-houses')
const titleWorld = document.getElementById('title-world')
// Scroll apparitions
if (process.browser) {
AOS.init()
@@ -34,32 +34,18 @@
<title>Houses Of - Beautiful houses of planet Earth</title>
</svelte:head>
<section class="explore">
<section class="page explore">
<div class="wrap">
<div class="explore__top">
<div class="page__top">
<a href="/" class="button-control button-control--pink dir-left">
<IconArrow direction="left" color="#fff" class="icon" />
<IconArrow direction="left" color="#fff" class="icon" hidden="true" />
</a>
<div class="title-location title-location--inline">
<div role="heading" aria-level="1" aria-label="Houses" data-aos="letters-translate-bottom">
<div class="anim-mask">
{@html fn.lettersToSpan('Houses')}
</div>
</div>
<em>of the</em>
<div aria-label="World" data-aos="letters-translate-bottom">
<div class="anim-mask">
{@html fn.lettersToSpan('World')}
</div>
</div>
</div>
<TitleSite />
</div>
<div class="explore__description style-description">
<div class="page__description style-description">
<p>{$site.explore_globe}</p>
</div>
</div>

71
src/routes/credits.svelte Normal file
View File

@@ -0,0 +1,71 @@
<script>
import { onMount } from 'svelte'
import { site } from '../store'
// Dependencies
import AOS from 'aos'
// Components
import IconArrow from '../atoms/IconArrow'
import TitleSite from '../atoms/TitleSite'
import Footer from '../molecules/Footer'
// Categories
$: credits = $site.credits_list
/*
** Run code on browser only
*/
onMount(() => {
// Scroll apparitions
if (process.browser) {
AOS.init()
}
})
</script>
<svelte:head>
<title>Houses Of - Credits</title>
</svelte:head>
<section class="page">
<div class="wrap">
<div class="page__top">
<a href="/" class="button-control button-control--pink dir-left">
<IconArrow direction="left" color="#fff" class="icon" />
<IconArrow direction="left" color="#fff" class="icon" hidden="true" />
</a>
<TitleSite />
</div>
<div class="page__description style-description">
<p>A little page to thank all the nice people who helped building with this humble project</p>
</div>
<div class="page__list">
{#each credits as category}
<div class="page__list--category">
<h2 class="title-category">{category.name}</h2>
{#each category.credits as person}
<dl>
<dt class="style-location">
{#if person.url}
<a href={person.url} target="_blank" rel="noopener">
{person.name}
</a>
{:else}
{person.name}
{/if}
</dt>
<dd class="style-caps style-caps style-caps--transparent">{person.role}</dd>
</dl>
{/each}
</div>
{/each}
</div>
</div>
<Footer />
</section>

37
src/style/_base.scss
View File

@@ -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;

13
src/style/layouts/_explore.scss Normal file
View File

@@ -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;
}
}
}

50
src/style/molecules/_footer.scss
View File

@@ -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;

26
src/style/pages/_explore.scss → src/style/pages/_page.scss
View File

@@ -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;
}
}
}
}

5
src/style/style.scss
View File

@@ -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";