host/julienmonnerie
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Edit sidebar social links

Browse source
This commit is contained in:
Paul Nicoué 2022-07-26 17:03:58 +02:00
parent 5e06917b54
commit eb21a245bc
4 changed files with 79 additions and 83 deletions
Download patch file Download diff file Expand all files Collapse all files

33
public/assets/build/main.css
View file

File diff suppressed because one or more lines are too long

29
public/assets/css/main.scss
View file

@ -92,8 +92,6 @@ body {
background-color: var(--transparent-white);
transition: background-color 400ms ease-in-out;
.sidebar__nav {
.sidebar__nav-item {
width: 97vw;
transition: width 400ms ease-in-out;
@ -114,12 +112,12 @@ body {
max-width 400ms ease-in-out,
color 400ms ease-in-out;
}
}
.sidebar__social {
display: flex;
align-items: center;
margin: 1rem 0 0 0;
}
.sidebar__social-link {
width: var(--icon-size);
@ -131,21 +129,19 @@ body {
+ .sidebar__social-link {
margin: 0 0 0 1rem;
}
}
svg {
.sidebar__instagram-icon,
.sidebar__email-icon {
width: 100%;
height: 100%;
fill: var(--black);
transition: fill 400ms ease-in-out;
}
}
}
&--slimmed {
background-color: transparent;
.sidebar__nav {
.sidebar__nav-item {
width: 15vw;
}
@ -154,32 +150,25 @@ body {
max-width: 15vw;
color: var(--transparent-black);
}
}
.sidebar__social {
svg {
.sidebar__instagram-icon,
.sidebar__email-icon {
fill: var(--transparent-black);
}
}
&:hover {
background-color: var(--transparent-white);
.sidebar__nav {
.sidebar__nav-link {
color: var(--black);
}
}
.sidebar__social {
svg {
.sidebar__instagram-icon,
.sidebar__email-icon {
fill: var(--black);
}
}
}
}
}
@ -195,7 +184,7 @@ body {
height: 100vh;
}
.exhibition-section__iframe {
.exhibition {
width: 100%;
height: 100%;
}

4
public/assets/css/partials/variables.scss
View file

@ -25,7 +25,7 @@
// Dimensions
--icon-size: 2rem;
--icon-size: 1.75rem;
--sidebar-vertical-padding: 1rem;
--sidebar-horizontal-padding: 1rem;
@ -57,6 +57,6 @@ $desktop-media-query: 62rem;
// Dimensions
--icon-size: 2.5rem;
--icon-size: 2.25rem;
}
}

18
site/templates/exhibitions.twig
View file

@ -10,7 +10,7 @@
{% for exhibition in exhibitions %}
<li class="sidebar__nav-item">
{% if exhibition.external_link == 'false' %}
<a class="sidebar__nav-link sidebar__nav-link--internal" href="{{ exhibition.url }}" target="exhibition_iframe">{{ exhibition.title }}</a>
<a class="sidebar__nav-link sidebar__nav-link--internal" href="{{ exhibition.url }}" target="exhibition">{{ exhibition.title }}</a>
{% else %}
<a class="sidebar__nav-link sidebar__nav-link--external" href="{{ exhibition.url }}" target="_blank">{{ exhibition.title }}</a>
{% endif %}
@ -20,14 +20,16 @@
{% endif %}
</nav>
<div class="sidebar__social">
<a class="sidebar__social-link" href="#" target="_self" aria-label="Show {{ site.title }}'s image gallery">
<svg aria-hidden="true" viewBox="0 0 48 48" fill="currentColor">
<path d="M17.25 29.15H36.8l-6.35-8.55-5.15 6.75L21.9 23ZM10 38V4h34v34Zm3-3h28V7H13Zm-9 9V10h3v31h31v3Zm9-9V7v28Z"/>
<a class="sidebar__social-link" href="{{ instagram }}" target="_blank" aria-label="Show {{ 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"/>
<rect height="10" width="10" x="98" y="20"/>
</svg>
</a>
<a class="sidebar__social-link" href="mailto:{{ email }}" target="_blank" aria-label="Write an email to {{ site.title }}">
<svg aria-hidden="true" viewBox="0 0 48 48" fill="currentColor">
<path d="M4 40V8h40v32Zm20-15.1L7 13.75V37h34V13.75Zm0-3L40.8 11H7.25ZM7 13.75V11v2.75Z"/>
<svg class="sidebar__email-icon" aria-hidden="true" viewBox="0 0 48 48" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path d="M 0 48 L 0 0 L 48 0 L 48 48 L 0 48 Z M 24 24.35 L 3.1 7.126 L 3.1 44.5 L 44.9 44.5 L 44.9 7.126 L 24 24.35 Z M 24 20.35 L 44.9 3.5 L 3.1 3.5 L 24 20.35 Z M 3.1 7.126 L 3.1 3.5 L 3.1 7.126 Z"/>
</svg>
</a>
</div>
@ -40,7 +42,9 @@
<main>
<section class="exhibition-section">
<iframe class="exhibition-section__iframe" name="exhibition_iframe" src=""></iframe>
<iframe class="exhibition" name="exhibition" src=""></iframe>
</section>
</main>