LesLibres.org
/
Projet-Autoblog
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Adaptation à la sémantisation du pull 41 

Alors mon gros changement du pull 41 (pull request à peine faite), il faut évidemment adapter le CSS, pour les nouveaux éléments HTML5, comme le nettoyage du code. J’utilise ainsi les sélecteurs avancés (>, :target) de CSS2.1, mais c’est pas plus avancé que :hover, et la spécification date du XXe siècle, et les sélecteurs avancés fonctionnent partout, même sur IE, à l’exception de Netscape et Mozaic.
J’ai aussi supprimé plusieurs id du coup, pour ne spécifier les id que sémantiquement et clairement, sans superflu. J’ai aussi ajouté un max-height à img par défaut, parce que chez moi mon image de 713px dépasse largement le bloc (et évidemment « max-height:100% » ne donne pas le résultat voulu, et ne fait rien), mais il faudrait mettre ça en px dans un conditionnel en fonction de la taille de l’écran, ou trouver un moyen de lui faire faire la hauteur du block de la section.
J’ai aussi supprimé une propriété CSS de gradiant MS, déjà parce que IE est en train de tomber (et tout le monde il est content, et tout le monde il va faire du standard, et le fait-pou-IE est mort, etc.), et puis parce que c’est non seulement pas standard, mais que ça rend le CSS invalide pour le validateur du W3C (et ça pourrait donc créer des problèmes avec certains navigateurs, et diminuer l’expérience de certains à cause d’IE, je sais pas pour les autres, mais moi JAMAIS).
This commit is contained in:
Garreau Alexandre 2013-10-13 19:21:49 +02:00
parent 862d349e7b
commit 1769559c32
1 changed files with 19 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
resources/autoblog.css
View File

@ -9,40 +9,42 @@
body {background-color:#efefef;text-align:center;color:#333;font-family:sans-serif;}
a {color:black;text-decoration:none;font-weight:bold;}
a:hover {color:darkred;}
h1 {text-align:center;font-size:40pt;text-shadow: #ccc 0px 5px 5px;}
h1 {text-transform:uppercase;text-align:center;font-size:40pt;text-shadow: #ccc 0px 5px 5px;}
h2 {text-align:center;font-size: 16pt;margin:0 0 1em 0;font-style:italic;text-shadow: #ccc 0px 5px 5px; }
.pbloc {background-color:white;padding: 12px 10px 12px 10px;border:1px solid #aaa;max-width:70em;margin:1em auto;text-align:justify;box-shadow:0px 5px 7px #aaa;}
body > section {background-color:white;padding: 12px 10px 12px 10px;border:1px solid #aaa;max-width:70em;margin:1em auto;text-align:justify;box-shadow:0px 5px 7px #aaa;}
li {list-style-type:none;}
input[type="text"]{width:20em;}
input[type="radio"] {width:1em;}
input[type="submit"] {width:8em;}
div.form {padding:0.2em;border:1px solid #fff;}
div.form:hover {background-color:#FAF4DA;border:1px dotted;}
#contentVignette {text-align: center;}
.vignette {width:27%;height:2em;display: inline-block;text-align:justify;margin:0; padding:20px;background-color:#eee;border: 1px solid #888;}
.vignette:hover {background-color:#fff;}
.vignette .title {font-size: 14pt;text-shadow: #ccc 0px 5px 5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.vignette .title a:hover {color:darkred; text-decoration:none;}
.vignette .source {font-size:x-small;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.vignette .source a:hover {color:darkred; text-decoration:none;}
section.form {padding:0.2em;border:1px solid #fff;}
section.form:hover {background-color:#FAF4DA;border:1px dotted;}
section#autoblogs > ul {text-align: center;padding:0;}
section#autoblogs > ul > li {width:27%;height:2em;display: inline-block;text-align:justify;margin:0; padding:20px;background-color:#eee;border: 1px solid #888;}
section#autoblogs > ul > li:hover {background-color:#fff;}
section#autoblogs > ul > li header, section#autoblogs > ul > li h3 {font-size: large;text-shadow: #ccc 0px 5px 5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
section#autoblogs > ul > li h3 {display:inline;font-size:large;text-overflow:ellipsis;width:100%;}
section#autoblogs > ul > li header a:hover {color:darkred; text-decoration:none;}
section#autoblogs > ul > li .source {font-size:x-small;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
section#autoblogs > ul > li .source a:hover {color:darkred; text-decoration:none;}
.clear {clear:both;text-align:right;font-size:small;}
#logo {float: right;}
.bouton{background: -moz-linear-gradient(center top , #EDEDED 5%, #DFDFDF 100%) repeat scroll 0 0 #EDEDED;border: 1px none;padding: 10px;border: 1px solid #7777777;border-radius: 8px 8px 8px 8px;box-shadow: 0 1px 0 0 #FFFFFF inset;display: inline-block;}
.bouton{background: -moz-linear-gradient(center top , #EDEDED 5%, #DFDFDF 100%) repeat scroll 0 0 #EDEDED;border: 1px none;padding: 10px;border: 1px solid #777777;border-radius: 8px 8px 8px 8px;box-shadow: 0 1px 0 0 #FFFFFF inset;display: inline-block;}
.success {color: green;}
.error {color: red;}
.button_list{display:none;}
.button{-moz-box-shadow:inset 0 1px 0 0 #d9fbbe;-webkit-box-shadow:inset 0 1px 0 0 #d9fbbe;box-shadow:inset 0 1px 0 0 #d9fbbe;background:0;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#b8e356',endColorstr='#a5cc52');background-color:#b8e356;-moz-border-radius:6px;-webkit-border-radius:6px;border-radius:6px;border:1px solid #83c41a;display:inline-block;color:#fff;font-family:arial;font-size:14px;font-weight:700;text-decoration:none;text-shadow:1px 1px 0 #86ae47;padding:6px 24px;}
.button:hover{background:0;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#a5cc52',endColorstr='#b8e356');background-color:#a5cc52;}
.button{-moz-box-shadow:inset 0 1px 0 0 #d9fbbe;-webkit-box-shadow:inset 0 1px 0 0 #d9fbbe;box-shadow:inset 0 1px 0 0 #d9fbbe;background:0;background-color:#b8e356;-moz-border-radius:6px;-webkit-border-radius:6px;border-radius:6px;border:1px solid #83c41a;display:inline-block;color:#fff;font-family:arial;font-size:14px;font-weight:700;text-decoration:none;text-shadow:1px 1px 0 #86ae47;padding:6px 24px;}
.button:hover{background:0;background-color:#a5cc52;}
.button:active{position:relative;top:1px;}
.buttonactive{background-color:#aaa;-moz-border-radius:6px;-webkit-border-radius:6px;border-radius:6px;border:1px solid #83c41a;display:inline-block;color:#fff;font-family:arial;font-size:14px;font-weight:700;text-decoration:none;text-shadow:1px 1px 0 #86ae47;padding:6px 24px;}
@media screen and (max-width:1024px) {
.vignette { width: 40%; }
section#autoblogs > ul > li { width: 40%; }
}
@media screen and (max-width:640px) {
h1 { font-size:20pt; }
.button, .button:hover, .button:active, .buttonactive { display: block; margin: auto; text-align:center; }
.vignette { width: 80%; }
section#autoblogs > ul > li { width: 80%; }
}
@media screen and (max-width:480px) {
#logo { max-width: 250px; }
input[type="text"]{width:15em;}
}
}