Make index responsive

This commit is contained in:
Paul Brinkmeier 2025-02-20 12:32:36 +01:00
parent 69c639f5db
commit 5e1612774a
3 changed files with 34 additions and 0 deletions

View File

@ -63,3 +63,35 @@ h1 {
footer {
text-align: center;
}
@media (max-width: 90em) {
.container {
width: 65em;
}
}
@media (max-width: 68em) {
.container {
width: 43em;
}
}
@media (max-width: 46em) {
.container {
width: auto;
margin: 2em 1em;
}
.photo-cards {
display: block;
}
.photo-card-image img {
width: 100%;
height: auto;
}
.photo-card + .photo-card {
margin-top: 1em;
}
}

View File

@ -2,6 +2,7 @@
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>photo gallery</title>
<link rel="stylesheet" href="./extra/fonts/source-sans-pro.css">
<link rel="stylesheet" href="./extra/index.css">

View File

@ -2,6 +2,7 @@
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>{{ path.name }}</title>
<link rel="stylesheet" href="./extra/fonts/source-sans-pro.css">
<link rel="stylesheet" href="./extra/photo.css">