ncue/dreamgirl
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Move thumbnail list to right and reduce whitespace

Browse Source
This commit is contained in:
dsyoon
2025-12-27 15:44:47 +09:00
parent a9d35c63a5
commit a78234f5cf
3 changed files with 43 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
css/basic.css
View File

@@ -40,13 +40,15 @@ pre {
} }
div#page { div#page {
/* Full-width, responsive container */ /* Full-width, responsive container */
width: min(100vw, 1600px); width: 100%;
max-width: none;
background-color: #fff; background-color: #fff;
margin: 0 auto; margin: 0 auto;
text-align: left; text-align: left;
border-color: #ddd; border-color: #ddd;
border-style: none solid solid; border-style: none solid solid;
border-width: medium 1px 1px; border-width: medium 1px 1px;
box-sizing: border-box;
} }
div#container { div#container {
padding: 20px; padding: 20px;

22
css/galleriffic-2.css
View File

@@ -97,25 +97,33 @@ div.navigation {
/* The navigation style is set using jQuery so that the javascript specific styles won't be applied unless javascript is enabled. */ /* The navigation style is set using jQuery so that the javascript specific styles won't be applied unless javascript is enabled. */
} }
/* ---- Layout: thumbs (left) + slideshow (right), full width ---- */ /* ---- Layout: slideshow (left) + thumbs (right), full width ---- */
div#gallery { .gallery-wrap {
display: flex; display: flex;
gap: 20px; gap: 20px;
align-items: flex-start; align-items: flex-start;
} }
div#thumbs.navigation { .gallery-wrap > #gallery.content {
flex: 0 0 360px; flex: 1 1 auto;
max-width: 40vw; min-width: 0;
order: 1;
}
.gallery-wrap > #thumbs.navigation {
flex: 0 0 380px;
max-width: 38vw;
order: 2;
} }
@media (max-width: 900px) { @media (max-width: 900px) {
div#gallery { .gallery-wrap {
flex-direction: column; flex-direction: column;
} }
div#thumbs.navigation { .gallery-wrap > #thumbs.navigation {
flex: 1 1 auto; flex: 1 1 auto;
max-width: none; max-width: none;
order: 2;
} }
} }
ul.thumbs { ul.thumbs {

49
index.html
View File

@@ -31,33 +31,34 @@
<!-- <h2>Thumbnail rollover effects and slideshow crossfades</h2> --> <!-- <h2>Thumbnail rollover effects and slideshow crossfades</h2> -->
<!-- Start Advanced Gallery Html Containers --> <!-- Start Advanced Gallery Html Containers -->
<div id="gallery" class="content"> <div class="gallery-wrap">
<div id="controls" class="controls"></div> <div id="gallery" class="content">
<div class="slideshow-container"> <div id="controls" class="controls"></div>
<div id="loading" class="loader"></div> <div class="slideshow-container">
<div id="slideshow" class="slideshow"></div> <div id="loading" class="loader"></div>
<div id="slideshow" class="slideshow"></div>
</div>
<div id="caption" class="caption-container"></div>
</div> </div>
<div id="caption" class="caption-container"></div> <div id="thumbs" class="navigation">
</div> <ul class="thumbs noscript">
<div id="thumbs" class="navigation"> <li>
<ul class="thumbs noscript"> <a class="thumb" name="leaf" href="http://dreamgirl.ncue.net/img/0.jpg" title="Title #0">
<li> <!-- <img src="http://dreamgirl.ncue.net/img/0.jpg" alt="Title #0" width='75' height='75'/> -->
<a class="thumb" name="leaf" href="http://dreamgirl.ncue.net/img/0.jpg" title="Title #0"> </a>
<!-- <img src="http://dreamgirl.ncue.net/img/0.jpg" alt="Title #0" width='75' height='75'/> --> <div class="caption">
</a> <!--
<div class="caption"> <div class="download">
<!-- <a href="http://dreamgirl.ncue.net/img/0.jpg">Download</a>
<div class="download"> </div>
<a href="http://dreamgirl.ncue.net/img/0.jpg">Download</a> <div class="image-title">Title #0</div>
<div class="image-desc">Description</div>
-->
</div> </div>
<div class="image-title">Title #0</div> </li>
<div class="image-desc">Description</div> </ul>
--> </div>
</div>
</li>
</ul>
</div> </div>
<div style="clear: both;"></div>
</div> </div>
</div> </div>
<div id="footer">&copy; 2009 Trent Foley</div> <div id="footer">&copy; 2009 Trent Foley</div>