DGNum/annuaire-eleves
6
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Mobile friendly

Browse source
This commit is contained in:
Tom Hubrecht 2021-02-04 23:26:28 +01:00
parent 846a7548d1
commit e0a5b616aa
3 changed files with 95 additions and 59 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

115
fiches/static/fiches/css/annuaire.css
View file

@ -28,65 +28,21 @@
font-weight: 400; font-weight: 400;
src: local("Source Code Pro Regular"), local("SourceCodePro-Regular"), url("../fonts/source-code-pro/source-code-pro-v12-latin-regular.woff2") format("woff2"), url("../fonts/source-code-pro/source-code-pro-v12-latin-regular.woff") format("woff"); src: local("Source Code Pro Regular"), local("SourceCodePro-Regular"), url("../fonts/source-code-pro/source-code-pro-v12-latin-regular.woff2") format("woff2"), url("../fonts/source-code-pro/source-code-pro-v12-latin-regular.woff") format("woff");
} }
#main-menu a a, #account-area a, a { a, #main-menu a a, #account-area a {
text-decoration: none; text-decoration: none;
color: #FFDC00; color: #FFDC00;
} }
#main-menu a a:hover, #account-area a:hover, a:hover, a:hover, #main-menu a a:hover, #account-area a:hover,
a:active,
#main-menu a a:active, #main-menu a a:active,
#account-area a:active, #account-area a:active,
a:active, a:focus,
#main-menu a a:focus, #main-menu a a:focus,
#account-area a:focus, #account-area a:focus {
a:focus {
color: #ffbb00; color: #ffbb00;
} }
* {
box-sizing: border-box;
}
body, html {
height: 100%;
}
body {
display: grid;
grid-template-columns: auto auto;
grid-template-areas: "aside main";
background-color: #301827;
color: #FFFFFF;
font-family: "Fira Sans", "Roboto", sans-serif;
}
#aside {
grid-area: aside;
padding: 0 0 0 10vw;
background-color: #1f0e19;
box-shadow: 4px 0 0 rgba(31, 14, 25, 0.3);
z-index: 10;
}
#main {
grid-area: main;
padding: 0 10vw 0 0;
display: flex;
flex-direction: column;
justify-content: space-between;
background-color: #301827;
z-index: 5;
}
@media only screen and (max-width: 1200px) {
#header {
margin: 0;
}
#main {
margin: 0;
}
}
#menu { #menu {
display: grid; display: grid;
float: right; float: right;
@ -545,4 +501,65 @@ body {
text-align: center; text-align: center;
} }
* {
box-sizing: border-box;
}
body, html {
height: 100%;
}
body {
display: grid;
grid-template-areas: "aside main";
background-color: #301827;
color: #FFFFFF;
font-family: "Fira Sans", "Roboto", sans-serif;
}
#aside {
grid-area: aside;
padding: 0 0 0 10vw;
background-color: #1f0e19;
box-shadow: 4px 0 0 rgba(31, 14, 25, 0.3);
z-index: 10;
}
#main {
grid-area: main;
padding: 0 10vw 0 0;
display: flex;
flex-direction: column;
justify-content: space-between;
background-color: #301827;
z-index: 5;
}
@media only screen and (max-width: 900px) {
body {
grid-template-areas: "aside" "main";
}
#aside,
#main {
padding: 0;
}
#content-home,
#content-birthdays,
#content-view-profile,
#content-edit-profile {
width: auto;
}
#menu {
width: auto;
float: none;
}
#search-area {
width: auto;
}
}
/*# sourceMappingURL=annuaire.css.map */ /*# sourceMappingURL=annuaire.css.map */

37
fiches/static/fiches/scss/_common.scss
View file

@ -15,7 +15,6 @@ body, html {
body { body {
display: grid; display: grid;
grid-template-columns: auto auto;
grid-template-areas: grid-template-areas:
"aside main"; "aside main";
@ -42,13 +41,33 @@ body {
z-index: 5; z-index: 5;
} }
@media only screen and (max-width: 1200px) { // Pour les vues mobile
#header { @media only screen and (max-width: 900px) {
margin: 0; body {
} grid-template-areas:
"aside"
"main";
}
#aside,
#main {
padding: 0;
}
#content-home,
#content-birthdays,
#content-view-profile,
#content-edit-profile {
width: auto;
}
#menu {
width: auto;
float: none;
}
#search-area {
width: auto;
}
#main {
margin: 0;
}
} }

2
fiches/static/fiches/scss/annuaire.scss
View file

@ -1,4 +1,4 @@
@use "common";
@use "header"; @use "header";
@use "content"; @use "content";
@use "footer"; @use "footer";
@use "common";