give the css/html some light on the stage
This commit is contained in:
sakrecoer
parent
3f0ed302f2
commit
3faede7e3e
2 changed files with 212 additions and 0 deletions
113
WebServices/Peertube/custom-peertube.css
Normal file
113
WebServices/Peertube/custom-peertube.css
Normal file
|
|
@ -0,0 +1,113 @@
|
|||
body {
|
||||
/* */
|
||||
/* Set the colors of them primary and hovers */
|
||||
/* */
|
||||
--primary: #ff9007 !important;
|
||||
--border-primary: #ff9007 !important;
|
||||
--mainHoverColor: #8b49fd;
|
||||
/* */
|
||||
/* Sexy background anyone? Sets a centered, fixed background image covering the space, and a gradient over it. Gradient is made for dark theme */
|
||||
/* You're going to want to add something spacious in the custom homapage so it can really shine. Or have your visistors land on a channel, that looks good too*/
|
||||
/* We could probably derive the gradient colors from existing variables, but hey: they were color-picked from the default dark-theme background variable, so it's a match, right? */
|
||||
/* */
|
||||
background: linear-gradient(to bottom, hsla(0, 14.3%, 6.9%, 1), hsla(0, 14.3%, 6.9%, .5)), url(https://www.basspistol.com/images/bpist-wireframe-background-outline.svg);
|
||||
background-size: cover;
|
||||
background-color: transparent !important;
|
||||
background-attachment: fixed;
|
||||
background-position: center center !important;
|
||||
}
|
||||
|
||||
/* */
|
||||
/* Set the colors of the buttons. We should probably look uo the new variable instead but feeling lazy, might do it later */
|
||||
/* */
|
||||
.primary-button:hover {
|
||||
color: var(--on-primary);
|
||||
background-color: var(--mainHoverColor);
|
||||
border-color: var(--mainHoverColor);
|
||||
}
|
||||
|
||||
/* */
|
||||
/* Make sure the sexy background is shining through */
|
||||
/* */
|
||||
.sub-header-container{
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
/* */
|
||||
/* add blured backdrop effect to the header and make it transparent so we can see the effect */
|
||||
/* */
|
||||
header.root-header {
|
||||
background-color: hsla(0, 14.3%, 6.9%, 0.25) !important;
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
header > my-header > div.root {
|
||||
background-color: hsla(0, 14.3%, 6.9%, 0.25) !important;
|
||||
}
|
||||
|
||||
/* */
|
||||
/* Align the meny and the header of channels */
|
||||
/* */
|
||||
.menu-container,
|
||||
.main-row {
|
||||
padding-top: 2rem;
|
||||
}
|
||||
|
||||
/* */
|
||||
/* Let the hover on buttons and links be smooth AF, based */
|
||||
/* */
|
||||
a, a:hover, button {
|
||||
transition: 0.5s;
|
||||
}
|
||||
/* */
|
||||
/* Let the logo breath out of that little container thingie that looks like it is part of the logo (When not) */
|
||||
/* */
|
||||
.icon-logo {
|
||||
background-color: transparent;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* */
|
||||
/* Kill the gamification. We sane, we good, we bigger than that! Life is not a competition. Enjoy the journey, Namaste! */
|
||||
/* */
|
||||
my-video-views-counter {
|
||||
display: none;
|
||||
}
|
||||
/* */
|
||||
/* Might not for users of peertube-plugin label-pur. If you CAN, you SHOULD enable redundancy. It's the right thing to do! PeerTube operators unite! (https://framagit.org/rigelk/peertube-plugin-label-pur) */
|
||||
/* */
|
||||
|
||||
#label-pur {
|
||||
z-index: 1000000;
|
||||
}
|
||||
|
||||
/* */
|
||||
/* Match the PUR card to the rest of the jazzband */
|
||||
/* */
|
||||
.flip-card-back {
|
||||
background: --var(--mainHoverColor);
|
||||
}
|
||||
|
||||
/* */
|
||||
/* What do we want? Rounded corners!! When do we want them? NOW! */
|
||||
/* */
|
||||
.channel {
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
/* */
|
||||
/* We got channels banners with top-right rounded corener, bottom-right rounded corners, bottom-left rounded corners, top-left rounded corners, Channel banners for everyone! */
|
||||
/* */
|
||||
.banner img {
|
||||
border-radius: 15px 15px 5px 5px;
|
||||
}
|
||||
|
||||
/* */
|
||||
/* We like colors and we pick them for text selection too! */
|
||||
/* */
|
||||
|
||||
::selection {
|
||||
color: white;
|
||||
background: var(--mainHoverColor);
|
||||
}
|
||||
|
||||
99
WebServices/Peertube/homepage.html
Normal file
99
WebServices/Peertube/homepage.html
Normal file
|
|
@ -0,0 +1,99 @@
|
|||
<peertube-container>
|
||||
<img alt="Basspistol logo" src="https://basspistol.com/images/logos/peertube--new-logo-2025.svg" width="100%" />
|
||||
<p> </p>
|
||||
<h1 style="text-align:center">𝕿𝖍𝖊 𝖚𝖓𝖉𝖊𝖗𝖌𝖗𝖔𝖚𝖓𝖉 𝖎𝖘 𝖉𝖊𝖆𝖉.<br />𝕷𝖔𝖓𝖌 𝖑𝖎𝖛𝖊 𝖙𝖍𝖊 𝖚𝖓𝖉𝖊𝖗𝖌𝖗𝖔𝖚𝖓𝖉.</h1>
|
||||
<p> </p>
|
||||
<h3 style="text-align:center"><a href="https://v.basspistol.org/feeds/videos.xml?isLocal=true"><img alt="RSS icon" src="https://basspistol.com/rss.svg" style="width: 30px; height:auto;" /></a></h3>
|
||||
<p> </p>
|
||||
</peertube-container>
|
||||
|
||||
<peertube-container>
|
||||
<h3>💣 𝕿𝖚𝖓𝖊𝖘'𝖓'𝕿𝖚𝖇𝖊𝖘 📼</h3>
|
||||
<p>The latest videos published on Basspistol</p>
|
||||
|
||||
<peertube-videos-list data-count="5" data-only-local="true" data-is-live="false" data-sort="-originallyPublishedAt"></peertube-videos-list>
|
||||
|
||||
<p> </p>
|
||||
|
||||
<peertube-button data-href="/videos/browse?sort=-originallyPublishedAt&scope=local&c=true&s=2" data-theme="primary" data-label="Show all local videos"></peertube-button>
|
||||
|
||||
<p> </p>
|
||||
|
||||
<h3>🔴 𝕷𝖎𝖛𝖊 𝕺𝖓 𝕿𝖍𝖊 𝕹𝖊𝖙𝖜𝖔𝖗𝖐</h3>
|
||||
<p>Live streams</p>
|
||||
<peertube-videos-list data-is-live="true" data-count="5"></peertube-videos-list>
|
||||
<p> </p>
|
||||
<peertube-button data-href="/videos/browse?live=true&c=true&s=3" data-theme="primary" data-label="Show all Live-videos"></peertube-button>
|
||||
<p> </p><p> </p>
|
||||
|
||||
</peertube-container>
|
||||
|
||||
<peertube-container>
|
||||
<p> </p>
|
||||
</peertube-container>
|
||||
|
||||
<peertube-container>
|
||||
<p> </p>
|
||||
</peertube-container>
|
||||
|
||||
<peertube-container data-layout="column" >
|
||||
<h3 id="gang">🕸️ 𝕮𝖗𝖊𝖆𝖙𝖔𝖗𝖘 𝖆𝖓𝖉 𝕮𝖚𝖗𝖆𝖙𝖔𝖗𝖘</h3>
|
||||
<p>Selected channels for your cravings.</p>
|
||||
</peertube-container>
|
||||
|
||||
<peertube-container data-layout="row">
|
||||
<peertube-channel-miniature data-name="music.syndicate"></peertube-channel-miniature>
|
||||
<peertube-channel-miniature data-name="2024"></peertube-channel-miniature>
|
||||
<peertube-channel-miniature data-name="axwax_music"></peertube-channel-miniature>
|
||||
<peertube-channel-miniature data-name="bacalaotv"></peertube-channel-miniature>
|
||||
<peertube-channel-miniature data-name="charles_h"></peertube-channel-miniature>
|
||||
<peertube-channel-miniature data-name="tosettosetto"></peertube-channel-miniature>
|
||||
<peertube-channel-miniature data-name="dronezone"></peertube-channel-miniature>
|
||||
<peertube-channel-miniature data-name="dub_under_construction@peertube.dubwise.dk"></peertube-channel-miniature>
|
||||
<peertube-channel-miniature data-name="endolexis_channel"></peertube-channel-miniature>
|
||||
<peertube-channel-miniature data-name="fedivideo_playlists@fedi.video"></peertube-channel-miniature>
|
||||
<peertube-channel-miniature data-name="fraglerock"></peertube-channel-miniature>
|
||||
<peertube-channel-miniature data-name="house_of_me"></peertube-channel-miniature>
|
||||
<peertube-channel-miniature data-name="jazzaria_fresh_libre_music"></peertube-channel-miniature>
|
||||
<peertube-channel-miniature data-name="jokingly_channel"></peertube-channel-miniature>
|
||||
<peertube-channel-miniature data-name="jnl_channel"></peertube-channel-miniature>
|
||||
<peertube-channel-miniature data-name="kruzhem.fans"></peertube-channel-miniature>
|
||||
<peertube-channel-miniature data-name="lie_set"></peertube-channel-miniature>
|
||||
<peertube-channel-miniature data-name="machineblade_channel"></peertube-channel-miniature>
|
||||
<peertube-channel-miniature data-name="revlull@makertube.net"></peertube-channel-miniature>
|
||||
<peertube-channel-miniature data-name="music_is_irrtum@video.ploud.fr"></peertube-channel-miniature>
|
||||
<peertube-channel-miniature data-name="pdigi"></peertube-channel-miniature>
|
||||
<peertube-channel-miniature data-name="plagve"></peertube-channel-miniature>
|
||||
<peertube-channel-miniature data-name="rageblanchemusic"></peertube-channel-miniature>
|
||||
<peertube-channel-miniature data-name="rasyoulai_channel"></peertube-channel-miniature>
|
||||
<peertube-channel-miniature data-name="silkyslick_channel"></peertube-channel-miniature>
|
||||
<peertube-channel-miniature data-name="sitka"></peertube-channel-miniature>
|
||||
<peertube-channel-miniature data-name="street.soul"></peertube-channel-miniature>
|
||||
<peertube-channel-miniature data-name="tek"></peertube-channel-miniature>
|
||||
<peertube-channel-miniature data-name="ykhm"></peertube-channel-miniature>
|
||||
|
||||
</peertube-container>
|
||||
|
||||
<peertube-container>
|
||||
<p> </p>
|
||||
</peertube-container>
|
||||
|
||||
<peertube-container>
|
||||
<p> </p>
|
||||
</peertube-container>
|
||||
|
||||
<peertube-container>
|
||||
<h3>🔥 𝕷𝖆𝖙𝖊𝖘𝖙 𝕸𝖚𝖘𝖎𝖈 𝕱𝖗𝖔𝖒 𝕿𝖍𝖊 𝕹𝖊𝖙𝖜𝖔𝖗𝖐</h3>
|
||||
<p>Latest music vids posted on Fedi</p>
|
||||
<peertube-videos-list data-count="5" data-only-local="false" data-category-one-of="1" data-is-live="false" data-sort="-originallyPublishedAt"></peertube-videos-list>
|
||||
<p> </p>
|
||||
<peertube-button data-href="/videos/browse?sort=-originallyPublishedAt&categoryOneOf=1&c=true&s=3" data-theme="primary" data-label="Show Music-videos"></peertube-button>
|
||||
<p> </p><p> </p>
|
||||
</peertube-container>
|
||||
|
||||
<peertube-container>
|
||||
<p> </p>
|
||||
</peertube-container>
|
||||
<peertube-container>
|
||||
<a href="https://basspistol.com" rel="me" class="peertube-button-link primary-button"><h2>🤔 What is this ❓</h2></a>
|
||||
</peertube-container>
|
||||
Loading…
Add table
Add a link
Reference in a new issue