diff --git a/index.html b/index.html index 5085189..4aaa8f7 100644 --- a/index.html +++ b/index.html @@ -11,6 +11,8 @@
+

titre exemple

+

texte exemple

diff --git a/style.css b/style.css index 6b23b6b..de6d222 100644 --- a/style.css +++ b/style.css @@ -1,5 +1,212 @@ +/* +@import url(./path/to/sheet.css); +*/ + + + + + +/*/////////////////////////////////////////////*/ +/*RESET*/ +body *:not(script) { + display: block; +} +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, font, img, ins, kbd, q, s, samp, +small, strike, strong, sub, sup, tt, var, +dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, +table, caption, tbody, tfoot, thead, tr, th, td { + margin: 0; + padding: 0; + border: 0; + outline: 0; + font-weight: inherit; + font-style: inherit; + font-size: 100%; + font-family: inherit; + vertical-align: baseline; + text-decoration: none; +} +:focus { + outline: 0; +} +body { + line-height: 1; + color: black; + background: white; +} +ol, ul { + list-style: none; +} +/* tables still need 'cellspacing="0"' in the markup */ +table { + border-collapse: separate; + border-spacing: 0; +} +caption, th, td { + text-align: left; + font-weight: normal; +} +blockquote:before, blockquote:after, +q:before, q:after { + content: ""; +} +blockquote, q { + quotes: "" ""; +} +* { + cursor: default; +} +/*RESET*/ +/*/////////////////////////////////////////////*/ + + + + + + + +/*////////////////////////////////////////////////////*/ +/*FONTS*/ +@font-face { + font-family: 'cabrion'; + src: url('../font/cabrion/cabrion-light.woff2') format('woff2'), + url('../font/cabrion/cabrion-light.woff') format('woff'); + url('../font/cabrion/cabrion-light.otf') format('opentype'); +} +@font-face { + font-family: 'paradroid'; + src: url('../font/paradroid/paradroidmono-light.woff2') format('woff2'), + url('../font/paradroid/paradroidmono-light.woff') format('woff'); + url('../font/paradroid/paradroidmono-light.ttf') format('truetype'); +} +@font-face { + font-family: 'louisgeorge'; + src: url('../font/louisgeorge/louis_george_cafe.woff2') format('woff2'), + url('../font/louisgeorge/louis_george_cafe.woff') format('woff'); + url('../font/louisgeorge/louis_george_cafe.ttf') format('truetype'); +} +@font-face { + font-family: 'louisgeorge_bold'; + src: url('../font/louisgeorge/louis_george_cafe_bold.woff2') format('woff2'), + url('../font/louisgeorge/louis_george_cafe_bold.woff') format('woff'); + url('../font/louisgeorge/louis_george_cafe_bold.ttf') format('truetype'); +} +@font-face { + font-family: 'louisgeorge_bolditalic'; + src: url('../font/louisgeorge/louis_george_cafe_bold_italic.woff2') format('woff2'), + url('../font/louisgeorge/louis_george_cafe_bold_italic.woff') format('woff'); + url('../font/louisgeorge/louis_george_cafe_bold_italic.ttf') format('truetype'); +} +@font-face { + font-family: 'louisgeorge_italic'; + src: url('../font/louisgeorge/louis_george_cafe_italic.woff2') format('woff2'), + url('../font/louisgeorge/louis_george_cafe_italic.woff') format('woff'); + url('../font/louisgeorge/louis_george_cafe_italic.ttf') format('truetype'); +} +@font-face { + font-family: 'louisgeorge_light'; + src: url('../font/louisgeorge/louis_george_cafe_light.woff2') format('woff2'), + url('../font/louisgeorge/louis_george_cafe_light.woff') format('woff'); + url('../font/louisgeorge/louis_george_cafe_light.ttf') format('truetype'); +} +@font-face { + font-family: 'louisgeorge_lightitalic'; + src: url('../font/louisgeorge/louis_george_cafe_light_italic.woff2') format('woff2'), + url('../font/louisgeorge/louis_george_cafe_light_italic.woff') format('woff'); + url('../font/louisgeorge/louis_george_cafe_light_italic.ttf') format('truetype'); +} +/*FONTS*/ +/*////////////////////////////////////////////////////*/ + + + + + + + +/*/////////////////////////////////////////////*/ +/*GLOBAL VARIABLE*/ +:root { + /* colors */ + --variable-name: rgb(000, 000, 000); + + /* fonts */ + --fonts-titles: louisgeorge_bold; + --fonts-textes: louisgeorge; +} +/*GLOBAL VARIABLE*/ +/*/////////////////////////////////////////////*/ + + + + + + +/*/////////////////////////////////////////////*/ +/*GENERAL SETTINGS*/ +html { + scroll-behavior: smooth; +} +main { + min-height: calc(100vh - 70px); +} +/*GENERAL SETTINGS*/ +/*/////////////////////////////////////////////*/ + + + + + + + + + + + + #fullpage { width: 100px; height: 100px; border: 1px solid red; } + + + + +h1, h2, h3, h4, h5, h6 { + font-family: 'var(--fonts-titles)', 'cabrion', sans-serif; +} +a, p, li { + font-family: 'var(--fonts-textes)', 'cabrion', sans-serif; +} +a, a > * { + cursor: pointer; +} +article a { + color: var(--article-link); +} +li *, li p, article b, article em, +article i, article a, article var { + display: inline; +} +p, var { + color: var(--article-little); +} +i { + font-style: italic; +} +b { + font-weight: 600; + color: var(--article-medium); +} +em { + font-weight: 600; + color: var(--article-em); +} +/*FONTS*/ +/*////////////////////////////////////////////////////*/ + diff --git a/styles/style.css b/styles/style.css new file mode 100644 index 0000000..872677e --- /dev/null +++ b/styles/style.css @@ -0,0 +1,208 @@ +/* +@import url(./path/to/sheet.css); +*/ + + + + + +/*/////////////////////////////////////////////*/ +/*RESET*/ +body *:not(script) { + display: block; +} +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, font, img, ins, kbd, q, s, samp, +small, strike, strong, sub, sup, tt, var, +dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, +table, caption, tbody, tfoot, thead, tr, th, td { + margin: 0; + padding: 0; + border: 0; + outline: 0; + font-weight: inherit; + font-style: inherit; + font-size: 100%; + font-family: inherit; + vertical-align: baseline; + text-decoration: none; +} +:focus { + outline: 0; +} +body { + line-height: 1; + color: black; + background: white; +} +ol, ul { + list-style: none; +} +/* tables still need 'cellspacing="0"' in the markup */ +table { + border-collapse: separate; + border-spacing: 0; +} +caption, th, td { + text-align: left; + font-weight: normal; +} +blockquote:before, blockquote:after, +q:before, q:after { + content: ""; +} +blockquote, q { + quotes: "" ""; +} +* { + cursor: default; +} +/*RESET*/ +/*/////////////////////////////////////////////*/ + + + + + + + +/*////////////////////////////////////////////////////*/ +/*FONTS*/ +@font-face { + font-family: 'cabrion'; + src: url('../fonts/cabrion/cabrion-light.woff2') format('woff2'), + url('../fonts/cabrion/cabrion-light.woff') format('woff'); + url('../fonts/cabrion/cabrion-light.otf') format('opentype'); +} +@font-face { + font-family: 'paradroid'; + src: url('../fonts/paradroid/paradroidmono-light.woff2') format('woff2'), + url('../fonts/paradroid/paradroidmono-light.woff') format('woff'); + url('../fonts/paradroid/paradroidmono-light.ttf') format('truetype'); +} +@font-face { + font-family: 'louisgeorge'; + src: url('../fonts/louisgeorge/louis_george_cafe.woff2') format('woff2'), + url('../fonts/louisgeorge/louis_george_cafe.woff') format('woff'); + url('../fonts/louisgeorge/louis_george_cafe.ttf') format('truetype'); +} +@font-face { + font-family: 'louisgeorge_bold'; + src: url('../fonts/louisgeorge/louis_george_cafe_bold.woff2') format('woff2'), + url('../fonts/louisgeorge/louis_george_cafe_bold.woff') format('woff'); + url('../fonts/louisgeorge/louis_george_cafe_bold.ttf') format('truetype'); +} +@font-face { + font-family: 'louisgeorge_bolditalic'; + src: url('../fonts/louisgeorge/louis_george_cafe_bold_italic.woff2') format('woff2'), + url('../fonts/louisgeorge/louis_george_cafe_bold_italic.woff') format('woff'); + url('../fonts/louisgeorge/louis_george_cafe_bold_italic.ttf') format('truetype'); +} +@font-face { + font-family: 'louisgeorge_italic'; + src: url('../fonts/louisgeorge/louis_george_cafe_italic.woff2') format('woff2'), + url('../fonts/louisgeorge/louis_george_cafe_italic.woff') format('woff'); + url('../fonts/louisgeorge/louis_george_cafe_italic.ttf') format('truetype'); +} +@font-face { + font-family: 'louisgeorge_light'; + src: url('../fonts/louisgeorge/louis_george_cafe_light.woff2') format('woff2'), + url('../fonts/louisgeorge/louis_george_cafe_light.woff') format('woff'); + url('../fonts/louisgeorge/louis_george_cafe_light.ttf') format('truetype'); +} +@font-face { + font-family: 'louisgeorge_lightitalic'; + src: url('../fonts/louisgeorge/louis_george_cafe_light_italic.woff2') format('woff2'), + url('../fonts/louisgeorge/louis_george_cafe_light_italic.woff') format('woff'); + url('../fonts/louisgeorge/louis_george_cafe_light_italic.ttf') format('truetype'); +} +/*FONTS*/ +/*////////////////////////////////////////////////////*/ + + + + + + + +/*/////////////////////////////////////////////*/ +/*GLOBAL VARIABLE*/ +:root { + /* colors */ + --color-texts: rgb(1, 1, 1); + --color-links: rgb(1, 1, 1); + + /* fonts */ + --font-titles: 'louisgeorge'; + --font-texts: 'paradroid'; + --font-fallback: 'cabrion'; +} +/*GLOBAL VARIABLE*/ +/*/////////////////////////////////////////////*/ + + + + + + +/*/////////////////////////////////////////////*/ +/*GENERAL SETTINGS*/ +html { + scroll-behavior: smooth; +} +main { + min-height: calc(100vh - 70px); +} +h1, h2, h3, h4, h5, h6 { + font-family: var(--font-titles), var(--font-fallback), sans-serif; +} +a, p, li { + font-family: var(--font-texts), var(--font-fallback), sans-serif; +} +a, a > * { + cursor: pointer; +} +article a { + color: var(--color-links); +} +li *, li p, article b, article em, +article i, article a, article var { + display: inline; +} +p, var { + color: var(--color-texts); +} +i { + font-style: italic; +} +b { + font-weight: 600; + color: var(--article-medium); +} +em { + font-weight: 600; + color: var(--article-em); +} +/*GENERAL SETTINGS*/ +/*/////////////////////////////////////////////*/ + + + + +#main { + height: 100vh; + width: 100vw; +} +img { + width: 100%; + height: 100%; +} +.contain { + object-fit: contain; +} +.cover { + object-fit: cover; +}