Add image form type

[airbundle] / Resources / public / css / screen.css

diff --git a/Resources/public/css/screen.css b/Resources/public/css/screen.css
index 6d7d54c7a649553dab74d56133f4cae3dc6c2cf9..3924cb8474fb68e7ab2228eb59bc243b8b6c7854 100644 (file)
--- 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;
 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;
 }
 
 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;
 }
 
 dt, h1, h2, h3, h4, h5, h6, label, legend, th, details {
        font-family: 'Droid Serif', serif;

-       font-display: swap;

 }
 
 /* Default styling */
 h1 {
 }
 
 /* Default styling */
 h1 {

-       font-size: 2rem;
-}
-
-h2 {

        font-size: 1.5rem;
        margin: 0 0 .5rem;
        padding: .5rem;
 }
 
        font-size: 1.5rem;
        margin: 0 0 .5rem;
        padding: .5rem;
 }
 

-h3 {
+h2 {

        font-size: 1.17rem;
        margin: 0 0 .5rem;
        padding: .4rem;
 }
 
        font-size: 1.17rem;
        margin: 0 0 .5rem;
        padding: .4rem;
 }
 

-h4 {
+h3 {

        font-size: 1rem;
        margin: 0 0 .5rem;
        padding: .3rem;
 }
 
        font-size: 1rem;
        margin: 0 0 .5rem;
        padding: .3rem;
 }
 

-h5 {
+h4 {

        font-size: .85rem;
        margin: 0 0 .5rem;
        padding: .2rem;
 }
 
        font-size: .85rem;
        margin: 0 0 .5rem;
        padding: .2rem;
 }
 

-h6 {
+h5 {

        font-size: .67rem;
        margin: 0 0 .5rem;
        padding: .1rem;
 }
 
        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 {
        margin: 0 0 .5rem;
 }
 

-header h2 {
+header h1 {

        margin: 0;
        padding: .5rem .5rem .3rem;
        border-bottom: 0 none;
 }
 
        margin: 0;
        padding: .5rem .5rem .3rem;
        border-bottom: 0 none;
 }
 

+header h2 {
+       border-bottom: 0 none;
+}
+

 nav strong {
        display: block;
        font-size: 1.17rem;
 nav strong {
        display: block;
        font-size: 1.17rem;


@@ -87,7 +90,7 @@ nav strong {
        padding: .4rem;
 }
 
        padding: .4rem;
 }
 

-h2, h3, h4, h5, header, nav strong {
+h1, h2, h3, h4, header {

        background-color: #cff;
        border-bottom: .1rem solid #00c3f9;
 }
        background-color: #cff;
        border-bottom: .1rem solid #00c3f9;
 }


@@ -126,6 +129,47 @@ dd {
        margin-left: 1rem;
 }
 
        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;
 body {
        display: flex;
        flex-flow: column wrap;


@@ -207,10 +251,19 @@ form div:last-of-type {
 
 form label {
        width: 12rem;
 
 form label {
        width: 12rem;

+       line-height: 1.3rem;

        padding-right: 1rem;
        text-align: right;
 }
 
        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,
 form input,
 form option,
 form optgroup,


@@ -242,6 +295,7 @@ form div .message {
 }
 
 /* Vertical form */
 }
 
 /* Vertical form */

+.location .col label,

 .col label {
        width: 8rem;
        padding-right: 0;
 .col label {
        width: 8rem;
        padding-right: 0;


@@ -250,6 +304,8 @@ form div .message {
        margin: 0 auto;
 }
 
        margin: 0 auto;
 }
 

+.location .col input,
+.location .col textarea,

 .col input,
 .col option,
 .col optgroup,
 .col input,
 .col option,
 .col optgroup,


@@ -282,22 +338,19 @@ form div .message {
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-between;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-between;

-       line-height: 32px;
+       line-height: 45px;

        font-size: 32px;
        padding: .5rem;
        gap: .5rem;
 }
 
        font-size: 32px;
        padding: .5rem;
        gap: .5rem;
 }
 

-#header h1 {
+#logo {
+       font-size: 2rem;

        padding: 0;
        margin: auto;
        white-space: nowrap;
        padding: 0;
        margin: auto;
        white-space: nowrap;

-       width: 171px;
-       height: 32px;
-}
-
-#header h2 {
-       display: none;
+       width: 100px;
+       height: 45px;

 }
 
 #header nav {
 }
 
 #header nav {


@@ -459,7 +512,6 @@ form div .message {
 .grid article,
 .grid section {
        border-collapse: inherit;
 .grid article,
 .grid section {
        border-collapse: inherit;

-       border-color: inherit;

        border-radius: inherit;
        border-style: inherit;
        border-width: .1rem;
        border-radius: inherit;
        border-style: inherit;
        border-width: .1rem;


@@ -470,6 +522,10 @@ form div .message {
        overflow: hidden;
 }
 
        overflow: hidden;
 }
 

+.grid section {
+       border-color: inherit;
+}
+

 .grid h3 {
        margin: 0;
        overflow: hidden;
 .grid h3 {
        margin: 0;
        overflow: hidden;


@@ -508,6 +564,9 @@ form div .message {
 }
 
 .grid a {
 }
 
 .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;
 }
        overflow-x: hidden;
        text-overflow: ellipsis;
 }


@@ -569,9 +628,14 @@ form div .message {
 }
 
 .highlight,
 }
 
 .highlight,

-.highlight a {
+.highlight a,
+.highlight h3 {

        border-color: #3333c3;
        background-color: #c3c3f9;
        border-color: #3333c3;
        background-color: #c3c3f9;

+       color: #606;
+}
+
+.highlight h3::first-letter {

        color: #3333c3;
 }
 
        color: #3333c3;
 }
 


@@ -585,6 +649,8 @@ form div .message {
        grid-template-columns: max-content 1fr max-content;
        flex: 1 1 auto;
        grid-gap: .1rem;
        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 {
 }
 
 .calendar .reducible {


@@ -593,6 +659,21 @@ form div .message {
        text-align: center;
 }
 
        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;
 .calendar .info {
        line-height: 1rem;
        text-align: right;


@@ -618,21 +699,26 @@ form div .message {
        grid-template-columns: repeat(2, 1fr);
 }
 
        grid-template-columns: repeat(2, 1fr);
 }
 

-.location h3 {
+.city .grid h3,
+.location .grid h3,
+.city .grid h4,
+.location .grid h4 {

        border-style: none;
        border-style: none;

+       margin: 0;

        flex: 1 1 auto;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
 }
 
        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 {
 }
 
 .location form {


@@ -699,6 +785,7 @@ form div .message {
        display: flex;
        justify-content: space-between;
        background-color: #cff;
        display: flex;
        justify-content: space-between;
        background-color: #cff;

+       gap: .5rem;

 }
 
 #footer summary::after {
 }
 
 #footer summary::after {


@@ -721,13 +808,28 @@ form div .message {
        .location textarea {
                width: 12rem;
        }
        .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 {
        .panel {

+               /*flex-flow: column-reverse wrap;*/

                flex-flow: column wrap;
        }
 
                flex-flow: column wrap;
        }
 

+       .location .two {
+               grid-template-columns: repeat(2, 1fr);
+       }
+}
+
+@media ( max-width: 900px ) {

        .form {
                flex-direction: row;
        }
        .form {
                flex-direction: row;
        }


@@ -737,6 +839,12 @@ form div .message {
                line-height: 2rem;
        }
 
                line-height: 2rem;
        }
 

+       form label.captcha img {
+               height: auto;
+               width: 6rem;
+               padding: .25rem 0;
+       }
+

        form input,
        form option,
        form optgroup,
        form input,
        form option,
        form optgroup,


@@ -781,6 +889,26 @@ form div .message {
                grid-template-columns: repeat(3, 1fr);
        }
 
                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+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;
 @media ( max-width: 600px ) {
        form label {
                margin: 0 auto;


@@ -838,11 +978,26 @@ form div .message {
                margin-bottom: 0;
        }
 
                margin-bottom: 0;
        }
 

-       .four,
-       .three {
+       .four {

                grid-template-columns: repeat(2, 1fr);
        }
 
                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(n) {
                width: calc(100% / 2 - .1rem);
        }


@@ -850,9 +1005,33 @@ form div .message {
        #dashboard .seventh:nth-child(7n) {
                width: calc(100%);
        }*/
        #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 ) {
 }
 
 @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,
        form .row,
        .grid,
        .form,


@@ -860,6 +1039,10 @@ form div .message {
                flex-direction: column;
        }
 
                flex-direction: column;
        }
 

+       form label {
+               text-align: center;
+       }
+

        .seven {
                grid-template-columns: repeat(1, 1fr);
        }
        .seven {
                grid-template-columns: repeat(1, 1fr);
        }


@@ -871,10 +1054,13 @@ form div .message {
                grid-column: auto;
        }
 
                grid-column: auto;
        }
 

-       .four,
-       .three {
+       .four {

                grid-template-columns: repeat(1, 1fr);
        }
                grid-template-columns: repeat(1, 1fr);
        }

+
+       .four .multimap {
+               grid-column: span 1;
+       }

 }
 
 @media ( max-width: 260px ) {
 }
 
 @media ( max-width: 260px ) {