superflux/style.less
2023-02-07 16:12:59 +01:00

316 lines
4.3 KiB
Text

@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;
}
}