diff options
| -rw-r--r-- | www/projects/index.html | 14 | ||||
| -rw-r--r-- | www/style.css | 39 |
2 files changed, 22 insertions, 31 deletions
diff --git a/www/projects/index.html b/www/projects/index.html index 2f788f4..cd1d0d1 100644 --- a/www/projects/index.html +++ b/www/projects/index.html @@ -313,7 +313,7 @@ <span class="heading">Videography<span class="desktop"> Projects</span></span>
<div class="flex-container flex-container-normal flex-container-dynamicwrap gap wide" style="margin-top: 1rem;">
<div class="flex video-higlight-card shadow-filter">
- <button onclick="loadVideo('/assets/videos/stringsoffreedom.mp4', 'Strings of Freedom', 'stringsoffreedom');">⏵</button>
+ <a href="/video/stringsoffreedom/" class="video-play-cover">⏵</a>
<img src="/assets/images/video-hero/stringsoffreedom.png" alt="">
<div class="img">
<h1>Strings of Freedom</h1>
@@ -322,7 +322,7 @@ </div>
</div>
<div class="flex video-higlight-card shadow-filter">
- <button onclick="loadVideo('/assets/videos/minds.mp4', 'MINDS Charity Car Wash Promotional Video', 'minds');">⏵</button>
+ <a href="/video/minds/" class="video-play-cover">⏵</a>
<img src="/assets/images/video-hero/minds.png" alt="">
<div class="img">
<h1>MINDS Charity Car Wash Promotional</h1>
@@ -334,7 +334,7 @@ <div class="flex video-gallery-card narrow">
<div>
<img src="/assets/images/video-hero/stringsoffreedom.png" alt="">
- <button onclick="loadVideo('/assets/videos/stringsoffreedom.mp4', 'Strings of Freedom', 'stringsoffreedom');">⏵</button>
+ <a href="/video/stringsoffreedom/" class="video-play-cover">⏵</a>
</div>
<div class="video-gallery-card-text video-gallery-card-text-accent flex-container flex-container-column flex-start gap">
<a href="/video/stringsoffreedom/" class="link">Strings of Freedom</a>
@@ -344,7 +344,7 @@ <div class="flex video-gallery-card narrow">
<div>
<img src="/assets/images/video-hero/minds.png" alt="">
- <button onclick="loadVideo('/assets/videos/minds.mp4', 'MINDS Charity Car Wash Promotional Video', 'minds');">⏵</button>
+ <a href="/video/minds/" class="video-play-cover">⏵</a>
</div>
<div class="video-gallery-card-text video-gallery-card-text-accent flex-container flex-container-column flex-start gap">
<a href="/video/minds/" class="link">MINDS Charity Car Wash Promotional</a>
@@ -354,7 +354,7 @@ <div class="flex video-gallery-card">
<div>
<img src="/assets/images/video-hero/paperverse.png" alt="">
- <button onclick="loadVideo('/assets/videos/paperverse.mp4', 'Paperverse Hub, a videography competition entry', 'paperverse');">⏵</button>
+ <a href="/video/paperverse/" class="video-play-cover">⏵</a>
</div>
<div class="video-gallery-card-text flex-container flex-container-normal flex-container-dynamicwrap flex-spacebetween flex-center-content">
<a href="/video/paperverse/" class="link">Paperverse Hub</a>
@@ -364,7 +364,7 @@ <div class="flex video-gallery-card">
<div>
<img src="/assets/images/video-hero/eid2026.png" alt="">
- <button onclick="loadVideo('/assets/videos/eid2026.mp4', 'A message for this Eid', 'eid2026');">⏵</button>
+ <a href="/video/eid2026" class="video-play-cover">⏵</a>
</div>
<div class="video-gallery-card-text flex-container flex-container-normal flex-container-dynamicwrap flex-spacebetween flex-center-content gap">
<a href="/video/eid2026/" class="link">A message for this Eid</a>
@@ -374,7 +374,7 @@ <div class="flex video-gallery-card">
<div>
<img src="/assets/images/video-hero/via3rp.png" alt="">
- <button onclick="loadVideo('/assets/videos/VIA.mp4', 'Secondary 3 Class VIA Project', 's3via');">⏵</button>
+ <a href="/video/s3via/" class="video-play-cover">⏵</a>
</div>
<div class="video-gallery-card-text flex-container flex-container-normal flex-container-dynamicwrap flex-spacebetween flex-center-content gap">
<a href="/video/s3via/" class="link">Secondary 3 VIA Project</a>
diff --git a/www/style.css b/www/style.css index 8883fa0..b48e6b8 100644 --- a/www/style.css +++ b/www/style.css @@ -906,26 +906,6 @@ li { margin-top: 0;
}
-.video-higlight-card > button {
- position: fixed;
- left: 0; right: 50px;
- top: 0; bottom: 50px;
- border: none;
- background-color: transparent;
- color: white;
- font-size: 5rem;
- cursor: pointer;
-}
-
-.video-higlight-card > button:hover {
- background-color: rgba(0, 0, 0, 0.1);
- font-size: 6rem;
-}
-
-.video-higlight-card > button:active {
- background-color: rgba(0, 0, 0, 0.25);
-}
-
#full-video-player {
position: fixed;
background-color: rgba(0, 0, 0, 0.5);
@@ -1008,28 +988,39 @@ li { opacity: .8;
}
-.video-gallery-card > div > button {
+.video-play-cover {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
border: 0;
- background-color: transparent;
+ opacity: 0;
color: white;
font-size: 3rem;
cursor: pointer;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ text-decoration: none;
}
-.video-gallery-card > div > button:hover {
+.video-play-cover:hover {
+ opacity: 1;
background-color: rgba(0, 0, 0, 0.1);
font-size: 3.5rem;
}
-.video-gallery-card > div > button:active {
+.video-play-cover:active {
+ opacity: 1;
background-color: rgba(0, 0, 0, 0.25);
}
+.video-higlight-card > .video-play-cover {
+ right: 50px;
+ bottom: 50px;
+}
+
.info-box {
background-color: rgba(0, 0, 0, 0.05);
padding: 15px;
|