@fond: #2D2F34; @texte-principal: white; html { font-family: "Ubuntu", sans-serif; font-weight: lighter; font-size: 26px; line-height: 1.3; background-color: @fond; color: white; text-align: center; scrollbar-color: @texte-principal @fond; scrollbar-width: auto; & a:link:hover { text-decoration: none; } } ::selection { color: @fond; background-color: @texte-principal; } .gallerie { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-auto-flow: dense; max-width: 100%; grid-row-gap: 80px; } nav { display: flex; flex-direction: row; justify-content: space-around; & a { text-decoration: none; & div { border: 2px solid white; border-radius: 30px; padding: 14px; margin: 14px; transition: all 0.2s ease-in; &:hover { background-color: @texte-principal; color: @fond; } } } @media (max-width: 540px) { flex-direction: column; } } .nomElementDossier { margin-top: 20px; } .source { text-align: right; margin-top: 8px; } .paysage { grid-column-end: span 2; max-width: 100%; } footer { color: fade(@texte-principal, 60%); font-size: 18px; & a:link { color: fade(@texte-principal, 60%); text-decoration: underline; transition: color 0.12s linear; &:hover { color: @texte-principal; } } } #presentation { text-align: justify; margin-left: 22%; margin-right: 22%; @media (max-width: 1600px) { margin-left: 15%; margin-right: 15%; } @media (max-width: 1300px) { margin-left: 8%; margin-right: 8%; } @media (max-width: 500px) { margin-left: 6%; margin-right: 6%; } } blockquote { background-color: #4d4e52; padding: 30px; border-radius: 20px; @media (max-width: 500px) { padding: 25px; margin-left: 0px; margin-right: 0px; } } .dossier img { border: 2px white solid; border-radius: 8px; } .element a { color: white; font-size: 1.4em; text-decoration: none; } h6 a, h5 a, h4 a, h3 a, h2 a, h1 a { text-decoration: none; } a { color: @texte-principal; } h1, h2, h3, h4, h5, h6 { padding-bottom: 30px; margin: 0px; font-weight: lighter; } h1 { font-size: 100px; padding-top: 30px; } h2 { font-size: 40px; padding-top: 22px; } h3 { font-size: 34px; padding-top: 22px; } h4 { font-size: 28px; padding-top: 22px; } header { text-align: center; display: flex; flex-direction: column; justify-content: center; } main { margin-top: 32px; } .pageAux { margin-left: 10%; margin-right: 10%; } .ln0 { font-size: 1.12em; font-weight: bold; text-align: center; } // ----- FORMULAIRE ----- input[type=submit] { width: 120px; font-size: 20px; } input[type=text] { height: 30px; font-size: 18px; width: 300px; } textarea { font-size: 18px; } input, textarea { background-color: #232629; border: 2px solid #5F5F5F; border-radius: 10px; color: @texte-principal; padding: 6px; margin: 6px; font-family: "Ubuntu", sans-serif; font-weight: lighter; transition: border 0.2s linear; margin-top: 12px; margin-bottom: 30px; &:hover { border: 2px solid #808080; } &:focus { border: 2px solid white; } } ::placeholder { font-family: "Ubuntu", sans-serif; font-weight: lighter; color: gray; } .commentaire { text-align: left; border: solid white 2px; border-radius: 16px; margin: 14px; padding: 14px; overflow: auto; } #zoneCommentaires { margin-top: 30px; margin-left: 30%; margin-right: 30%; @media (max-width: 1000px) { margin-left: 10%; margin-right: 10%; } @media (max-width: 1000px) { margin-left: 0px; margin-right: 0px; } } @media (max-width: 1700px) { .gallerie { grid-template-columns: 1fr 1fr 1fr; } } @media (max-width: 1300px) { .gallerie { grid-template-columns: 1fr 1fr; } h1 { font-size: 100px; } } @media (max-width: 1000px) { h1 { font-size: 80px; } } @media (max-width: 840px) { .paysage img { grid-column-end: span 1; width: 100%; max-width: 100%; } .paysage { grid-column-end: span 1; width: 400px; } .gallerie { grid-template-columns: 1fr; } .portrait img { width: 200px; max-width: 200px; } .element { max-width: 100% !important; } h1 { font-size: 60px; } }