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

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

File diff suppressed because one or more lines are too long

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

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

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

@ -12,24 +12,26 @@
--medium-font-weight: 500; --medium-font-weight: 500;
--semi-bold-font-weight: 600; --semi-bold-font-weight: 600;
--bold-font-weight: 700; --bold-font-weight: 700;
--text-font-size: 0.8rem; --text-font-size: 1rem;
--text-line-height: calc(var(--text-font-size) * 1.2); --text-line-height: calc(var(--text-font-size) * 1.2);
--footnote-font-size: 0.6rem; --footnote-font-size: 0.8rem;
--footnote-line-height: calc(var(--footnote-font-size) * 1.2); --footnote-line-height: calc(var(--footnote-font-size) * 1.2);
--h1-font-size: 1.6rem; --h1-font-size: 1.6rem;
--h1-line-height: calc(var(--h1-font-size) * 1.2); --h1-line-height: calc(var(--h1-font-size) * 1.2);
--h2-font-size: 1.2rem; --h2-font-size: 1.4rem;
--h2-line-height: calc(var(--h2-font-size) * 1.2); --h2-line-height: calc(var(--h2-font-size) * 1.2);
--h3-font-size: 1rem; --h3-font-size: 1.2rem;
--h3-line-height: calc(var(--h3-font-size) * 1.2); --h3-line-height: calc(var(--h3-font-size) * 1.2);
// Dimensions // Dimensions
--logo-width: 2rem; --logo-width: 6rem;
--logo-height: 4rem; --logo-height: 3rem;
--icon-size: 1.75rem; --icon-size: 2.25rem;
--sidebar-vertical-padding: 1rem; --sidebar-padding-top: calc(1rem + var(--logo-height) + 1rem);
--sidebar-horizontal-padding: 1rem; --sidebar-padding-right: 1rem;
--sidebar-padding-bottom: 1rem;
--sidebar-padding-left: 1rem;
// Colors // Colors
@ -50,18 +52,11 @@ $desktop-media-query: 62rem;
:root { :root {
// Fonts
--text-font-size: 1rem;
--footnote-font-size: 0.8rem;
--h1-font-size: 1.8rem;
--h2-font-size: 1.4rem;
--h3-font-size: 1.2rem;
// Dimensions // Dimensions
--logo-width: 6rem; --sidebar-padding-top: 1rem;
--logo-height: 3rem; --sidebar-padding-right: 1rem;
--icon-size: 2.25rem; --sidebar-padding-bottom: 1rem;
--sidebar-padding-left: 1rem;
} }
} }