initial themeing done
This commit is contained in:
commit
c514cb2d4f
SSH Key Fingerprint:
SHA256:cyNGncrLxKXAgYC96dYNROnQKikLInzrpiMraZdqyhY
47
images.html
Normal file
47
images.html
Normal file
@ -0,0 +1,47 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>just images</title>
|
||||||
|
<link rel="stylesheet" href="static/styles/style.css">
|
||||||
|
<link rel="shortcut icon" href="static/images/favicon.ico" type="image/x-icon">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<header class="header">
|
||||||
|
<img loading="lazy" src="static/images/handcup.jpeg" alt="" class="header_img loading="lazy"">
|
||||||
|
<h1 class="header_h1">just images</h1>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<nav>
|
||||||
|
<ul class="nav_container">
|
||||||
|
<li class="nav_item"><a href="index.html" rel="noopener noreferrer">home</a></li>
|
||||||
|
<li><a href="prose.html">prose</a></li>
|
||||||
|
<li><a href="lists.html">lists</a></li>
|
||||||
|
<li><a href="tables.html">tables</a></li>
|
||||||
|
<li><a href="images.html">images</a></li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<main class="main">
|
||||||
|
<article class="images">
|
||||||
|
<h2>images</h2>
|
||||||
|
<section class="grid">
|
||||||
|
<img loading="lazy" src="static/images/DSC_0908.jpeg" alt="">
|
||||||
|
<img loading="lazy" src="static/images/SylaHusky-1.jpeg" alt="">
|
||||||
|
<img loading="lazy" src="static/images/candle.jpg" alt="">
|
||||||
|
<img loading="lazy" src="static/images/sm-fountain-pen.jpg" alt="">
|
||||||
|
</section>
|
||||||
|
</article>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<footer class="footer">
|
||||||
|
©<span id="jsyear"></span> Camille (<a href="https://fyrfli.dev/fyrfli" target="_blank">@fyrfli</a>) Frantz
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
const todayDate = new Date();
|
||||||
|
jsyear.innerText = todayDate.getFullYear();
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
140
index.html
Normal file
140
index.html
Normal file
@ -0,0 +1,140 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>test page</title>
|
||||||
|
<link rel="stylesheet" href="static/styles/style.css">
|
||||||
|
<link rel="shortcut icon" href="https://cdn.fyrfli.link/i/favicon.ico" type="image/x-icon">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<header class="header">
|
||||||
|
<img loading="lazy" src="https://cdn.fyrfli.link/i/handcup.jpeg" alt="" class="header_img loading="lazy"">
|
||||||
|
<h1 class="header_h1">all sections</h1>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<nav>
|
||||||
|
<ul class="nav_container">
|
||||||
|
<li class="nav_item"><a href="index.html" rel="noopener noreferrer">home</a></li>
|
||||||
|
<li><a href="prose.html">prose</a></li>
|
||||||
|
<li><a href="lists.html">lists</a></li>
|
||||||
|
<li><a href="tables.html">tables</a></li>
|
||||||
|
<li><a href="images.html">images</a></li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<main class="main">
|
||||||
|
<article class="prose_section">
|
||||||
|
<section class="prose_paragraphs">
|
||||||
|
<h2 class="prose_h2">prose</h2>
|
||||||
|
<p class="prose_paragraph">
|
||||||
|
Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis temporibus nihil voluptates sit commodi corporis quidem ut rem aperiam, eum, ipsam corrupti fuga laborum nostrum.
|
||||||
|
</p>
|
||||||
|
<p class="prose_paragraph">
|
||||||
|
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quis a libero dolor ullam, consequuntur fugiat voluptate quia placeat nihil corrupti aut quaerat, veritatis esse aspernatur sint. Quos consequatur, mollitia placeat aliquid, perferendis blanditiis est voluptatibus exercitationem hic delectus illum dicta assumenda, corrupti quisquam? A placeat, saepe hic assumenda consequatur minus animi est labore veritatis odio modi sed illo nulla ipsa molestiae fugiat sunt debitis fugit voluptatum. Eveniet et quis error tenetur necessitatibus sit id molestias saepe velit ducimus est ratione quia neque facere in enim atque harum, cupiditate eum, dolor modi. Quas, quam laudantium eos dolor saepe possimus rerum veniam necessitatibus labore ex, quia molestias velit minus animi ducimus fugit? Delectus corrupti repellat voluptate adipisci error maiores voluptatum exercitationem nemo.
|
||||||
|
</p>
|
||||||
|
<blockquote>
|
||||||
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam illo dolorem numquam porro impedit expedita recusandae labore, quod ab cumque excepturi consectetur! Dignissimos eius excepturi dolor, doloribus neque rerum explicabo repellat possimus facere enim obcaecati mollitia voluptatum? Modi laborum quibusdam dolorum cupiditate maxime voluptatibus totam facere quisquam ut voluptate. Tempore?
|
||||||
|
</blockquote>
|
||||||
|
</section>
|
||||||
|
<a href="#">back to top</a>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article class="lists">
|
||||||
|
<h2 class="lists_h2">lists</h2>
|
||||||
|
<p class="lists_paragraph">
|
||||||
|
creating an ordered and unordered list for theming tests
|
||||||
|
</p>
|
||||||
|
<h3 class="lists_h3">ordered list</h3>
|
||||||
|
<section class="ol">
|
||||||
|
<ol class="ol_container">
|
||||||
|
<li class="ol_item">one</li>
|
||||||
|
<li class="ol_item">two</li>
|
||||||
|
<li class="ol_item">three</li>
|
||||||
|
<li class="ol_item">four</li>
|
||||||
|
<li class="ol_item">five</li>
|
||||||
|
<li class="ol_item">six</li>
|
||||||
|
<li class="ol_item">seven</li>
|
||||||
|
<li class="ol_item">eight</li>
|
||||||
|
<li class="ol_item">nine</li>
|
||||||
|
<li class="ol_item">ten</li>
|
||||||
|
</ol>
|
||||||
|
</section>
|
||||||
|
<h3 class="lists_h3">unordered list</h3>
|
||||||
|
<section class="ul">
|
||||||
|
<ul class="ul_container">
|
||||||
|
<li class="ul_item">one</li>
|
||||||
|
<li class="ul_item">two</li>
|
||||||
|
<li class="ul_item">three</li>
|
||||||
|
<li class="ul_item">four</li>
|
||||||
|
<li class="ul_item">five</li>
|
||||||
|
<li class="ul_item">six</li>
|
||||||
|
<li class="ul_item">seven</li>
|
||||||
|
<li class="ul_item">eight</li>
|
||||||
|
<li class="ul_item">nine</li>
|
||||||
|
<li class="ul_item">ten</li>
|
||||||
|
</ul>
|
||||||
|
</section>
|
||||||
|
<a href="#">back to top</a>
|
||||||
|
</article>
|
||||||
|
<article class="tables">
|
||||||
|
<h2 class="tables_h2">tables</h2>
|
||||||
|
<table class="table">
|
||||||
|
<thead class="table_head">
|
||||||
|
<tr class="table_head_line">
|
||||||
|
<td class="table_head_item">one</td>
|
||||||
|
<td class="table_head_item">two</td>
|
||||||
|
<td class="table_head_item">three</td>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody class="table_body">
|
||||||
|
<tr class="table_body_line">
|
||||||
|
<td class="table_line_item">column one</td>
|
||||||
|
<td class="table_line_item">this is column two and it's slightly larger than column one</td>
|
||||||
|
<td class="table_line_item">col. 3</td>
|
||||||
|
</tr>
|
||||||
|
<tr class="table_body_line">
|
||||||
|
<td class="table_line_item">column one</td>
|
||||||
|
<td class="table_line_item">this is column two and it's slightly larger than column one</td>
|
||||||
|
<td class="table_line_item">col. 3</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>row three, column one</td>
|
||||||
|
<td>row three, column two</td>
|
||||||
|
<td>row three, column three</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td colspan="2">row four, columns one and two</td>
|
||||||
|
<td>row four, column tree</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
<tfoot class="table_footer">
|
||||||
|
<tr class="table_footer_line">
|
||||||
|
<td colspan="3" class="table_line_spanall">let's make this span all columns</td>
|
||||||
|
</tr>
|
||||||
|
</tfoot>
|
||||||
|
</table>
|
||||||
|
<a href="#">back to top</a>
|
||||||
|
</article>
|
||||||
|
<article class="images">
|
||||||
|
<h2>images</h2>
|
||||||
|
<section class="grid">
|
||||||
|
<img loading="lazy" src="https://cdn.fyrfli.link/i/DSC_0908.jpeg" alt="">
|
||||||
|
<img loading="lazy" src="https://cdn.fyrfli.link/i/SylaHusky-1.jpeg" alt="">
|
||||||
|
<img loading="lazy" src="https://cdn.fyrfli.link/i/candle.jpg" alt="">
|
||||||
|
<img loading="lazy" src="https://cdn.fyrfli.link/i/sm-fountain-pen.jpg" alt="">
|
||||||
|
</section>
|
||||||
|
<a href="#">back to top</a>
|
||||||
|
</article>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<footer class="footer">
|
||||||
|
©<span id="jsyear"> </span> Camille (<a href="https://fyrfli.dev/fyrfli" target="_blank">@fyrfli</a>) Frantz
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
const todayDate = new Date();
|
||||||
|
jsyear.innerText = todayDate.getFullYear();
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
74
lists.html
Normal file
74
lists.html
Normal file
@ -0,0 +1,74 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>just lists</title>
|
||||||
|
<link rel="stylesheet" href="static/styles/style.css">
|
||||||
|
<link rel="shortcut icon" href="https://cdn.fyrfli.link/i/favicon.ico" type="image/x-icon">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<header class="header">
|
||||||
|
<img loading="lazy" src="https://cdn.fyrfli.link/i/handcup.jpeg" alt="" class="header_img loading="lazy"">
|
||||||
|
<h1 class="header_h1">just lists</h1>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<nav>
|
||||||
|
<ul class="nav_container">
|
||||||
|
<li class="nav_item"><a href="index.html" rel="noopener noreferrer">home</a></li>
|
||||||
|
<li><a href="prose.html">prose</a></li>
|
||||||
|
<li><a href="lists.html">lists</a></li>
|
||||||
|
<li><a href="tables.html">tables</a></li>
|
||||||
|
<li><a href="images.html">images</a></li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<main class="main">
|
||||||
|
<article class="lists">
|
||||||
|
<h2 class="lists_h2">lists</h2>
|
||||||
|
<p class="lists_paragraph">
|
||||||
|
creating an ordered and unordered list for theming tests
|
||||||
|
</p>
|
||||||
|
<h3 class="lists_h3">ordered list</h3>
|
||||||
|
<section class="ol">
|
||||||
|
<ol class="ol_container">
|
||||||
|
<li class="ol_item">one</li>
|
||||||
|
<li class="ol_item">two</li>
|
||||||
|
<li class="ol_item">three</li>
|
||||||
|
<li class="ol_item">four</li>
|
||||||
|
<li class="ol_item">five</li>
|
||||||
|
<li class="ol_item">six</li>
|
||||||
|
<li class="ol_item">seven</li>
|
||||||
|
<li class="ol_item">eight</li>
|
||||||
|
<li class="ol_item">nine</li>
|
||||||
|
<li class="ol_item">ten</li>
|
||||||
|
</ol>
|
||||||
|
</section>
|
||||||
|
<h3 class="lists_h3">unordered list</h3>
|
||||||
|
<section class="ul">
|
||||||
|
<ul class="ul_container">
|
||||||
|
<li class="ul_item">one</li>
|
||||||
|
<li class="ul_item">two</li>
|
||||||
|
<li class="ul_item">three</li>
|
||||||
|
<li class="ul_item">four</li>
|
||||||
|
<li class="ul_item">five</li>
|
||||||
|
<li class="ul_item">six</li>
|
||||||
|
<li class="ul_item">seven</li>
|
||||||
|
<li class="ul_item">eight</li>
|
||||||
|
<li class="ul_item">nine</li>
|
||||||
|
<li class="ul_item">ten</li>
|
||||||
|
</ul>
|
||||||
|
</section>
|
||||||
|
</article>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<footer class="footer">
|
||||||
|
©<span id="jsyear"></span> Camille (<a href="https://fyrfli.dev/fyrfli" target="_blank">@fyrfli</a>) Frantz
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
const todayDate = new Date();
|
||||||
|
jsyear.innerText = todayDate.getFullYear();
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
59
prose.html
Normal file
59
prose.html
Normal file
@ -0,0 +1,59 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>just prose</title>
|
||||||
|
<link rel="shortcut icon" href="https://cdn.fyrfli.link/i/handcup.jpeg" type="image/x-icon">
|
||||||
|
<link rel="stylesheet" href="static/styles/style.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<header class="header">
|
||||||
|
<img loading="lazy" src="https://fyrfli.net/avatar" alt="black woman in a hat with head tipped down, the brin of the hat hiding her eyes" />
|
||||||
|
<h1 class="header-h1">just prose</h1>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<nav>
|
||||||
|
<ul class="nav_container">
|
||||||
|
<li class="nav_item"><a href="index.html" rel="noopener noreferrer">home</a></li>
|
||||||
|
<li><a href="prose.html">prose</a></li>
|
||||||
|
<li><a href="lists.html">lists</a></li>
|
||||||
|
<li><a href="tables.html">tables</a></li>
|
||||||
|
<li><a href="images.html">images</a></li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
|
||||||
|
<main class="main">
|
||||||
|
<article class="prose_section">
|
||||||
|
<section class="prose_paragraphs">
|
||||||
|
<h2 class="prose_h2">prose</h2>
|
||||||
|
<p class="prose_paragraph">
|
||||||
|
Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis temporibus nihil voluptates sit commodi corporis quidem ut rem aperiam, eum, ipsam corrupti fuga laborum nostrum.
|
||||||
|
</p>
|
||||||
|
<p class="prose_paragraph">
|
||||||
|
Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita fugiat debitis dicta. Saepe culpa cumque expedita repellat eveniet, eligendi recusandae consequatur illum rem corporis dignissimos, aliquid iste corrupti, odio debitis itaque laboriosam quia. Sunt at doloribus, impedit dolorem quibusdam autem aspernatur laboriosam quidem tempore obcaecati iste laborum. Esse soluta voluptatibus nam laboriosam aperiam, odit dignissimos earum beatae sunt dolorum. Quidem ex ipsam neque omnis consequatur recusandae fuga eos temporibus perspiciatis corrupti iste ea pariatur, excepturi, nam esse nihil officia. Id pariatur eum eos eveniet at fuga minima cum praesentium provident quam. Voluptas atque rem, facere facilis odio sed minima iste est vel sapiente debitis ducimus quidem illo provident distinctio. Quibusdam ea alias reiciendis numquam! Debitis deleniti quam repellat magni voluptates!
|
||||||
|
</p>
|
||||||
|
<blockquote>
|
||||||
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam illo dolorem numquam porro impedit expedita recusandae labore, quod ab cumque excepturi consectetur! Dignissimos eius excepturi dolor, doloribus neque rerum explicabo repellat possimus facere enim obcaecati mollitia voluptatum? Modi laborum quibusdam dolorum cupiditate maxime voluptatibus totam facere quisquam ut voluptate. Tempore?
|
||||||
|
</blockquote>
|
||||||
|
<p>
|
||||||
|
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Consectetur velit quos error! Dolorem quasi unde obcaecati dignissimos repellendus error aliquam maxime repudiandae. Nihil quidem laboriosam nam consequuntur assumenda veniam culpa sint, porro aliquid suscipit possimus dignissimos vel deleniti amet ratione, cum debitis voluptates asperiores? Quia reiciendis dignissimos quas quos? Rerum magnam maxime ex eaque dolores!
|
||||||
|
</p>
|
||||||
|
</section>
|
||||||
|
</article>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
|
||||||
|
<footer class="footer">
|
||||||
|
©<span id="jsyear"></span> Camille (<a href="https://fyrfli.dev/fyrfli" target="_blank">@fyrfli</a>) Frantz
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
const todayDate = new Date();
|
||||||
|
jsyear.innerText = todayDate.getFullYear();
|
||||||
|
</script>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
||||||
BIN
static/images/DSC_0908.jpeg
Normal file
BIN
static/images/DSC_0908.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.4 MiB |
BIN
static/images/SylaHusky-1.jpeg
Normal file
BIN
static/images/SylaHusky-1.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.0 MiB |
BIN
static/images/candle.jpg
Normal file
BIN
static/images/candle.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 32 KiB |
BIN
static/images/favicon.ico
Normal file
BIN
static/images/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.5 KiB |
BIN
static/images/handcup.jpeg
Normal file
BIN
static/images/handcup.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 118 KiB |
BIN
static/images/sm-fountain-pen.jpg
Normal file
BIN
static/images/sm-fountain-pen.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 168 KiB |
189
static/styles/style.css
Normal file
189
static/styles/style.css
Normal file
@ -0,0 +1,189 @@
|
|||||||
|
@charset "UTF-8";
|
||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
border: 0;
|
||||||
|
list-style: none;
|
||||||
|
text-decoration: none;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
color-scheme: dark light;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: #1f8200;
|
||||||
|
}
|
||||||
|
a:visited {
|
||||||
|
color: #afafaf;
|
||||||
|
}
|
||||||
|
a:hover {
|
||||||
|
text-decoration: overline underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: monospace;
|
||||||
|
font-size: 16px;
|
||||||
|
padding: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
header {
|
||||||
|
display: flex;
|
||||||
|
flex-flow: row nowrap;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: baseline;
|
||||||
|
padding: 12px;
|
||||||
|
}
|
||||||
|
header img {
|
||||||
|
width: 64px;
|
||||||
|
height: auto;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav {
|
||||||
|
margin: 12px auto;
|
||||||
|
font-size: 24px;
|
||||||
|
border: 1px solid #d96500;
|
||||||
|
padding: 6px;
|
||||||
|
border-radius: 12px;
|
||||||
|
}
|
||||||
|
nav ul {
|
||||||
|
display: flex;
|
||||||
|
flex-flow: row wrap;
|
||||||
|
justify-content: space-evenly;
|
||||||
|
align-items: baseline;
|
||||||
|
}
|
||||||
|
nav li {
|
||||||
|
min-width: 100px;
|
||||||
|
}
|
||||||
|
nav li::before {
|
||||||
|
content: "🍁 ";
|
||||||
|
}
|
||||||
|
|
||||||
|
main img {
|
||||||
|
display: block;
|
||||||
|
max-width: 120px;
|
||||||
|
}
|
||||||
|
|
||||||
|
article {
|
||||||
|
margin: 12px auto;
|
||||||
|
border: 1px solid #d96500;
|
||||||
|
padding: 4px;
|
||||||
|
border-radius: 8px;
|
||||||
|
}
|
||||||
|
article h2 {
|
||||||
|
padding: 8px 0;
|
||||||
|
font-size: 24px;
|
||||||
|
text-align: center;
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
article h3 {
|
||||||
|
margin: 12px 24px;
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
article p {
|
||||||
|
padding: 12px;
|
||||||
|
}
|
||||||
|
article blockquote {
|
||||||
|
width: 80%;
|
||||||
|
margin: auto;
|
||||||
|
border-left: 4mm ridge #d91202;
|
||||||
|
border-radius: 2px;
|
||||||
|
padding-left: 9px;
|
||||||
|
padding-top: 2px;
|
||||||
|
padding-bottom: 2px;
|
||||||
|
}
|
||||||
|
article > a {
|
||||||
|
display: block;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
section img {
|
||||||
|
max-width: 340px;
|
||||||
|
border-radius: 8px;
|
||||||
|
}
|
||||||
|
section ol {
|
||||||
|
margin-left: 54px;
|
||||||
|
padding-left: 24px;
|
||||||
|
margin-bottom: 12px;
|
||||||
|
}
|
||||||
|
section ol li {
|
||||||
|
list-style: lower-roman;
|
||||||
|
}
|
||||||
|
section ul {
|
||||||
|
margin-left: 54px;
|
||||||
|
padding-left: 24px;
|
||||||
|
margin-bottom: 12px;
|
||||||
|
}
|
||||||
|
section ul li {
|
||||||
|
list-style: square;
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid {
|
||||||
|
margin: 12px auto;
|
||||||
|
display: flex;
|
||||||
|
flex-flow: row wrap;
|
||||||
|
justify-content: space-evenly;
|
||||||
|
align-items: normal;
|
||||||
|
gap: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
table {
|
||||||
|
margin: 20px auto;
|
||||||
|
border: 1px solid #d96500;
|
||||||
|
border-radius: 8px;
|
||||||
|
padding: 4px;
|
||||||
|
color: #373735;
|
||||||
|
}
|
||||||
|
table tr,
|
||||||
|
table td {
|
||||||
|
padding: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
thead td {
|
||||||
|
background-color: #b4beba;
|
||||||
|
padding: 2px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
tbody tr:nth-child(odd) {
|
||||||
|
background-color: #34b543;
|
||||||
|
}
|
||||||
|
tbody tr:nth-child(even) {
|
||||||
|
background-color: #d58379;
|
||||||
|
}
|
||||||
|
|
||||||
|
tfoot {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
tfoot tr {
|
||||||
|
background-color: #b4beba;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer {
|
||||||
|
margin: 10px auto;
|
||||||
|
font-size: 12px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (min-width: 980px) {
|
||||||
|
body {
|
||||||
|
width: 80vw;
|
||||||
|
margin: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (prefers-color-scheme: dark) {
|
||||||
|
html {
|
||||||
|
background-color: #373735;
|
||||||
|
color: #fffef2;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (prefers-color-scheme: light) {
|
||||||
|
html {
|
||||||
|
background-color: #fffef2;
|
||||||
|
color: #373735;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/*# sourceMappingURL=style.css.map */
|
||||||
211
static/styles/style.scss
Normal file
211
static/styles/style.scss
Normal file
@ -0,0 +1,211 @@
|
|||||||
|
$border_colour: #d96500;
|
||||||
|
$white: #fffef2;
|
||||||
|
$black: #373735;
|
||||||
|
$blockquote_border: #d91202;
|
||||||
|
$link_color: #1f8200;
|
||||||
|
$link_visited: #afafaf;
|
||||||
|
$table_header: #b4beba;
|
||||||
|
$table_odd: #34b543;
|
||||||
|
$table_even: #d58379;
|
||||||
|
$dark_background: $black;
|
||||||
|
$light_background: $white;
|
||||||
|
|
||||||
|
|
||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
border: 0;
|
||||||
|
list-style: none;
|
||||||
|
text-decoration: none;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
color-scheme: dark light;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: $link_color;
|
||||||
|
&:visited {
|
||||||
|
color: $link_visited;
|
||||||
|
}
|
||||||
|
&:hover {
|
||||||
|
text-decoration: overline underline;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: monospace;
|
||||||
|
font-size: 16px;
|
||||||
|
padding: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
header {
|
||||||
|
display: flex;
|
||||||
|
flex-flow: row nowrap;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: baseline;
|
||||||
|
padding: 12px;
|
||||||
|
& img {
|
||||||
|
width: 64px;
|
||||||
|
height: auto;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
nav {
|
||||||
|
margin: 12px auto;
|
||||||
|
font-size: 24px;
|
||||||
|
border: 1px solid $border_colour;
|
||||||
|
padding: 6px;
|
||||||
|
border-radius: 12px;
|
||||||
|
& ul {
|
||||||
|
display: flex;
|
||||||
|
flex-flow: row wrap;
|
||||||
|
justify-content: space-evenly;
|
||||||
|
align-items: baseline;
|
||||||
|
}
|
||||||
|
& li {
|
||||||
|
min-width: 100px;
|
||||||
|
&::before {
|
||||||
|
content: "🍁 ";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
main {
|
||||||
|
& img {
|
||||||
|
display: block;
|
||||||
|
max-width: 120px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
article {
|
||||||
|
margin: 12px auto;
|
||||||
|
border: 1px solid $border_colour;
|
||||||
|
padding: 4px;
|
||||||
|
border-radius: 8px;
|
||||||
|
& h2 {
|
||||||
|
padding: 8px 0;
|
||||||
|
font-size: 24px;
|
||||||
|
text-align: center;
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
& h3 {
|
||||||
|
margin: 12px 24px;
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
& p {
|
||||||
|
padding: 12px;
|
||||||
|
}
|
||||||
|
& blockquote {
|
||||||
|
width: 80%;
|
||||||
|
margin: auto;
|
||||||
|
border-left: 4mm ridge $blockquote_border;
|
||||||
|
border-radius: 2px;
|
||||||
|
padding-left: 9px;
|
||||||
|
padding-top: 2px;
|
||||||
|
padding-bottom: 2px;
|
||||||
|
}
|
||||||
|
& > a {
|
||||||
|
display: block;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
section {
|
||||||
|
& img {
|
||||||
|
max-width: 340px;
|
||||||
|
border-radius: 8px;
|
||||||
|
}
|
||||||
|
& ol {
|
||||||
|
margin-left: 54px;
|
||||||
|
padding-left: 24px;
|
||||||
|
margin-bottom: 12px;
|
||||||
|
& li {
|
||||||
|
list-style: lower-roman;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
& ul {
|
||||||
|
margin-left: 54px;
|
||||||
|
padding-left: 24px;
|
||||||
|
margin-bottom: 12px;
|
||||||
|
& li {
|
||||||
|
list-style: square;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.grid {
|
||||||
|
margin: 12px auto;
|
||||||
|
display: flex;
|
||||||
|
flex-flow: row wrap;
|
||||||
|
justify-content: space-evenly;
|
||||||
|
align-items: normal;
|
||||||
|
gap: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
table {
|
||||||
|
margin: 20px auto;
|
||||||
|
border: 1px solid $border_colour;
|
||||||
|
border-radius: 8px;
|
||||||
|
padding: 4px;
|
||||||
|
color: $black;
|
||||||
|
& tr,
|
||||||
|
td {
|
||||||
|
padding: 4px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
thead {
|
||||||
|
& td {
|
||||||
|
background-color: $table_header;
|
||||||
|
padding: 2px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
tbody {
|
||||||
|
& tr:nth-child(odd) {
|
||||||
|
background-color: $table_odd;
|
||||||
|
}
|
||||||
|
& tr:nth-child(even) {
|
||||||
|
background-color: $table_even;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
tfoot {
|
||||||
|
text-align: center;
|
||||||
|
& tr {
|
||||||
|
background-color: $table_header;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
footer {
|
||||||
|
margin: 10px auto;
|
||||||
|
font-size: 12px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (min-width: 980px) {
|
||||||
|
body {
|
||||||
|
width: 80vw;
|
||||||
|
margin: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (prefers-color-scheme: dark) {
|
||||||
|
html {
|
||||||
|
background-color: $dark_background;
|
||||||
|
color: $white;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (prefers-color-scheme: light) {
|
||||||
|
html {
|
||||||
|
background-color: $light_background;
|
||||||
|
color: $black;
|
||||||
|
}
|
||||||
|
}
|
||||||
251
static/styles/styles.css
Normal file
251
static/styles/styles.css
Normal file
@ -0,0 +1,251 @@
|
|||||||
|
@charset "UTF-8";
|
||||||
|
/* makes sizing simpler */
|
||||||
|
*,
|
||||||
|
*::before,
|
||||||
|
*::after {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* remove default spacing */
|
||||||
|
/* force styling of type through styling, rather than elements */
|
||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
font: inherit;
|
||||||
|
border: 0;
|
||||||
|
list-style: none;
|
||||||
|
text-decoration: none;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* dark mode user-agent-styles */
|
||||||
|
html {
|
||||||
|
color-scheme: dark light;
|
||||||
|
font-family: monospace;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* responsive images/videos */
|
||||||
|
img,
|
||||||
|
picture,
|
||||||
|
svg,
|
||||||
|
video {
|
||||||
|
display: block;
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
header {
|
||||||
|
padding: 1.6rem 0;
|
||||||
|
display: flex;
|
||||||
|
flex-flow: row nowrap;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
header h1 {
|
||||||
|
font-size: 2.2rem;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
header img {
|
||||||
|
border-radius: 50%;
|
||||||
|
width: 64px;
|
||||||
|
height: 64px;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav {
|
||||||
|
padding: 12px;
|
||||||
|
border: 1px dashed white;
|
||||||
|
border-radius: 12px;
|
||||||
|
font-size: 1.4rem;
|
||||||
|
}
|
||||||
|
nav ul {
|
||||||
|
text-align: center;
|
||||||
|
display: flex;
|
||||||
|
flex-flow: row wrap;
|
||||||
|
justify-content: space-evenly;
|
||||||
|
}
|
||||||
|
nav ul li {
|
||||||
|
min-width: 100px;
|
||||||
|
}
|
||||||
|
nav ul li:before {
|
||||||
|
content: "≫ ";
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
width: 95vw;
|
||||||
|
margin: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
font-size: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
font-size: 1.8rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
main article {
|
||||||
|
margin: 12px 0;
|
||||||
|
border: 1px dashed white;
|
||||||
|
padding: 12px;
|
||||||
|
border-radius: 12px;
|
||||||
|
}
|
||||||
|
main article > a {
|
||||||
|
display: block;
|
||||||
|
text-align: right;
|
||||||
|
padding: 0.4rem;
|
||||||
|
}
|
||||||
|
main article h2 {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
main article p {
|
||||||
|
padding: 0.4rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.prose_section {
|
||||||
|
border: 1px solid lightcoral;
|
||||||
|
}
|
||||||
|
.prose_section h2 {
|
||||||
|
text-align: center;
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
.prose_section p {
|
||||||
|
margin: 16px;
|
||||||
|
}
|
||||||
|
.prose_section blockquote {
|
||||||
|
border-left: solid red;
|
||||||
|
margin: auto;
|
||||||
|
width: 80%;
|
||||||
|
padding: 0.5rem;
|
||||||
|
text-align: justify;
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lists {
|
||||||
|
border: 1px solid lightgreen;
|
||||||
|
}
|
||||||
|
.lists h2 {
|
||||||
|
text-align: center;
|
||||||
|
text-decoration: underline;
|
||||||
|
margin-bottom: 0.4rem;
|
||||||
|
}
|
||||||
|
.lists h3 {
|
||||||
|
font-weight: bold;
|
||||||
|
margin: 0 1rem;
|
||||||
|
}
|
||||||
|
.lists section {
|
||||||
|
margin: 0.2rem 2.5rem;
|
||||||
|
}
|
||||||
|
.lists ol,
|
||||||
|
.lists ul {
|
||||||
|
margin: 0 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ol_item {
|
||||||
|
list-style: lower-roman;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ul_item {
|
||||||
|
list-style: disc;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tables {
|
||||||
|
border: 1px solid goldenrod;
|
||||||
|
margin: 0.8rem auto;
|
||||||
|
padding: 0.1rem;
|
||||||
|
border-radius: 12px;
|
||||||
|
}
|
||||||
|
.tables h2 {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.tables table {
|
||||||
|
margin: 0.4rem auto 1.2rem;
|
||||||
|
border: 1px solid goldenrod;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
.tables table thead {
|
||||||
|
letter-spacing: 2px;
|
||||||
|
border: 1px dashed white;
|
||||||
|
}
|
||||||
|
.tables table thead tr {
|
||||||
|
font-size: 1.8rem;
|
||||||
|
text-align: center;
|
||||||
|
color: black;
|
||||||
|
}
|
||||||
|
.tables table thead tr td {
|
||||||
|
background-color: lightpink;
|
||||||
|
border-radius: 4px;
|
||||||
|
width: 33%;
|
||||||
|
}
|
||||||
|
.tables table tbody {
|
||||||
|
color: black;
|
||||||
|
}
|
||||||
|
.tables table tbody td {
|
||||||
|
padding: 0 0.4rem;
|
||||||
|
}
|
||||||
|
.tables table tbody tr:nth-child(odd) {
|
||||||
|
background-color: lightgreen;
|
||||||
|
}
|
||||||
|
.tables table tbody tr:nth-child(even) {
|
||||||
|
background-color: lightskyblue;
|
||||||
|
}
|
||||||
|
.tables table tfoot {
|
||||||
|
text-align: center;
|
||||||
|
font-weight: bold;
|
||||||
|
font-style: italic;
|
||||||
|
background-color: lightpink;
|
||||||
|
color: black;
|
||||||
|
}
|
||||||
|
|
||||||
|
.span_two {
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.images {
|
||||||
|
border: 1px solid #674834;
|
||||||
|
padding: 0.4rem;
|
||||||
|
}
|
||||||
|
.images section {
|
||||||
|
display: flex;
|
||||||
|
flex-flow: row wrap;
|
||||||
|
justify-content: space-evenly;
|
||||||
|
align-items: normal;
|
||||||
|
gap: 12px;
|
||||||
|
margin: 10px auto;
|
||||||
|
}
|
||||||
|
.images img {
|
||||||
|
width: 95%;
|
||||||
|
border-radius: 12px;
|
||||||
|
box-shadow: 1px 2px 4px grey;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer {
|
||||||
|
text-align: center;
|
||||||
|
margin-top: 2rem;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
font-size: 0.8rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (min-width: 980px) {
|
||||||
|
header {
|
||||||
|
width: 80vw;
|
||||||
|
margin: auto;
|
||||||
|
}
|
||||||
|
nav {
|
||||||
|
width: 80vw;
|
||||||
|
margin: auto;
|
||||||
|
}
|
||||||
|
main {
|
||||||
|
width: 80vw;
|
||||||
|
margin: auto;
|
||||||
|
}
|
||||||
|
.images img {
|
||||||
|
width: 45%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (prefers-color-scheme: dark) {
|
||||||
|
.images img {
|
||||||
|
box-shadow: 1px 2px 4px #674834;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/*# sourceMappingURL=styles.css.map */
|
||||||
258
static/styles/styles.scss
Normal file
258
static/styles/styles.scss
Normal file
@ -0,0 +1,258 @@
|
|||||||
|
@use 'sass:color';
|
||||||
|
|
||||||
|
$base_colour: #FDF2D1;
|
||||||
|
$font_colour: #1A1110;
|
||||||
|
$box_shadow: grey;
|
||||||
|
$dark_box_shadow: #674834 ;
|
||||||
|
|
||||||
|
/* makes sizing simpler */
|
||||||
|
*,
|
||||||
|
*::before,
|
||||||
|
*::after {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* remove default spacing */
|
||||||
|
/* force styling of type through styling, rather than elements */
|
||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
font: inherit;
|
||||||
|
border: 0;
|
||||||
|
list-style: none;
|
||||||
|
text-decoration: none;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* dark mode user-agent-styles */
|
||||||
|
html {
|
||||||
|
color-scheme: dark light;
|
||||||
|
font-family: monospace;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* responsive images/videos */
|
||||||
|
img,
|
||||||
|
picture,
|
||||||
|
svg,
|
||||||
|
video {
|
||||||
|
display: block;
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
header {
|
||||||
|
padding: 1.6rem 0;
|
||||||
|
display: flex;
|
||||||
|
flex-flow: row nowrap;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
& h1 {
|
||||||
|
font-size: 2.2rem;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
& img {
|
||||||
|
border-radius: 50%;
|
||||||
|
width: 64px;
|
||||||
|
height: 64px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
nav {
|
||||||
|
padding: 12px;
|
||||||
|
border: 1px dashed white;
|
||||||
|
border-radius: 12px;
|
||||||
|
font-size: 1.4rem;
|
||||||
|
& ul {
|
||||||
|
text-align: center;
|
||||||
|
display: flex;
|
||||||
|
flex-flow: row wrap;
|
||||||
|
justify-content: space-evenly;
|
||||||
|
& li {
|
||||||
|
min-width: 100px;
|
||||||
|
&:before {
|
||||||
|
content: "≫ ";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
width: 95vw;
|
||||||
|
margin: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
font-size: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
font-size: 1.8rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
main {
|
||||||
|
& article {
|
||||||
|
margin: 12px 0;
|
||||||
|
border: 1px dashed white;
|
||||||
|
padding: 12px;
|
||||||
|
border-radius: 12px;
|
||||||
|
& > a {
|
||||||
|
display: block;
|
||||||
|
text-align: right;
|
||||||
|
padding: 0.4rem;
|
||||||
|
}
|
||||||
|
& h2 {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
& p {
|
||||||
|
padding: 0.4rem 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.prose_section {
|
||||||
|
// margin: 1.2rem;
|
||||||
|
border: 1px solid lightcoral;
|
||||||
|
& h2 {
|
||||||
|
text-align: center;
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
& p {
|
||||||
|
margin: 16px;
|
||||||
|
}
|
||||||
|
& blockquote {
|
||||||
|
border-left: solid red;
|
||||||
|
margin: auto;
|
||||||
|
width: 80%;
|
||||||
|
padding: 0.5rem;
|
||||||
|
text-align: justify;
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.lists {
|
||||||
|
border: 1px solid lightgreen;
|
||||||
|
& h2 {
|
||||||
|
text-align: center;
|
||||||
|
text-decoration: underline;
|
||||||
|
margin-bottom: 0.4rem;
|
||||||
|
}
|
||||||
|
& h3 {
|
||||||
|
font-weight: bold;
|
||||||
|
margin: 0 1rem;
|
||||||
|
}
|
||||||
|
& section {
|
||||||
|
margin: 0.2rem 2.5rem;
|
||||||
|
}
|
||||||
|
& ol,
|
||||||
|
ul {
|
||||||
|
margin: 0 2rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.ol_item {
|
||||||
|
list-style: lower-roman;
|
||||||
|
}
|
||||||
|
.ul_item {
|
||||||
|
list-style: disc;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tables {
|
||||||
|
border: 1px solid goldenrod;
|
||||||
|
margin: 0.8rem auto;
|
||||||
|
padding: 0.1rem;
|
||||||
|
border-radius: 12px;
|
||||||
|
& h2 {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
& table {
|
||||||
|
margin: 0.4rem auto 1.2rem;
|
||||||
|
border: 1px solid goldenrod;
|
||||||
|
border-radius: 4px;
|
||||||
|
& thead {
|
||||||
|
letter-spacing: 2px;
|
||||||
|
border: 1px dashed white;
|
||||||
|
& tr {
|
||||||
|
font-size: 1.8rem;
|
||||||
|
text-align: center;
|
||||||
|
color: black;
|
||||||
|
& td {
|
||||||
|
background-color: lightpink;
|
||||||
|
border-radius: 4px;
|
||||||
|
width: 33%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
& tbody {
|
||||||
|
color: black;
|
||||||
|
& td {
|
||||||
|
padding: 0 0.4rem;
|
||||||
|
}
|
||||||
|
& tr:nth-child(odd) {
|
||||||
|
background-color: lightgreen;
|
||||||
|
}
|
||||||
|
& tr:nth-child(even) {
|
||||||
|
background-color: lightskyblue;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
& tfoot {
|
||||||
|
text-align: center;
|
||||||
|
font-weight: bold;
|
||||||
|
font-style: italic;
|
||||||
|
background-color: lightpink;
|
||||||
|
color: black;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.span_two {
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.images {
|
||||||
|
border: 1px solid $dark_box_shadow;
|
||||||
|
padding: 0.4rem;
|
||||||
|
& section {
|
||||||
|
display: flex;
|
||||||
|
flex-flow: row wrap;
|
||||||
|
justify-content: space-evenly;
|
||||||
|
align-items: normal;
|
||||||
|
gap: 12px;
|
||||||
|
margin: 10px auto;
|
||||||
|
}
|
||||||
|
& img {
|
||||||
|
width: 95%;
|
||||||
|
border-radius: 12px;
|
||||||
|
box-shadow: 1px 2px 4px grey;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
footer {
|
||||||
|
text-align: center;
|
||||||
|
margin-top: 2rem;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
font-size: 0.8rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (min-width: 980px) {
|
||||||
|
header {
|
||||||
|
width: 80vw;
|
||||||
|
margin: auto;
|
||||||
|
}
|
||||||
|
nav {
|
||||||
|
width: 80vw;
|
||||||
|
margin: auto;
|
||||||
|
}
|
||||||
|
main {
|
||||||
|
width: 80vw;
|
||||||
|
margin: auto;
|
||||||
|
}
|
||||||
|
.images img {
|
||||||
|
width: 45%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (prefers-color-scheme: dark) {
|
||||||
|
.images img {
|
||||||
|
box-shadow: 1px 2px 4px $dark_box_shadow;
|
||||||
|
}
|
||||||
|
}
|
||||||
1
style.css.map
Normal file
1
style.css.map
Normal file
@ -0,0 +1 @@
|
|||||||
|
{"version":3,"sourceRoot":"","sources":["style.scss"],"names":[],"mappings":";AAaA;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACI,OAvBS;;AAwBT;EACI,OAxBO;;AA0BX;EACI;;;AAIR;EACI;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;;;AAIR;EACI;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;;AAEJ;EACI;;AACA;EACI;;;AAMR;EACI;EACA;;;AAIR;EACI;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;;;AAKJ;EACI;EACA;;AAEJ;EACI;EACA;EACA;;AACA;EACI;;AAGR;EACI;EACA;EACA;;AACA;EACI;;;AAOZ;EACI;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA,OAxJI;;AAyJJ;AAAA;EAEI;;;AAKJ;EACI,kBA7JO;EA8JP;EACA;;;AAKJ;EACI,kBApKI;;AAsKR;EACI,kBAtKK;;;AA0Kb;EACI;;AACA;EACI,kBA/KO;;;AAmLf;EACI;EACA;EACA;;;AAGJ;EACI;IACI;IACA;;;AAIR;EACI;IACI,kBAtMA;IAuMA,OAxMA;;;AA4MR;EACI;IACI,kBA9MA;IA+MA,OA9MA","file":"style.css"}
|
||||||
1
styles.css.map
Normal file
1
styles.css.map
Normal file
@ -0,0 +1 @@
|
|||||||
|
{"version":3,"sourceRoot":"","sources":["styles.scss"],"names":[],"mappings":";AAOA;AACA;AAAA;AAAA;EAGE;;;AAGF;AACA;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;AACA;EACE;EACA;EACA;;;AAGF;AACA;AAAA;AAAA;AAAA;EAIE;EACA;;;AAGF;EACI;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;;AAEJ;EACI;EACA;EACA;;;AAIR;EACI;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;;AACA;EACI;;AACA;EACI;;;AAMhB;EACI;EACA;;;AAGJ;EACI;;;AAGJ;EACI;;;AAIA;EACI;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;;AAEJ;EACI;;AAEJ;EACI;;;AAKZ;EAEI;;AACA;EACI;EACA;;AAEJ;EACI;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;;;AAIR;EACI;;AACA;EACI;EACA;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;;AAEJ;AAAA;EAEI;;;AAGR;EACI;;;AAEJ;EACI;;;AAGJ;EACI;EACA;EACA;EACA;;AACA;EACI;;AAEJ;EACI;EACA;EACA;;AACA;EACI;EACA;;AACA;EACI;EACA;EACA;;AACA;EACI;EACA;EACA;;AAIZ;EACI;;AACA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAGR;EACI;EACA;EACA;EACA;EACA;;;AAKZ;EACI;;;AAGJ;EACI;EACA;;AACA;EACI;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;;;AAKR;EACI;EACA;EACA;EACA;;;AAGJ;EACI;IACI;IACA;;EAEJ;IACI;IACA;;EAEJ;IACI;IACA;;EAEJ;IACI;;;AAIR;EACI;IACI","file":"styles.css"}
|
||||||
1
styles.scss.map
Normal file
1
styles.scss.map
Normal file
@ -0,0 +1 @@
|
|||||||
|
{"version":3,"sourceRoot":"","sources":["styles.scss"],"names":[],"mappings":"AAEA","file":"styles.scss"}
|
||||||
94
tables.html
Normal file
94
tables.html
Normal file
@ -0,0 +1,94 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>just tables</title>
|
||||||
|
<link rel="shortcut icon" href="https://cdn.fyrfli.link/i/handcup.jpeg" type="image/x-icon">
|
||||||
|
<link rel="stylesheet" href="static/styles/style.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<header class="header">
|
||||||
|
<img loading="lazy" src="https://fyrfli.net/avatar" alt="black woman in a hat with head tipped down, the brin of the hat hiding her eyes" />
|
||||||
|
<h1 class="header-h1">just tables</h1>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<nav>
|
||||||
|
<ul class="nav_container">
|
||||||
|
<li class="nav_item"><a href="index.html" rel="noopener noreferrer">home</a></li>
|
||||||
|
<li><a href="prose.html">prose</a></li>
|
||||||
|
<li><a href="lists.html">lists</a></li>
|
||||||
|
<li><a href="tables.html">tables</a></li>
|
||||||
|
<li><a href="images.html">images</a></li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<main class="tables">
|
||||||
|
<article>
|
||||||
|
<section>
|
||||||
|
<h2>tables</h2>
|
||||||
|
<table>
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<td>one</td>
|
||||||
|
<td>two</td>
|
||||||
|
<td>three</td>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr class="table_body_line">
|
||||||
|
<td class="table_line_item">column one</td>
|
||||||
|
<td class="table_line_item">this is column two and it's slightly larger than column one</td>
|
||||||
|
<td class="table_line_item">col. 3</td>
|
||||||
|
</tr>
|
||||||
|
<tr class="table_body_line">
|
||||||
|
<td class="table_line_item">column one</td>
|
||||||
|
<td class="table_line_item">this is column two and it's slightly larger than column one</td>
|
||||||
|
<td class="table_line_item">col. 3</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>row three, column one</td>
|
||||||
|
<td>row three, column two</td>
|
||||||
|
<td>row three, column three</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td colspan="2">row four, columns one and two</td>
|
||||||
|
<td>row four, column tree</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td colspan="2" class="span_two">agreement</td>
|
||||||
|
<td>contract</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>letter</td>
|
||||||
|
<td>feather</td>
|
||||||
|
<td>cotton</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>all the things</td>
|
||||||
|
<td colspan="2" class="span_two">just one</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
<tfoot>
|
||||||
|
<tr>
|
||||||
|
<td colspan="3" class="span_three">final hour</td>
|
||||||
|
</tr>
|
||||||
|
</tfoot>
|
||||||
|
</table>
|
||||||
|
</section>
|
||||||
|
</article>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
|
||||||
|
<footer class="footer">
|
||||||
|
©<span id="jsyear"></span> Camille (<a href="https://fyrfli.dev/fyrfli" target="_blank">@fyrfli</a>) Frantz
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
const todayDate = new Date();
|
||||||
|
jsyear.innerText = todayDate.getFullYear();
|
||||||
|
</script>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
||||||
Loading…
Reference in New Issue
Block a user