X-Git-Url: https://git.rapsys.eu/.gitweb.cgi/airbundle/blobdiff_plain/7c94f309ed2931a94a697b34eccc6f77ae0c878b..26f40c52b9468a710ae24a764a293a84f0b8fa8e:/Resources/public/css/screen.css diff --git a/Resources/public/css/screen.css b/Resources/public/css/screen.css index 6d7d54c..3924cb8 100644 --- a/Resources/public/css/screen.css +++ b/Resources/public/css/screen.css @@ -22,64 +22,67 @@ a::first-letter { html, body, dd, li, p, td { /* DejaVu Sans/FreeSans/FreeSerif/Linux Libertine/Symbola/Unifont*/ font-family: 'Droid Sans', 'Symbola', 'DejaVu Sans', 'FreeSans', sans-serif; - font-display: swap; } button, code, input, option, optgroup, pre, select, textarea { font-family: 'Droid Sans Mono', monospace; - font-display: swap; } dt, h1, h2, h3, h4, h5, h6, label, legend, th, details { font-family: 'Droid Serif', serif; - font-display: swap; } /* Default styling */ h1 { - font-size: 2rem; -} - -h2 { font-size: 1.5rem; margin: 0 0 .5rem; padding: .5rem; } -h3 { +h2 { font-size: 1.17rem; margin: 0 0 .5rem; padding: .4rem; } -h4 { +h3 { font-size: 1rem; margin: 0 0 .5rem; padding: .3rem; } -h5 { +h4 { font-size: .85rem; margin: 0 0 .5rem; padding: .2rem; } -h6 { +h5 { font-size: .67rem; margin: 0 0 .5rem; padding: .1rem; } +h6 { + font-size: .5rem; + margin: 0 0 .5rem; + padding: .1rem; +} + header { margin: 0 0 .5rem; } -header h2 { +header h1 { margin: 0; padding: .5rem .5rem .3rem; border-bottom: 0 none; } +header h2 { + border-bottom: 0 none; +} + nav strong { display: block; font-size: 1.17rem; @@ -87,7 +90,7 @@ nav strong { padding: .4rem; } -h2, h3, h4, h5, header, nav strong { +h1, h2, h3, h4, header { background-color: #cff; border-bottom: .1rem solid #00c3f9; } @@ -126,6 +129,47 @@ dd { margin-left: 1rem; } +.map figure, +.multimap figure, +.thumb figure { + text-align: center; +} + +.map img, +.multimap img, +.thumb img { + border-radius: .2rem; + border: .1rem solid #00c3f9; + aspect-ratio: 1; +} + +.map dd { + margin: 0; +} + +.map dd img { + width: 100%; + width: calc(100% - .2rem); + height: auto; +} + +.thumb img { + width: 100%; + width: calc(100% - 1.2rem); +} + +.four .multimap { + grid-column: span 4; +} + +.three .multimap { + grid-column: span 3; +} + +.two .multimap { + grid-column: span 2; +} + body { display: flex; flex-flow: column wrap; @@ -207,10 +251,19 @@ form div:last-of-type { form label { width: 12rem; + line-height: 1.3rem; padding-right: 1rem; text-align: right; } +form label.captcha { + line-height: normal; +} + +form label.captcha img { + height: 1.325rem; +} + form input, form option, form optgroup, @@ -242,6 +295,7 @@ form div .message { } /* Vertical form */ +.location .col label, .col label { width: 8rem; padding-right: 0; @@ -250,6 +304,8 @@ form div .message { margin: 0 auto; } +.location .col input, +.location .col textarea, .col input, .col option, .col optgroup, @@ -282,22 +338,19 @@ form div .message { flex-direction: row; flex-wrap: nowrap; justify-content: space-between; - line-height: 32px; + line-height: 45px; font-size: 32px; padding: .5rem; gap: .5rem; } -#header h1 { +#logo { + font-size: 2rem; padding: 0; margin: auto; white-space: nowrap; - width: 171px; - height: 32px; -} - -#header h2 { - display: none; + width: 100px; + height: 45px; } #header nav { @@ -459,7 +512,6 @@ form div .message { .grid article, .grid section { border-collapse: inherit; - border-color: inherit; border-radius: inherit; border-style: inherit; border-width: .1rem; @@ -470,6 +522,10 @@ form div .message { overflow: hidden; } +.grid section { + border-color: inherit; +} + .grid h3 { margin: 0; overflow: hidden; @@ -508,6 +564,9 @@ form div .message { } .grid a { + /*TODO: voir pourquoi on a besoin d'un overflow-y de merde, sans une putain de scrollbar s'affiche dans certaines conditions sur chrome, depuis le passage de deux lignes de grid à 3 !!!*/ + /*Est-ce parce que le city est pas expanded ???*/ + overflow-y: clip; overflow-x: hidden; text-overflow: ellipsis; } @@ -569,9 +628,14 @@ form div .message { } .highlight, -.highlight a { +.highlight a, +.highlight h3 { border-color: #3333c3; background-color: #c3c3f9; + color: #606; +} + +.highlight h3::first-letter { color: #3333c3; } @@ -585,6 +649,8 @@ form div .message { grid-template-columns: max-content 1fr max-content; flex: 1 1 auto; grid-gap: .1rem; + /*XXX: reset to visible to prevent scroll*/ + overflow-x: visible; } .calendar .reducible { @@ -593,6 +659,21 @@ form div .message { text-align: center; } +.calendar .glyph { + font-family: 'Noto Color Emoji', 'Noto Emoji', 'Droid Sans', 'Symbola', 'DejaVu Sans', 'FreeSans', sans-serif; +} + +.calendar .temperature, +.calendar .rain, +.calendar .rate { + line-height: 1rem; + text-align: right; +} + +.calendar .rate { + text-align: center; +} + .calendar .info { line-height: 1rem; text-align: right; @@ -618,21 +699,26 @@ form div .message { grid-template-columns: repeat(2, 1fr); } -.location h3 { +.city .grid h3, +.location .grid h3, +.city .grid h4, +.location .grid h4 { border-style: none; + margin: 0; flex: 1 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } -.location p { - margin: 0 .5rem .5rem; +.city .grid article, +.location .grid article { + min-height: auto; + height: fit-content; } -.location .grid article, -.location .grid section { - min-height: auto; +.city .grid { + gap: .5rem; } .location form { @@ -699,6 +785,7 @@ form div .message { display: flex; justify-content: space-between; background-color: #cff; + gap: .5rem; } #footer summary::after { @@ -721,13 +808,28 @@ form div .message { .location textarea { width: 12rem; } + + .location .two { + grid-template-columns: repeat(1, 1fr); + } + + .session .three { + grid-template-columns: repeat(2, 1fr); + } } -@media ( max-width: 900px ) { +@media ( max-width: 950px ) { .panel { + /*flex-flow: column-reverse wrap;*/ flex-flow: column wrap; } + .location .two { + grid-template-columns: repeat(2, 1fr); + } +} + +@media ( max-width: 900px ) { .form { flex-direction: row; } @@ -737,6 +839,12 @@ form div .message { line-height: 2rem; } + form label.captcha img { + height: auto; + width: 6rem; + padding: .25rem 0; + } + form input, form option, form optgroup, @@ -781,6 +889,26 @@ form div .message { grid-template-columns: repeat(3, 1fr); } + .three { + grid-template-columns: repeat(2, 1fr); + } + + .two { + grid-template-columns: repeat(1, 1fr); + } + + .four .multimap { + grid-column: span 3; + } + + .three .multimap { + grid-column: span 2; + } + + .two .multimap { + grid-column: span 1; + } + /*#dashboard .seventh:nth-child(7n+1), #dashboard .seventh:nth-child(7n+2), #dashboard .seventh:nth-child(7n+3), @@ -795,6 +923,18 @@ form div .message { }*/ } +@media ( max-width: 700px ) { + .session .three { + grid-template-columns: repeat(1, 1fr); + } + + .multimap img { + width: 100%; + width: calc(100% - .2rem); + height: auto; + } +} + @media ( max-width: 600px ) { form label { margin: 0 auto; @@ -838,11 +978,26 @@ form div .message { margin-bottom: 0; } - .four, - .three { + .four { grid-template-columns: repeat(2, 1fr); } + .three { + grid-template-columns: repeat(1, 1fr); + } + + .four .multimap { + grid-column: span 2; + } + + .three .multimap { + grid-column: span 1; + } + + .location .two { + grid-template-columns: repeat(1, 1fr); + } + /*#dashboard .seventh:nth-child(n) { width: calc(100% / 2 - .1rem); } @@ -850,9 +1005,33 @@ form div .message { #dashboard .seventh:nth-child(7n) { width: calc(100%); }*/ + + /*.city .two, + .location .two { + grid-template-columns: 1fr; + } + + .city .grid article, + .location .grid article { + overflow: hidden; + }*/ } @media ( max-width: 450px ) { + dd, p, #footer { + font-size: 110%; + } + + a, dd, figcaption, #footer { + /*XXX: required to validate Tap targets are sized appropriately*/ + line-height: 3rem; + } + + figure, + .calendar a { + line-height: normal; + } + form .row, .grid, .form, @@ -860,6 +1039,10 @@ form div .message { flex-direction: column; } + form label { + text-align: center; + } + .seven { grid-template-columns: repeat(1, 1fr); } @@ -871,10 +1054,13 @@ form div .message { grid-column: auto; } - .four, - .three { + .four { grid-template-columns: repeat(1, 1fr); } + + .four .multimap { + grid-column: span 1; + } } @media ( max-width: 260px ) {