Skip to content

Commit 8cbe5d1

Browse files
RolandTiRolandTi
committed
New index.php
1 parent bbcd9fd commit 8cbe5d1

7 files changed

Lines changed: 163 additions & 84 deletions

File tree

‎horizon/album.php‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<head>
55
<?php include("_header.php"); ?>
66
</head>
7-
<body class="scroll-h">
7+
<body>
88
<?php zp_apply_filter('theme_body_open'); ?>
99
<a href="#hscroll" tabindex="0" class="skip-to-content">Skip to main content</a>
1010
<div class="scroller">
@@ -23,7 +23,7 @@ class="navbar_title">
2323

2424
</header>
2525

26-
<main id="hscroll" class="transition-fade">
26+
<main id="hscroll">
2727

2828
<div class="album_head">
2929
<h1><?php printAlbumTitle(); ?></h1>

‎horizon/css/horizon.css‎

Lines changed: 83 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -25,20 +25,6 @@
2525
box-sizing: border-box;
2626
}
2727

28-
@font-face {
29-
src: url('../fonts/Lora[wght].woff2?v=3.005') format('woff2-variations');
30-
font-family: 'Lora';
31-
font-style: normal;
32-
font-display: swap;
33-
}
34-
35-
@font-face {
36-
src: url('../fonts/Lora-Italic[wght].woff2?v=3.005') format('woff2-variations');
37-
font-family: 'Lora';
38-
font-style: italic;
39-
font-display: swap;
40-
}
41-
4228
/* Latin Basic */
4329
@font-face {
4430
font-family: 'Fraunces';
@@ -104,7 +90,7 @@ html {
10490
-webkit-text-size-adjust: 100%;
10591
tab-size: 4;
10692
height: 100%;
107-
font-family: Fraunces, Lora, 'Lora var','Iowan Old Style', 'Palatino Linotype', 'URW Palladio L', P052, serif;
93+
font-family: Fraunces, Lora,'Iowan Old Style', 'Palatino Linotype', 'URW Palladio L', P052, serif;
10894
font-weight: 300;
10995
font-size: 62.5%;
11096
background-color: var(--white);
@@ -302,6 +288,10 @@ figure {
302288
margin-bottom: var(--blank);
303289
}
304290

291+
figcaption {
292+
margin-top: var(--blank);
293+
}
294+
305295
.skip-to-content {
306296
left: 50%;
307297
position: absolute;
@@ -416,14 +406,6 @@ figure {
416406
}
417407

418408

419-
/* INDEX */
420-
421-
.index_albums img {
422-
aspect-ratio: 1 / 1;
423-
object-fit: cover;
424-
object-position: 50% 50%;
425-
transition: all 1s ease-in-out 0s;
426-
}
427409
/* NAV */
428410

429411
nav ul, footer ul {
@@ -448,6 +430,22 @@ nav a:hover {
448430
text-decoration: underline;
449431
}
450432

433+
.navbar_title {
434+
font-weight: 500;
435+
margin-bottom: 1ch;
436+
display: block;
437+
}
438+
439+
/* Add a double dash to separate pages from albums */
440+
#pages::before {
441+
content: '--';
442+
}
443+
444+
/* INDEX [gallery.php] */
445+
#hscroll.index img {
446+
border-radius: 1rem;
447+
}
448+
451449
.index_albums {
452450
display: grid;
453451
grid-template-columns: 1fr 1fr 1fr 1fr;
@@ -456,26 +454,24 @@ nav a:hover {
456454
gap: var(--blank);
457455
}
458456

457+
img[alt*="protected"] {
458+
background-color: rgba(120, 120, 120, 0.47);
459+
}
460+
461+
/* PAGES (not album.php or gallery.php) */
462+
459463
article {
460464
max-width: 90rem;
461465
padding-bottom: calc(var(--blank) * 3);
462466
}
463467

464-
#pages::before {
465-
content: '--';
466-
}
467-
468-
.navbar_title {
469-
font-weight: 500;
470-
margin-bottom: 1ch;
471-
display: block;
472-
}
468+
/* ALBUM [album.php] */
473469

474470
.album_photos {
475471
display: block;
476472
}
477473

478-
.album_head {
474+
.album_head,.index_header {
479475
margin-bottom: calc(var(--blank) * 3);
480476
}
481477

@@ -484,25 +480,48 @@ article {
484480
padding-left: var(--blank);
485481
}
486482

487-
#hscroll {
488-
display: flex;
489-
flex-direction: row;
490-
flex-wrap: nowrap;
491-
padding-top: var(--blank);
492-
}
493-
494-
#hscroll img {
495-
height: 85vh;
496-
padding-bottom: var(--blank);
497-
width: auto !important;
498-
max-width: unset; /*To fix the max-width on msartphone*/
483+
484+
/* Index */
485+
486+
/* INDEX */
487+
#hscroll.index img {
488+
max-height: 40rem;
489+
padding-bottom: 0;
499490
}
500491

501492
#index {
502493
padding-top: 4rem;
503494
padding-right: var(--blank);
504495
}
505496

497+
#hscroll.index {
498+
padding-top: 4rem;
499+
max-height: 50rem;
500+
501+
}
502+
503+
/* Hover effect on index page */
504+
.index img {
505+
transition: all .25s ease-in;
506+
aspect-ratio: 3 / 4;
507+
object-fit: cover;
508+
}
509+
510+
.index img:hover {
511+
/* aspect-ratio:auto;*/
512+
}
513+
514+
.index .album_photos:hover img:not(:hover) {
515+
opacity: .50;
516+
filter: grayscale(.3);
517+
518+
}
519+
520+
.index_header {
521+
min-width: 50rem;
522+
margin-right: calc(var(--blank) * 3);
523+
524+
}
506525
.index_header h1 {
507526
display: none;
508527
}
@@ -511,6 +530,22 @@ article {
511530
margin-top: 0;
512531
}
513532

533+
/* Album page */
534+
535+
#hscroll {
536+
display: flex;
537+
flex-direction: row;
538+
flex-wrap: nowrap;
539+
padding-top: var(--blank);
540+
}
541+
542+
#hscroll img {
543+
height: 85vh;
544+
padding-bottom: var(--blank);
545+
width: auto !important;
546+
max-width: unset; /*To fix the max-width on msartphone*/
547+
}
548+
514549
.album_head {
515550
display: flex;
516551
flex-direction: column;
@@ -551,23 +586,15 @@ article {
551586
height: 100%;
552587
}
553588

589+
590+
/* Page */
591+
554592
.page {
555593
padding: var(--blank);
556594
padding-top: 4rem;
557595
}
558596
}
559597

560-
/* SWUP */
561-
562-
.transition-fade {
563-
transition: 0.4s;
564-
opacity: 1;
565-
}
566-
567-
html.is-animating .transition-fade {
568-
opacity: 0;
569-
}
570-
571598
@media (min-width:1200px) {
572599
html {
573600
font-size: 70%;

‎horizon/fonts/Lora-Italic[wght].woff2‎

-89.3 KB
Binary file not shown.

‎horizon/fonts/Lora[wght].woff2‎

-82.8 KB
Binary file not shown.

‎horizon/gallery.php‎

Lines changed: 78 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -4,44 +4,98 @@
44
<head>
55
<?php include("_header.php"); ?>
66
</head>
7-
87
<body>
98
<?php zp_apply_filter('theme_body_open'); ?>
10-
<a href="#index" tabindex="0" class="skip-to-content">Skip to main content</a>
9+
<a href="#hscroll" tabindex="0" class="skip-to-content">Skip to main content</a>
10+
<div class="scroller">
1111

12-
<header class="header">
13-
<button class="toggle_nav" aria-expanded="false"><span>Menu</span></button>
14-
<nav class="navbar">
15-
<div class="navbar_title_container">
16-
<a href="<?php echo html_encode(getSiteHomeURL()); ?>"
17-
class="navbar_title">
18-
<?php printGalleryTitle(); ?>
19-
</a>
20-
</div>
21-
<?php include("_navbar.php"); // <ul> with all items ?>
22-
</nav>
23-
24-
</header>
12+
<header class="header">
13+
<button class="toggle_nav" aria-expanded="false"><span>Menu</span></button>
14+
<nav class="navbar">
15+
<div class="navbar_title_container">
16+
<a href="<?php echo html_encode(getSiteHomeURL()); ?>"
17+
class="navbar_title">
18+
<?php printGalleryTitle(); ?>
19+
</a>
20+
</div>
21+
<?php include("_navbar.php"); // <ul> with all items ?>
22+
</nav>
23+
24+
</header>
2525

26-
<main id="index">
26+
<main id="hscroll" class="index">
27+
2728
<div class="index_header">
2829
<h1><?php printGalleryTitle(); ?></h1>
29-
<p><?php printGalleryDesc(); ?></p>
30+
<p class="font-xxl"><?php printGalleryDesc(); ?></p>
3031
</div><!-- .album_header -->
3132

32-
<div class="index_albums">
33+
<div class="album_photos">
3334
<?php while (next_album()): ?>
34-
<figure><a href="<?php echo html_encode(getAlbumURL()); ?>"><?php printCustomAlbumThumbImage(getAnnotatedAlbumTitle(), NULL, NULL, 1200, NULL, NULL, NULL, null, NULL,NULL); ?></a><figcaption><?php printAlbumTitle(); ?></figcaption>
35+
<figure class="appear"><a href="<?php echo html_encode(getAlbumURL()); ?>"><?php printCustomAlbumThumbImage(getAnnotatedAlbumTitle(), NULL, NULL, 900, NULL, NULL, NULL, null, NULL,NULL); ?></a><figcaption><?php printAlbumTitle(); ?></figcaption>
3536
</figure>
3637
<?php endwhile; ?>
3738
</div><!-- .album_photos -->
3839

3940
</main>
41+
42+
<footer>
43+
<?php include("_footer.php"); ?>
44+
</footer>
45+
46+
</div><!-- .scroller -->
47+
<script>
48+
document.addEventListener("DOMContentLoaded", function(event) {
49+
50+
// get all of the elements with the 'scroll' class.
51+
const scrollList = document.querySelectorAll(".appear")
52+
53+
const callback = (entries, observer) => {
54+
entries.forEach((entry) => {
55+
56+
if (entry.isIntersecting) {
57+
58+
entry.target.classList.add("appear-in");
59+
60+
}
61+
})
62+
}
63+
64+
const options = {}
65+
66+
const myObserver = new IntersectionObserver(callback, options)
67+
68+
scrollList.forEach(scrollItem => {
69+
myObserver.observe(scrollItem)
70+
})
71+
72+
});
73+
4074

41-
<footer class="footer">
42-
<?php printCodeblock(2); ?>
43-
<?php include("_footer.php"); ?>
44-
</footer>
45-
75+
const scrollContainer = document.querySelector(".scroller");
76+
function hijackScroll() {
77+
event.preventDefault();
78+
scrollContainer.scrollLeft += event.deltaY;
79+
}
80+
// https://www.uriports.com/blog/easy-fix-for-unable-to-preventdefault-inside-passive-event-listener/
81+
// VERSION PASSIVE
82+
const nonePassive = {
83+
passive: false
84+
};
85+
scrollContainer.addEventListener("wheel", hijackScroll, nonePassive);
86+
//scrollContainer.addEventListener("wheel", hijackScroll);
87+
const mediaQuery = window.matchMedia('(min-width: 950px)') ;
88+
function handleTabletChange(e) {
89+
// Check if the media query is true
90+
if (e.matches) {
91+
scrollContainer.addEventListener("wheel", hijackScroll); // Add hijack
92+
}
93+
else {
94+
scrollContainer.removeEventListener("wheel", hijackScroll); // Remove hijack
95+
}
96+
}
97+
mediaQuery.addListener(handleTabletChange);
98+
handleTabletChange(mediaQuery);
99+
</script>
46100
</body>
47101
</html>

‎horizon/images/err-passwordprotected.png‎

152 Bytes
Loading

0 commit comments

Comments
 (0)