HPR/hpr_generator
8
1
Fork 5
Code Issues 36 Pull Requests 5 Actions Packages Projects Releases Wiki Activity

Intial card layout design

Browse Source 
Format episodes, series, syndication pages with card format.
This commit is contained in:
Roan Horning
2025-07-24 22:18:56 -04:00
parent 8e2fb783b6
commit 38d81cedda
4 changed files with 65 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
public_html/css/hpr.css
View File

@@ -249,9 +249,35 @@ article > p,
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 0.5rem;
gap: 1.0rem;
justify-content: space-between;
justify-items: space-between;
}
#podcast_lane > .lane,
#project_lane > .lane,
#latest_lane.lane {
justify-content: flex-start;
}
.lane > article {
padding: 1.0rem;
/* Add shadows to create the "card" effect */
border-top: thin solid hsl(190deg 48% 49% / 0.2);
border-left: thin solid hsl(190deg 48% 49% / 0.2);
border-radius: 0.5rem;
box-shadow:
1px 2px 2px hsl(190deg 48% 49% / 0.2),
2px 4px 4px hsl(190deg 48% 49% / 0.2);
transition: 0.3s;
width: max-content;
flex: 1 0 50%;
overflow-y: scroll;
}
.lane > article:hover {
box-shadow:
4px 8px 8px hsl(190deg 48% 49% / 0.2),
8px 16px 16px hsl(190deg 48% 49% / 0.2);
}
a.lane-button {
display: flex;
flex-direction: column;
@@ -369,7 +395,10 @@ fieldset > input {
border: thin solid var(--input-border-primary);
border-radius: 0.2rem;
}
@media (min-width: 900px) {
.no-css {
display: none;
}
@media (min-width: 600px) {
body > header {
background-size: 200pt, cover;
background-position: left 128pt top -12pt, left top;
@@ -395,9 +424,7 @@ fieldset > input {
}
#qr_code {
text-align: center;
}
#qr_code > img {
max-height: 195px;
max-width: 195px;
}
fieldset>table,
fieldset>table thead,
@@ -446,4 +473,11 @@ fieldset > input {
body > main {
padding: 0.25rem 2rem;
}
.lane > article {
flex-basis: 30%;
/* max-width: 30%; */
}
#latest_lane.lane section > ul {
margin: 0.5rem 3rem 0 1rem;
}
}

15
templates/content-episodes.tpl.html
View File

@@ -1,24 +1,26 @@
<!--% PROCESS 'shared-episode-summary.tpl.html' %-->
<!--% PROCESS "queries-episodes.tpl.html" %-->
<article>
<header>
<h1>Complete Archive of Shows.</h1>
<h1>Complete Archive of Shows.</h1>
<p>
All this information is available to the public. Scrape if you wish but if we can format the data for you then we're happy to help.
</p>
</header>
<div class="lane">
<!--% USE DBI(constants.driver) %-->
<!--% FOREACH episodes IN DBI.query(query_episodes)
%-->
<article>
<!--% show_summary(episodes) %-->
<p class="listen-in"><!--% display_listen_in(episodes.id) %--></p>
</article>
<!--% END %-->
</div>
<h2 id="twt_episodes">Today With a Techie Archived Shows</h2>
<p>
<!-- Creative Commons License -->
<a rel="license" href="https://creativecommons.org/licenses/by-nc-sa/2.5/"><img alt="Creative Commons License" border="0" src="https://creativecommons.org/images/public/somerights20.png" width="88" height="31" /></a><br>The following work is licensed under a <a rel="license" href="https://creativecommons.org/licenses/by-nc-sa/2.5/">Creative Commons Attribution-NonCommercial-ShareAlike 2.5 License</a>.</p>
<p>Today With a Techie Radio was brought to you by <a href="https://en.wikipedia.org/wiki/Infonomicon">The Infonomicon Computer Club</a></p>
<!--% FOREACH twat_episode IN DBI.query('
<div class="lane">
<!--% FOREACH twat_episode IN DBI.query('
SELECT
eps.id,
eps.explicit,
@@ -33,8 +35,9 @@
ORDER BY eps.id DESC
')
%-->
<article>
<!--% twat_show_summary(twat_episode) %-->
</article>
<!--% END %-->
</article>

24
templates/content-series.tpl.html
View File

@@ -1,17 +1,19 @@
<!--% PROCESS 'shared-utils.tpl.html' %-->
<!--% PROCESS "queries-series.tpl.html" %-->
<article>
<!--% USE DBI(constants.driver) %-->
<h1 class="title">In-Depth Series</h1>
<div class="lane">
<!--% FOREACH series IN DBI.query(query_episodes) %-->
<h2><a href="<!--% absolute_path(baseurl) %-->series/<!--% zero_pad_left(series.id) %-->.html"><!--% series.name %--></a></h2>
<ul>
<li>Number of episodes: <!--% series.number_of_episodes %--></li>
<li>Open/closed: <!--% display_choice(series.private, 'closed', 'open') %--></li>
<li>Date of earliest show: <!--% series.earliest_show %--></li>
<li>Date of latest show: <!--% series.latest_show %--></li>
<li>Series RSS feeds: <a href="<!--% absolute_path(baseurl) %-->hpr_ogg_rss.php?series=<!--% series.id %-->">ogg</a>, <a href="<!--% absolute_path(baseurl) %-->hpr_spx_rss.php?series=<!--% series.id %-->">spx</a>, <a href="<!--% absolute_path(baseurl) %-->hpr_mp3_rss.php?series=<!--% series.id %-->">mp3</a></li>
</ul>
<em><!--% series.description %--></em>
<!--% END %-->
<article>
<header><a href="<!--% absolute_path(baseurl) %-->series/<!--% zero_pad_left(series.id) %-->.html"><!--% series.name %--></a></header>
<ul>
<li>Number of episodes: <!--% series.number_of_episodes %--></li>
<li>Open/closed: <!--% display_choice(series.private, 'closed', 'open') %--></li>
<li>Date of earliest show: <!--% series.earliest_show %--></li>
<li>Date of latest show: <!--% series.latest_show %--></li>
<li>Series RSS feeds: <a href="<!--% absolute_path(baseurl) %-->hpr_ogg_rss.php?series=<!--% series.id %-->">ogg</a>, <a href="<!--% absolute_path(baseurl) %-->hpr_spx_rss.php?series=<!--% series.id %-->">spx</a>, <a href="<!--% absolute_path(baseurl) %-->hpr_mp3_rss.php?series=<!--% series.id %-->">mp3</a></li>
</ul>
<em><!--% series.description %--></em>
</article>
<!--% END %-->
</div>

11
templates/content-syndication.tpl.html
View File

@@ -1,14 +1,10 @@
<h1>RSS Syndication</h1>
<article>
<header>
<h2>Subscribe to our Feeds</h2>
</header>
<p>
Great that you want to listen. Have a look below at the feeds that best suite your listening habits.
</p>
</article>
<article>
<div class="lane">
<article>
<header>
<h2><img src="<!--% absolute_path(baseurl) %-->images/feed.png" alt="rss logo"> The Community News Summary</h2>
<h3>One show a month</h3>
@@ -77,7 +73,8 @@
<li><a href="<!--% absolute_path(baseurl) %-->comments.rss">Listener contributed comments to the episodes</a></li>
</ul>
</article>
<hr />
<div>
<hr class="no-css">
<h1>Other Download Options</h1>
<article>
<header>