diff options
| -rw-r--r-- | design/COPYING | 5 | ||||
| -rw-r--r-- | design/index.html | 52 | ||||
| -rw-r--r-- | design/reset.css | 48 | ||||
| -rw-r--r-- | design/style.css | 87 |
4 files changed, 192 insertions, 0 deletions
diff --git a/design/COPYING b/design/COPYING new file mode 100644 index 0000000..010c787 --- /dev/null +++ b/design/COPYING @@ -0,0 +1,5 @@ +The file 'reset.css' is distributed under the public domain (http://meyerweb.com/eric/tools/css/reset/). + +Other files follow the license of the project. +See the 'LICENSE' file at the root of the project. + diff --git a/design/index.html b/design/index.html new file mode 100644 index 0000000..e98661a --- /dev/null +++ b/design/index.html @@ -0,0 +1,52 @@ +<!DOCTYPE html> +<html lang="fr"> +<head> + <meta charset="UTF-8"> + <meta name="viewport" content="width=device-width, initial-scale=1"> + <title></title> + <link href="reset.css" rel="stylesheet"> + <link href="style.css" rel="stylesheet"> +</head> +<body> + <article> + <h1>Page title</h1> + <p> + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim aeque doleamus animo, cum corpore dolemus, fieri tamen permagna accessio potest, si aliquod aeternum et infinitum impendere. + </p> + <h2>A. Section</h2> + <p> + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim aeque doleamus animo, cum corpore dolemus, fieri <em>tamen</em> permagna accessio potest, si aliquod aeternum et infinitum impendere malum nobis opinemur. <a href="">Quod idem licet transferre</a>. + </p> + <h3>1. Subsection</h3> + <p> + Et ultimum bonorum, quod omnium philosophorum sententia tale debet esse, <a href="">ut ad Orestem pervenias profectus a Theseo</a>. At vero Epicurus una in domo, et ea quidem angusta, quam magnos quantaque amoris conspiratione consentientis tenuit amicorum greges! Quod fit etiam nunc ab Epicureis. Sed ad rem redeamus; de hominibus dici non modo. + </p> + <p> + Civitatis, P. Scaevolam M'.que Manilium, ab iisque vitiis, quae paulo ante collegi, abest plurimum et, cum stultorum vitam cum sua comparat, magna afficitur voluptate. Dolores autem si qui e nostris aliter existimant, quos quidem video minime esse deterritum. Quae cum dixisset, Explicavi, inquit, sententiam meam, et eo quidem consilio, tuum iudicium ut. + </p> + <h3>2. Subsection</h3> + <p> + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim aeque doleamus animo, cum corpore dolemus, <em>fieri tamen</em> permagna accessio potest, si aliquod aeternum et infinitum impendere malum nobis opinemur. Quod idem licet transferre in voluptatem, ut postea variari voluptas distinguique possit, augeri amplificarique non possit. + </p> + <p> + <a href="">Verborum vis et natura orationis</a> et <a href="">consequentium repugnantiumve ratio potest perspici</a>. Omnium autem rerum natura perspecta erit, nullo modo sine amicitia firmam et perpetuam iucunditatem vitae tenere possumus neque vero ipsam amicitiam tueri, nisi aeque. + </p> + <div class="quote"> + <blockquote cite=""> + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim aeque doleamus. + </blockquote> + <p>John Doe, <cite>Foo Bar</cite></p> + </div> + <p> + Laborum perfunctio neque <b>perpessio dolorum</b> per se esse expetendam et dolorem ipsum per se esse fugiendum. Itaque aiunt hanc quasi naturalem atque insitam in animis inclusae inter se reprehensiones non sunt vituperandae, maledicta, contumeliae, tum iracundiae, contentiones concertationesque in disputando pertinaces indignae philosophia mihi. + </p> + <h2>B. Section</h2> + <p> + Ignorant. Animi autem voluptates et dolores nasci fatemur e corporis voluptatibus et doloribus -- itaque concedo, quod modo dicebas, cadere causa, si qui incurrunt, numquam vim tantam habent, ut non dicas, quid non probes. Principio, inquam, in physicis, quibus maxime gloriatur, primum totus est alienus. <a href="">Democritea dicit perpauca mutans</a>, sed ita, ut ea, quae dicta sunt ab iis quos probamus, eisque nostrum iudicium et. + </p> + <p> + Lorem ipsum dolor sit amet, consectetur <em>adipiscing</em> elit, sed do eiusmod tempor incididunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim aeque doleamus animo, cum corpore dolemus, fieri tamen permagna accessio potest, si aliquod aeternum et infinitum impendere malum nobis opinemur. <b>Quod idem licet transferre in voluptatem</b>, ut postea variari voluptas distinguique possit, augeri amplificarique non possit. At etiam Athenis. + </p> + </article> +</body> +</html> diff --git a/design/reset.css b/design/reset.css new file mode 100644 index 0000000..af94440 --- /dev/null +++ b/design/reset.css @@ -0,0 +1,48 @@ +/* http://meyerweb.com/eric/tools/css/reset/ + v2.0 | 20110126 + License: none (public domain) +*/ + +html, body, div, span, applet, object, iframe, +h1, h2, h3, h4, h5, h6, p, blockquote, pre, +a, abbr, acronym, address, big, cite, code, +del, dfn, em, img, ins, kbd, q, s, samp, +small, strike, strong, sub, sup, tt, var, +b, u, i, center, +dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, +table, caption, tbody, tfoot, thead, tr, th, td, +article, aside, canvas, details, embed, +figure, figcaption, footer, header, hgroup, +menu, nav, output, ruby, section, summary, +time, mark, audio, video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; +} +/* HTML5 display-role reset for older browsers */ +article, aside, details, figcaption, figure, +footer, header, hgroup, menu, nav, section { + display: block; +} +body { + line-height: 1; +} +ol, ul { + list-style: none; +} +blockquote, q { + quotes: none; +} +blockquote:before, blockquote:after, +q:before, q:after { + content: ''; + content: none; +} +table { + border-collapse: collapse; + border-spacing: 0; +}
\ No newline at end of file diff --git a/design/style.css b/design/style.css new file mode 100644 index 0000000..d0b8c02 --- /dev/null +++ b/design/style.css @@ -0,0 +1,87 @@ +:root { + --color-dark: #04151F; + --color-gray: #BCB3BB; /* quote */ + --color-light: #EFF7F6; + --color-rose: #F2B5D4; /* link accent */ + --color-light-rose: #F6CBE1; /* link accent hover */ + --color-green: #C9CBA3; /* highlight */ + + font-size: 20px; +} + +body { + font-family: Raveo, Inter, sans-serif; + + background: var(--color-dark); + color: var(--color-light); + + padding: 2rem 4rem; +} + +body * { + line-height: 1.4em; +} + +article { + max-width: 800px; + margin: 0 auto; +} + +h1, h2, h3 { + font-weight: 500; + + margin-bottom: 0.5rem; +} + +h1 { + font-size: 2.75rem; +} + +h2 { + font-size: 2rem; + margin-top: 2rem; +} + +h3 { + font-size: 1.5rem; + margin-top: 1.5rem; +} + +p { + margin-bottom: 1rem; +} + +a { + color: var(--color-rose); + text-decoration: underline; + &:hover { + color: #F6CBE1; + } +} + +em, cite { + font-style: italic; +} + +b, *::selection { + background: var(--color-green); + color: var(--color-dark); + padding: 0.05em 0.1em; + &::selection { + background: var(--color-light); + } +} + +.quote { + font-size: 0.85rem; +} + +blockquote { + padding: 0.5rem 2rem; + margin-bottom: 0.25rem; + + color: var(--color-gray); + + border-left: var(--color-rose) solid 0.25em; +} + |