Respect du Responsive Design
This commit is contained in:
parent
496b9b0e8e
commit
e0903be7f7
6 changed files with 100 additions and 15 deletions
|
@ -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 ;
|
||||||
|
|
|
@ -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
16
assets/js/perso.js
Normal 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);
|
|
@ -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>
|
||||||
|
|
Loading…
Reference in a new issue