Raphaël G. Git Repositories - blogbundle/blob - Resources/public/css/screen.css

   1 /* Reset link */
   2 a {
   3         text-decoration: none;
   4 }
   5
   6 a:hover {
   7         text-decoration: underline;
   8 }
   9
  10 /* Default styling */
  11 h1 {
  12         font-size: 2rem;
  13         margin: 1.34rem 0;
  14 }
  15
  16 h2 {
  17         font-size: 1.5rem;
  18         margin: 1.245rem 0;
  19 }
  20
  21 h3 {
  22         font-size: 1.17rem;
  23         margin: 1.17rem 0;
  24 }
  25
  26 h4 {
  27         font-size: 1rem;
  28         margin: 1.33rem 0;
  29 }
  30
  31 h5 {
  32         font-size: .83rem;
  33         margin: 1.386rem 0;
  34 }
  35
  36 h6 {
  37         font-size: .67rem;
  38         margin: 1.561rem 0;
  39 }
  40
  41 p {
  42         color: #066;
  43 }
  44
  45 body {
  46         display: flex;
  47         flex-flow: column wrap;
  48 }
  49
  50 /* Header */
  51 #header {
  52         border-top: .1rem solid #0063c9;
  53         padding: .5rem;
  54         background-color: #00c3f9;
  55         color: #0063c9;
  56         border-radius: 0 0 .5rem .5rem;
  57         display: flex;
  58 }
  59
  60 /* hack for top menu wrapping */
  61 @media ( max-width: 450px ) {
  62         #header {
  63                 flex-wrap: wrap;
  64         }
  65 }
  66
  67 #header h1 {
  68         order: 0;
  69         font-size: 1.5rem;
  70         margin: 0;
  71         white-space: nowrap;
  72 }
  73
  74 #header h1:after {
  75         content: "\00a0";
  76 }
  77
  78 #header h2 {
  79         order: 1;
  80         font-size: 1.5rem;
  81         margin: 0;
  82         white-space: nowrap;
  83 }
  84
  85 #header h2:before {
  86         content: ">\00a0";
  87 }
  88
  89 #header a {
  90         color: #0063c9;
  91 }
  92
  93 #header nav {
  94         order: 3;
  95         margin-left: auto;
  96         display: flex;
  97         flex-direction: row;
  98         flex-wrap: wrap;
  99         align-items: center;
 100         justify-content: flex-end;
 101 }
 102
 103 #header nav h2 {
 104         display: none;
 105 }
 106
 107 #header nav a {
 108         text-align: center;
 109         border-radius: .25rem;
 110         padding: .25rem .5rem;
 111         margin: 0 0 .1rem .5rem;
 112         color: #00c3f9;
 113         background-color: #0063c9;
 114         font-weight: bold;
 115 }
 116
 117 /* Index */
 118 #content {
 119         margin: .5rem 0;
 120         border-radius: .5rem;
 121         overflow: hidden;
 122         border: .1rem solid #00c3f9;
 123         padding: .5rem;
 124 }
 125
 126 #content h2 {
 127         background-color: #00c3f9;
 128         margin: -.5rem -.5rem 0 -.5rem;
 129         padding: .5rem;
 130         color: #0063c9;
 131 }
 132
 133 #content h2 a {
 134         color: #0063c9;
 135 }
 136
 137 #content article {
 138         border-bottom: .1rem solid #00c3f9;
 139         padding: .5rem;
 140 }
 141
 142 #content article:last-child {
 143         border-bottom: none;
 144 }
 145
 146 #content article header {
 147         margin: 1.17rem 0;
 148 }
 149
 150 #content article header h3 {
 151         margin: 0;
 152 }
 153
 154 #content article header p {
 155         margin: 0;
 156         font-size: .75rem;
 157         display: flex;
 158         justify-content: space-between;
 159 }
 160
 161 #content article a {
 162         color: #0063c9;
 163 }
 164
 165 #content article p {
 166         text-align: justify;
 167         text-justify: distribute;
 168         margin-bottom: .75rem;
 169 }
 170
 171 #content article nav {
 172         text-align: right;
 173         margin-bottom: .5rem;
 174 }
 175
 176 #content article:last-child nav {
 177         margin-bottom: 0;
 178 }
 179
 180 /* Article */
 181 #article,
 182 #contact,
 183 #keyword {
 184         margin: .5rem 0;
 185         border-radius: .5rem;
 186         border: .1rem solid #00c3f9;
 187         padding: .5rem;
 188         overflow-x: hidden;
 189 }
 190
 191 #article header,
 192 #contact header,
 193 #keyword header {
 194         background-color: #00c3f9;
 195         margin: -.5rem -.5rem .5rem -.5rem;
 196         padding: .5rem;
 197         color: #0063c9;
 198 }
 199
 200 #article header h3,
 201 #contact header h3,
 202 #keyword header h3 {
 203         margin: 0;
 204 }
 205
 206 #article header p,
 207 #keyword header p {
 208         margin: 0;
 209         font-size: .75rem;
 210         display: flex;
 211         justify-content: space-between;
 212 }
 213
 214 #article a,
 215 #keyword a {
 216         color: #0063c9;
 217 }
 218
 219 #article p,
 220 #article pre,
 221 #article ul,
 222 #contact div,
 223 #keyword p,
 224 #keyword pre,
 225 #keyword ul {
 226         margin-bottom: .5rem;
 227 }
 228
 229 #article p,
 230 #keyword p {
 231         text-align: justify;
 232         text-justify: distribute;
 233 }
 234
 235 #article p:last-child,
 236 #contact div:last-child {
 237         margin-bottom: none;
 238 }
 239
 240 #contact input,
 241 #contact textarea {
 242         width: 24rem;
 243         padding: 2px;
 244         border: 1px solid #00c3f9;
 245 }
 246
 247 #contact button.submit {
 248         width: 4rem;
 249         margin: 0 10rem;
 250 }
 251
 252 #contact div div:last-child {
 253         text-align: center;
 254 }
 255
 256 #article pre {
 257         border-radius: .5rem;
 258         border: .1rem solid #00c3f9;
 259         padding: .5rem;
 260         color: #0063c9;
 261         overflow-x: auto;
 262         margin-bottom: 1rem;
 263 }
 264
 265 #article ul {
 266         margin-top: -.5rem;
 267 }
 268
 269 #article ul:first-child {
 270         margin-top: none;
 271 }
 272
 273 #footer {
 274         font-size: .8rem;
 275         padding: .5rem;
 276         background-color: #00c3f9;
 277         color: #0063c9;
 278         border-radius: .5rem .5rem 0 0;
 279         bottom: 0;
 280         text-align: center;
 281         font-weight: bold;
 282         position: relative;
 283         left: 0;
 284         right: 0;
 285         display: flex;
 286         justify-content: space-between;
 287 }
 288
 289 #footer summary:after {
 290         display: none;
 291 }
 292
 293 #footer summary::-webkit-details-marker {
 294         display: none;
 295 }
 296
 297 #footer nav {
 298         font-weight: normal;
 299 }
 300
 301 #footer a {
 302         color: #0063c9;
 303 }
 304
 305 /*
 306 #footer summary:after,
 307 #footer p:after {
 308         content: ' - ';
 309 }
 310
 311 #footer p:last-child:after {
 312         content: '';
 313 }*/