X-Git-Url: https://git.rapsys.eu/.gitweb.cgi/airbundle/blobdiff_plain/f110b8ba20232e0ceeb67390f8e672431868d32d..82b10cad60d810a8027b00321c10be22f023c3cc:/Resources/public/css/screen.css diff --git a/Resources/public/css/screen.css b/Resources/public/css/screen.css index 5477726..c1016d9 100644 --- a/Resources/public/css/screen.css +++ b/Resources/public/css/screen.css @@ -18,6 +18,19 @@ a::first-letter { color: #00c3f9; } +/* Font styling */ +html, body, dd, li, p, td { + font-family: 'Droid Sans', sans-serif; +} + +button, code, input, option, pre, select, textarea { + font-family: 'Droid Sans Mono', monospace; +} + +dt, h1, h2, h3, h4, h5, h6, label, legend, th, details { + font-family: 'Droid Serif', serif; +} + /* Default styling */ h1 { font-size: 2rem; @@ -40,7 +53,7 @@ h4 { } h5 { - font-size: .83rem; + font-size: .85rem; margin: 1.386rem 0; } @@ -212,6 +225,7 @@ ul.error { /* Content */ #form, #content, +#policy, #dashboard { border: .1rem solid #00c3f9; border-radius: .5rem; @@ -224,9 +238,27 @@ ul.error { section h2 { background-color: #cff; border-bottom: .1rem solid #00c3f9; - margin: -.5rem -.5rem .5rem -.5rem; + margin: -.5rem; + margin-bottom: .5rem; padding: .5rem; - padding-bottom: .4rem; + padding-bottom: .5rem; +} + +section h3 { + background-color: #cff; + border-bottom: .1rem solid #00c3f9; + margin: -.45rem; + margin-bottom: .45rem; + padding: .45rem; + padding-bottom: .5rem; +} + +section h4 { + background-color: #cff; + border-bottom: .1rem solid #00c3f9; + margin: -.25rem; + margin-bottom: .25rem; + padding: .4rem; } /* Form */ @@ -259,7 +291,7 @@ form section section:last-of-type { form div { display: flex; flex-direction: row; - justify-content: space-around; + justify-content: center; margin-bottom: .5rem; } @@ -278,9 +310,9 @@ form section section div.error { } label { - min-width: 5rem; - font-size: .9rem; - padding: .2rem 0; + min-width: 10rem; + font-size: .85rem; + padding: .2rem 1rem .2rem 0; text-align: right; white-space: nowrap; } @@ -348,7 +380,7 @@ button.submit { border: .05rem solid #00c3f9; flex-grow: 1; border-radius: .2rem; /* marche pas sur chrome */ - table-layout: fixed; + table-layout: fixed; width: calc(100% - 12rem); border-collapse: collapse; } @@ -421,6 +453,113 @@ button.submit { background-color: #fc9; } +/* Policy */ +#policy { + display: flex; + flex-direction: column; + /*border: .1rem solid #00c3f9; + border-radius: .5rem; + margin: .5rem; + margin-top: 0; + overflow: hidden; + padding: .5rem;*/ +} + + +/*#policy h4 { + background-color: #cff; + border-bottom: .1rem solid #00c3f9; + margin: -.24rem -.24rem .24rem -.24rem; + padding: .24rem; + padding-bottom: .3rem; +}*/ + +#policy section { + display: flex; + flex-direction: column; + border: .05rem solid #00c3f9; + border-radius: .2rem; + padding: .5rem; + margin-bottom: 1rem; +} + +#policy section section { + padding: .25rem; + padding-bottom: .5rem; + margin-bottom: .5rem; +} + +#policy section:only-child, +#policy section:last-child, +#policy section:last-of-type { + margin-bottom: .5rem; +} + +#policy section section:only-child, +#policy section section:last-child, +#policy section section:last-of-type { + margin-bottom: 0; +} + +/*#policy div { + display: flex; + flex-direction: row; + justify-content: space-around; + margin-bottom: .5rem; +} + +#policy div:only-child, +#policy div:last-child, +#policy div:last-of-type { + margin-bottom: 0; +}*/ +/* + * XXX: TODO: + * see https://developer.mozilla.org/fr/docs/Web/HTML/Element/dl + * see https://www.w3.org/Style/Examples/007/fonts.fr.html + * see https://fonts.googleapis.com/css?family=Droid+Sans:100,200,300,400,500,600,700,800,900,100i,200i,300i,400i,500i,600i,700i,800i,900i|Droid+Sans+Mono:100,200,300,400,500,600,700,800,900,100i,200i,300i,400i,500i,600i,700i,800i,900i|Droid+Serif:100,200,300,400,500,600,700,800,900,100i,200i,300i,400i,500i,600i,700i,800i,900i + * see https://fonts.google.com/?query=droi + * see https://fonts.google.com/specimen/Inconsolata + * see https://fonts.google.com/specimen/Tangerine%20light,light+italic+regular+semi-bold+bold+extra-bold + * see https://fonts.google.com/?selection.family=Roboto:100i + * see https://developers.google.com/fonts/docs/getting_started + */ + +#policy dl { + /*display: flex; + flex-direction: row; + justify-content: space-around; + padding-bottom: .5rem;*/ + padding: .25rem; + margin-bottom: .5rem; +} + +#policy dt { + font-size: .9rem; + font-weight: bold; + padding-bottom: .2rem; +} + +#policy dd { + font-size: .9rem; + margin-left: 1.5rem; +} + +#policy dd:before { +} + +#policy dl:only-child, +#policy dl:last-child, +#policy dl:last-of-type, +#policy dt:only-child, +#policy dt:last-child, +#policy dt:last-of-type, +#policy dd:only-child, +#policy dd:last-child, +#policy dd:last-of-type { + margin-bottom: 0; +} + /* Footer */ #footer { border: .1rem solid #00c3f9;