93 lines
1.5 KiB
CSS
93 lines
1.5 KiB
CSS
|
/*
|
||
|
|
Repeating the background mostly makes sense in the <body>. Otherwise, people usually want the image and preferably its center (not the top-right corner)
|
||
|
|
*/
|
||
|
|
*:not(body) {
|
||
|
|
background-repeat: no-repeat;
|
||
|
|
background-position: center center;
|
||
|
|
background-size: cover;
|
||
|
|
}
|
||
|
|
|
||
|
|
/*
|
||
|
|
In applications, there can be lists but HTML lists have bullet points and a bunch of useless styling attributes
|
||
|
|
*/
|
||
|
|
ul, ol, menu {
|
||
|
|
margin: 0;
|
||
|
|
padding: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
ul, menu {
|
||
|
|
list-style: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
p ul{
|
||
|
|
list-style-type: "-";
|
||
|
|
}
|
||
|
|
|
||
|
|
li {
|
||
|
|
margin: 0;
|
||
|
|
padding: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* buttons are clickable */
|
||
|
|
button{
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* i find default iframe borders ugly */
|
||
|
|
iframe{
|
||
|
|
border: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
* {
|
||
|
|
border-collapse: collapse;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* contain feels like a better default than fill (which stretches the image)*/
|
||
|
|
img{
|
||
|
|
object-fit: contain;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Typography. Adapted from https://github.com/etalab/template.data.gouv.fr/blob/7674ae351d44b46d9a8b7b4a41d491275f1c8861/src/css/base/typography.css (MIT licence) */
|
||
|
|
body {
|
||
|
|
font-family: "Source Sans Pro", Arial, sans-serif;
|
||
|
|
font-size: 16px;
|
||
|
|
line-height: 1.5em;
|
||
|
|
-webkit-font-smoothing: antialiased;
|
||
|
|
-moz-osx-font-smoothing: grayscale;
|
||
|
|
}
|
||
|
|
|
||
|
|
h1:first-child,
|
||
|
|
h2:first-child,
|
||
|
|
h3:first-child,
|
||
|
|
h4:first-child,
|
||
|
|
h5:first-child,
|
||
|
|
h6:first-child {
|
||
|
|
margin-top: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
h1 {
|
||
|
|
font-size: 2em;
|
||
|
|
line-height: 1.125em;
|
||
|
|
}
|
||
|
|
|
||
|
|
h2 {
|
||
|
|
font-size: 1.75em;
|
||
|
|
line-height: 1.25em;
|
||
|
|
}
|
||
|
|
|
||
|
|
h3 {
|
||
|
|
font-size: 1.5em;
|
||
|
|
line-height: 1.5em;
|
||
|
|
}
|
||
|
|
|
||
|
|
h4 {
|
||
|
|
font-size: 1.25em;
|
||
|
|
}
|
||
|
|
|
||
|
|
h5 {
|
||
|
|
font-size: 1.125em;
|
||
|
|
}
|
||
|
|
|
||
|
|
h6 {
|
||
|
|
font-size: 1em;
|
||
|
|
}
|