Respect du Responsive Design

This commit is contained in:
raida 2019-03-05 17:38:45 +01:00
parent 496b9b0e8e
commit e0903be7f7
6 changed files with 100 additions and 15 deletions

View file

@ -78,7 +78,7 @@ input, select, textarea {
width: device-width; width: device-width;
} }
@media screen and (max-width: 480px) { @media screen and (max-width: 824px) {
html, body { html, body {
min-width: 320px; min-width: 320px;
@ -123,7 +123,7 @@ input, select, textarea {
} }
@media screen and (max-width: 736px) { @media screen and (max-width: 940px) {
html { html {
font-size: 11pt; font-size: 11pt;
@ -131,7 +131,7 @@ input, select, textarea {
} }
@media screen and (max-width: 360px) { @media screen and (max-width: 376px) {
html { html {
font-size: 10pt; font-size: 10pt;
@ -238,7 +238,7 @@ input, select, textarea {
font-size: 0.6rem; font-size: 0.6rem;
} }
@media screen and (max-width: 736px) { @media screen and (max-width: 940px) {
h1 { h1 {
font-size: 1.75rem; font-size: 1.75rem;
@ -360,7 +360,7 @@ input, select, textarea {
width: calc(25% - 0.375rem); width: calc(25% - 0.375rem);
} }
@media screen and (max-width: 480px) { @media screen and (max-width: 824px) {
form > .fields { form > .fields {
width: calc(100% + 3rem); width: calc(100% + 3rem);
@ -701,7 +701,7 @@ input, select, textarea {
width: 100%; width: 100%;
} }
@media screen and (max-width: 736px) { @media screen and (max-width: 940px) {
.image.main { .image.main {
margin: 2rem 0; margin: 2rem 0;
@ -709,7 +709,7 @@ input, select, textarea {
} }
@media screen and (max-width: 480px) { @media screen and (max-width: 824px) {
.image.main { .image.main {
margin: 1.5rem 0; margin: 1.5rem 0;
@ -839,7 +839,7 @@ input, select, textarea {
width: 100%; width: 100%;
} }
@media screen and (max-width: 480px) { @media screen and (max-width: 824px) {
ul.actions:not(.fixed) { ul.actions:not(.fixed) {
-moz-flex-direction: column; -moz-flex-direction: column;
@ -1213,7 +1213,7 @@ input, select, textarea {
} }
@media screen and (max-width: 736px) { @media screen and (max-width: 940px) {
#wrapper { #wrapper {
padding: 2rem 1rem; padding: 2rem 1rem;
@ -1221,7 +1221,7 @@ input, select, textarea {
} }
@media screen and (max-width: 480px) { @media screen and (max-width: 824px) {
#wrapper { #wrapper {
padding: 1rem; padding: 1rem;
@ -1421,7 +1421,7 @@ input, select, textarea {
} }
@media screen and (max-width: 736px) { @media screen and (max-width: 940px) {
#header > * { #header > * {
margin-top: 2rem; margin-top: 2rem;
@ -1452,7 +1452,7 @@ input, select, textarea {
} }
@media screen and (max-width: 480px) { @media screen and (max-width: 824px) {
#header { #header {
padding: 1.5rem 0; padding: 1.5rem 0;
@ -1591,7 +1591,7 @@ input, select, textarea {
background-color: rgba(255, 255, 255, 0.175); background-color: rgba(255, 255, 255, 0.175);
} }
@media screen and (max-width: 736px) { @media screen and (max-width: 940px) {
#main article { #main article {
padding: 3.5rem 2rem 0.5rem 2rem ; padding: 3.5rem 2rem 0.5rem 2rem ;
@ -1607,7 +1607,7 @@ input, select, textarea {
} }
@media screen and (max-width: 480px) { @media screen and (max-width: 824px) {
#main article { #main article {
padding: 3rem 1.5rem 0.5rem 1.5rem ; padding: 3rem 1.5rem 0.5rem 1.5rem ;

View file

@ -13,6 +13,10 @@
border-radius: 0 4px 4px 0; border-radius: 0 4px 4px 0;
} }
#header nav ul.simple {
display: none;
}
#header nav ul li { #header nav ul li {
display: block; display: block;
position: relative; position: relative;
@ -43,6 +47,34 @@
display: block; display: block;
} }
@media screen and (max-width: 824px) {
#header nav ul {
max-width: none;
width: -moz-max-content;
width: -webkit-max-content;
width: -ms-max-content;
width: max-content;
}
#header nav ul li {
width: 100%;
}
}
@media screen and (max-width: 528px) {
#header nav ul.left, #header nav ul.right {
display: none;
}
#header nav ul.simple {
display: block;
}
}
@ -83,6 +115,42 @@
padding: 10px; padding: 10px;
} }
@media screen and (max-width: 940px) {
#header .soutien {
margin-top: calc(2.75rem + 2rem);
}
#header .soutien img {
height: 100px;
}
}
@media screen and (max-width: 824px) {
#header .soutien {
margin-top: calc(2*3rem + 2rem);
}
#header .soutien .left, #header .soutien .right {
float: none;
}
}
@media screen and (max-width: 528px) {
#header .soutien {
margin-top: calc(2rem);
}
#header .soutien img {
height: 70px;
}
}
.left { .left {
float: left; float: left;
} }

Binary file not shown.

Binary file not shown.

16
assets/js/perso.js Normal file
View file

@ -0,0 +1,16 @@
(function($) {
$(window).on('load', function() {
var $menu = $('#nav');
var $menu_simple = $("<ul class=\"simple\"></ul>");
$menu.children("ul").each(function(index) {
$(this).children("li").each(function(index) {
$menu_simple.append($(this).clone());
});
});
$menu.append($menu_simple);
});
})(jQuery);

View file

@ -54,7 +54,7 @@
<p>Le fournisseur réseau de l'université Paris-Saclay.</p> <p>Le fournisseur réseau de l'université Paris-Saclay.</p>
</div> </div>
</div> </div>
<nav> <nav id="nav">
<ul class="left"> <ul class="left">
<li><a href="#presentation">Présentation</a></li> <li><a href="#presentation">Présentation</a></li>
<li><a href="#services">Services de l'association</a></li> <li><a href="#services">Services de l'association</a></li>
@ -583,6 +583,7 @@ print 'It took ' + i + ' iterations to sort the deck.';</code></pre>
<script src="assets/js/breakpoints.min.js"></script> <script src="assets/js/breakpoints.min.js"></script>
<script src="assets/js/util.js"></script> <script src="assets/js/util.js"></script>
<script src="assets/js/main.js"></script> <script src="assets/js/main.js"></script>
<script src="assets/js/perso.js"></script>
</body> </body>
</html> </html>