X-Git-Url: https://git.rapsys.eu/airbundle/blobdiff_plain/f110b8ba20232e0ceeb67390f8e672431868d32d..3ae948f1e2bcd932dee8b7ade9c1d151a617d776:/Resources/public/css/screen.css diff --git a/Resources/public/css/screen.css b/Resources/public/css/screen.css index 5477726..b58e9ff 100644 --- a/Resources/public/css/screen.css +++ b/Resources/public/css/screen.css @@ -1,473 +1,1195 @@ /* Reset link */ a { - text-decoration: none; - color: #066; + /*text-decoration: none;*/ + color: #136; } a:hover { text-decoration: underline solid #00c3f9; } -h1::first-letter, -h2::first-letter, -h3::first-letter, -h4::first-letter, -h5::first-letter, -h6::first-letter, -a::first-letter { - color: #00c3f9; +/* Font styling */ +html, body, dd, li, p, td { + /* DejaVu Sans/FreeSans/FreeSerif/Linux Libertine/Symbola/Unifont*/ + font-family: 'Droid Sans', 'Symbola', 'DejaVu Sans', 'FreeSans', sans-serif; +} + +button, code, input, option, optgroup, 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; - margin: 1.34rem 0; + font-size: 1.5rem; + margin: 0 0 .5rem; + padding: .5rem; } h2 { - font-size: 1.5rem; - margin: 1.245rem 0; + font-size: 1.17rem; + margin: 0 0 .5rem; + padding: .4rem; } h3 { - font-size: 1.17rem; - margin: 1.17rem 0; + font-size: 1rem; + margin: 0 0 .5rem; + padding: .4rem; } h4 { - font-size: 1rem; - margin: 1.33rem 0; + font-size: .85rem; + margin: 0 0 .5rem; + padding: .3rem; } h5 { - font-size: .83rem; - margin: 1.386rem 0; + font-size: .67rem; + margin: 0 0 .5rem; + padding: .2rem; } h6 { - font-size: .67rem; - margin: 1.561rem 0; + font-size: .5rem; + margin: 0 0 .5rem; + padding: .1rem; } p { + font-size: .9rem; + margin: 0 0 .4rem; + padding: .4rem; } -body { - display: flex; - flex-flow: column wrap; - color: #066; -} - -/* Header */ -#header { +article, +section, +nav { + margin: 0 .5rem .5rem; border: .1rem solid #00c3f9; border-top: 0; - border-radius: 0 0 .5rem .5rem; - margin: .5rem; - margin-top: 0; - padding: .5rem; - left: 0; - right: 0; - display: flex; - justify-content: space-between; - min-width: 180px; + border-left: 0; + border-radius: .5rem; } -#header h1 { - order: 0; - padding: 0; - margin: 0; - vertical-align: middle; - white-space: nowrap; +article article { + border-radius: .4rem; } -#header h1 a { - display: flex; +article article article { + border-radius: .3rem; } -/*#header h2 { - order: 1; - font-size: 1.5rem; - margin: 0; - white-space: nowrap; +section { + border-radius: .4rem; } -#header h2:before { - content: ">\00a0"; -}*/ - -#header nav { - order: 3; - margin-left: auto; - display: flex; - flex-direction: row; - flex-wrap: wrap; - align-items: center; - justify-content: flex-end; +/*article { + background-color: #cff; } -#header nav h2 { - display: none; +article article { + background-color: white; } -#header nav a { - text-align: center; - border-radius: .25rem; - padding: .375rem .5rem .25rem .5rem; - margin: 0 0 .1rem .5rem; - border: .1rem solid #00c3f9; - font-weight: bold; +article article article { + border-radius: .3rem; background-color: #cff; +}*/ + +header { + margin: 0; + padding-bottom: .5rem; + /*background-color: #369; + border-radius: inherit;*/ + background-color: #00c3f9; + color: #136; + border-radius: .4rem .4rem 0 0; } -/* Message */ -div.error::before, -div.error::after { - content: "â "; - line-height: 100%; - margin: auto 0; +article header { + border-radius: .4rem .4rem 0 0; + margin-bottom: .5rem; } -div.error { - display: flex; - flex-direction: row; - justify-content: space-between; - border: .05rem solid #c33333; - background-color: #f9c3c3; - color: #c33333; - font-size: .9rem; - padding: .2rem; - border-radius: .2rem; - text-align: center; +article article header { + border-radius: .3rem .3rem 0 0; + margin-bottom: .3rem; } -div.flash { - margin: 0 .5rem .5rem; +article article article header { + border-radius: .2rem .2rem 0 0; + margin-bottom: .2rem; } -/*ul#error::before, -ul#error::after, -ul.error::before, -ul.error::after, -ul#notice::before, -ul#notice::after { - content: "â "; - padding: .1rem .5rem 0 .5rem; - position: absolute; +header h1, +header h2, +header h3, +header h4, +header h5, +header h6, +header p { + margin-bottom: 0; + padding-bottom: 0; + border-bottom: 0 none; } -ul#error::before, -ul#error::after { - padding-top: .2rem; +/*nav strong { + display: block; + font-size: 1.17rem; + margin: 0 0 .5rem; + padding: .4rem; +}*/ + +strong { + font-weight: bold; } -ul#notice::before, -ul#notice::after { - content: "â¹"; - padding-top: .3rem; +pre { + margin: 0 .5rem .3rem; + font-size: .8rem; } -ul#notice::after, -ul#error::after { - margin-left: 37.8rem; +dl { + margin: 0 .5rem .5rem; } -ul.error::after { - margin-left: 34rem; +dl:first-child, +dl:only-child, +dl:first-of-type { + margin-top: .5rem; } -ul#notice, -ul#error, -ul.error { - display: flex; - flex-direction: column; - justify-content: center; - box-sizing: border-box; - text-align: center; - border: .05rem solid #c33333; - background-color: #f9c3c3; - color: #c33333; +dt { + color: #369; font-size: .9rem; - padding: .2rem; - border-radius: .2rem; - width: 40rem; - margin: 0 auto .5rem auto; + font-weight: bold; } -ul.error { - width: 36rem; - margin: .2rem 0 0 0; +dd { + font-size: .9rem; + margin-left: 1rem; } -ul#notice { - border: .05rem solid #3333c3; - background-color: #c3c3f9; - color: #3333c3; +.map figure, +.multimap figure, +.thumb figure { + text-align: center; } -ul.error { - margin-top: .2rem; -}*/ - -/* Content */ -#form, -#content, -#dashboard { +.map img, +.multimap img, +.thumb img { + border-radius: .2rem; border: .1rem solid #00c3f9; - border-radius: .5rem; - margin: .5rem; - margin-top: 0; - overflow: hidden; - padding: .5rem; + aspect-ratio: 1; } -section h2 { - background-color: #cff; - border-bottom: .1rem solid #00c3f9; - margin: -.5rem -.5rem .5rem -.5rem; - padding: .5rem; - padding-bottom: .4rem; +.map dd { + margin: 0; } -/* Form */ -form { - display: flex; - flex-direction: column; - border: .05rem solid #00c3f9; - border-radius: .2rem; - padding: .5rem; +.map dd img { + width: 100%; + width: calc(100% - .2rem); + height: auto; } -form section { - margin-bottom: 1rem; +.thumb img { + width: 100%; + width: calc(100% - 1.2rem); } -form section:only-child, -form section:last-child, -form section:last-of-type { - margin-bottom: .5rem; +.four .multimap { + grid-column: span 4; } -form section section, -form section section:only-child, -form section section:last-child, -form section section:last-of-type { - width: 50%; - margin-bottom: 0; +.three .multimap { + grid-column: span 3; } -form div { - display: flex; - flex-direction: row; - justify-content: space-around; - margin-bottom: .5rem; +.two .multimap { + grid-column: span 2; } -form div:only-child, -form div:last-child, -form div:last-of-type { - margin-bottom: 0; +body { + display: flex; + flex-flow: column wrap; + color: #036; } -form section div.error { - margin: 0 1rem; +ul { + font-size: .9rem; + list-style: ' - ' inside none; + padding: .5rem; + margin: 0 0 .5rem 0; } -form section section div.error { - margin: .25rem 0 0 0; +nav ul { + list-style: none inside none; + gap: .5rem; + /*margin: .5rem;*/ } +/*nav ul ul { + margin-top: .5rem; + margin-bottom: 0; +}*/ + +/* Form */ label { - min-width: 5rem; - font-size: .9rem; - padding: .2rem 0; - text-align: right; + font-size: .8rem; white-space: nowrap; } button, input, select, +option, +optgroup, textarea { - box-sizing: border-box; - width: 100%; - padding: .1rem; border: .05rem solid #00c3f9; border-radius: .2rem; - font-size: .8rem; + font-size: .75rem; color: #066; + background-color: transparent; + box-sizing: border-box; } -button.submit { - width: 25%; - min-width: 8rem; - margin: 0 auto; - padding: .2rem .1rem; +form { + display: flex; + flex-direction: column; + flex-wrap: wrap; + margin: 0 .5rem .5rem; + text-align: center; } -/* Vertical form */ -.form_col { - margin-left: .5rem; - width: 10rem; +form .row { + flex-direction: row; } -.form_col div { +form div { + display: flex; + align-content: space-around; + justify-content: center; flex-direction: column; + margin-bottom: .5rem; } -.form_col div.error { - flex-direction: row; +form div:only-child, +form div:last-child, +form div:last-of-type { + margin-bottom: 0; } -.form_col label { - text-align: center; +form label { + width: 12rem; + line-height: 1.3rem; + padding-right: 1rem; + text-align: right; } -.form_col section section, -.form_col section section:only-child, -.form_col section section:last-child, -.form_col section section:last-of-type { - width: auto; +form label.captcha { + line-height: normal; } -.form_col div.date { - flex-direction: row; - justify-content: space-between; +form label.captcha img { + height: 1.325rem; } -/* Dashboard */ -#dashboard .panel { - display: flex; - flex-direction: row; - flex-wrap: wrap; - place-content: space-between; +form input, +form option, +form optgroup, +form select, +form textarea, +form section section { + width: 24rem; + padding: .1rem; + margin: 0 auto; } -#dashboard .grid { - display: table; - border: .05rem solid #00c3f9; - flex-grow: 1; - border-radius: .2rem; /* marche pas sur chrome */ - table-layout: fixed; - width: calc(100% - 12rem); - border-collapse: collapse; +form select { + padding: 0 .1rem .1rem .1rem; } -#dashboard .cell { - display: table-cell; - text-align: left; - border: .05rem solid #00c3f9; - font-size: initial; - height: 8rem; +form button { + width: 10rem; + /*margin: .5rem auto 0 auto;*/ + margin: 0 auto; + padding: 0 .1rem .2rem .1rem; } -#dashboard dl.cell { - height: 3rem; +form .message { + margin: 0 0 .5rem 0; } -#dashboard .cell h3 { - font-size: 1rem; - padding: .25rem; - margin: 0; +form div .message { + margin: .25rem 0 0 0; } -#dashboard .cell dd { +/* Vertical form */ +.location .col label, +.col label { + width: 8rem; + padding-right: 0; + padding-bottom: .2rem; text-align: center; + margin: 0 auto; +} + +.location .col input, +.location .col textarea, +.col input, +.col option, +.col optgroup, +.col select, +.col textarea { + width: 8rem; +} + +.col button { + width: 8rem; } -#dashboard .seventh { - width: calc(100% / 7); +.col .row { + flex-direction: column; } -#dashboard .disabled { - color: #acc; - background-color: #bee; +.col div.date { + flex-direction: row; + justify-content: space-between; } -#dashboard .current { +/* Header */ +#header { background-color: #cff; + border: .1rem solid #136; + border-top: 0; + border-left: 0; + border-radius: 0 0 .5rem .5rem; + margin: 0 .5rem .5rem; + display: flex; + flex-direction: column; + justify-content: space-between; + font-weight: bold; + line-height: 45px; + padding: .5rem; + gap: .5rem; } -#dashboard .next { - background-color: #eff; +#header div { + display: flex; + flex-direction: row; + justify-content: space-between; + gap: .5rem; } -#dashboard .session { - border-radius: .2rem; - border: .1rem solid #00c3f9; - font-size: .8rem; - padding: .2rem; - margin: 0 .1rem .1rem .1rem; - overflow-x: hidden; +#logo { + padding: 0; white-space: nowrap; - text-overflow: ellipsis; + color: #09c; + text-shadow: 1.5px 1.5px 3px #136; + text-decoration: none; + display: flex; + font-family: 'Lemon', sans-serif; + font-size: 2rem; + line-height: 45px; + gap: .5rem; } -#dashboard .pending { - background-color: #ccc; +#logo img, +#logo span { + margin: 0 auto; } -#dashboard .granted { - background-color: #cff; - /*background-color: #33b679; - border-color: #33b679;*/ +#title { + margin: .25rem 0 0; + padding: 0; + border-bottom: 0 none; + text-align: right; + display: inline-grid; + flex: 1 1 auto; + font-family: 'Lemon', sans-serif; + font-weight: normal; + /*white-space: nowrap;*/ } -#dashboard .disputed { - background-color: #fcc; +#title a { + text-decoration: none; + color: #09c; + text-shadow: 1.5px 1.5px 3px #136; + /*overflow-x: hidden; + text-overflow: ellipsis;*/ } -#dashboard .orphaned { - background-color: #fc9; +#nav { + display: flex; + flex-wrap: wrap; + gap: .5rem; + line-height: 2.5rem; + margin: 0; + border: 0 none; } -/* Footer */ -#footer { - border: .1rem solid #00c3f9; - border-radius: .5rem; - margin: .5rem; - margin-top: 0; - padding: .5rem; +#nav a { + flex: 1 1 auto; + border: .1rem solid #136; + border-top: 0; + border-left: 0; + border-radius: .2rem; + background-color: #00c3f9; + color: #136; text-align: center; - font-size: .8rem; + padding: 0 .25rem; +} + +/* Message */ +.message { + margin: 0 .5rem .5rem; display: flex; + flex-direction: row; justify-content: space-between; - background-color: #cff; + font-size: .9rem; + padding: .2rem; + border-radius: .2rem; + text-align: center; + border: .05rem solid transparent; } -#footer details { - font-weight: bold; +.message::before, +.message::after { + margin: auto 0; + padding: 0 .25rem; } -#footer summary::after { - display: none; +.message ul { + margin: 0; + list-style: none inside none; + gap: .1rem; } -#footer summary::-webkit-details-marker { - display: none; +.mortal, +.mortal button, +.mortal select { + /*border-color: #c33333; + color: #c33333;*/ + border-color: #930; + background-color: #f9c3c3; + color: #930; } -/* viewport responsive hack */ -@media ( max-width: 650px ) { - #header { - flex-wrap: wrap; - } +.dangerous, +.mortal { + border-radius: .2rem; + padding: .5rem 0; +} - #dashboard .panel { - place-content: center; - flex-direction: column; - } +.error { + border-color: #c33333; + background-color: #f9c3c3; + color: #c33333; +} + +.error::before, +.error::after { + /*XXX: display /!\ symbol */ + content: "â "; +} + +.notice { + border-color: #3333c3; + background-color: #c3c3f9; + color: #3333c3; +} + +.notice::before, +.notice::after { + /*XXX: see https://www.fileformat.info/info/unicode/char/2139/fontsupport.htm + * DejaVu Sans/FreeSans/FreeSerif/Linux Libertine/Symbola/Unifont*/ + /*XXX: display i symbol */ + content: "â¹"; + /*XXX: display # symbol */ + /*content: "â";*/ +} + +.dangerous, +.dangerous button, +.dangerous select { + /*border-color: #c39333; + background-color: #f9c333; + color: #936333;*/ + border-color: #930; + background-color: #fc9; + color: #930; +} + +.warning { + border-color: #c39333; + background-color: #f9c333; + color: #936333; +} + +.warning::before, +.warning::after { + /*XXX: see https://www.fileformat.info/info/unicode/char/2139/fontsupport.htm + * DejaVu Sans/FreeSans/FreeSerif/Linux Libertine/Symbola/Unifont*/ + content: "?"; + /*XXX: display # symbol */ + /*content: "â";*/ +} + +/* Dashboard */ +#dashboard, +#form, +#recover, +#regulation { + /*border-radius: .5rem;*/ + /*border: .1rem solid #00c3f9; + margin: .5rem; + margin-top: 0; + display: flex; + flex-direction: column;*/ +} + +.panel { + display: flex; + flex-direction: row; + margin: 0 .5rem .5rem; + gap: .5rem; +} + +.grid { + display: grid; + border-style: solid; + border-color: #00c3f9; + border-radius: .2rem; + box-sizing: border-box; + border-collapse: collapse; + grid-gap: .1rem; + flex: 1 1 auto; + margin: 0 0 auto 0; + padding: 0; +} + +.grid article, +.grid section { + border-collapse: inherit; + /*border-radius: inherit;*/ + border-style: inherit; + /*border-width: .1rem; + border-width: inherit;*/ + box-sizing: inherit; + flex-grow: inherit; + margin: 0; + min-height: 5rem; + overflow: hidden; +} + +.grid header { + border-radius: .2rem .2rem 0 0; + margin-bottom: 0; +} + +.grid ul { + /*margin: .1rem;*/ + padding: .1rem; + margin: 0; +} + +/*.grid section { + border-color: inherit; +}*/ + +/*.grid ul { + display: block; + margin: .1rem; + font-size: .8rem; + list-style: none inside none; +}*/ + +.grid li { + border-width: .1rem; + border-style: solid; + border-radius: .2rem; + white-space: nowrap; + padding: .1rem; + display: flex; + margin: 0 0 auto; + flex-direction: row; + justify-content: space-between; + overflow-x: hidden; + text-overflow: ellipsis; +} + +/*XXX: required by ul display:block for overflow:hidden*/ +/*.grid li:only-child, +.grid li:last-child, +.grid li:last-of-type { + margin: 0; +}*/ + +.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; +} + +.grid p { + padding: 0 0 .3rem; + margin: 0; +} + +.grid p:only-child, +.grid p:last-child, +.grid p:last-of-type { + padding: 0; +} + +.current { + filter: hue-rotate(-90deg) saturate(2); +} + +.granted { + background-color: #cff; + border-color: #00c3f9; +} - #dashboard .grid { +/*.granted, +.granted a { + background-color: #cff; + border-color: #00c3f9; +} + +.disputed, +.disputed a { + border-color: #930; + background-color: #fc9; + color: #930; +}*/ + +.highlight { + filter: hue-rotate(90deg); +} + +.canceled { + filter: hue-rotate(180deg) grayscale(33%); +} + +.locked { + filter: hue-rotate(180deg); +} + +.pending { + filter: grayscale(33%); +} + +.disabled { + filter: grayscale(66%); +} + +/*.canceled, +.canceled a, +.canceled h2, +.canceled header { + color: #963; + background-color: #fddddd; + border-color: #963; +} + +.locked, +.locked a { + border-color: #930; + background-color: #f9c3c3; + color: #930; +} + +.pending, +.pending a { + background-color: #ccc; + border-color: #066; +} + +.highlight, +.highlight a, +.highlight h3, +.highlight h3 a { + border-color: #3333c3; + background-color: #c3c3f9; + color: #606; +}*/ + +.calendar a { + display: grid; + /*grid-template-columns: 1fr auto fit-content(1fr);*/ + 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 { + overflow-x: hidden; + text-overflow: ellipsis; + text-align: center; +} + +.calendar .glyph { + font-family: '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; +} + +.calendar .pseudonym { + grid-column: span 2; +} + +.seven { + grid-template-columns: repeat(7, 1fr); +} + +.four { + grid-template-columns: repeat(4, 1fr); +} + +.three { + grid-template-columns: repeat(3, 1fr); +} + +.two { + grid-template-columns: repeat(2, 1fr); +} + +/*.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; +} + +.city .grid article, +.location .grid article { + min-height: auto; + height: fit-content; +} + +.city .grid { + gap: .5rem; +}*/ + +.location form { + margin: .5rem auto; +} + +.location form .row { + flex-direction: column; +} + +.location form div { + margin-left: auto; + margin-right: auto; +} + +.location label { + width: 20rem; + padding-right: 0; + text-align: center; +} + +.location input, +.location textarea { + width: 20rem; + margin: 0 .1rem; +} + +.form { + margin: 0; + display: flex; + flex-direction: column; + gap: .5rem; +} + +.form h2 { + font-size: 1.17rem; + padding: .4rem; +} + +.form a { + white-space: nowrap; +} + +.form section { + margin: 0; + border: .05rem solid #00c3f9; + border-radius: .2rem; + width: 100%; +} + +.form form { + gap: .5rem; +} + +/* Footer */ +#footer { + border: .1rem solid #00c3f9; + border-radius: .5rem; + margin: .5rem; + margin-top: 0; + padding: .5rem; + text-align: center; + font-size: .8rem; + line-height: 2.5rem; + display: flex; + justify-content: space-between; + background-color: #cff; + gap: .5rem; +} + +#footer summary::after { + display: none; +} + +#footer summary::-webkit-details-marker { + display: none; +} + +#footer ul { + list-style: none inside none; + margin: 0; +} + +#footer a, +#footer details { + padding: 0 .5rem; + border: .1rem solid #136; + border-top: 0; + border-left: 0; + border-radius: .2rem; + background-color: #00c3f9; + color: #136; + justify-content: center; +} + +#footer details a { + padding: 0; + border: 0 none; +} + +/* viewport responsive hack */ +@media ( max-width: 1400px ) { + .location label, + .location input, + .location textarea { + width: 12rem; + } + + .session .three { + grid-template-columns: repeat(2, 1fr); + } +} + +@media ( max-width: 1000px ) { + .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; + } + + form label { + width: 6rem; + line-height: 2rem; + } + + form label.captcha img { + height: auto; + width: 6rem; + padding: .25rem 0; + } + + form input, + form option, + form optgroup, + form select, + form textarea, + form section section { + width: 20rem; + line-height: 2rem; + } + + form button { + width: 6rem; + line-height: 2rem; + } + + .col label, + .col input, + .col option, + .col optgroup, + .col select, + .col textarea { + width: 12rem; + } + + .col button { + width: 12rem; + } + + .seven { + grid-template-columns: repeat(4, 1fr); + } + + .calendar .sunday { + grid-column: span 2; + } + + /*.grid section:nth-child(7n) { + grid-column: span 2; + }*/ + + .four { + 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), + #dashboard .seventh:nth-child(7n+4) { + width: calc(100% / 4 - (3/4*.1rem)); + } + + #dashboard .seventh:nth-child(7n+5), + #dashboard .seventh:nth-child(7n+6), + #dashboard .seventh:nth-child(7n+7) { + width: calc(100% / 3 - (2/3*.1rem)); + }*/ +} + +@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; } - #dashboard div.grid { - display: grid; + form input, + form option, + form optgroup, + form select, + form textarea, + form section section { + width: 14rem; + margin: 0 auto; + } + + #logo { + flex-direction: column; } - .form_col { - margin: .5rem auto 0 auto; + .seven { + grid-template-columns: repeat(2, 1fr); + } + + /*.grid section:nth-child(7n) { + grid-column: span 2; + margin-bottom: .5rem; + } + + .grid section:only-child, + .grid section:last-child, + .grid section:last-of-type { + margin-bottom: 0; + }*/ + + .calendar .sunday { + margin-bottom: .5rem; + } + + .calendar .sunday:only-child, + .calendar .sunday:last-child { + margin-bottom: 0; + } + + .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); + } + + #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 ) { + #header div { + flex-direction: column; + } + + #title { + text-align: center; + } + + #logo { + flex-direction: row; + } + + 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, + #footer { + flex-direction: column; + } + + form label { + text-align: center; + } + + .seven { + grid-template-columns: repeat(1, 1fr); + } + + /*.grid section:nth-child(n) { + grid-column: auto; + }*/ + .calendar .sunday { + grid-column: auto; + } + + .four { + grid-template-columns: repeat(1, 1fr); + } + + .four .multimap { + grid-column: span 1; } } +@media ( max-width: 320px ) { + #logo { + flex-direction: column; + } + + #title { + white-space: normal; + } +} + +@media ( max-width: 260px ) { + .col label, + .col input, + .col option, + .col optgroup, + .col select, + .col textarea { + width: 10rem; + } + + .col button { + width: 10rem; + } +}