commit 506327e34f6168796ca67aa701746e41e305c323
Author: MikoĊaj Lenczewski <mblenczewski@gmail.com>
Date: Sun, 12 Apr 2026 10:12:19 +0100
Initial commit
Diffstat:
9 files changed, 294 insertions(+), 0 deletions(-)
diff --git a/.editorconfig b/.editorconfig
@@ -0,0 +1,22 @@
+root = true
+
+[*]
+end_of_line = lf
+insert_final_newline = true
+charset = utf-8
+
+[*.{c,h}]
+indent_style = tab
+indent_size = 8
+
+[*.{sh}]
+indent_style = tab
+indent_size = 8
+
+[*.{html,css,js}]
+indent_style = space
+indent_size = 2
+
+[*.{md,txt}]
+indent_style = space
+indent_size = 2
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1 @@
+**/.*.swp
diff --git a/index.html b/index.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <title>Lektura</title>
+
+ <meta charset="utf8" />
+ <meta name="viewport" content="initial-scale=1.0, width=device-width" />
+
+ <link rel="stylesheet" href="/style.css" />
+ <link rel="stylesheet" href="/navbar.css" />
+ <link rel="stylesheet" href="/layout.css" />
+ </head>
+ <body>
+ <header>
+ <div class="center pad-1em">
+ <img style="max-width: 2em" src="/logo.svg" />
+ </div>
+ <hr />
+ <nav id="global-menu" class="center pad-1em navbar">
+ <input id="global-menu-toggle" type="checkbox" class="hidden navbar-toggle" />
+ <ul class="navbar-menu">
+ <li>
+ <label class="navbar-toggle-label" for="global-menu-toggle">
+ <img src="menu.svg" />
+ </label>
+ </li>
+ <li><a href="index.html">Index</a></li>
+ <li><a href="science.html">Science</a></li>
+ <li><a href="sport.html">Sport</a></li>
+ <li><a href="society.html">Society</a></li>
+ </ul>
+ </nav>
+ <hr />
+ </header>
+ <main class="grid center">
+ <div id="banner" class="grid">
+ <div id="breaking-news">
+ One
+ </div>
+ <div id="breaking-news-1">
+ Two
+ </div>
+ <div id="breaking-news-2">
+ Three
+ </div>
+ <div id="breaking-news-3">
+ Four
+ </div>
+ </div>
+ <div id="content">
+ Lorem Ipsum Dolor Sit Amet.
+ </div>
+ <div id="sidebar">
+ <section id="recent">
+ <h3>Recent</h3>
+ <ol>
+ <li><a href="recent1.html">Recent 1</a></li>
+ <li><a href="recent2.html">Recent 2</a></li>
+ <li><a href="recent3.html">Recent 3</a></li>
+ </ol>
+ </section>
+ <section id="polls">
+ <h3>Polls</h3>
+ <ol>
+ <li><a href="poll1.html">Poll 1</a></li>
+ <li><a href="poll2.html">Poll 2</a></li>
+ <li><a href="poll3.html">Poll 3</a></li>
+ </ol>
+ </section>
+ </div>
+ </main>
+ <footer>
+ </footer>
+ </body>
+ <script src="/script.js"></script>
+</html>
diff --git a/layout.css b/layout.css
@@ -0,0 +1,88 @@
+main.grid {
+ grid-template-rows: minmax(8em, 16em) minmax(8em, 16em) auto; /* TODO */
+ grid-template-columns: 3fr 1fr;
+}
+
+#banner {
+ height: 8em;
+}
+
+#banner.grid {
+ grid-template-rows: 1fr 1fr;
+ grid-template-columns: 3fr 1fr 1fr;
+}
+
+#banner > #breaking-news {
+ grid-row: 1 / span 2;
+ grid-column: 1;
+}
+
+#banner > #breaking-news-1 {
+ grid-row: 1;
+ grid-column: 2 / span 2;
+}
+
+#banner > #breaking-news-2 {
+ grid-row: 2;
+ grid-column: 2;
+}
+
+#banner > #breaking-news-3 {
+ grid-row: 2;
+ grid-column: 3;
+}
+
+#content {
+ height: 80em;
+ background-style: solid;
+ background-color #f00;
+
+ /* TODO */
+}
+
+#sidebar {
+ /* TODO */
+}
+
+/* css selector explanation
+ * --
+ * main.grid > #content { ... }
+ * --
+ * - given an element of type `main` with the class `grid`
+ * - for its direct child with id `content`
+ */
+
+main.grid > #banner {
+ grid-row: 1;
+ grid-column: 1 / -1;
+}
+
+/* on mobile ... */
+@media screen and (max-width:576px) {
+ /* the sidebar moves to immediately under the navbar */
+ main.grid > #sidebar {
+ grid-row: 2 / span 1;
+ grid-column: 1 / span 2;
+ }
+
+ /* the content comes after the "sidebar" */
+ main.grid > #content {
+ grid-row: 3;
+ grid-column: 1 / span 2;
+ }
+}
+
+/* on desktop ... */
+@media screen and (min-width:577px) {
+ /* the sidebar sits on the right-hand column (25% width) */
+ main.grid > #sidebar {
+ grid-row: 2 / span 1;
+ grid-column: 2 / span 1;
+ }
+
+ /* the contents sit on the left-hand column (75% width) */
+ main.grid > #content {
+ grid-row: 2 / span 2;
+ grid-column: 1 / span 1;
+ }
+}
diff --git a/logo.svg b/logo.svg
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+ <path d="M0 0 L512 0 L512 512 L0 512 L0 0" fill="rgb(0,0,0)" />
+ <path d="M240 496 L80 336 L192 224 L192 16 L240 16 L240 240 L144 336 L240 432 L240 496" fill="rgb(255,255,255)" />
+ <path d="M256 400 L192 336 L256 272 L320 336 L256 400" fill="rgb(255,165,0)" />
+ <path d="M272 496 L432 336 L320 224 L320 16 L272 16 L272 240 L368 336 L272 432 L272 496" fill="rgb(255,255,255)" />
+</svg>
+
diff --git a/menu.svg b/menu.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="1em" height="1em" viewBox="0 0 56 56" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="fill:rgb(80, 80, 80);">
+ <path d="M8 8 L48 8 L48 16 L8 16 L8 8 M8 24 L48 24 L48 32 L8 32 L8 24 M8 40 L48 40 L48 48 L8 48 L8 40" />
+</svg>
diff --git a/navbar.css b/navbar.css
@@ -0,0 +1,58 @@
+.navbar {
+ padding-left: 1em;
+ padding-right: 1em;
+}
+
+.navbar-menu {
+ padding: 0;
+ margin: 0;
+ list-style: none;
+}
+
+.navbar-menu li {
+ display: inline-block;
+}
+
+.navbar-toggle-label {
+ cursor: pointer;
+}
+
+/* css selector explanation
+ * --
+ * .navbar-toggle ~ .navbar-menu li { ... }
+ * --
+ * - given an element with the `navbar-toggle` class,
+ * - for all subsequent siblings with the `navbar-menu` class,
+ * - for all their children of type <li>
+ */
+
+/* on mobile ... */
+@media screen and (max-width:576px) {
+ /* always display the hamburger menu */
+ .navbar-toggle ~ .navbar-menu li:first-child {
+ display: inline-block;
+ }
+
+ /* never display the remaining list items ... */
+ .navbar-toggle ~ .navbar-menu li {
+ display: none;
+ }
+
+ /* ... unless the hamburger menu button has been clicked */
+ .navbar-toggle:checked ~ .navbar-menu li {
+ display: block;
+ }
+}
+
+/* on desktop ... */
+@media screen and (min-width:577px) {
+ /* never display the hamburger menu */
+ .navbar-menu li:first-child {
+ display: none;
+ }
+
+ /* always display the remaining list items */
+ .navbar-menu li {
+ display: inline-block;
+ }
+}
diff --git a/script.js b/script.js
diff --git a/style.css b/style.css
@@ -0,0 +1,37 @@
+body, hr, html {
+ height: 100%;
+ margin: 0!important;
+ padding: 0!important;
+}
+
+hr {
+ display: block;
+ height: 1px;
+ border: 0;
+ border-top: 1px solid;
+ border-color: inherit;
+}
+
+.center {
+ max-width: 80em;
+ margin-left: auto;
+ margin-right: auto;
+ /* padding: 1em; */
+}
+
+.pad-1em {
+ padding: 1em;
+}
+
+.hidden {
+ display: none;
+}
+
+.flex {
+ display: flex;
+ justify-content: space-between;
+}
+
+.grid {
+ display: grid;
+}
