Add logo and edit general design
This commit is contained in:
Paul Nicoué
parent
eb21a245bc
commit
e0cb8d46f4
8 changed files with 330 additions and 73 deletions
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -80,37 +80,81 @@ body {
|
|||
// HEADER
|
||||
// ----------------------------------------------------------------------------
|
||||
|
||||
// Logo
|
||||
|
||||
.logo {
|
||||
z-index: 2;
|
||||
position: fixed;
|
||||
top: 1rem;
|
||||
right: 1.5rem;
|
||||
|
||||
.logo__link {
|
||||
width: var(--logo-width);
|
||||
height: var(--logo-height);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.logo__icon {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
path:nth-child(1) {
|
||||
stroke: var(--black);
|
||||
}
|
||||
|
||||
path:nth-child(2) {
|
||||
stroke: var(--white);
|
||||
}
|
||||
|
||||
&--rotate-vertical-left {
|
||||
animation: rotate-vertical-left 800ms ease-in-out infinite;
|
||||
}
|
||||
|
||||
&--rotate-horizontal-bottom {
|
||||
animation: rotate-horizontal-bottom 800ms ease-in-out infinite;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Sidebar
|
||||
|
||||
.sidebar {
|
||||
z-index: 1;
|
||||
overflow-y: auto;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
padding: var(--sidebar-vertical-padding) var(--sidebar-horizontal-padding);
|
||||
overflow-y: auto;
|
||||
background-color: var(--transparent-white);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
background-color: var(--white);
|
||||
transition: background-color 400ms ease-in-out;
|
||||
|
||||
.sidebar__nav {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.sidebar__nav-item {
|
||||
width: 97vw;
|
||||
transition: width 400ms ease-in-out;
|
||||
|
||||
+ .sidebar__nav-item {
|
||||
margin: 0.75rem 0 0 0;
|
||||
margin: 0.5rem 0 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar__nav-link {
|
||||
display: inline-block;
|
||||
max-width: 100vw;
|
||||
max-width: 100%;
|
||||
overflow-x: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
color: var(--black);
|
||||
transition:
|
||||
max-width 400ms ease-in-out,
|
||||
color 400ms ease-in-out;
|
||||
transition: color 400ms ease-in-out;
|
||||
}
|
||||
|
||||
.sidebar__social {
|
||||
|
|
@ -140,14 +184,10 @@ body {
|
|||
}
|
||||
|
||||
&--slimmed {
|
||||
width: 15%;
|
||||
background-color: transparent;
|
||||
|
||||
.sidebar__nav-item {
|
||||
width: 15vw;
|
||||
}
|
||||
|
||||
.sidebar__nav-link {
|
||||
max-width: 15vw;
|
||||
color: var(--transparent-black);
|
||||
}
|
||||
|
||||
|
|
@ -185,12 +225,13 @@ body {
|
|||
}
|
||||
|
||||
.exhibition {
|
||||
opacity: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 0 0 0 15%;
|
||||
transition: opacity 400ms ease-in-out;
|
||||
|
||||
&--visible {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
// ----------------------------------------------------------------------------
|
||||
// FOOTER
|
||||
// ----------------------------------------------------------------------------
|
||||
|
||||
// Footer bar
|
||||
|
|
|
|||
|
|
@ -3,10 +3,41 @@
|
|||
// ----------------------------------------------------------------------------
|
||||
|
||||
@keyframes expand-outline {
|
||||
from {
|
||||
0% {
|
||||
outline-offset: 0;
|
||||
}
|
||||
to {
|
||||
100% {
|
||||
outline-offset: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes rotate-vertical-left {
|
||||
0% {
|
||||
transform: rotateY(0);
|
||||
transform-origin: left;
|
||||
}
|
||||
50% {
|
||||
transform: rotateY(180deg);
|
||||
transform-origin: left;
|
||||
}
|
||||
100% {
|
||||
transform: rotateY(0);
|
||||
transform-origin: left;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes rotate-horizontal-bottom {
|
||||
0% {
|
||||
transform: rotateX(0);
|
||||
transform-origin: bottom;
|
||||
}
|
||||
50% {
|
||||
transform: rotateX(180deg);
|
||||
transform-origin: bottom;
|
||||
}
|
||||
100% {
|
||||
transform: rotateX(0);
|
||||
transform-origin: bottom;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -25,6 +25,8 @@
|
|||
|
||||
// Dimensions
|
||||
|
||||
--logo-width: 2rem;
|
||||
--logo-height: 4rem;
|
||||
--icon-size: 1.75rem;
|
||||
--sidebar-vertical-padding: 1rem;
|
||||
--sidebar-horizontal-padding: 1rem;
|
||||
|
|
@ -32,7 +34,7 @@
|
|||
// Colors
|
||||
|
||||
--black: #000;
|
||||
--transparent-black: rgba(0, 0, 0, 0.4);
|
||||
--transparent-black: rgba(0, 0, 0, 0.3);
|
||||
--white: #fff;
|
||||
--transparent-white: rgba(255, 255, 255, 0.9);
|
||||
--feldgrau: #4B6259;
|
||||
|
|
@ -57,6 +59,8 @@ $desktop-media-query: 62rem;
|
|||
|
||||
// Dimensions
|
||||
|
||||
--logo-width: 6rem;
|
||||
--logo-height: 3rem;
|
||||
--icon-size: 2.25rem;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,35 +5,68 @@
|
|||
// SIDEBAR ANIMATION
|
||||
|
||||
const sidebar = document.querySelector('.sidebar');
|
||||
const sidebarNav = document.querySelector('.sidebar__nav');
|
||||
const sidebarNavLinks = sidebarNav.querySelectorAll('.sidebar__nav-link--internal');
|
||||
const sidebarNavLinks = document.querySelectorAll('.sidebar__nav-link--internal');
|
||||
const logoIcon = document.querySelector('.logo__icon');
|
||||
const exhibitionIframe = document.querySelector('.exhibition');
|
||||
|
||||
// ----------------------------------------------------------------------------
|
||||
// UTILS
|
||||
// LOGIC
|
||||
// ----------------------------------------------------------------------------
|
||||
|
||||
// UTILS
|
||||
|
||||
// Enable CSS :active pseudo-class in Safari Mobile
|
||||
function enableActivePseudoClass() {
|
||||
document.addEventListener("touchstart", function() {},false);
|
||||
}
|
||||
|
||||
// Convert rem to pixels by getting font-size CSS property
|
||||
function convertRemToPixels(rem) {
|
||||
let fontSize = parseFloat(window.getComputedStyle(document.body).getPropertyValue('font-size'));
|
||||
return rem * fontSize;
|
||||
}
|
||||
|
||||
// ----------------------------------------------------------------------------
|
||||
// LOGIC
|
||||
// ----------------------------------------------------------------------------
|
||||
|
||||
// SIDEBAR ANIMATION
|
||||
|
||||
function slimDownSidebar() {
|
||||
if (sidebar) {
|
||||
if (sidebar && !sidebar.classList.contains('sidebar--slimmed')) {
|
||||
sidebar.classList.add('sidebar--slimmed');
|
||||
}
|
||||
}
|
||||
|
||||
function slimDownSidebarOnClick() {
|
||||
if (sidebarNavLinks.length > 0) {
|
||||
|
||||
function enableLogoIconRotation() {
|
||||
if (logoIcon) {
|
||||
if (logoIcon.classList.contains('logo__icon--vertical')) {
|
||||
logoIcon.classList.add('logo__icon--rotate-vertical-left');
|
||||
} else {
|
||||
logoIcon.classList.add('logo__icon--rotate-horizontal-bottom');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function disableLogoIconRotation() {
|
||||
if (logoIcon) {
|
||||
if (logoIcon.classList.contains('logo__icon--vertical')) {
|
||||
logoIcon.classList.remove('logo__icon--rotate-vertical-left');
|
||||
} else {
|
||||
logoIcon.classList.remove('logo__icon--rotate-horizontal-bottom');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function loadExhibitionIframe() {
|
||||
if (sidebarNavLinks.length > 0 && exhibitionIframe) {
|
||||
for (let i = 0; i < sidebarNavLinks.length; i++) {
|
||||
sidebarNavLinks[i].addEventListener('click', slimDownSidebar);
|
||||
sidebarNavLinks[i].addEventListener('click', function(e) {
|
||||
enableLogoIconRotation();
|
||||
exhibitionIframe.classList.remove('exhibition--visible');
|
||||
exhibitionIframe.addEventListener('load', function(e) {
|
||||
slimDownSidebar();
|
||||
disableLogoIconRotation();
|
||||
exhibitionIframe.classList.add('exhibition--visible');
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -42,9 +75,10 @@ function slimDownSidebarOnClick() {
|
|||
// PROGRAM
|
||||
// ----------------------------------------------------------------------------
|
||||
|
||||
// Enable CSS :active pseudo-class in Safari Mobile
|
||||
document.addEventListener("touchstart", function() {},false);
|
||||
// UTILS
|
||||
|
||||
enableActivePseudoClass();
|
||||
|
||||
// SIDEBAR ANIMATION
|
||||
|
||||
slimDownSidebarOnClick();
|
||||
loadExhibitionIframe();
|
||||
|
|
|
|||
|
|
@ -1,6 +1,9 @@
|
|||
<?php
|
||||
|
||||
return function ($page) {
|
||||
return function ($site, $page) {
|
||||
|
||||
// Get home page object
|
||||
$homePage = $site->homePage();
|
||||
|
||||
// Get exhibitions field content (stored as yaml) and parse it to return an array
|
||||
$exhibitions = $page->exhibitions()->yaml();
|
||||
|
|
@ -15,6 +18,7 @@ return function ($page) {
|
|||
$instagram = $page->instagram();
|
||||
|
||||
return [
|
||||
'homePage' => $homePage,
|
||||
'exhibitions' => $exhibitions,
|
||||
'email' => $email,
|
||||
'instagram' => $instagram
|
||||
|
|
|
|||
|
|
@ -3,6 +3,17 @@
|
|||
{% block header %}
|
||||
<header>
|
||||
|
||||
<div class="logo">
|
||||
<a class="logo__link" href="{{ homePage.url }}" target="_self" aria-label="Go to {{ site.title }}'s home page">
|
||||
<svg class="logo__icon" aria-hidden="true" viewBox="0 0 3814 1912" xmlns="http://www.w3.org/2000/svg">
|
||||
<g transform="matrix(1, 0, 0, -1, 1426.537109, 1153.771606)">
|
||||
<path style="fill:none;stroke:currentColor;stroke-width:93.54299927;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1" d="m 0,0 c -290.833,17.312 -697.633,-243.443 -961.355,-441.732 -463.22,-348.289 -491.716,-401.405 -327.464,98.265 42.11,128.104 133.935,713.436 134.825,1065.798 1.49,589.899 147.634,423.095 319.826,16.386 C -107.247,-978.225 558.099,-596.729 789.55,-160.404 800.123,-140.473 836,-55 836,-55 c 0,0 25.705,-95.875 94.192,-196.312 C 1081.909,-473.805 1640,-308 1770,-260 c 53.364,19.704 261,-145 571,-221"/>
|
||||
<path style="fill:none;stroke:currentColor;stroke-width:8.50399971;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1" d="m 0,0 c -290.833,17.312 -697.633,-243.443 -961.355,-441.732 -463.22,-348.289 -491.716,-401.405 -327.464,98.265 42.11,128.104 133.935,713.436 134.825,1065.798 1.49,589.899 147.634,423.095 319.826,16.386 C -107.247,-978.225 558.099,-596.729 789.55,-160.404 800.123,-140.473 836,-55 836,-55 c 0,0 25.705,-95.875 94.192,-196.312 C 1081.909,-473.805 1640,-308 1770,-260 c 53.364,19.704 261,-145 571,-221"/>
|
||||
</g>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="sidebar">
|
||||
<nav class="sidebar__nav" aria-label="Menu">
|
||||
{% if exhibitions is not empty %}
|
||||
|
|
@ -20,7 +31,7 @@
|
|||
{% endif %}
|
||||
</nav>
|
||||
<div class="sidebar__social">
|
||||
<a class="sidebar__social-link" href="{{ instagram }}" target="_blank" aria-label="Show {{ site.title }}'s Instagram profile">
|
||||
<a class="sidebar__social-link" href="{{ instagram }}" target="_blank" aria-label="Go to {{ site.title }}'s Instagram profile">
|
||||
<svg class="sidebar__instagram-icon" aria-hidden="true" viewBox="0 0 128 128" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M 128 0 L 0 0 L 0 128 L 128 128 L 128 0 Z M 119.874 119.874 L 8.126 119.874 L 8.126 8.126 L 119.874 8.126 L 119.874 119.874 Z"/>
|
||||
<path d="M64,93c16,0,29-13,29-29S80,35,64,35S35,48,35,64S48,93,64,93z M64,43c11.6,0,21,9.4,21,21s-9.4,21-21,21s-21-9.4-21-21 S52.4,43,64,43z"/>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue