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

Edit mobile version design

Browse source
This commit is contained in:
Paul Nicoué 2022-08-08 12:40:16 +02:00
parent 5d13ba3336
commit 503b339974
7 changed files with 133 additions and 89 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -50,7 +50,7 @@ em {
font-style: italic;
}
@media screen and (min-width: $tablet-media-query) {
@media screen and (min-width: $desktop-media-query) {
.body--white-background {
background-color: var(--white);
@ -81,7 +81,14 @@ a {
body {
min-height: 100vh;
overflow: hidden;
overflow-x: hidden;
}
@media screen and (min-width: $desktop-media-query) {
body {
overflow-y: hidden;
}
}
// ----------------------------------------------------------------------------
@ -91,10 +98,20 @@ body {
// Logo
.logo {
z-index: 2;
position: fixed;
top: 1rem;
right: 1rem;
width: 100%;
padding: var(--logo-padding);
display: flex;
justify-content: center;
&--fixed-center {
z-index: 2;
width: auto;
padding: 0;
position: fixed;
top: 1rem;
right: calc(50vw - (var(--logo-width) / 2));
display: block;
}
.logo__link {
width: var(--logo-width);
@ -124,24 +141,27 @@ body {
}
}
@media screen and (min-width: $tablet-media-query) {
@media screen and (min-width: $desktop-media-query) {
.logo {
right: 1.5rem;
&--fixed-right {
z-index: 2;
width: auto;
padding: 0;
position: fixed;
top: 1rem;
right: 1.5rem;
display: block;
}
}
}
// Sidebar
.sidebar {
z-index: 1;
overflow-y: auto;
position: fixed;
top: 0;
bottom: 0;
left: 0;
width: 100%;
padding: var(--sidebar-padding-top) var(--sidebar-padding-left) var(--sidebar-padding-bottom) var(--sidebar-padding-right);
padding: var(--sidebar-padding);
display: flex;
flex-direction: column;
justify-content: space-between;
@ -171,7 +191,9 @@ body {
}
.sidebar__social {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
margin: 1rem 0 0 0;
}
@ -197,9 +219,18 @@ body {
}
}
@media screen and (min-width: $tablet-media-query) {
@media screen and (min-width: $desktop-media-query) {
.sidebar {
&--fixed {
z-index: 1;
overflow-y: auto;
position: fixed;
top: 0;
bottom: 0;
left: 0;
}
&--slimmed {
width: 15%;
@ -235,6 +266,11 @@ body {
background-color: var(--transparent-white);
}
}
.sidebar__social {
width: auto;
justify-content: flex-start;
}
}
}
@ -259,7 +295,7 @@ body {
display: none;
}
@media screen and (min-width: $tablet-media-query) {
@media screen and (min-width: $desktop-media-query) {
.exhibition-section {
display: block;

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

@ -27,11 +27,9 @@
--logo-width: 6rem;
--logo-height: 3rem;
--logo-padding: 1rem;
--icon-size: 2.25rem;
--sidebar-padding-top: calc(1rem + var(--logo-height) + 1rem);
--sidebar-padding-right: 1rem;
--sidebar-padding-bottom: 1rem;
--sidebar-padding-left: 1rem;
--sidebar-padding: 1rem;
// Colors
@ -47,16 +45,3 @@
$tablet-media-query: 48rem;
$desktop-media-query: 62rem;
@media screen and (min-width: $tablet-media-query) {
:root {
// Dimensions
--sidebar-padding-top: 1rem;
--sidebar-padding-right: 1rem;
--sidebar-padding-bottom: 1rem;
--sidebar-padding-left: 1rem;
}
}