Commit 88210ee6 authored by Corentin Bettiol's avatar Corentin Bettiol 💻

change design for small screen

parent e67d3a87
......@@ -57,34 +57,34 @@ h2{
margin: 0;
padding: 0;
font-size: 1.5em;
font-weight: normal;
display: inline-block;
max-width: 280px;
white-space: nowrap;
overflow: hidden;
font-weight: normal;
white-space: nowrap;
display: inline-block;
text-overflow: ellipsis;
}
h3 a{
text-decoration: none;
text-shadow: 0 0 1px #69f;
transition: color 0.3s;
text-shadow: 0 0 1px #69f;
}
h3 a:hover{
color: #47476b;
text-shadow: 0 0 1px #69f;
transition: color 0.3s;
text-shadow: 0 0 1px #69f;
}
#listMenu{
padding: 0;
display: flex;
margin: 15px 0;
flex-wrap: wrap;
flex-direction: row;
list-style-type: none;
justify-content: space-around;
flex-wrap: wrap;
}
#listMenu a{
......@@ -107,9 +107,9 @@ h3 a:hover{
article{
margin: 20px 0;
padding: 5px 15px;
overflow-wrap: anywhere;
background-color: #f0f0f0;
border-bottom: 3px solid #ccc;
overflow-wrap: anywhere;
}
#listMenu .selected{
......@@ -141,8 +141,8 @@ a:hover{
#editContent{
margin-top: 5px;
white-space: pre-wrap;
min-height: 1em;
white-space: pre-wrap;
display: inline-block;
}
......@@ -167,8 +167,8 @@ input, textarea, .wysiwyg{
.wysiwyg{
display: flex;
flex-direction: column;
align-items: center;
flex-direction: column;
}
.wysiwyg button{
......@@ -194,8 +194,8 @@ input:hover, input:focus, textarea:hover, textarea:focus{
input[type="submit"]{
padding-left: 13px;
border: none;
padding-left: 13px;
background-color: #ccc;
transition: background-color 0.3s;
}
......@@ -206,9 +206,9 @@ input[type="submit"]:hover{
}
label{
display: inline-block;
width: 250px;
padding: 10px;
display: inline-block;
background-color: #d9d9d9;
}
......@@ -222,9 +222,9 @@ form .small{
.input{
display: flex;
flex-wrap: wrap;
align-items: flex-start;
justify-content: center;
flex-wrap: wrap;
}
#listAdmin{
......@@ -233,8 +233,8 @@ form .small{
}
#listAdmin article{
box-sizing: border-box;
flex: 50%;
box-sizing: border-box;
}
#listAdmin h3{
......@@ -268,10 +268,10 @@ form .small{
}
.button{
padding: 5px;
margin-left: 2px;
text-decoration: none;
background-color: #d9d9d9;
padding: 5px;
transition: background-color 0.3s, color 0.3s;
}
......@@ -354,7 +354,7 @@ form .small{
}
img{
max-width: 100%;
max-width: 75%;
}
/*
......@@ -364,16 +364,16 @@ Media Queries
@media all and (max-width: 1500px){
*{
font-size: 1em;
font-size: 0.9em;
}
#title{
font-size: 1.3em;
justify-content: space-around;
font-size: 1.2em;
}
section p{
font-size: 0.8em;
#header{
font-size: 1.2em;
}
}
......@@ -381,19 +381,12 @@ Media Queries
#logo{
margin: 0;
}
#page{
font-size: 1.2em;
}
#header{
font-size: 1em;
}
#header, #title{
padding-top: 5px;
flex-direction: column;
}
#title{
margin: 0;
font-size: 1.4em;
text-align: center;
}
#logo{
......@@ -406,28 +399,34 @@ Media Queries
input, textarea, label, #editContent, .wysiwyg{
width: 100%;
}
label{
margin-right: 20px;
}
#menu{
width: 100%;
}
#listMenu{
flex-direction: column;
justify-content: center;
}
#listMenu a{
white-space: nowrap;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
#listMenu li, #listMenu h2, #listMenu a{
display: block;
padding: 0;
width: 90%;
display: block;
margin: 2px auto;
text-align: center;
padding: 0;
}
#listMenu a:hover{
padding-bottom: 2px;
}
......@@ -439,13 +438,11 @@ Media Queries
padding:5px;
}
#page{
font-size: 1em;
}
#logo{
width: 45px;
height: 45px;
}
#header{
margin-top: 30px;
}
......@@ -453,42 +450,42 @@ Media Queries
/* hamburger menu - taken on https://actudiant.fr/ - from an old version of https://scotch.io/tutorials/building-a-morphing-hamburger-menu-with-css */
#toggle{
position: absolute;
left: -9999px;
position: absolute;
}
.nav-label{
position: fixed;
top: 0;
display: inline-block;
padding: 0;
width: 50px;
height: 50px;
padding: 0;
opacity: 0.6;
background-image: url('/img/mobile-menu-icon.png');
position: fixed;
display: inline-block;
background-size: 50px 50px;
transition: transform 0.3s ease;
background-size: 50px 50px;
transition: transform 0.3s ease;
background-image: url('/img/mobile-menu-icon.png');
}
#listMenu{
top: 0;
width: 100%;
margin: auto;
background-color: #f0f0f0;
position: fixed;
top: 0;
background-color: #f0f0f0;
transition: border-bottom 0.3s;
}
#listMenu li{
margin: 0 auto;
max-height: 0;
margin: 0 auto;
transition: max-height 0.45s;
}
#listMenu a{
max-height: 0;
overflow: hidden;
opacity: 0;
padding: 0;
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease, opacity 0.3s, padding 0.3s;
}
#listMenu a:hover{
......@@ -497,15 +494,15 @@ Media Queries
}
#listMenu .selected{
border-bottom: 0px solid black;
max-height: 300px;
padding: 0;
opacity: 0.5;
max-height: 300px;
border-bottom: 0px solid black;
}
#listMenu .selected:hover{
border-bottom: 0px solid black;
padding: 0;
border-bottom: 0px solid black;
}
#toggle:checked ~ #listMenu{
......@@ -519,17 +516,17 @@ Media Queries
}
#toggle:checked ~ #listMenu a{
opacity: 1;
padding: 3px 0;
max-height: 300px;
opacity: 1;
transition: max-height 0.3s, opacity 0.3s, padding 0.3s;
}
#toggle:checked ~ .nav-label{
background-image: url('/img/mobile-menu-icon-close.png');
transform: rotate(180deg);
transition: transform 0.3s ease;
background-size: 50px 50px;
transition: transform 0.3s ease;
background-image: url('/img/mobile-menu-icon-close.png');
}
#toggle:checked ~ #listMenu .selected{
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment