talexander/natter
1
0
Fork 0
Code Issues Pull Requests Releases Activity

Start applying styles to blog posts.

Browse Source
This commit is contained in:
Tom Alexander 2023-12-19 19:23:56 -05:00
parent 050b426f6f
commit e193fcc2ba
Signed by: talexander
GPG Key ID: D3A179C9A53C0EDE
4 changed files with 48 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
default_environment/stylesheet/main.css
View File

@ -0,0 +1,37 @@
:root {
--main-max-width: 800px;
}
.page_centering {
display: flex;
flex-direction: column;
align-items: center;
}
.page_header {
width: 100%;
max-width: var(--main-max-width);
border-bottom: 0.2rem solid black;
.home_link {
font-size: 1.2rem;
font-weight: 600;
text-decoration: none;
}
}
.main_content {
width: 100%;
max-width: var(--main-max-width);
font-size: 1.2rem;
}
/* A stand-alone blog post (not in a blog stream). */
.blog_post {
padding: 1rem 0 3rem 0;
}
.blog_post_title {
font-size: 2rem;
font-weight: 700;
}

10
default_environment/templates/html/blog_post_page.dust
View File

@ -1,8 +1,6 @@
<div class="blog_post">
<div class="blog_post_intro">
{?.title}{?.self_link}<a class="blog_post_title" href="{.self_link}">{.title}</a>{:else}<div class="blog_post_title">{.title}</div>{/.self_link}{/.title}
{! TODO: date? !}
</div>
<article class="blog_post">
{?.title}<h1>{?.self_link}<a class="blog_post_title" href="{.self_link}">{.title}</a>{:else}<span class="blog_post_title">{.title}</span>{/.self_link}</h1>{/.title}
{! TODO: date? !}
{! TODO: Table of contents? !}
@ -18,4 +16,4 @@
{/.footnotes}
{/.footnotes}
</div>
</div>
</article>

6
default_environment/templates/html/main.dust
View File

@ -6,14 +6,14 @@
{#global_settings.js_files}<script type="text/javascript" src="{.}"></script>{/global_settings.js_files}
{?global_settings.page_title}<title>{global_settings.page_title}</title>{/global_settings.page_title}
</head>
<body>
<body class="page_centering">
{#.page_header}{>page_header/}{/.page_header}
<div class="main_content">
<main class="main_content">
{@select key=.type}
{@eq value="blog_post_page"}{>blog_post_page/}{/eq}
{@eq value="blog_stream"}{>blog_stream/}{/eq}
{@none}{!TODO: make this panic!}ERROR: Unrecognized page content type{/none}
{/select}
</div>
</main>
</body>
</html>

8
default_environment/templates/html/page_header.dust
View File

@ -1,4 +1,4 @@
<div class="page_header">
<a href="{.home_link}">{.website_title}</a>
{! TODO: Additional links? !}
</div>
<header class="page_header">
<a class="home_link" href="{.home_link}">{.website_title}</a>
{! TODO: Additional links? Probably using the nav semantic element. !}
</header>