From: Raphaƫl Gertz Date: Sun, 25 Feb 2018 05:21:30 +0000 (+0100) Subject: Add latest css changes X-Git-Tag: 0.1~56 X-Git-Url: https://git.rapsys.eu/blogbundle/commitdiff_plain/7ab0c56bbb9c228d9b6b24cdee90c1fa73570a6a?ds=sidebyside Add latest css changes --- diff --git a/Resources/public/css/screen.css b/Resources/public/css/screen.css index 74e1a23..5e207c5 100644 --- a/Resources/public/css/screen.css +++ b/Resources/public/css/screen.css @@ -38,63 +38,268 @@ h6 { margin: 1.561rem 0; } -#wrapper { +p { + color: #066; +} + +body { display: flex; flex-flow: column wrap; } +/* Header */ #header { - width: 100%; - border-top: .1rem solid #0074d9; + border-top: .1rem solid #0063c9; padding: .5rem; - background-color: #7fdbff; - color: #0074d9; + background-color: #00c3f9; + color: #0063c9; border-radius: 0 0 .5rem .5rem; + display: flex; } -#header a { +/* hack for top menu wrapping */ +@media ( max-width: 450px ) { + #header { + flex-wrap: wrap; + } } #header h1 { + order: 0; + font-size: 1.5rem; + margin: 0; + white-space: nowrap; +} + +#header h1:after { + content: "\00a0"; +} + +#header h2 { + order: 1; + font-size: 1.5rem; + margin: 0; + white-space: nowrap; +} + +#header h2:before { + content: ">\00a0"; +} + +#header a { + color: #0063c9; } #header nav { - float: right; + order: 3; + margin-left: auto; display: flex; flex-direction: row; flex-wrap: wrap; - align-items: stretch; + align-items: center; + justify-content: flex-end; +} + +#header nav h2 { + display: none; } #header nav a { - flex: 1; text-align: center; border-radius: .25rem; padding: .25rem .5rem; - margin: 0 0 .5rem .5rem; - /*color: #399696;*/ - color: #0093f9; - background-color: #001f3f; + margin: 0 0 .1rem .5rem; + color: #00c3f9; + background-color: #0063c9; font-weight: bold; } +/* Index */ +#content { + margin: .5rem 0; + border-radius: .5rem; + overflow: hidden; + border: .1rem solid #00c3f9; + padding: .5rem; +} + +#content h2 { + background-color: #00c3f9; + margin: -.5rem -.5rem 0 -.5rem; + padding: .5rem; + color: #0063c9; +} + +#content h2 a { + color: #0063c9; +} + +#content article { + border-bottom: .1rem solid #00c3f9; + padding: .5rem; +} + +#content article:last-child { + border-bottom: none; +} + +#content article header { + margin: 1.17rem 0; +} + +#content article header h3 { + margin: 0; +} + +#content article header p { + margin: 0; + font-size: .75rem; + display: flex; + justify-content: space-between; +} + +#content article a { + color: #0063c9; +} + +#content article p { + text-align: justify; + text-justify: distribute; + margin-bottom: .75rem; +} + +#content article nav { + text-align: right; + margin-bottom: .5rem; +} + +#content article:last-child nav { + margin-bottom: 0; +} + +/* Article */ +#article, +#contact, +#keyword { + margin: .5rem 0; + border-radius: .5rem; + border: .1rem solid #00c3f9; + padding: .5rem; + overflow-x: hidden; +} + +#article header, +#contact header, +#keyword header { + background-color: #00c3f9; + margin: -.5rem -.5rem .5rem -.5rem; + padding: .5rem; + color: #0063c9; +} + +#article header h3, +#contact header h3, +#keyword header h3 { + margin: 0; +} + +#article header p, +#keyword header p { + margin: 0; + font-size: .75rem; + display: flex; + justify-content: space-between; +} + +#article a, +#keyword a { + color: #0063c9; +} + +#article p, +#article pre, +#article ul, +#contact div, +#keyword p, +#keyword pre, +#keyword ul { + margin-bottom: .5rem; +} + +#article p, +#keyword p { + text-align: justify; + text-justify: distribute; +} + +#article p:last-child, +#contact div:last-child { + margin-bottom: none; +} + +#contact input, +#contact textarea { + width: 24rem; + padding: 2px; + border: 1px solid #00c3f9; +} + +#contact button.submit { + width: 4rem; + margin: 0 10rem; +} + +#contact div div:last-child { + text-align: center; +} + +#article pre { + border-radius: .5rem; + border: .1rem solid #00c3f9; + padding: .5rem; + color: #0063c9; + overflow-x: auto; + margin-bottom: 1rem; +} + +#article ul { + margin-top: -.5rem; +} + +#article ul:first-child { + margin-top: none; +} + #footer { font-size: .8rem; - width: 100%; padding: .5rem; - background-color: #7fdbff; - color: #0074d9; - border-radius: .5rem; + background-color: #00c3f9; + color: #0063c9; + border-radius: .5rem .5rem 0 0; bottom: 0; - position: absolute; + text-align: center; + font-weight: bold; + position: relative; + left: 0; + right: 0; + display: flex; + justify-content: space-between; } -#footer summary { - display: inline; +#footer summary:after { + display: none; } -#footer summary:after { - content: "\00a0"; +#footer summary::-webkit-details-marker { + display: none; +} + +#footer nav { + font-weight: normal; +} + +#footer a { + color: #0063c9; } /*