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 @@
**********************************/
html, body {
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 {
font-size: 11px;
color: #333;
line-height: 14px;
}
body a {
color: #773015;
}
body p{
font-size: 11px;
}
body ul {
list-style: none;
padding: 0;
}
#total {
height: 100%;
min-height: 100%;
position: relative;
margin: 0;
}
#page {
width: 940px;
max-width: 940px;
margin: 0 auto;
font-size: 11px;
}
h2, h3 {
border-bottom: 1px solid #ffa628;
padding:2em 0;
}
h1, h2, h3 {
color: #d32f19;
......@@ -40,9 +58,13 @@ h1 {
h2 {
font-weight: lighter;
padding-bottom: 10px;
padding-top:10px;
font-size:140%;
}
h3 {
padding-bottom: 5px;
font-weight: bold;
font-size:11px;
}
h4 {
margin-top: 10px;
......@@ -62,10 +84,6 @@ h5 {
/**********************************
* MENUS
**********************************/
code{
font-family: monospace;
color: #ffa628;
}
.code{
font-family: monospace;
color: #ffa628;
......@@ -74,30 +92,84 @@ code{
text-align: center;
font-size: 120%;
clear: both;
padding-top: 15px;
padding-bottom: 15px;
padding: 0;
margin: 0;
font-variant: small-caps;
color: #d32f19;
}
#nav_menu li a:hover {
color:#ffa628;
}
#nav_menu a {
text-decoration: none;
color: #d32f19;
}
#nav_menu a:hover {
font-weight: bold;
#nav_menu a.icon {
float: right;
display: none;
background: transparent url('../../theme/images/menu_icon.png') no-repeat right top;
background-size: 15px;
}
#nav_menu ul {
border: 1px solid #ffa628;
height: 35px;
list-style: none;
@media only screen and (min-width: 940px) {
#nav_menu {
padding-top: 15px;
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 {
border-right: 1px solid #ffa628;
display: block;
width: 10em;
height: 25px;
float: left;
padding: 5px 0;
@media only screen and (max-width: 940px) {
#nav_menu ul {
overflow: hidden;
background-color:#d32f19;
height: 35px;
}
#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
......@@ -159,25 +231,27 @@ code{
/**********************************
* 3 COLONNES
**********************************/
#trois_cols {
display: block;
padding-top: 15px;
padding-bottom: 50px;
}
#trois_cols img {
max-width: 250px;
}
#trois_cols #col_gauche {
width: 32%;
float: left;
}
#trois_cols #col_centre {
width: 32%;
margin: 0 auto;
}
#trois_cols #col_droite {
width: 32%;
float: right;
@media only screen and (min-width: 940px) {
#trois_cols {
display: block;
padding-top: 15px;
padding-bottom: 50px;
}
#trois_cols #col_gauche {
width: 32%;
float: left;
}
#trois_cols #col_centre {
width: 32%;
margin: 0 auto;
}
#trois_cols #col_droite {
width: 32%;
float: right;
}
}
.centerleft {
width: 21%;
......@@ -194,6 +268,29 @@ code{
margin: 0 auto;
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
**********************************/
......@@ -265,22 +362,28 @@ width: 65%}
/**********************************
* EN TETE
**********************************/
#logo_holder #logo {
background: transparent url('../../theme/images/bandeau.png');
float: left;
display: block;
text-indent: -9999px;
height: 80px;
width: 444px;
@media only screen and (min-width: 940px) {
#logo_holder #logo {
background: transparent url('../../theme/images/bandeau.png');
background-repeat: no-repeat;
float: left;
display: block;
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
**********************************/
#footer {
position: absolute;
width: 100%;
height: 50px;
bottom: 0;
position: static;
border-top: 1px dotted #ffa628;
padding: 0;
margin: 0;
......@@ -350,6 +453,7 @@ a.button:hover span {
overflow: hidden;
margin: 0;
padding: 0;
line-height: 100%;
}
.article img {
border: 0;
......
......@@ -4,6 +4,7 @@
<title>{% block title %}{% endblock %}</title>
{% block head %}
<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"/>
{% if FEED_ALL_ATOM %}
......@@ -52,9 +53,12 @@
<h1><a href="{{ SITEURL }}" id="logo">Pyromaths</a></h1>
</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>
<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>
{% for cat_name, article_list in categories if cat_name=="telecharger" %}
{% for article in article_list %}
......@@ -67,9 +71,19 @@
{% endfor %}
<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="https://forum.pyromaths.org">Forum</a></li>
<li id="adroite"><a href="https://forum.pyromaths.org">Forum</a></li>
</ul>
</div>
<script>
function myFunction() {
var x = document.getElementById("nav_menu");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>
{% endblock header %}
</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