1769559c32
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).
50 lines
3.3 KiB
CSS
50 lines
3.3 KiB
CSS
/**
|
|
* autoblog.css
|
|
* ------------
|
|
* Please do NOT edit this file. Updating your Autoblogs farm will be easier.
|
|
* If you want to add your own CSS, use the file user.css
|
|
*
|
|
*/
|
|
|
|
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-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; }
|
|
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;}
|
|
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 #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;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) {
|
|
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; }
|
|
section#autoblogs > ul > li { width: 80%; }
|
|
}
|
|
@media screen and (max-width:480px) {
|
|
#logo { max-width: 250px; }
|
|
input[type="text"]{width:15em;}
|
|
}
|