X-Git-Url: https://git.rapsys.eu/airbundle/blobdiff_plain/c1e710382e855cc7f17dc3db46318a24a308c596..b24934ba4fced0e88f7b25e429f80e187ba01e0a:/Resources/public/css/screen.css diff --git a/Resources/public/css/screen.css b/Resources/public/css/screen.css index 9edb527..f4ee830 100644 --- a/Resources/public/css/screen.css +++ b/Resources/public/css/screen.css @@ -1,127 +1,319 @@ /* 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; - 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; + font-size: 1.5rem; + margin: 0; + padding: 0 .6rem .6rem; } h2 { - font-size: 1.5rem; - margin: 0 0 .5rem; - padding: .5rem; + font-size: 1.17rem; + margin: 0; + padding: 0 .5rem .5rem; } h3 { - font-size: 1.17rem; - margin: 0 0 .5rem; - padding: .4rem; + font-size: 1rem; + margin: 0; + padding: 0 .4rem .4rem; } h4 { - font-size: 1rem; - margin: 0 0 .5rem; - padding: .3rem; + font-size: .85rem; + margin: 0; + padding: 0 .3rem .3rem; } h5 { - font-size: .85rem; - margin: 0 0 .5rem; - padding: .2rem; + font-size: .67rem; + margin: 0; + padding: 0 .2rem .2rem; } h6 { - font-size: .67rem; + font-size: .5rem; + margin: 0; + padding: 0 .1rem .1rem; +} + +ul { + list-style: ' - ' inside none; + margin: 0; + padding: 0 .5rem .5rem; +} + +li { + font-size: .9rem; + margin: 0; + padding: 0 .5rem .5rem; +} + +li:only-child, +li:last-child, +li:last-of-type { + padding-bottom: 0; +} + +p { + font-size: .9rem; + margin: 0; + padding: 0 .4rem .4rem; +} + +article, +section, +nav { + margin: 0 .5rem .5rem; + border: .1rem solid #00c3f9; + border-top: 0; + border-left: 0; + border-radius: .5rem; +} + +article article { + margin: 0 .3rem .3rem; + border-radius: .4rem; +} + +article article article { + margin: 0 .2rem .2rem; + border-radius: .3rem; +} + +section { + border-radius: .4rem; +} + +/*article { + background-color: #cff; +} + +article article { + background-color: white; +} + +article article article { + border-radius: .3rem; + background-color: #cff; +}*/ + +header { margin: 0 0 .5rem; - padding: .1rem; + padding: .5rem; + border-radius: .4rem .4rem 0 0; + /*background-color: #369; + border-radius: inherit;*/ + background-color: #00c3f9; + color: #136; +} + +header h2, +header h3, +header h4, +header h5, +header h6, +header p { + padding-left: 0; + padding-right: 0; +} + +header h2:last-child, +header h3:last-child, +header h4:last-child, +header h5:last-child, +header h6:last-child, +header p:last-child { + padding-bottom: 0; +} + +/*p:only-child, +p:last-child, +p:last-of-type { + padding-bottom: 0; +}*/ + +/*header h2:first-child { + padding-top: .5rem; +} + +header h3:first-child { + padding-top: .4rem; +} + +header h4:first-child { + padding-top: .3rem; +} + +header h5:first-child { + padding-top: .2rem; +} + +header h6:first-child { + padding-top: .1rem; +} + +header p:last-child { + padding-top: 0; +}*/ + +/*article header { + border-radius: .4rem .4rem 0 0; +}*/ + +/*article article header { + border-radius: .3rem .3rem 0 0; + margin-bottom: .3rem; +} + +article article article header { + border-radius: .2rem .2rem 0 0; + margin-bottom: .2rem; +}*/ + +/*header h1, +header h2, +header h3, +header h4, +header h5, +header h6, +header p { + margin-bottom: 0; + padding-bottom: 0; +}*/ + +.ellipsis { + /*Required for ellipsis on h2/h3/h4 in header*/ + display: grid; + margin-bottom: 0; +} + +.ellipsis > * { + overflow-x: hidden; + text-overflow: ellipsis; + white-space: nowrap; } -nav strong { +/*nav strong { display: block; font-size: 1.17rem; margin: 0 0 .5rem; padding: .4rem; +}*/ + +strong { + font-weight: bold; } -h2, h3, h4, h5, nav strong { - background-color: #cff; - border-bottom: .1rem solid #00c3f9; +pre { + margin: 0 .5rem .3rem; + font-size: .8rem; } -strong { +dl { + margin: 0 .5rem .5rem; +} + +dl:first-child, +dl:only-child, +dl:first-of-type { + margin-top: .5rem; +} + +dt { + color: #369; + font-size: .9rem; font-weight: bold; } -p { - margin: 0 .5rem .3rem; +dd { font-size: .9rem; + margin-left: 1rem; } -body { - display: flex; - flex-flow: column wrap; - color: #066; +.map figure, +.multimap figure, +.thumb figure { + text-align: center; } -nav, -section { - margin: 0 .5rem .5rem; +.map img, +.multimap img, +.thumb img { + border-radius: .2rem; border: .1rem solid #00c3f9; - border-radius: .3rem; + aspect-ratio: 1; } -ul { - display: grid; - margin: 0 .5rem .3rem; - font-size: .9rem; - list-style: ' - ' inside none; - gap: .3rem; +.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; + color: #036; } nav ul { list-style: none inside none; - margin-bottom: .5rem; gap: .5rem; + /*margin: .5rem;*/ } nav ul ul { + padding-top: .5rem; +} + +/*nav ul ul { margin-top: .5rem; margin-bottom: 0; -} +}*/ /* Form */ label { @@ -169,25 +361,21 @@ form div:last-of-type { margin-bottom: 0; } -/*form section div { - display: flex; - flex-direction: row; - align-content: space-around; - justify-content: center; -} - -form section section { - display: flex; - flex-direction: column; -}*/ - form label { width: 12rem; - /*padding: .2rem 1rem .2rem 0;*/ + 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, @@ -196,6 +384,7 @@ form textarea, form section section { width: 24rem; padding: .1rem; + margin: 0 auto; } form select { @@ -210,17 +399,25 @@ form button { } form .message { + margin: 0 0 .5rem 0; +} + +form div .message { margin: .25rem 0 0 0; } /* 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, @@ -233,10 +430,6 @@ form .message { width: 8rem; } -/*.col section { - width: auto; -}*/ - .col .row { flex-direction: column; } @@ -248,60 +441,84 @@ form .message { /* Header */ #header { - border: .1rem solid #00c3f9; + 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: row; - flex-wrap: nowrap; + flex-direction: column; justify-content: space-between; - line-height: 32px; - font-size: 32px; + font-weight: bold; + line-height: 45px; padding: .5rem; gap: .5rem; } -#header h1 { +#header div { + display: flex; + flex-direction: row; + justify-content: space-between; + gap: .5rem; +} + +#logo { padding: 0; - margin: 0; white-space: nowrap; - width: 171px; - height: 32px; + 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; } -#header h2 { - display: none; +#logo img, +#logo span { + margin: 0 auto; } -#header nav { - display: flex; +#title { + margin: .25rem 0 0; + padding: 0; + border-bottom: 0 none; + text-align: right; flex: 1 1 auto; - border-style: none; - margin: 0; + font-family: 'Lemon', sans-serif; + font-weight: normal; + /*white-space: nowrap;*/ +} + +#title a { + text-decoration: none; + color: #09c; + text-shadow: 1.5px 1.5px 3px #136; + /*overflow-x: hidden; + text-overflow: ellipsis;*/ } -#header ul { +#nav { display: flex; - flex: 1 1 auto; - flex-direction: row; flex-wrap: wrap; - margin: 0; gap: .5rem; + line-height: 2.5rem; + margin: 0; + border: 0 none; } -#header li { - display: flex; +#nav a { flex: 1 1 auto; + border: .1rem solid #136; + border-top: 0; + border-left: 0; border-radius: .2rem; - border: .1rem solid #00c3f9; - background-color: #cff; - justify-content: center; -} - -#header ul a { + background-color: #00c3f9; + color: #136; text-align: center; - font-weight: bold; + padding: 0 .25rem; } /* Message */ @@ -325,16 +542,23 @@ form .message { .message ul { margin: 0; + padding: 0; list-style: none inside none; gap: .1rem; } +.message li { + padding: .25rem; +} + .mortal, .mortal button, .mortal select { - border-color: #c33333; + /*border-color: #c33333; + color: #c33333;*/ + border-color: #930; background-color: #f9c3c3; - color: #c33333; + color: #930; } .dangerous, @@ -374,9 +598,12 @@ form .message { .dangerous, .dangerous button, .dangerous select { - border-color: #c39333; + /*border-color: #c39333; background-color: #f9c333; - color: #936333; + color: #936333;*/ + border-color: #930; + background-color: #fc9; + color: #930; } .warning { @@ -399,12 +626,12 @@ form .message { #form, #recover, #regulation { - border: .1rem solid #00c3f9; - border-radius: .5rem; + /*border-radius: .5rem;*/ + /*border: .1rem solid #00c3f9; margin: .5rem; margin-top: 0; display: flex; - flex-direction: column; + flex-direction: column;*/ } .panel { @@ -414,366 +641,330 @@ form .message { gap: .5rem; } +.cell { +} + .grid { - display: flex; - flex-flow: row wrap; + display: grid; border-style: solid; border-color: #00c3f9; border-radius: .2rem; - flex: 1 1 auto; box-sizing: border-box; border-collapse: collapse; + flex: 1 1 auto; + margin: 0 0 auto 0; + padding: 0; gap: .1rem; } +.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 h3 { +/*.grid header { + border-radius: .2rem .2rem 0 0; + margin-bottom: 0; +}*/ + +/*.grid ul { + margin: .1rem; + padding: .1rem; margin: 0; -} +}*/ -.grid ul { +/*.grid section { + border-color: inherit; +}*/ + +/*.grid ul { display: block; margin: .1rem; font-size: .8rem; list-style: none inside none; -} - -.grid p { - margin: 0 0 .3rem; -} - -.grid p:only-child, -.grid p:last-child, -.grid p:last-of-type { - margin: 0; -} - -.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; +.grid li { + border-width: .1rem; + border-style: solid; border-radius: .2rem; -} - -.form form { - gap: .5rem; -} - -#location section { + white-space: nowrap; + padding: .1rem; display: flex; - flex: 1 1 auto; - flex-direction: column; + margin: 0 0 .1rem; + flex-direction: row; + justify-content: space-between; + overflow-x: hidden; + text-overflow: ellipsis; } -#location h3 { +/*XXX: required by ul display:block for overflow:hidden*/ +.grid li:only-child, +.grid li:last-child, +.grid li:last-of-type { margin: 0; - border-style: none; - flex: 1 1 auto; } -#location form { - margin-top: .5rem; -} - -#location form label { - width: 4.5rem; +.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; } -/*#dashboard .panel { - display: flex; - flex-direction: row; - flex-wrap: nowrap; - place-content: space-between; - border: 0; +.grid p { + padding: 0 0 .3rem; margin: 0; - padding: 0 .5rem .5rem .5rem; } -#dashboard .panel:only-child, -#dashboard .panel:first-child, -#dashboard .panel:first-of-type { - padding-top: .5rem; +.grid p:only-child, +.grid p:last-child, +.grid p:last-of-type { + padding: 0; } - -#dashboard .panel:only-child, -#dashboard .panel:last-child, -#dashboard .panel:last-of-type { - padding-bottom: .5rem; -}*/ - -#dashboard .candidate section, -#dashboard .location section { - flex-direction: column; - flex-grow: 1; - border: .1rem solid #00c3f9; - border-radius: .3rem; - padding: 0; +.session header { + margin-bottom: .5rem; } -#dashboard .location h4 { - border-width: 0; +.current { + filter: hue-rotate(-90deg) saturate(2); } -/*#dashboard .grid { - display: flex; - flex-flow: row wrap; - border-style: solid; +.granted { + background-color: #cff; border-color: #00c3f9; - border-radius: .2rem; - flex-grow: 1; - box-sizing: border-box; - border-collapse: collapse; - gap: .1rem; -}*/ +} - /*margin: 0; -#dashboard .grid:only-child, -#dashboard .grid:last-child, -#dashboard .grid:last-of-type { - margin-bottom: 0; -}*/ +/*.granted, +.granted a { + background-color: #cff; + border-color: #00c3f9; +} -/*#dashboard .candidate .grid, -#dashboard .location .grid { - padding: .5rem; +.disputed, +.disputed a { + border-color: #930; + background-color: #fc9; + color: #930; }*/ -#dashboard .dlgrid { - display: flex; - flex-flow: row wrap; - gap: .5rem; +.highlight { + filter: hue-rotate(60deg); } -#dashboard dl { - /*margin: .5rem; - padding: .25rem; - border: .1rem solid #00c3f9; - border-radius: .2rem; - flex-grow: 1; - box-sizing: border-box; - border-collapse: collapse;*/ - margin: 0 .5rem .5rem .5rem; +.canceled { + filter: hue-rotate(180deg) grayscale(33%); } -#dashboard dl:first-child, -#dashboard dl:only-child, -#dashboard dl:first-of-type { - margin-top: .5rem; +.locked { + filter: hue-rotate(180deg); } -#dashboard dt { - font-size: .9rem; - font-weight: bold; +.pending { + filter: grayscale(33%); } -#dashboard dd { - font-size: .9rem; - margin-left: 1rem; +.disabled { + filter: grayscale(66%); } -#dashboard .subgrid { - display: flex; - flex-flow: row wrap; - border-style: solid; - border-color: #00c3f9; - border-width: .1rem 0 0 .1rem; - border-radius: .2rem; - flex-grow: 1; - box-sizing: border-box; - border-collapse: collapse; - margin: .5rem; +/*.canceled, +.canceled a, +.canceled h2, +.canceled header { + color: #963; + background-color: #fddddd; + border-color: #963; } -#dashboard .subgrid:only-child, -#dashboard .subgrid:last-child, -#dashboard .subgrid:last-of-type { - margin-bottom: 0; +.locked, +.locked a { + border-color: #930; + background-color: #f9c3c3; + color: #930; } -#dashboard .cell { - border-color: inherit; - border-style: inherit; - border-width: .1rem; - border-radius: inherit; - flex-grow: inherit; - box-sizing: inherit; - border-collapse: inherit; +.pending, +.pending a { + background-color: #ccc; + border-color: #066; } -#dashboard .subgrid .cell { - border-radius: 0; - border-width: 0 .1rem .1rem 0; -} -#dashboard .subgrid .cell:only-child, -#dashboard .subgrid .cell:last-child, -#dashboard .subgrid .cell:last-of-type { - border-radius: inherit; +.highlight, +.highlight a, +.highlight h3, +.highlight h3 a { + border-color: #3333c3; + background-color: #c3c3f9; + color: #606; +}*/ + +.calendar header { + margin-bottom: .1rem; + display: grid; } -#dashboard .fourth { - min-height: 5rem; - width: calc(100% / 4 - (3/4*.1rem)); +.calendar h3 { + overflow-x: hidden; + text-overflow: ellipsis; + white-space: nowrap; } -#dashboard .seventh { - min-height: 5rem; - width: calc(100% / 7 - (6/7*.1rem)); +.calendar ul { + padding: 0 .1rem .1rem; } -#dashboard .third { - min-height: 5rem; - width: calc(100% / 3 - (2/3*.1rem)); +/*.ellipsis { + / *Required for ellipsis on h2/h3/h4 in header* / + display: grid; + margin-bottom: 0; } -#dashboard .session { - border: .1rem solid #00c3f9; - border-radius: .2rem; +.ellipsis > * { + overflow-x: hidden; + text-overflow: ellipsis; white-space: nowrap; - display: flex; - flex-direction: row; - justify-content: space-between; - padding: .1rem; +}*/ + +.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; } -#dashboard .session a { +.calendar .reducible { overflow-x: hidden; text-overflow: ellipsis; + text-align: center; } -#dashboard .session a:first-letter { - color: #066; +.calendar .glyph { + font-family: 'Noto Emoji', 'Droid Sans', 'Symbola', 'DejaVu Sans', 'FreeSans', sans-serif; } -#dashboard .disabled { - /*color: #acc; - background-color: #bee;*/ - filter: grayscale(33%); +.calendar .temperature, +.calendar .rain, +.calendar .rate { + line-height: 1rem; + text-align: right; } -#dashboard .current { - background-color: #cff; +.calendar .rate { + text-align: center; } -#dashboard .current h3 { - text-decoration: underline solid #00c3f9; +.calendar .info { + line-height: 1rem; + text-align: right; } -#dashboard .next { - background-color: #eff; +.calendar .pseudonym { + grid-column: span 2; } -#dashboard .pending { - background-color: #ccc; +.seven { + grid-template-columns: repeat(7, 1fr); } -#dashboard .granted { - background-color: #cff; - /*background-color: #33b679; - border-color: #33b679;*/ +.four { + grid-template-columns: repeat(4, 1fr); } -#dashboard .disputed { - background-color: #fcc; +.three { + grid-template-columns: repeat(3, 1fr); } -#dashboard .orphaned { - background-color: #fc9; +.two { + grid-template-columns: repeat(2, 1fr); } -#dashboard .highlight { - border-color: #3333c3; - background-color: #c3c3f9; - color: #3333c3; +/*.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; } -/* Weather - * TODO: drop ->24°C -#dashboard .cleary a::before { - content: "☀"; +.city .grid article, +.location .grid article { + min-height: auto; + height: fit-content; } ->17°C -#dashboard .sunny a::before { - content: "⛅"; -} +.city .grid { + gap: .5rem; +}*/ ->10°C -#dashboard .cloudy a::before { - content: "☁"; +.location form { + margin: .5rem auto; } -<=10°C -#dashboard .winty a::before { - content: "❄️"; +.location form .row { + flex-direction: column; } ->0mm -#dashboard .rainy a::before { - content: "🌂"; +.location form div { + margin-left: auto; + margin-right: auto; } ->2mm -#dashboard .stormy a::before { - content: "☔"; -}*/ +.location label { + width: 20rem; + padding-right: 0; + text-align: center; +} -/* Regulation */ -#regulation { +.location input, +.location textarea { + width: 20rem; + margin: 0 .1rem; } -#regulation dl { - /*display: flex; - flex-direction: row; - justify-content: space-around; - padding-bottom: .5rem;*/ - padding: .25rem; - margin-bottom: .5rem; +.form { + margin: 0; + display: flex; + flex-direction: column; + gap: .5rem; } -#regulation dt { - font-size: .9rem; - font-weight: bold; - padding-bottom: .2rem; +.form h2 { + font-size: 1.17rem; + padding: .4rem; } -#regulation dd { - font-size: .9rem; - margin-left: 1.5rem; +.form a { + white-space: nowrap; } -#regulation dd:before { +.form section { + margin: 0; + border: .05rem solid #00c3f9; + /*border-radius: .2rem;*/ + width: 100%; } -#regulation dl:only-child, -#regulation dl:last-child, -#regulation dl:last-of-type, -#regulation dt:only-child, -#regulation dt:last-child, -#regulation dt:last-of-type, -#regulation dd:only-child, -#regulation dd:last-child, -#regulation dd:last-of-type { - margin-bottom: 0; +.form form { + gap: .5rem; } /* Footer */ @@ -785,13 +976,11 @@ form .message { padding: .5rem; text-align: center; font-size: .8rem; + line-height: 2.5rem; display: flex; justify-content: space-between; background-color: #cff; -} - -#footer details { - font-weight: bold; + gap: .5rem; } #footer summary::after { @@ -807,13 +996,48 @@ form .message { 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: 900px ) { +@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 { - place-content: center; + /*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; } @@ -823,6 +1047,12 @@ form .message { line-height: 2rem; } + form label.captcha img { + height: auto; + width: 6rem; + padding: .25rem 0; + } + form input, form option, form optgroup, @@ -851,7 +1081,43 @@ form .message { width: 12rem; } - #dashboard .seventh:nth-child(7n+1), + .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) { @@ -862,6 +1128,18 @@ form .message { #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; } } @@ -880,27 +1158,152 @@ form .message { margin: 0 auto; } - #header { + #logo { flex-direction: column; } - #dashboard .seventh:nth-child(n) { + .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 { + .form, + #footer { flex-direction: column; } - #dashboard .seventh:nth-child(n) { - width: calc(100%); + 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; } }