Site Web en PHP pour présenter des photos https://superflux.antopie.org
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 

251 lines
2.9 KiB

.gallerie {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
/* grid-row-gap: 50px; */
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;
&:hover {
background-color: white;
color: black;
}
}
}
}
.nomElementDossier {
margin-top: 20px;
}
.source {
text-align: right;
margin-top: 8px;
}
.paysage {
grid-column-end: span 2;
max-width: 100%;
}
footer {
color: grey;
font-size: 18px;
transition: color 0.3s;
& a:link {
color: grey;
text-decoration: underline;
transition: color 0.3s;
font-size: 20px;
}
&:hover, &:hover a:link {
color: white;
}
}
.presentation {
text-align: justify;
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;
}
}
.contPremiereImage {
text-align: center;
margin-bottom: 15px;
}
.premiereImage {
border: 2px white solid;
border-radius: 8px;
}
html {
background-color: #2D2F34;
color: white;
text-align: center;
}
.dossier img {
border: 2px white solid;
border-radius: 8px;
}
.element a {
color: white;
font-size: 1.4em;
text-decoration: none;
}
body {
font-family: "Ubuntu", sans-serif;
font-size: 26px;
line-height: 1.3;
}
h6 a, h5 a, h4 a, h3 a, h2 a, h1 a {
font-family: Times New Roman;
text-decoration: none;
}
a {
color: white;
}
h1, h2, h3, h4, h5, h6 {
padding-bottom: 30px;
margin: 0px;
}
h1 {
font-size: 100px;
padding-top: 30px;
}
h2 {
font-size: 60px;
}
h3 {
font-size: 30px;
}
h4 {
font-size: 20px;
}
header {
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
}
main {
margin-top: 32px;
}
.pageAux {
margin-left: 10%;
margin-right: 10%;
}
@media (max-width: 1700px) {
main {
grid-template-columns: 1fr 1fr 1fr;
}
}
@media (max-width: 1300px) {
main {
grid-template-columns: 1fr 1fr;
}
h1 {
font-size: 100px;
}
}
@media (max-width: 1000px) {
h1 {
font-size: 80px;
}
}
@media (max-width: 500px) {
.paysage img {
grid-column-end: span 1;
width: 100%;
max-width: 100%;
}
.paysage {
grid-column-end: span 1;
width: 400px;
}
main {
grid-template-columns: 1fr;
}
.portrait img {
width: 200px;
max-width: 200px;
}
.element {
max-width: 100% !important;
}
h1 {
font-size: 60px;
}
h2 {
font-size: 40px;
}
h3 {
font-size: 25px;
}
h4 {
font-size: 18px;
}
}