mirror of
https://git.spip.net/spip-contrib-squelettes/archil.git
synced 2024-01-27 16:36:00 +01:00
649 lines
11 KiB
CSS
649 lines
11 KiB
CSS
/*! Typographical base - Tiny Typo v2.5.5 2017 - MIT License - tinytypo.tetue.net */
|
|
/* ------------------------------------------------------------------------------ */
|
|
/* Sets up some sensible default typography */
|
|
html {
|
|
font-size: 15px;
|
|
line-height: 1.6em;
|
|
font-family: Roboto-Mono;
|
|
-ms-text-size-adjust: 100%;
|
|
-webkit-text-size-adjust: 100%;
|
|
color: var(--couleurpolices);
|
|
}
|
|
/* Cf.: http://www.pompage.net/pompe/definir-des-tailles-de-polices-en-CSS/
|
|
et http://forum.alsacreations.com/topic-4-54377-1.html
|
|
[en] http://stackoverflow.com/questions/2703056/body-font-size-100-01-vs-body-font-size-100 */
|
|
|
|
/* Orientation iOS5 font-size fix */
|
|
@media (orientation: landscape) and (max-device-width: 640px) {
|
|
html,
|
|
body {
|
|
-webkit-text-size-adjust: 100%;
|
|
}
|
|
}
|
|
/* Fonts */
|
|
.font1 {
|
|
font-family: serif;
|
|
}
|
|
.font2 {
|
|
font-family: sans-serif;
|
|
}
|
|
.font3 {
|
|
font-family: monospace, monospace;
|
|
}
|
|
.font4 {
|
|
font-family: fantasy;
|
|
}
|
|
/* Headings */
|
|
h1,
|
|
.h1,
|
|
h2,
|
|
.h2,
|
|
h3,
|
|
.h3,
|
|
h4,
|
|
.h4,
|
|
h5,
|
|
.h5,
|
|
h6,
|
|
.h6 {
|
|
display: block;
|
|
margin: 0;
|
|
padding: 0;
|
|
font-family: var(--policetitre);
|
|
font-size: 100%;
|
|
font-weight: normal;
|
|
}
|
|
h1,
|
|
.h1 {
|
|
font-size: 1.2em;
|
|
margin-top: 2em;
|
|
margin-bottom: 1em;
|
|
}
|
|
|
|
h1::before {
|
|
color: var(--couleurprincipal);
|
|
content: '# ';
|
|
}
|
|
h2,
|
|
.h2 {
|
|
font-size: 1.1em;
|
|
line-height: 1;
|
|
margin-top: 1.8em;
|
|
}
|
|
|
|
h2::before {
|
|
color: var(--couleurprincipal);
|
|
content: '## ';
|
|
}
|
|
|
|
h3,
|
|
.h3 {
|
|
font-size: 1em;
|
|
line-height: 1.2;
|
|
margin-top: 1.5em;
|
|
}
|
|
|
|
h3::before {
|
|
color: var(--couleurprincipal);
|
|
content: '### ';
|
|
}
|
|
h4,
|
|
.h4 {
|
|
font-size: 1.1em;
|
|
line-height: 1.364;
|
|
margin-bottom: 1.364em;
|
|
}
|
|
h5,
|
|
.h5 {
|
|
font-size: 1em;
|
|
font-weight: bold;
|
|
margin-bottom: 1.5em;
|
|
}
|
|
h6,
|
|
.h6 {
|
|
font-size: 1em;
|
|
font-weight: bold;
|
|
}
|
|
h1 small,
|
|
.h1 small,
|
|
h2 small,
|
|
.h2 small,
|
|
h3 small,
|
|
.h3 small,
|
|
h4 small,
|
|
.h4 small,
|
|
h5 small,
|
|
.h5 small,
|
|
h6 small,
|
|
.h6 small {
|
|
font-size: 60%;
|
|
line-height: 0;
|
|
}
|
|
hr {
|
|
border: 0;
|
|
border-top: 3px dotted var(--couleurprincipal);
|
|
margin: 1em 0;
|
|
/*-moz-box-sizing: content-box;
|
|
box-sizing: content-box;
|
|
height: 0;
|
|
overflow: visible;
|
|
margin: 1.5em 0;
|
|
border: solid;
|
|
border-width: 1px 0 0;*/
|
|
}
|
|
/* Typographical enhancements */
|
|
em,
|
|
i,
|
|
.i {
|
|
font-style: italic;
|
|
}
|
|
strong,
|
|
b,
|
|
.b {
|
|
font-weight: bold;
|
|
}
|
|
mark,
|
|
.mark {
|
|
background: #ff0;
|
|
color: #000;
|
|
}
|
|
.smaller {
|
|
font-size: 75%;
|
|
}
|
|
small,
|
|
.small {
|
|
font-size: 80%;
|
|
}
|
|
big,
|
|
.big {
|
|
font-size: 130%;
|
|
}
|
|
.bigger {
|
|
font-size: 175%;
|
|
}
|
|
.biggest {
|
|
font-size: 200%;
|
|
}
|
|
abbr[title],
|
|
acronym[title] {
|
|
text-decoration: none;
|
|
border-bottom: .1em dotted;
|
|
cursor: help;
|
|
}
|
|
|
|
time {
|
|
color: grey;
|
|
}
|
|
@media print {
|
|
abbr[title] {
|
|
border-bottom: 0;
|
|
}
|
|
abbr[title]:after {
|
|
content: " (" attr(title) ")";
|
|
}
|
|
}
|
|
dfn,
|
|
.dfn {
|
|
font-weight: bold;
|
|
font-style: italic;
|
|
}
|
|
s,
|
|
strike,
|
|
del,
|
|
.del {
|
|
opacity: .5;
|
|
text-decoration: line-through;
|
|
}
|
|
ins,
|
|
.ins {
|
|
background-color: rgba(255, 255, 204, 0.5);
|
|
text-decoration: none;
|
|
}
|
|
u,
|
|
.u {
|
|
text-decoration: underline;
|
|
}
|
|
sup,
|
|
.sup,
|
|
sub,
|
|
.sub {
|
|
position: relative;
|
|
font-size: 80%;
|
|
font-variant: normal;
|
|
line-height: 0;
|
|
vertical-align: baseline;
|
|
}
|
|
sup,
|
|
.sup {
|
|
top: -0.5em;
|
|
}
|
|
sub,
|
|
.sub {
|
|
bottom: -0.25em;
|
|
}
|
|
.lead {
|
|
font-size: 120%;
|
|
}
|
|
.quiet {
|
|
color: #555555;
|
|
}
|
|
.lw {
|
|
text-transform: lowercase;
|
|
}
|
|
.up {
|
|
text-transform: uppercase;
|
|
letter-spacing: .05em;
|
|
}
|
|
.sc {
|
|
text-transform: lowercase;
|
|
font-variant: small-caps;
|
|
letter-spacing: .05em;
|
|
}
|
|
.caps {
|
|
font-variant: small-caps;
|
|
letter-spacing: .05em;
|
|
}
|
|
/* Alignment */
|
|
.text-left {
|
|
text-align: left;
|
|
}
|
|
.text-right {
|
|
text-align: right;
|
|
}
|
|
.text-center {
|
|
text-align: center;
|
|
}
|
|
.text-justify {
|
|
text-align: justify;
|
|
text-justify: newspaper;
|
|
}
|
|
/* Lists */
|
|
ul,
|
|
ol,
|
|
li,
|
|
dl,
|
|
dt,
|
|
dd {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
ul {
|
|
list-style-type: disc;
|
|
}
|
|
ul ul {
|
|
list-style-type: circle;
|
|
}
|
|
ul ul ul {
|
|
list-style-type: square;
|
|
}
|
|
ol {
|
|
list-style-type: decimal;
|
|
}
|
|
ol ol {
|
|
list-style-type: lower-alpha;
|
|
}
|
|
ol ol ol {
|
|
list-style-type: lower-greek;
|
|
}
|
|
ul ul,
|
|
ol ol,
|
|
ul ol,
|
|
ol ul {
|
|
margin-top: 0;
|
|
margin-bottom: 0;
|
|
}
|
|
ol,
|
|
ul {
|
|
margin-left: 1.5em;
|
|
-webkit-margin-before: 0;
|
|
-webkit-margin-after: 0;
|
|
}
|
|
dt {
|
|
font-weight: bold;
|
|
}
|
|
dd {
|
|
margin-left: 1.5em;
|
|
}
|
|
/* Old - don't use this */
|
|
.list-none {
|
|
margin-left: 0;
|
|
list-style: none;
|
|
}
|
|
.list-none li:before {
|
|
content: '';
|
|
}
|
|
.list-square {
|
|
margin-left: 1.5em;
|
|
list-style: square;
|
|
}
|
|
.list-square li:before {
|
|
content: '';
|
|
}
|
|
.list-disc {
|
|
margin-left: 1.5em;
|
|
list-style: disc;
|
|
}
|
|
.list-disc li:before {
|
|
content: '';
|
|
}
|
|
.list-circle {
|
|
margin-left: 1.5em;
|
|
list-style: circle;
|
|
}
|
|
.list-circle li:before {
|
|
content: '';
|
|
}
|
|
.list-decimal {
|
|
margin-left: 1.5em;
|
|
list-style: decimal;
|
|
}
|
|
.list-decimal li:before {
|
|
content: '';
|
|
}
|
|
.list-inline {
|
|
margin-left: 0;
|
|
}
|
|
.list-inline li {
|
|
display: inline-block;
|
|
margin: 0;
|
|
margin-right: 1em;
|
|
}
|
|
.list-inline li:Last-Child {
|
|
margin-right: 0;
|
|
}
|
|
.list-inline.list-inline-sep li {
|
|
margin-right: 0;
|
|
}
|
|
.list-inline.list-inline-sep li:after {
|
|
content: " | ";
|
|
}
|
|
.list-inline.list-inline-sep li:Last-Child:after {
|
|
content: '';
|
|
}
|
|
.list-inline.list-inline-dash li {
|
|
margin-right: 0;
|
|
}
|
|
.list-inline.list-inline-dash li:after {
|
|
content: " - ";
|
|
}
|
|
.list-inline.list-inline-dash li:Last-Child:after {
|
|
content: '';
|
|
}
|
|
.list-inline.list-inline-comma li {
|
|
margin-right: 0;
|
|
}
|
|
.list-inline.list-inline-comma li:after {
|
|
content: ", ";
|
|
}
|
|
.list-inline.list-inline-comma li:Last-Child:after {
|
|
content: ". ";
|
|
}
|
|
.list-block li {
|
|
display: block;
|
|
margin-right: 0;
|
|
}
|
|
/* Tables */
|
|
table {
|
|
max-width: 100%;
|
|
border-collapse: collapse;
|
|
border-spacing: 0;
|
|
}
|
|
.table {
|
|
width: 100%;
|
|
}
|
|
.table caption,
|
|
.table th,
|
|
.table td {
|
|
padding: 0.375em;
|
|
}
|
|
.table caption {
|
|
font-weight: bold;
|
|
text-align: left;
|
|
border-bottom: 2px solid;
|
|
}
|
|
.table th {
|
|
font-weight: bold;
|
|
}
|
|
.table th,
|
|
.table td {
|
|
border-bottom: 1px solid;
|
|
}
|
|
.table thead th {
|
|
vertical-align: bottom;
|
|
}
|
|
.table tbody tr:hover td {
|
|
background-color: rgba(34, 34, 34, 0.050000000000000044);
|
|
}
|
|
.table tfoot {
|
|
font-style: italic;
|
|
}
|
|
.table tfoot td {
|
|
border-bottom: 0;
|
|
vertical-align: top;
|
|
}
|
|
@media (max-width: 640px) {
|
|
.scroll {
|
|
width: 100%;
|
|
overflow-y: hidden;
|
|
overflow-x: scroll;
|
|
margin-bottom: 1.5em;
|
|
}
|
|
.scroll table {
|
|
width: 100%;
|
|
margin-bottom: 0;
|
|
}
|
|
.scroll thead,
|
|
.scroll tbody,
|
|
.scroll tfoot,
|
|
.scroll tr,
|
|
.scroll th,
|
|
.scroll td {
|
|
white-space: nowrap;
|
|
}
|
|
}
|
|
/* Quotes, code and poetry */
|
|
q {
|
|
quotes: "\201C" "\201D" "\2018" "\2019";
|
|
}
|
|
:lang(en) > q {
|
|
quotes: "\201C" "\201D" "\2018" "\2019";
|
|
}
|
|
:lang(fr) > q {
|
|
quotes: "\00AB\A0" "\A0\00BB" "\201C" "\201D" "\2018" "\2019";
|
|
}
|
|
:lang(es) > q {
|
|
quotes: "\00AB" "\00BB" "\201C" "\201D";
|
|
}
|
|
:lang(it) > q {
|
|
quotes: "\00AB\A0" "\A0\00BB" "\201C" "\201D";
|
|
}
|
|
:lang(de) > q {
|
|
quotes: "\00BB" "\00AB" "\203A" "\2039";
|
|
}
|
|
:lang(no) > q {
|
|
quotes: "\00AB\A0" "\A0\00BB" "\2039" "\203A";
|
|
}
|
|
/* [en] http://en.wikipedia.org/wiki/International_variation_in_quotation_marks */
|
|
q:before {
|
|
content: open-quote;
|
|
}
|
|
q:after {
|
|
content: close-quote;
|
|
}
|
|
/* [fr] http://www.iamvdo.me/blog/n-oubliez-pas-la-propriete-css-quotes */
|
|
blockquote {
|
|
z-index: 0;
|
|
position: relative;
|
|
margin-left: 0;
|
|
margin-right: 0;
|
|
padding-left: 1.5em;
|
|
border: solid rgba(102, 102, 102, 0.19999999999999996);
|
|
border-width: 0 0 0 5px;
|
|
}
|
|
blockquote:before {
|
|
z-index: -1;
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
content: "\00AB";
|
|
line-height: 0;
|
|
font-size: 10rem;
|
|
color: rgba(102, 102, 102, 0.09999999999999998);
|
|
}
|
|
blockquote p:last-of-type {
|
|
margin-bottom: 0;
|
|
}
|
|
blockquote footer,
|
|
blockquote .src {
|
|
display: block;
|
|
font-size: 80%;
|
|
}
|
|
blockquote footer:before,
|
|
blockquote .src:before {
|
|
content: "\2014 \00A0";
|
|
}
|
|
cite,
|
|
.cite {
|
|
font-style: italic;
|
|
}
|
|
address {
|
|
font-style: normal;
|
|
}
|
|
/* pre and code */
|
|
pre,
|
|
code,
|
|
var,
|
|
samp,
|
|
kbd,
|
|
tt,
|
|
.tt {
|
|
font-family: monospace, monospace;
|
|
font-size: 1em;
|
|
}
|
|
pre {
|
|
-moz-tab-size: 4;
|
|
tab-size: 4;
|
|
overflow-x: auto;
|
|
}
|
|
@media print {
|
|
pre {
|
|
overflow: hidden;
|
|
white-space: pre-wrap;
|
|
word-wrap: break-word;
|
|
}
|
|
}
|
|
kbd {
|
|
white-space: nowrap;
|
|
padding: .1em .3em;
|
|
background-color: #eee;
|
|
border: 1px solid #aaa;
|
|
border-radius: 4px;
|
|
box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2), 0 0 0 1px #ffffff inset;
|
|
color: #333;
|
|
}
|
|
samp {
|
|
font-weight: bold;
|
|
}
|
|
var {
|
|
font-style: italic;
|
|
}
|
|
/* Box */
|
|
.box {
|
|
display: block;
|
|
margin-bottom: 1.5em;
|
|
padding: 1.5em 1.5em;
|
|
padding-bottom: .1em;
|
|
border: 1px solid;
|
|
}
|
|
@media print {
|
|
.box {
|
|
border: 1px solid !important;
|
|
}
|
|
}
|
|
@media (min-width: 640px) {
|
|
.box.right {
|
|
width: 33%;
|
|
margin-left: 1.5em;
|
|
}
|
|
.box.left {
|
|
width: 33%;
|
|
margin-right: 1.5em;
|
|
}
|
|
.box.center {
|
|
width: 75%;
|
|
}
|
|
}
|
|
/* Paragraphs */
|
|
p,
|
|
.p,
|
|
ul,
|
|
ol,
|
|
dl,
|
|
dd,
|
|
blockquote,
|
|
address,
|
|
pre,
|
|
.table,
|
|
fieldset {
|
|
margin-top: 0;
|
|
margin-bottom: 1.5em;
|
|
font-family: var(--policecorps);
|
|
}
|
|
/* Typography for small screens
|
|
[fr] http://www.alsacreations.com/astuce/lire/1177 */
|
|
@media (max-width: 640px) {
|
|
/* Set a maximum width of 100% for potentially problematic elements */
|
|
img,
|
|
table,
|
|
td,
|
|
blockquote,
|
|
code,
|
|
pre,
|
|
textarea,
|
|
input,
|
|
iframe,
|
|
object,
|
|
embed,
|
|
video {
|
|
max-width: 100% !important;
|
|
}
|
|
/* long words */
|
|
textarea,
|
|
table,
|
|
td,
|
|
th,
|
|
code,
|
|
samp {
|
|
word-wrap: break-word;
|
|
}
|
|
}
|
|
/* Print styles from HTML5 Boilerplate
|
|
Inlined to avoid required HTTP connection: h5bp.com/r */
|
|
@media print {
|
|
pre,
|
|
blockquote {
|
|
page-break-inside: avoid;
|
|
}
|
|
thead {
|
|
display: table-header-group;
|
|
}
|
|
tr,
|
|
img {
|
|
page-break-inside: avoid;
|
|
}
|
|
@page {
|
|
margin: 2cm .5cm;
|
|
}
|
|
p,
|
|
h2,
|
|
h3 {
|
|
orphans: 3;
|
|
widows: 3;
|
|
}
|
|
h2,
|
|
h3 {
|
|
page-break-after: avoid;
|
|
}
|
|
}
|
|
|
|
|