aurore/site-aurore
12
0
Fork 0
Code Issues 1 Pull requests Releases Wiki Activity

Respect du Responsive Design

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

28
assets/css/main.css
View file

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

68
assets/css/perso.css
View file

@ -13,6 +13,10 @@
border-radius: 0 4px 4px 0;
}
#header nav ul.simple {
display: none;
}
#header nav ul li {
display: block;
position: relative;
@ -43,6 +47,34 @@
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;
}
@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 {
float: left;
}

BIN
assets/js/.main.js.swo
View file

Binary file not shown.

BIN
assets/js/.main.js.swp
View file

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);

3
index.html
View file

@ -54,7 +54,7 @@
<p>Le fournisseur réseau de l'université Paris-Saclay.</p>
</div>
</div>
<nav>
<nav id="nav">
<ul class="left">
<li><a href="#presentation">Présentation</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/util.js"></script>
<script src="assets/js/main.js"></script>
<script src="assets/js/perso.js"></script>
</body>
</html>