Commit a4b7bf74 authored by Jérôme Ortais's avatar Jérôme Ortais

Portage du site sur mobiles et tablettes.

parent c936aad7
Pipeline #61462 passed with stages
in 25 seconds
...@@ -3,30 +3,48 @@ ...@@ -3,30 +3,48 @@
**********************************/ **********************************/
html, body { html, body {
height: 100%; height: 100%;
margin: -8px 0; font-size: 11px;
line-height: 14px;
}
@media screen and (max-width: 940px) {
html {
margin: -8px 5px;
}
}
@media screen and (min-width: 940px) {
html {
margin: 0 0;
}
} }
body { body {
font-size: 11px; font-size: 11px;
color: #333; color: #333;
line-height: 14px;
} }
body a { body a {
color: #773015; color: #773015;
} }
body p{
font-size: 11px;
}
body ul { body ul {
list-style: none; list-style: none;
padding: 0; padding: 0;
} }
#total { #total {
height: 100%;
min-height: 100%; min-height: 100%;
position: relative; position: relative;
margin: 0; margin: 0;
} }
#page { #page {
width: 940px; max-width: 940px;
margin: 0 auto; margin: 0 auto;
font-size: 11px;
} }
h2, h3 { h2, h3 {
border-bottom: 1px solid #ffa628; border-bottom: 1px solid #ffa628;
padding:2em 0;
} }
h1, h2, h3 { h1, h2, h3 {
color: #d32f19; color: #d32f19;
...@@ -40,9 +58,13 @@ h1 { ...@@ -40,9 +58,13 @@ h1 {
h2 { h2 {
font-weight: lighter; font-weight: lighter;
padding-bottom: 10px; padding-bottom: 10px;
padding-top:10px;
font-size:140%;
} }
h3 { h3 {
padding-bottom: 5px; padding-bottom: 5px;
font-weight: bold;
font-size:11px;
} }
h4 { h4 {
margin-top: 10px; margin-top: 10px;
...@@ -62,10 +84,6 @@ h5 { ...@@ -62,10 +84,6 @@ h5 {
/********************************** /**********************************
* MENUS * MENUS
**********************************/ **********************************/
code{
font-family: monospace;
color: #ffa628;
}
.code{ .code{
font-family: monospace; font-family: monospace;
color: #ffa628; color: #ffa628;
...@@ -74,30 +92,84 @@ code{ ...@@ -74,30 +92,84 @@ code{
text-align: center; text-align: center;
font-size: 120%; font-size: 120%;
clear: both; clear: both;
padding-top: 15px; padding: 0;
padding-bottom: 15px; margin: 0;
font-variant: small-caps; font-variant: small-caps;
color: #d32f19; color: #d32f19;
} }
#nav_menu li a:hover {
color:#ffa628;
}
#nav_menu a { #nav_menu a {
text-decoration: none; text-decoration: none;
color: #d32f19;
} }
#nav_menu a:hover { #nav_menu a.icon {
font-weight: bold; float: right;
display: none;
background: transparent url('../../theme/images/menu_icon.png') no-repeat right top;
background-size: 15px;
} }
#nav_menu ul { @media only screen and (min-width: 940px) {
border: 1px solid #ffa628; #nav_menu {
height: 35px; padding-top: 15px;
list-style: none; padding-bottom: 15px;
}
#nav_menu a {
font-weight: bold;
color: #d32f19;
}
#nav_menu ul {
border: 1px solid #ffa628;
height: 35px;
list-style: none;
}
#nav_menu li {
border-right: 1px solid #ffa628;
display: block;
width: 16.57%;
height: 15px;
float: left;
padding: 10px 0;
}
#nav_menu li#adroite {
float:right;
border-right: none;
}
} }
#nav_menu li { @media only screen and (max-width: 940px) {
border-right: 1px solid #ffa628; #nav_menu ul {
display: block; overflow: hidden;
width: 10em; background-color:#d32f19;
height: 25px; height: 35px;
float: left; }
padding: 5px 0; #nav_menu li {
text-align: left;
height: 15px;
padding: 10px;
}
#nav_menu li:not(:first-child) {
display: none;
}
#nav_menu a{
color: white;
font-weight: bold;
}
#nav_menu a.icon{
display: block;
background-color:#d32f19;
background-position: center center;
height:35px;
width:30px;
}
#nav_menu.responsive ul{
height:210px;
}
#nav_menu.responsive li{
display: block;
}
#presentation{
display: none;
}
} }
/********************************** /**********************************
* SLIDESHOW * SLIDESHOW
...@@ -159,25 +231,27 @@ code{ ...@@ -159,25 +231,27 @@ code{
/********************************** /**********************************
* 3 COLONNES * 3 COLONNES
**********************************/ **********************************/
#trois_cols {
display: block;
padding-top: 15px;
padding-bottom: 50px;
}
#trois_cols img { #trois_cols img {
max-width: 250px; max-width: 250px;
} }
#trois_cols #col_gauche { @media only screen and (min-width: 940px) {
width: 32%; #trois_cols {
float: left; display: block;
} padding-top: 15px;
#trois_cols #col_centre { padding-bottom: 50px;
width: 32%; }
margin: 0 auto; #trois_cols #col_gauche {
} width: 32%;
#trois_cols #col_droite { float: left;
width: 32%; }
float: right; #trois_cols #col_centre {
width: 32%;
margin: 0 auto;
}
#trois_cols #col_droite {
width: 32%;
float: right;
}
} }
.centerleft { .centerleft {
width: 21%; width: 21%;
...@@ -194,6 +268,29 @@ code{ ...@@ -194,6 +268,29 @@ code{
margin: 0 auto; margin: 0 auto;
text-align: center; text-align: center;
} }
@media only screen and (max-width: 940px) {
#trois_cols {
padding-top: 15px;
padding-bottom: 50px;
}
#col_gauche {
width: 100%;
float: none;
}
#col_centre {
width: 100%;
float: none;
margin: 0;
}
#col_droite {
width: 100%;
float: none;
}
#page {
width: 100%;
margin: 0 auto;
}
}
/********************************** /**********************************
* 2 COLONNES * 2 COLONNES
**********************************/ **********************************/
...@@ -265,22 +362,28 @@ width: 65%} ...@@ -265,22 +362,28 @@ width: 65%}
/********************************** /**********************************
* EN TETE * EN TETE
**********************************/ **********************************/
#logo_holder #logo { @media only screen and (min-width: 940px) {
background: transparent url('../../theme/images/bandeau.png'); #logo_holder #logo {
float: left; background: transparent url('../../theme/images/bandeau.png');
display: block; background-repeat: no-repeat;
text-indent: -9999px; float: left;
height: 80px; display: block;
width: 444px; text-indent: -9999px;
height: 80px;
width: 444px;
padding-bottom:15px;
}
} }
@media only screen and (max-width: 940px) {
#logo_holder #logo {
display: none;
}
}
/********************************** /**********************************
* PIED DE PAGE * PIED DE PAGE
**********************************/ **********************************/
#footer { #footer {
position: absolute; position: static;
width: 100%;
height: 50px;
bottom: 0;
border-top: 1px dotted #ffa628; border-top: 1px dotted #ffa628;
padding: 0; padding: 0;
margin: 0; margin: 0;
...@@ -350,6 +453,7 @@ a.button:hover span { ...@@ -350,6 +453,7 @@ a.button:hover span {
overflow: hidden; overflow: hidden;
margin: 0; margin: 0;
padding: 0; padding: 0;
line-height: 100%;
} }
.article img { .article img {
border: 0; border: 0;
......
...@@ -4,6 +4,7 @@ ...@@ -4,6 +4,7 @@
<title>{% block title %}{% endblock %}</title> <title>{% block title %}{% endblock %}</title>
{% block head %} {% block head %}
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="icon" href="{{ SITEURL }}/theme/images/favicon.ico"/> <link rel="icon" href="{{ SITEURL }}/theme/images/favicon.ico"/>
{% if FEED_ALL_ATOM %} {% if FEED_ALL_ATOM %}
...@@ -52,9 +53,12 @@ ...@@ -52,9 +53,12 @@
<h1><a href="{{ SITEURL }}" id="logo">Pyromaths</a></h1> <h1><a href="{{ SITEURL }}" id="logo">Pyromaths</a></h1>
</div> </div>
<div id="nav_menu"> <div class="topnav" id="nav_menu">
<a href="javascript:void(0);" class="icon" onclick="myFunction();">
<!--<i class="fa fa-bars"></i>-->
</a>
<ul> <ul>
<li><a href="{{ SITEURL }}">Accueil</a></li> <li><a href="{{ SITEURL }}" class="active">Accueil</a></li>
<li><a href="https://enligne.pyromaths.org/">Utiliser en ligne</a></li> <li><a href="https://enligne.pyromaths.org/">Utiliser en ligne</a></li>
{% for cat_name, article_list in categories if cat_name=="telecharger" %} {% for cat_name, article_list in categories if cat_name=="telecharger" %}
{% for article in article_list %} {% for article in article_list %}
...@@ -67,9 +71,19 @@ ...@@ -67,9 +71,19 @@
{% endfor %} {% endfor %}
<li><a href="{{ SITEURL }}/installer-pyromaths.html">Documentation</a></li> <li><a href="{{ SITEURL }}/installer-pyromaths.html">Documentation</a></li>
<li><a href="http://pyromaths.readthedocs.io/fr/develop/">Développeurs</a></li> <li><a href="http://pyromaths.readthedocs.io/fr/develop/">Développeurs</a></li>
<li><a href="https://forum.pyromaths.org">Forum</a></li> <li id="adroite"><a href="https://forum.pyromaths.org">Forum</a></li>
</ul> </ul>
</div> </div>
<script>
function myFunction() {
var x = document.getElementById("nav_menu");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>
{% endblock header %} {% endblock header %}
</div> </div>
......
  • Quel courage !

    Si tu as l'habitude, que ça t'amuse, ou que c'est déjà fini : fonce. Sinon, une méthode que j'utilise quand je veux faire un site responsive sans me prendre la tête, c'est d'utiliser bootstrap : je choisis un thème, et je construis mon site à partir des composants disponibles. Le bon côté, c'est que c'est rapide et ça marche (je ne connais pas / je n'aime pas le CSS) ; le mauvais, c'est que tout le monde utilise bootsrap, donc tous les sites se ressemblent.

    Un exemple : mon site web pour l'ICN (encore pauvre : je suis en train de convertir une année de LaTeX en un site web (les élèves sont toujours devant un écran d'ordinateur : pas la peine de s'embêter avec des impressions)).

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