arthur.bebou

Le site arthur.bebou.netlib.re - retour accueil
style.css (2174B)
      1 * {
      2 	box-sizing: border-box;
      3 }
      4 
      5 html {
      6     scroll-behavior: smooth;
      7     scroll-padding-top: 2rem;
      8 }
      9 
     10 article > * + * {
     11 	margin-top: 1.3rem;
     12 }
     13 
     14 body {
     15 	display: flex;
     16 	flex-direction: column;
     17 	gap: 2rem;
     18 	font-family: sans-serif;
     19 	margin: 1rem;
     20 }
     21 
     22 article p:first-child, article h2:first-child {
     23 	margin-top: 0;
     24 }
     25 
     26 header {
     27 	text-align: center;
     28 	padding-top: 1.5rem;
     29 	padding-bottom: 1rem;
     30 	max-width: 50em;
     31 	margin: auto;
     32 	text-wrap: balance;
     33 }
     34 
     35 h1 {
     36 	line-height: 1.2em;
     37 }
     38 
     39 article {
     40 	flex: 1;
     41 	width: 100%;
     42 }
     43 
     44 footer {
     45 	padding-top: 2rem;
     46 	text-align: center;
     47 	padding-bottom: 2rem;
     48 	font-size: smaller;
     49 }
     50 
     51 #toc {
     52 	padding-bottom: 2em;
     53 }
     54 
     55 #toc ol {
     56 	padding-left: 1em;
     57 }
     58 
     59 #toc > ol {
     60 	padding: 0;
     61 }
     62 
     63 #toc li {
     64 	list-style-type: none;
     65 	margin-top: 0.5em;
     66 }
     67 
     68 
     69 blockquote {
     70 	border-left: solid 1px;
     71 	padding-left: 1rem;
     72 	font-style: italic;
     73 	margin-top: 2em;
     74 	margin-bottom: 2em;
     75 }
     76 
     77 li, p {
     78 	line-height: 1.3em;
     79 }
     80 
     81 * + :is(h2,h3,h4,h5) {
     82 	margin-top: 2em;
     83 }
     84 
     85 pre {
     86 	border: 1px solid;
     87 	padding: 1rem;
     88 	margin-bottom: 2rem;
     89 	margin-top: 2rem;
     90 	overflow-x: auto;
     91 }
     92 
     93 code {
     94 	font-size: 0.95rem;
     95 }
     96 
     97 sup, sub {
     98   vertical-align: baseline;
     99   position: relative;
    100 }
    101 
    102 sup {
    103   top: -0.4em;
    104 }
    105 
    106 sub {
    107   top: 0.3em;
    108 }
    109 
    110 figcaption {
    111 	font-size: 0.9rem;
    112 	opacity: 0.8;
    113 	text-align: center;
    114 }
    115 
    116 img, video {
    117 	margin-left: auto;
    118 	margin-right: auto;
    119 	display: block;
    120 	max-width: 400px;
    121 }
    122 
    123 section {
    124 	border-top: 1px solid;
    125 }
    126 
    127 table {
    128 	width: 100%;
    129 	border-collapse: collapse;
    130 	border-bottom: 1px solid;
    131 	overflow-x: auto;
    132 }
    133 
    134 th {
    135 	text-align: left;
    136 }
    137 
    138 th, td {
    139 	padding-right: 1em;
    140 	padding-top: 0.5em;
    141 }
    142 
    143 thead tr th {
    144 	border-bottom: 1px solid;
    145 }
    146 
    147 :is(th,td)[style*=right] {
    148 	padding-right: 0;
    149 	padding-left: 1em;
    150 }
    151 
    152 @media (min-width: 60rem) {
    153 	main {
    154 		display: flex;
    155 		gap: 1rem;
    156 		padding-left: 1rem;
    157 		padding-right: 2rem;
    158 		padding-top: 2rem;
    159 		padding-bottom: 2rem;
    160 		justify-content: center;
    161 		align-items: flex-start;
    162 	}
    163 
    164 	#toc {
    165 		flex: 1 0 10rem;
    166 		max-width: 20rem;
    167 		position: sticky;
    168 		top: 2em;
    169 		min-width: 15rem;
    170 	}
    171 
    172 	#toc > p {
    173 		margin-top: 0;
    174 	}
    175 
    176 	article {
    177 		flex: 4;
    178 		max-width: 75ch;
    179 		min-width: 0;
    180 	}
    181 }
    182 
    183 @media (max-width: 500px) {
    184 	table {
    185 		display: block;
    186 	}
    187 }
    188