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

Add media queries for mobile support

Browse source
This commit is contained in:
Paul Nicoué 2022-08-05 17:14:28 +02:00
parent 043eb0b966
commit 33be423cf5
3 changed files with 145 additions and 113 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -18,10 +18,6 @@ body {
background-color: var(--feldgrau);
}
.body--white-background {
background-color: var(--white);
}
h1 {
font-family: var(--title-font-family);
font-size: var(--h1-font-size);
@ -54,6 +50,13 @@ em {
font-style: italic;
}
@media screen and (min-width: $tablet-media-query) {
.body--white-background {
background-color: var(--white);
}
}
// Link style
a {
@ -91,7 +94,7 @@ body {
z-index: 2;
position: fixed;
top: 1rem;
right: 1.5rem;
right: 1rem;
.logo__link {
width: var(--logo-width);
@ -121,6 +124,13 @@ body {
}
}
@media screen and (min-width: $tablet-media-query) {
.logo {
right: 1.5rem;
}
}
// Sidebar
.sidebar {
@ -131,7 +141,7 @@ body {
bottom: 0;
left: 0;
width: 100%;
padding: var(--sidebar-vertical-padding) var(--sidebar-horizontal-padding);
padding: var(--sidebar-padding-top) var(--sidebar-padding-left) var(--sidebar-padding-bottom) var(--sidebar-padding-right);
display: flex;
flex-direction: column;
justify-content: space-between;
@ -185,38 +195,45 @@ body {
fill: var(--black);
transition: fill 400ms ease-in-out;
}
}
&--slimmed {
width: 15%;
@media screen and (min-width: $tablet-media-query) {
.sidebar__nav-link {
color: var(--transparent-black);
}
.sidebar {
&--slimmed {
width: 15%;
min-width: 15rem;
.sidebar__instagram-icon,
.sidebar__email-icon {
fill: var(--transparent-black);
}
&:hover {
background-color: var(--transparent-feldgrau);
.sidebar__nav-link {
color: var(--black);
color: var(--transparent-black);
}
.sidebar__instagram-icon,
.sidebar__email-icon {
fill: var(--black);
fill: var(--transparent-black);
}
&:hover {
background-color: var(--transparent-feldgrau);
.sidebar__nav-link {
color: var(--black);
}
.sidebar__instagram-icon,
.sidebar__email-icon {
fill: var(--black);
}
}
}
}
&--white-background {
&--white-background {
&:hover {
background-color: var(--transparent-white);
&:hover {
background-color: var(--transparent-white);
}
}
}
}
@ -239,18 +256,25 @@ body {
// Exhibition section
.exhibition-section {
width: 100vw;
height: 100vh;
display: none;
}
.exhibition {
opacity: 0;
width: 100%;
height: 100%;
// padding: 0 0 0 15%;
transition: opacity 400ms ease-in-out;
@media screen and (min-width: $tablet-media-query) {
&--visible {
opacity: 1;
.exhibition-section {
display: block;
width: 100vw;
height: 100vh;
}
.exhibition {
opacity: 0;
width: 100%;
height: 100%;
transition: opacity 400ms ease-in-out;
&--visible {
opacity: 1;
}
}
}