Edit sidebar social links
This commit is contained in:
Paul Nicoué
parent
5e06917b54
commit
eb21a245bc
4 changed files with 79 additions and 83 deletions
File diff suppressed because one or more lines are too long
|
|
@ -92,92 +92,81 @@ body {
|
||||||
background-color: var(--transparent-white);
|
background-color: var(--transparent-white);
|
||||||
transition: background-color 400ms ease-in-out;
|
transition: background-color 400ms ease-in-out;
|
||||||
|
|
||||||
.sidebar__nav {
|
.sidebar__nav-item {
|
||||||
|
width: 97vw;
|
||||||
|
transition: width 400ms ease-in-out;
|
||||||
|
|
||||||
.sidebar__nav-item {
|
+ .sidebar__nav-item {
|
||||||
width: 97vw;
|
margin: 0.75rem 0 0 0;
|
||||||
transition: width 400ms ease-in-out;
|
|
||||||
|
|
||||||
+ .sidebar__nav-item {
|
|
||||||
margin: 0.75rem 0 0 0;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.sidebar__nav-link {
|
.sidebar__nav-link {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
max-width: 100vw;
|
max-width: 100vw;
|
||||||
overflow-x: hidden;
|
overflow-x: hidden;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
color: var(--black);
|
color: var(--black);
|
||||||
transition:
|
transition:
|
||||||
max-width 400ms ease-in-out,
|
max-width 400ms ease-in-out,
|
||||||
color 400ms ease-in-out;
|
color 400ms ease-in-out;
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.sidebar__social {
|
.sidebar__social {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
margin: 1rem 0 0 0;
|
margin: 1rem 0 0 0;
|
||||||
|
}
|
||||||
|
|
||||||
.sidebar__social-link {
|
.sidebar__social-link {
|
||||||
width: var(--icon-size);
|
width: var(--icon-size);
|
||||||
height: var(--icon-size);
|
height: var(--icon-size);
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
||||||
+ .sidebar__social-link {
|
+ .sidebar__social-link {
|
||||||
margin: 0 0 0 1rem;
|
margin: 0 0 0 1rem;
|
||||||
}
|
|
||||||
|
|
||||||
svg {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
fill: var(--black);
|
|
||||||
transition: fill 400ms ease-in-out;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.sidebar__instagram-icon,
|
||||||
|
.sidebar__email-icon {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
fill: var(--black);
|
||||||
|
transition: fill 400ms ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
&--slimmed {
|
&--slimmed {
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
|
|
||||||
.sidebar__nav {
|
.sidebar__nav-item {
|
||||||
|
width: 15vw;
|
||||||
.sidebar__nav-item {
|
|
||||||
width: 15vw;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar__nav-link {
|
|
||||||
max-width: 15vw;
|
|
||||||
color: var(--transparent-black);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.sidebar__social {
|
.sidebar__nav-link {
|
||||||
|
max-width: 15vw;
|
||||||
|
color: var(--transparent-black);
|
||||||
|
}
|
||||||
|
|
||||||
svg {
|
.sidebar__instagram-icon,
|
||||||
fill: var(--transparent-black);
|
.sidebar__email-icon {
|
||||||
}
|
fill: var(--transparent-black);
|
||||||
}
|
}
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
background-color: var(--transparent-white);
|
background-color: var(--transparent-white);
|
||||||
|
|
||||||
.sidebar__nav {
|
|
||||||
|
|
||||||
.sidebar__nav-link {
|
.sidebar__nav-link {
|
||||||
color: var(--black);
|
color: var(--black);
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.sidebar__social {
|
.sidebar__instagram-icon,
|
||||||
|
.sidebar__email-icon {
|
||||||
svg {
|
fill: var(--black);
|
||||||
fill: var(--black);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -195,7 +184,7 @@ body {
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
}
|
}
|
||||||
|
|
||||||
.exhibition-section__iframe {
|
.exhibition {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -25,7 +25,7 @@
|
||||||
|
|
||||||
// Dimensions
|
// Dimensions
|
||||||
|
|
||||||
--icon-size: 2rem;
|
--icon-size: 1.75rem;
|
||||||
--sidebar-vertical-padding: 1rem;
|
--sidebar-vertical-padding: 1rem;
|
||||||
--sidebar-horizontal-padding: 1rem;
|
--sidebar-horizontal-padding: 1rem;
|
||||||
|
|
||||||
|
|
@ -57,6 +57,6 @@ $desktop-media-query: 62rem;
|
||||||
|
|
||||||
// Dimensions
|
// Dimensions
|
||||||
|
|
||||||
--icon-size: 2.5rem;
|
--icon-size: 2.25rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -10,7 +10,7 @@
|
||||||
{% for exhibition in exhibitions %}
|
{% for exhibition in exhibitions %}
|
||||||
<li class="sidebar__nav-item">
|
<li class="sidebar__nav-item">
|
||||||
{% if exhibition.external_link == 'false' %}
|
{% 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 %}
|
{% else %}
|
||||||
<a class="sidebar__nav-link sidebar__nav-link--external" href="{{ exhibition.url }}" target="_blank">{{ exhibition.title }}</a>
|
<a class="sidebar__nav-link sidebar__nav-link--external" href="{{ exhibition.url }}" target="_blank">{{ exhibition.title }}</a>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
|
@ -20,14 +20,16 @@
|
||||||
{% endif %}
|
{% endif %}
|
||||||
</nav>
|
</nav>
|
||||||
<div class="sidebar__social">
|
<div class="sidebar__social">
|
||||||
<a class="sidebar__social-link" href="#" target="_self" aria-label="Show {{ site.title }}'s image gallery">
|
<a class="sidebar__social-link" href="{{ instagram }}" target="_blank" aria-label="Show {{ site.title }}'s Instagram profile">
|
||||||
<svg aria-hidden="true" viewBox="0 0 48 48" fill="currentColor">
|
<svg class="sidebar__instagram-icon" aria-hidden="true" viewBox="0 0 128 128" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
|
||||||
<path d="M17.25 29.15H36.8l-6.35-8.55-5.15 6.75L21.9 23ZM10 38V4h34v34Zm3-3h28V7H13Zm-9 9V10h3v31h31v3Zm9-9V7v28Z"/>
|
<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>
|
</svg>
|
||||||
</a>
|
</a>
|
||||||
<a class="sidebar__social-link" href="mailto:{{ email }}" target="_blank" aria-label="Write an email to {{ site.title }}">
|
<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">
|
<svg class="sidebar__email-icon" aria-hidden="true" viewBox="0 0 48 48" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
|
||||||
<path d="M4 40V8h40v32Zm20-15.1L7 13.75V37h34V13.75Zm0-3L40.8 11H7.25ZM7 13.75V11v2.75Z"/>
|
<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>
|
</svg>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -40,7 +42,9 @@
|
||||||
<main>
|
<main>
|
||||||
|
|
||||||
<section class="exhibition-section">
|
<section class="exhibition-section">
|
||||||
<iframe class="exhibition-section__iframe" name="exhibition_iframe" src=""></iframe>
|
|
||||||
|
<iframe class="exhibition" name="exhibition" src=""></iframe>
|
||||||
|
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
</main>
|
</main>
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue