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

Finalisation de la version mobile du site.

Je ne sais pas si ça a le moindre intérêt...
parent 2b277810
...@@ -8,7 +8,7 @@ PELICANOPTS= ...@@ -8,7 +8,7 @@ PELICANOPTS=
BASEDIR=$(pwd) BASEDIR=$(pwd)
INPUTDIR=$BASEDIR/content INPUTDIR=$BASEDIR/content
OUTPUTDIR=$BASEDIR/output OUTPUTDIR=$BASEDIR/public
CONFFILE=$BASEDIR/pelicanconf.py CONFFILE=$BASEDIR/pelicanconf.py
### ###
......
/********************************** /**********************************
* GLOBAL * GLOBAL
**********************************/ **********************************/
html, body {
height: 100%;
font-size: 11px;
line-height: 14px;
}
@media screen and (max-width: 940px) { @media screen and (max-width: 940px) {
html { html {
margin: -8px 5px; margin: -8px 5px;
...@@ -17,9 +12,15 @@ html, body { ...@@ -17,9 +12,15 @@ html, body {
} }
} }
body { body {
height: 100%;
font-size: 11px;
line-height: 125%;
font-size: 11px; font-size: 11px;
color: #333; color: #333;
line-height: 14px; }
img {
max-width: 100%;
height: auto;
} }
body a { body a {
color: #773015; color: #773015;
...@@ -40,7 +41,6 @@ body ul { ...@@ -40,7 +41,6 @@ body ul {
#page { #page {
max-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;
...@@ -54,6 +54,7 @@ h1 { ...@@ -54,6 +54,7 @@ h1 {
font-weight: lighter; font-weight: lighter;
font-variant: small-caps; font-variant: small-caps;
padding-bottom: 15px; padding-bottom: 15px;
line-height:125%;
} }
h2 { h2 {
font-weight: lighter; font-weight: lighter;
...@@ -71,12 +72,21 @@ h4 { ...@@ -71,12 +72,21 @@ h4 {
margin-bottom: 5px; margin-bottom: 5px;
color: #000; color: #000;
} }
h5 { @media screen and (max-width: 940px) {
float: right; h5 {
margin-top: 0; margin-top: 0;
padding-left: 20px; color: #000;
color: #000; font-size: 11px;
font-size: 11px; }
}
@media screen and (min-width: 940px) {
h5 {
float: right;
margin-top: 0;
padding-left: 20px;
color: #000;
font-size: 11px;
}
} }
#deux_cols h5 { #deux_cols h5 {
margin-top: 11px; margin-top: 11px;
...@@ -207,7 +217,7 @@ h5 { ...@@ -207,7 +217,7 @@ h5 {
} }
.presentation_droite_haut { .presentation_droite_haut {
position: relative; position: relative;
line-height: 24px; line-height: 230% ;
} }
.presentation_droite_haut h2 { .presentation_droite_haut h2 {
margin-left: 60px; margin-left: 60px;
...@@ -252,27 +262,25 @@ h5 { ...@@ -252,27 +262,25 @@ h5 {
width: 32%; width: 32%;
float: right; float: right;
} }
} .centerleft {
.centerleft { width: 21%;
width: 21%; float: left;
float: left; text-align: center;
text-align: center; }
} .centerright {
.centerright { width: 21%;
width: 21%; float: right;
float: right; text-align: center;
text-align: center; }
} .center {
.center { width: 21%;
width: 21%; margin: 0 auto;
margin: 0 auto; text-align: center;
text-align: center; }
} }
@media only screen and (max-width: 940px) { @media only screen and (max-width: 940px) {
#trois_cols { #trois_cols {
padding-top: 15px; }
padding-bottom: 50px;
}
#col_gauche { #col_gauche {
width: 100%; width: 100%;
float: none; float: none;
...@@ -290,27 +298,66 @@ h5 { ...@@ -290,27 +298,66 @@ h5 {
width: 100%; width: 100%;
margin: 0 auto; margin: 0 auto;
} }
.centerleft {
padding-bottom: 10px;
}
.centerright {
padding-bottom: 10px;
}
.center {
}
} }
/********************************** /**********************************
* 2 COLONNES * 2 COLONNES
**********************************/ **********************************/
@media only screen and (min-width: 940px) {
#deux_cols { #deux_cols {
display: block; display: block;
padding-top: 15px; padding-top: 15px;
padding-bottom: 50px; padding-bottom: 50px;
} }
#deux_cols #col_gauche { #deux_cols #col_gauche {
width: 65%} width: 65%;
float: left;
}
#deux_cols #col_droite { #deux_cols #col_droite {
width: 25%; max-width: 30%;
float: right; float: right;
padding: 15px;
border: 1px solid #ffa628; border: 1px solid #ffa628;
} }
.margin-check {
padding: 0 15px 15px 15px;
}
#deux_cols #col_droite ul.docs { #deux_cols #col_droite ul.docs {
list-style: disc; list-style: disc;
padding-left: 15px; padding-left: 15px;
line-height: 2em; line-height: 200%;
}
}
@media only screen and (max-width: 940px) {
div#deux_cols {
display: flex;
flex-direction: column-reverse;
padding-top: 15px;
padding-bottom: 50px;
}
#deux_cols #col_gauche {
width: 100%;
}
#deux_cols #col_droite {
margin-top: 30px;
border: 1px solid #ffa628;
}
.margin-check {
display: inline-block;
padding: 0 15px 15px 15px;
position: relative;
}
#deux_cols #col_droite ul.docs {
list-style: disc;
padding-left: 15px;
line-height: 200%;
}
} }
/********************************** /**********************************
* ARTICLES * ARTICLES
...@@ -326,7 +373,7 @@ width: 65%} ...@@ -326,7 +373,7 @@ width: 65%}
#nouveautes-de-cette-version h2 { #nouveautes-de-cette-version h2 {
font-family: serif; font-family: serif;
font-size: 11px; font-size: 11px;
line-height: 14px; line-height: 125%;
font-weight: bold; font-weight: bold;
display: block; display: block;
float: none; float: none;
...@@ -340,7 +387,7 @@ width: 65%} ...@@ -340,7 +387,7 @@ width: 65%}
.article .section h2 { .article .section h2 {
font-family: verdana, sans-serif; font-family: verdana, sans-serif;
font-size: 13px; font-size: 13px;
line-height: 14px; line-height: 125%;
font-weight: bold; font-weight: bold;
display: block; display: block;
float: none; float: none;
...@@ -364,7 +411,7 @@ width: 65%} ...@@ -364,7 +411,7 @@ width: 65%}
**********************************/ **********************************/
@media only screen and (min-width: 940px) { @media only screen and (min-width: 940px) {
#logo_holder #logo { #logo_holder #logo {
background: transparent url('../../theme/images/bandeau.png'); background: transparent url('../../theme/images/bandeau.png') no-repeat;
background-repeat: no-repeat; background-repeat: no-repeat;
float: left; float: left;
display: block; display: block;
...@@ -402,12 +449,22 @@ width: 65%} ...@@ -402,12 +449,22 @@ width: 65%}
} }
#footer #feeds { #footer #feeds {
float: right; float: right;
line-height: 16px; line-height: 125%;
width: 85px; width: 85px;
height: 50px; height: 50px;
} }
@media only screen and (max-width: 600px) {
#footer #right a#feeds {
font-size: 0;
padding-right: 0;
}
}
@media only screen and (min-width: 600px) {
#footer #right a#feeds {
padding: 18px 20px 0 0;
}
}
#footer #right a#feeds { #footer #right a#feeds {
padding: 20px 20px 0 0;
background: transparent url('../../images/feed.png') no-repeat 70% 35%; background: transparent url('../../images/feed.png') no-repeat 70% 35%;
text-decoration: none; text-decoration: none;
} }
...@@ -430,7 +487,7 @@ a.button { ...@@ -430,7 +487,7 @@ a.button {
a.button span { a.button span {
background: transparent url('../../images/bouton_span.png') no-repeat; background: transparent url('../../images/bouton_span.png') no-repeat;
display: block; display: block;
line-height: 14px; line-height: 125%;
padding: 5px 0 5px 18px; padding: 5px 0 5px 18px;
margin: 0; margin: 0;
} }
...@@ -470,7 +527,9 @@ ul#version { ...@@ -470,7 +527,9 @@ ul#version {
} }
.console { .console {
overflow: auto; overflow: auto;
width: 90%; display: inherit;
position:relative;
min-width: 80%;
border: 1px solid #000; border: 1px solid #000;
background: #333; background: #333;
padding: .8em 2em .8em .5em; padding: .8em 2em .8em .5em;
...@@ -539,102 +598,6 @@ table.dons td:nth-child(4) { ...@@ -539,102 +598,6 @@ table.dons td:nth-child(4) {
color: #fff; color: #fff;
width: 100px; width: 100px;
} }
/**********************************
* PYROMATHS EN LIGNE
**********************************/
.ui-tabs-panel {
background: url('../../images/enligne.png') no-repeat;
width: 611px;
}
table.tabs {
width: 611px;
}
table.tabs td {
width: 50%}
.ui-widget-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%}
.ui-tabs-nav {
margin: 0;
height: 30px;
width: 611px;
padding: 0;
border-bottom: 1px solid #ddc525;
}
.ui-tabs .ui-tabs-nav li {
list-style: none;
float: left;
position: relative;
padding: 0;
white-space: nowrap;
}
.ui-tabs .ui-tabs-nav a {
background: url('../../images/tabs.png') no-repeat -652px 0;
display: block;
height: 30px;
line-height: 30px;
width: 76px;
text-align: center;
float: left;
text-decoration: none;
color: #666;
position: relative;
}
.ui-tabs .ui-tabs-panel {
display: block;
padding: 0;
}
.ui-tabs a:active {
outline: 0;
}
.ui-tabs a:hover {
background-position: -652px -31px;
color: #fff;
}
p#msgjs, p#errmsg {
color: #911101;
text-align: center;
}
ul.tabs a.current, ul.tabs a.current:hover, ul.tabs li.current a {
background-position: -652px -62px;
cursor: default!important;
color: #000!important;
}
form#idForm input {
border: 2px outset #ddc525;
background-color: #f8f3d2;
}
form#idForm select {
color: #666;
background-color: #f8f3d2;
}
/* Start by setting display:none to make this hidden.
Then we position it in relation to the viewport window
with position:fixed. Width, height, top and left speak
speak for themselves. Background we set to 80% white with
our animation centered, and no-repeating */
.modal {
display: none;
position: fixed;
z-index: 1000;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: rgba( 255, 255, 255, .8 )
url('../../images/loading.gif')
50% 50%
no-repeat;
}
body.loading {
overflow: hidden;
}
body.loading .modal {
display: block;
}
/********************************** /**********************************
* DESCRIPTIF EXERCICES * DESCRIPTIF EXERCICES
**********************************/ **********************************/
...@@ -659,7 +622,7 @@ ul.menu li p.titre { ...@@ -659,7 +622,7 @@ ul.menu li p.titre {
background-color: #fff; background-color: #fff;
background-position: 0 0; background-position: 0 0;
background-repeat: no-repeat; background-repeat: no-repeat;
background-image: url('../../images/titlesBackgroundImagePlus.png'); background-image: url('../../images/titlesBackgroundImagePlus.png') no-repeat;
color: #000; color: #000;
} }
ul.menu li p { ul.menu li p {
......
...@@ -16,61 +16,63 @@ ...@@ -16,61 +16,63 @@
{% block content %} {% block content %}
<div id="deux_cols"> <div id="deux_cols">
<div id="col_droite"> <div id="col_droite">
{% if article.category == "telecharger" %} <div class="margin-check">
<h3>Historique des versions</h3> {% if article.category == "telecharger" %}
<ul class="docs"> <h3>Historique des versions</h3>
{% for cat_name, article_list in categories if cat_name=="telecharger" %} <ul class="docs">
{% for article in article_list %} {% for cat_name, article_list in categories if cat_name=="telecharger" %}
<li> {% for article in article_list %}
<a href="{{ SITEURL }}/{{ article.slug }}.html">{{ article.title }}</a> <li>
</li> <a href="{{ SITEURL }}/{{ article.slug }}.html">{{ article.title }}</a>
{% endfor %} </li>
{% endfor %}
{% endfor %}
</ul>
{% else %}
{% if article.category == "finances" %}
<h3>Bilan financier</h3>
Un immense merci à celles et ceux qui ont contribué financièrement à la vie de
Pyromaths. Vous trouverez ici l'état de nos finances.
<form action="https://www.paypal.com/cgi-bin/webscr"
method="post">
<p>
<input type="hidden" name="cmd" value="_s-xclick"/>
<input type="hidden" name="hosted_button_id" value="5486963"/>
<input type="image"
src="https://www.paypal.com/fr_FR/FR/i/btn/btn_donate_SM.gif"
name="submit" alt="PayPal"/>
<img alt="logo Paypal"
src="https://www.paypal.com/fr_FR/i/scr/pixel.gif"/>
</p>
</form>
{% else %}
<h3>Documentation</h3>
{% for cat_name, article_list in categories if cat_name!="telecharger" and cat_name != "finances"%}
<ul>
{% for group in article_list|groupby('category') %}
{% for article in group.list %}
{% if loop.first %}
<li>
<h4>{{ article.category }}</h4>
<ul class="docs">
{% endif %}
{% if 'hidden' not in article.tags %}
<li>
<a href="{{ SITEURL }}/{{ article.slug }}.html">{{ article.title }}</a>
</li>
{% endif %}
{% if loop.last %}
</ul>
</li>
{% endif %}
{% endfor %}
{% endfor %}
</ul>
{% endfor %} {% endfor %}
</ul>
{% else %}
{% if article.category == "finances" %}
<h3>Bilan financier</h3>
Un immense merci à celles et ceux qui ont contribué financièrement à la vie de
Pyromaths. Vous trouverez ici l'état de nos finances.
<form action="https://www.paypal.com/cgi-bin/webscr"
method="post">
<p>
<input type="hidden" name="cmd" value="_s-xclick"/>
<input type="hidden" name="hosted_button_id" value="5486963"/>
<input type="image"
src="https://www.paypal.com/fr_FR/FR/i/btn/btn_donate_SM.gif"
name="submit" alt="PayPal"/>
<img alt="logo Paypal"
src="https://www.paypal.com/fr_FR/i/scr/pixel.gif"/>
</p>
</form>
{% else %}
{% for cat_name, article_list in categories if cat_name!="telecharger" and cat_name != "finances"%}
<ul>
{% for group in article_list|groupby('category') %}
{% for article in group.list %}
{% if loop.first %}
<li>
<h4>{{ article.category }}</h4>
<ul class="docs">
{% endif %}
{% if 'hidden' not in article.tags %}
<li>
<a href="{{ SITEURL }}/{{ article.slug }}.html">{{ article.title }}</a>
</li>
{% endif %}
{% if loop.last %}
</ul>
</li>
{% endif %} {% endif %}
{% endfor %} {% endif %}
{% endfor %} </div>
</ul>
{% endfor %}
{% endif %}
{% endif %}
</div> </div>
<div id="col_gauche"> <div id="col_gauche">
<div class="article"> <div class="article">
<h5> Par <h5> Par
...@@ -95,7 +97,7 @@ ...@@ -95,7 +97,7 @@
</div> </div>
</div> </div>
<div class="clear">&nbsp;</div>
</div> </div>
<div class="clear">&nbsp;</div>
{% endblock %} {% endblock %}
...@@ -91,14 +91,12 @@ ...@@ -91,14 +91,12 @@
</div><!--page--> </div><!--page-->
<div id="footer"> <div id="footer">
<div id="left">&nbsp;</div>
<div id="right"> <div id="right">
<a href="{{ FEED_DOMAIN }}/{{ FEED_ALL_ATOM }}" id="feeds">Flux Atom</a> <a href="{{ FEED_DOMAIN }}/{{ FEED_ALL_ATOM }}" id="feeds">Flux Atom</a>
</div> </div>
<div id="copyright"> <div id="copyright">
<p>&copy; 2010 Pyromaths<br/> <p>&copy; 2010 Pyromaths<br/>
Thème inspiré d'un travail de <a href="https://www.divio.ch/">Divio Thème inspiré d'un travail de <a href="https://www.divio.ch/">Divio GmbH</a></p>
GmbH</a></p>
</div> </div>
</div> </div>
</div> <!--total--> </div> <!--total-->
......
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