commit dd88fba985f3e4514f46031cd73ad473259f82a3
parent a7eec93aec6efa8af09c13f6a8a58d82f8a19d13
Author: MikoĊaj Lenczewski <mblenczewski@gmail.com>
Date: Tue, 14 Apr 2026 19:34:45 +0100
Add pictures to banners. Tweak layout. Improve css.
Diffstat:
11 files changed, 209 insertions(+), 67 deletions(-)
diff --git a/src/css/article.css b/src/css/article.css
@@ -5,4 +5,56 @@
.article {
background-color: mintcream;
+
+ padding-top: 2em;
+ padding-bottom: 2em;
+}
+
+.article a {
+ text-decoration: none;
+}
+
+.article a:focus, .article a:hover {
+ text-decoration: underline;
+}
+
+.article-img {
+ margin: 0 0 1em;
+
+ box-shadow: 5px 5px 0 0 rgba(0,0,0,0.1);
+}
+
+.article-img > img {
+ max-width: 100%;
+
+ background-color: #808080;
+ transition: opacity 0.1s ease;
+ opacity: 1;
+}
+
+.article-img > img:hover {
+ opacity: 0.9;
+}
+
+.article-title {
+ margin: 0;
+}
+
+.article-info {
+ font-size: 11px;
+ color: #909090;
+}
+
+.article-info .article-info-meta, .article-info .article-info-value {
+ display: inline-block;
+}
+
+.article-info-meta {
+ margin-left: 0;
+ margin-right: 1em;
+}
+
+.article-info-value {
+ margin-left: 0;
+ margin-right: 2em;
}
diff --git a/src/css/layout.css b/src/css/layout.css
@@ -1,5 +1,5 @@
main.grid {
- grid-template-rows: minmax(8em, 12em) auto auto; /* TODO */
+ grid-template-rows: auto auto auto;
grid-template-columns: 3fr 1fr;
}
@@ -7,46 +7,80 @@ main.grid {
/* TODO */
}
+#banner img {
+ object-fit: cover;
+ height: 100%;
+ width: 100%;
+}
+
+#banner .breaking-news {
+ position: relative;
+}
+
+#banner .breaking-news-title {
+ position: absolute;
+ padding: 0 2em 0;
+ margin: 0;
+ bottom: 1em;
+ color: #fff;
+}
+
+.breaking-news-grad-1, .breaking-news-grad-2, .breaking-news-grad-3 {
+ height: 100%;
+ width: 100%;
+
+ position: absolute;
+ top: 0;
+ left: 0;
+
+ opacity: 0.5;
+}
+
+.breaking-news-grad-1 {
+ background-image: linear-gradient(135deg, rgb(0,0,0), rgb(255,0,0));
+}
+
+.breaking-news-grad-2 {
+ background-image: linear-gradient(135deg, rgb(0,0,0), rgb(0,255,0));
+}
+
+.breaking-news-grad-3 {
+ background-image: linear-gradient(135deg, rgb(0,0,0), rgb(0,0,255));
+}
+
#banner.grid {
- grid-template-rows: 1fr 1fr;
- grid-template-columns: 3fr 1fr 1fr;
+ grid-template-rows: auto auto;
+ grid-template-columns: 2fr 1fr;
background-color: lightgrey;
}
-#banner > #breaking-news {
+#banner > #breaking-news-1 {
grid-row: 1 / span 2;
grid-column: 1;
background-color: red;
}
-#banner > #breaking-news-1 {
+#banner > #breaking-news-2 {
grid-row: 1;
- grid-column: 2 / span 2;
+ grid-column: 2;
background-color: magenta;
}
-#banner > #breaking-news-2 {
+#banner > #breaking-news-3 {
grid-row: 2;
grid-column: 2;
background-color: blue;
}
-#banner > #breaking-news-3 {
- grid-row: 2;
- grid-column: 3;
-
- background-color: yellow;
-}
-
#content {
- height: 80em;
background-color: grey;
- /* TODO */
+ margin-left: 2em;
+ margin-right: 2em;
}
#sidebar {
@@ -57,6 +91,48 @@ main.grid {
/* css selector explanation
* --
+ * #sidebar a { ... }
+ * --
+ * - given an element with the id `sidebar`
+ * - for all its descendants (immediate and nested children) of type <a>
+ */
+
+#sidebar ol, #sidebar ul {
+ list-style: none;
+}
+
+#sidebar li {
+ padding-top: 1px;
+ padding-bottom: 1px;
+}
+
+#sidebar a {
+ text-decoration: none;
+ padding: 6px 12px;
+
+ position: relative;
+ display: inline-block;
+ transition: left 0.2s ease;
+ left: 0px;
+
+ background: #f8f8f8;
+ color: #303030;
+}
+
+#sidebar a:before {
+ content: ">";
+ margin-right: 5px;
+}
+
+#sidebar a:focus, #sidebar a:hover {
+ left: 3px;
+
+ background: #303030;
+ color: #fff;
+}
+
+/* css selector explanation
+ * --
* main.grid > #content { ... }
* --
* - given an element of type `main` with the class `grid`
diff --git a/src/css/style.css b/src/css/style.css
@@ -12,6 +12,12 @@ hr {
border-color: inherit;
}
+img {
+ width: 100%;
+ height: auto;
+ aspect-ratio: auto 1200 / 630;
+}
+
.center {
max-width: 80em;
margin-left: auto;
diff --git a/src/html/science/article.html b/src/html/science/article.html
@@ -8,7 +8,7 @@ snippet: Lorem Ipsum Dolor Sit Amet.
caption: My figure caption
img-cap: my image
-img-src: /res/img.png
+img-src: /res/imgs/placeholder.jpg
img-alt: my image alt
---
<p>
diff --git a/src/html/society/article.html b/src/html/society/article.html
@@ -8,7 +8,7 @@ snippet: Lorem Ipsum Dolor Sit Amet.
caption: My figure caption
img-cap: my image
-img-src: /res/img.png
+img-src: /res/imgs/placeholder.jpg
img-alt: my image alt
---
<p>
diff --git a/src/html/sport/article.html b/src/html/sport/article.html
@@ -4,11 +4,11 @@ tags:
created-iso: 2026-04-12T21:18:37
edited-iso: 2026-04-12T21:18:37
-snippet: Lorem Ipsum Dolor Sit Amet.
+snippet: Lorem Ipsum Dolor Sit Amet. <strong>foo</strong> <em>bar</em> baz.
caption: My figure caption
img-cap: my image
-img-src: /res/img.png
+img-src: /res/imgs/placeholder.jpg
img-alt: my image alt
---
<p>
diff --git a/src/res/imgs/placeholder.jpg b/src/res/imgs/placeholder.jpg
Binary files differ.
diff --git a/templates/article.html b/templates/article.html
@@ -1,27 +1,29 @@
<article class="article">
<figure class="article-img">
- <img title="%img-cap%" src="%img-src%" alt="%img-alt%" />
+ <img title="%img-cap%" src="%img-src%" alt="%img-alt%" height="630" width="1200" />
<figcaption>%caption%</figcaption>
</figure>
- <dl class="article-info">
- <dt class="article-info-meta">Author:</dt>
- <dd title="Author">
- <span>%author%</span>
- </dd>
- <dt class="article-info-meta">Posted:</dt>
- <dd title="Posted">
- <time id="post-date" datetime="%created-iso%">%created-str%</time>
- </dd>
- <dt class="article-info-meta">Edited:</dt>
- <dd title="Edited">
- <time id="edit-date" datetime="%edited-iso%">%edited-str%</time>
- </dd>
- </dl>
- <div class="article-text">
- <h2><a href="%url%">%title%</a></h2>
- <p>%snippet%</p>
- <div>
+ <div class="article-content">
+ <h2 class="article-title"><a href="%url%">%title%</a></h2>
+ <dl class="article-info">
+ <dt class="article-info-meta">Author:</dt>
+ <dd class="article-info-value" title="Author">
+ <span>%author%</span>
+ </dd>
+ <dt class="article-info-meta">Posted:</dt>
+ <dd class="article-info-value" title="Posted">
+ <time id="post-date" datetime="%created-iso%">%created-str%</time>
+ </dd>
+ <dt class="article-info-meta">Edited:</dt>
+ <dd class="article-info-value" title="Edited">
+ <time id="edit-date" datetime="%edited-iso%">%edited-str%</time>
+ </dd>
+ </dl>
+ <div class="article-text">
+ <p>%snippet%</p>
+ <div>
%content%
+ </div>
</div>
</div>
</article>
diff --git a/templates/global.html b/templates/global.html
@@ -33,17 +33,20 @@
</header>
<main class="grid center">
<div id="banner" class="grid">
- <div id="breaking-news">
- One
+ <div id="breaking-news-1" class="breaking-news">
+ <img src="/res/imgs/placeholder.jpg" alt="breaking news" />
+ <span class="breaking-news-grad-1"></span>
+ <h2 class="breaking-news-title">Bottom Text</h2>
</div>
- <div id="breaking-news-1">
- Two
+ <div id="breaking-news-2" class="breaking-news">
+ <img src="/res/imgs/placeholder.jpg" alt="breaking news" />
+ <span class="breaking-news-grad-2"></span>
+ <h2 class="breaking-news-title">Bottom Text</h2>
</div>
- <div id="breaking-news-2">
- Three
- </div>
- <div id="breaking-news-3">
- Four
+ <div id="breaking-news-3" class="breaking-news">
+ <img src="/res/imgs/placeholder.jpg" alt="breaking news" />
+ <span class="breaking-news-grad-3"></span>
+ <h2 class="breaking-news-title">Bottom Text</h2>
</div>
</div>
<div id="content">
@@ -52,6 +55,7 @@
<div id="sidebar">
<section id="recent">
<h3>Recent</h3>
+ <hr />
<ol>
<li><a href="recent1.html">Recent 1</a></li>
<li><a href="recent2.html">Recent 2</a></li>
@@ -60,6 +64,7 @@
</section>
<section id="polls">
<h3>Polls</h3>
+ <hr />
<ol>
<li><a href="poll1.html">Poll 1</a></li>
<li><a href="poll2.html">Poll 2</a></li>
diff --git a/templates/listed-article.html b/templates/listed-article.html
@@ -1,24 +1,26 @@
<article class="article">
<figure class="article-img">
- <img title="%img-cap%" src="%img-src%" alt="%img-alt%" />
+ <img title="%img-cap%" src="%img-src%" alt="%img-alt%" height="630" width="1200" />
<figcaption>%caption%</figcaption>
</figure>
- <dl class="article-info">
- <dt class="article-info-meta">Author:</dt>
- <dd title="Author">
- <span>%author%</span>
- </dd>
- <dt class="article-info-meta">Posted:</dt>
- <dd title="Posted">
- <time id="post-date" datetime="%created-iso%">%created-str%</time>
- </dd>
- <dt class="article-info-meta">Edited:</dt>
- <dd title="Edited">
- <time id="edit-date" datetime="%edited-iso%">%edited-str%</time>
- </dd>
- </dl>
- <div class="article-text">
- <h2><a href="%url%">%title%</a></h2>
- <p>%snippet%</p>
+ <div class="article-content">
+ <h2 class="article-title"><a href="%url%">%title%</a></h2>
+ <dl class="article-info">
+ <dt class="article-info-meta">Author:</dt>
+ <dd class="article-info-value" title="Author">
+ <span>%author%</span>
+ </dd>
+ <dt class="article-info-meta">Posted:</dt>
+ <dd class="article-info-value" title="Posted">
+ <time id="post-date" datetime="%created-iso%">%created-str%</time>
+ </dd>
+ <dt class="article-info-meta">Edited:</dt>
+ <dd class="article-info-value" title="Edited">
+ <time id="edit-date" datetime="%edited-iso%">%edited-str%</time>
+ </dd>
+ </dl>
+ <div class="article-text">
+ <p>%snippet%</p>
+ </div>
</div>
</article>
diff --git a/tools/index.py b/tools/index.py
@@ -93,7 +93,6 @@ def index(srcs, article_tpl, index_tpl, urlroot):
raise Exception(f'Article: {srcpath} lacks element <time id="post-date" ... />')
isodate = TagParser.get_attr('datetime', parser.found_attrs, None)
- print(isodate)
return template.fromisodate(isodate)
