alu/personal-site
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

use smaller thumbnails for photography preview,

Browse Source 
move gallery common css to gallery.css
This commit is contained in:
Arthur Lu
2024-12-12 07:35:39 +00:00
parent d47c30846d
commit 28a7630c9f
17 changed files with 36 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
photography/nature.html
View File

@@ -7,23 +7,9 @@
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="/css/style.css" type="text/css">
<link rel="stylesheet" href="/css/overlay.css" type="text/css">
<link rel="stylesheet" href="/css/gallery.css" type="text/css">
<link rel="icon" type="image/x-icon" href="/resources/icon/favicon.svg">
<script src="/scripts/ModalImage.js" type="module"></script>
<style>
#gallery-container {
display: grid;
grid-template-columns: auto auto;
column-gap: 16px;
row-gap: 16px;
margin-top: 1em;
margin-bottom: 1em;
}
#gallery-container modal-image {
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
<header>
@@ -37,12 +23,12 @@
</header>
<main>
<div id="gallery-container">
<modal-image class="photo" src="/resources/photography/nature/1.jpg" alt=""></modal-image>
<modal-image class="photo" src="/resources/photography/nature/2.jpg" alt=""></modal-image>
<modal-image class="photo" src="/resources/photography/nature/3.jpg" alt=""></modal-image>
<modal-image class="photo" src="/resources/photography/nature/4.jpg" alt=""></modal-image>
<modal-image class="photo" src="/resources/photography/nature/5.jpg" alt=""></modal-image>
<modal-image class="photo" src="/resources/photography/nature/6.jpg" alt=""></modal-image>
<modal-image class="photo" thumb="/resources/photography/nature/1-thumb.jpg" src="/resources/photography/nature/1.jpg" alt=""></modal-image>
<modal-image class="photo" thumb="/resources/photography/nature/2-thumb.jpg" src="/resources/photography/nature/2.jpg" alt=""></modal-image>
<modal-image class="photo" thumb="/resources/photography/nature/3-thumb.jpg" src="/resources/photography/nature/3.jpg" alt=""></modal-image>
<modal-image class="photo" thumb="/resources/photography/nature/4-thumb.jpg" src="/resources/photography/nature/4.jpg" alt=""></modal-image>
<modal-image class="photo" thumb="/resources/photography/nature/5-thumb.jpg" src="/resources/photography/nature/5.jpg" alt=""></modal-image>
<modal-image class="photo" thumb="/resources/photography/nature/6-thumb.jpg" src="/resources/photography/nature/6.jpg" alt=""></modal-image>
</div>
</main>
<footer>

28
photography/nature2.html
View File

@@ -7,23 +7,9 @@
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="/css/style.css" type="text/css">
<link rel="stylesheet" href="/css/overlay.css" type="text/css">
<link rel="stylesheet" href="/css/gallery.css" type="text/css">
<link rel="icon" type="image/x-icon" href="/resources/icon/favicon.svg">
<script src="/scripts/ModalImage.js" type="module"></script>
<style>
#gallery-container {
display: grid;
grid-template-columns: auto auto;
column-gap: 16px;
row-gap: 16px;
margin-top: 1em;
margin-bottom: 1em;
}
#gallery-container modal-image {
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
<header>
@@ -37,12 +23,12 @@
</header>
<main>
<div id="gallery-container">
<modal-image class="photo" src="/resources/photography/nature2/1.jpg" alt=""></modal-image>
<modal-image class="photo" src="/resources/photography/nature2/2.jpg" alt=""></modal-image>
<modal-image class="photo" src="/resources/photography/nature2/3.jpg" alt=""></modal-image>
<modal-image class="photo" src="/resources/photography/nature2/4.jpg" alt=""></modal-image>
<modal-image class="photo" src="/resources/photography/nature2/5.jpg" alt=""></modal-image>
<modal-image class="photo" src="/resources/photography/nature2/6.jpg" alt=""></modal-image>
<modal-image class="photo" thumb="/resources/photography/nature2/1-thumb.jpg" src="/resources/photography/nature2/1.jpg" alt=""></modal-image>
<modal-image class="photo" thumb="/resources/photography/nature2/2-thumb.jpg" src="/resources/photography/nature2/2.jpg" alt=""></modal-image>
<modal-image class="photo" thumb="/resources/photography/nature2/3-thumb.jpg" src="/resources/photography/nature2/3.jpg" alt=""></modal-image>
<modal-image class="photo" thumb="/resources/photography/nature2/4-thumb.jpg" src="/resources/photography/nature2/4.jpg" alt=""></modal-image>
<modal-image class="photo" thumb="/resources/photography/nature2/5-thumb.jpg" src="/resources/photography/nature2/5.jpg" alt=""></modal-image>
<modal-image class="photo" thumb="/resources/photography/nature2/6-thumb.jpg" src="/resources/photography/nature2/6.jpg" alt=""></modal-image>
</div>
</main>
<footer>