Korbs/sudovanilla-website
1
Fork 0
Code Issues Pull requests Activity

Add image option instead only only providing video

Browse source
This commit is contained in:
Korbs 2024-08-27 01:51:16 -04:00
parent a260dc9e35
commit 751c7ea87a
2 changed files with 21 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
src/components/Hero.astro
View file

@ -1,25 +1,26 @@
--- ---
// Properties // Properties
const { Title, Description, VideoSrc, VideoCredit, VideoPoster } = Astro.props; const { Title, Description, VideoSrc, UseImage, UseVideo, Credit, VideoPoster, Image } = Astro.props;
// Components // Components
import SudoVanillaLogo from "@components/global/SudoVanillaLogo.astro"; import SudoVanillaLogo from "@components/global/SudoVanillaLogo.astro";
import SudoVanilla from "@components/global/SudoVanillaLogo.astro"; import SudoVanilla from "@components/global/SudoVanillaLogo.astro";
// Icons // Icons
import { InfoCircle } from "iconoir-react"; import { InfoCircle } from "@iconoir/vue";
--- ---
<div class="landing-hero"> <div class="landing-hero">
<video autoplay muted loop src={VideoSrc} poster={VideoPoster}></video> {UseImage ? <img src={Image}/> : null}
{UseVideo ? <video autoplay muted loop src={VideoSrc} poster={VideoPoster}></video> : null}
<!-- Shoelace needs JS, this is a fallback solution --> <!-- Shoelace needs JS, this is a fallback solution -->
<noscript> <noscript>
<p id="video-credit">{VideoCredit}</p> <p id="video-credit">{Credit}</p>
</noscript> </noscript>
<sl-tooltip <sl-tooltip
id="video-credit-js" id="video-credit-js"
class="with-js" class="with-js"
content={VideoCredit} content={Credit}
placement="top-end" placement="top-end"
style="--sl-tooltip-arrow-size: 0; --max-width: 600px;" style="--sl-tooltip-arrow-size: 0; --max-width: 600px;"
> >
@ -46,6 +47,14 @@ import { InfoCircle } from "iconoir-react";
object-fit: cover; object-fit: cover;
pointer-events: none; pointer-events: none;
} }
img {
width: 100%;
height: 500px;
border-radius: 10px;
opacity: 0.32;
object-fit: cover;
pointer-events: none;
}
#video-credit, #video-credit,
#video-credit-js { #video-credit-js {
position: absolute; position: absolute;
@ -53,7 +62,7 @@ import { InfoCircle } from "iconoir-react";
bottom: 0px; bottom: 0px;
right: 0px; right: 0px;
font-size: 10px; font-size: 10px;
opacity: 0.4; opacity: 0.8;
margin: 32px; margin: 32px;
a { a {
color: white; color: white;

12
src/pages/init/index.astro
View file

@ -9,7 +9,7 @@ import Posts from "@components/blog/posts.astro";
import LargeCard from "@components/Feature.astro"; import LargeCard from "@components/Feature.astro";
// Icons // Icons
import { BookmarkBook, ReportColumns } from "iconoir-react"; import { BookmarkBook, ReportColumns } from "@iconoir/vue";
--- ---
<Default MobileTitle="Init Privacy"> <Default MobileTitle="Init Privacy">
@ -17,17 +17,17 @@ import { BookmarkBook, ReportColumns } from "iconoir-react";
<p class="header-sub-service">Init Privacy</p> <p class="header-sub-service">Init Privacy</p>
<div> <div>
<a href="/init/software/browsers/">Softwares</a> <a href="/init/software/browsers/">Softwares</a>
<a href="/init/websites/">Websites</a> <a href="/init/software/websites/">Websites</a>
<a href="/init/disclaimer/">Disclaimers</a> <a href="/init/software/disclaimer/">Disclaimers</a>
</div> </div>
</Fragment> </Fragment>
<Fragment slot="body"> <Fragment slot="body">
<Hero <Hero
Title="Init Privacy" Title="Init Privacy"
Description="Your data is your business" Description="Your data is your business"
VideoSrc="https://md.sudovanilla.org/videos/mp4/init-hero.mp4" UseImage
VideoPoster="https://md.sudovanilla.org/images/init-poster.png" Image="https://images.pexels.com/photos/179993/pexels-photo-179993.jpeg"
VideoCredit="Video By George Morina on Pexels" Credit="Black and White CCTV Cameras. Shot by Thomas Windisch on Pexels."
/> />
<LargeCard <LargeCard
Title="User Freedom" Title="User Freedom"