4 Commits

Author SHA1 Message Date
84004d3ac0 Change pagefind to only index the content of articles
Fixes #97
2025-08-08 01:42:25 -05:00
52a6440011 Remove heading-link class
It was used to make both website title and page titles in summaries not
have link color. Instead, just directly configure those elements.
2025-08-08 01:41:38 -05:00
322928ed7a Reorganize CSS to have better sections
- Separate baseof.html elements from styling code for general elements
  used everywhere
- Rename some of the fold titles
- Include related posts section styling in the content styling section
2025-08-08 01:28:28 -05:00
4e753395ba Align top bar with main horizontal margin
- Use a variable to make sure that top bar and body margins stay equal
- Lower side margins to 16px so that the gap in navbar-items fits right
2025-08-08 01:02:04 -05:00
7 changed files with 73 additions and 58 deletions

View File

@@ -158,40 +158,16 @@ pre > code {
/* }}} */
/* Basic elements {{{ */
/* Common distances/sizes {{{ */
html {
scroll-behavior: smooth;
:root {
--page-margin: 16px;
}
@media screen and (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
}
/* }}} */
body {
background-color: var(--background-0);
color: var(--text-0);
overflow-wrap: break-word;
margin: 0;
}
.main-container {
margin: 20px auto;
padding: 0 20px;
max-width: 760px; /* 720px + 20px for left & right padding */
}
footer {
margin: 20px 0;
text-align: center;
font-size: smaller;
}
footer p {
margin: 0;
}
/* Common elements {{{ */
img,
video {
@@ -308,12 +284,40 @@ table.simple tbody tr:nth-child(even) {
/* }}} */
/* Heading formatting (article section titles) {{{ */
/* Baseof formatting {{{ */
/* this is also used i.e. in page-title */
.heading-link {
color: inherit;
font-weight: bold;
html {
scroll-behavior: smooth;
}
@media screen and (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
}
body {
background-color: var(--background-0);
color: var(--text-0);
overflow-wrap: break-word;
margin: 0;
}
.main-container {
margin: var(--page-margin) auto;
/* use padding because otherwise there's no way to have margin be both auto, and a minimum value */
padding: 0 var(--page-margin);
max-width: calc(720px + 2 * var(--page-margin)); /* padding is included in the element's width */
}
footer {
margin: var(--page-margin) 0;
text-align: center;
font-size: smaller;
}
footer p {
margin: 0;
}
/* }}} */
@@ -326,23 +330,30 @@ table.simple tbody tr:nth-child(even) {
flex-wrap: wrap;
justify-content: space-between;
background-color: var(--background-1);
/* padding can't be here because then the first navbar element will be shifted too far over,
* or it will need its hover background to be chopped off on the left */
}
.header {
flex-grow: 1;
margin: 8px 16px;
margin: 8px var(--page-margin);
font-size: 1.25em;
display: flex;
align-items: center;
}
.header a {
color: inherit;
font-weight: bold;
}
.navbar {
display: flex;
flex-wrap: wrap;
}
.navbar-item {
padding: 12px 16px;
padding: 12px var(--page-margin);
white-space: nowrap;
}
@@ -376,7 +387,7 @@ table.simple tbody tr:nth-child(even) {
/* Breadcrumb navigation {{{ */
.breadcrumb {
margin: 20px 0;
margin: var(--page-margin) 0;
}
.breadcrumb ul {
@@ -484,6 +495,10 @@ table.simple tbody tr:nth-child(even) {
margin-bottom: 10px;
}
.page-title a {
color: inherit;
}
.page-title h1 {
margin: 0;
}
@@ -634,7 +649,7 @@ table.simple tbody tr:nth-child(even) {
/* }}} */
/* Content (single) formatting {{{ */
/* Components exclusive to content/single pages {{{ */
.series-box {
background-color: var(--background-1);
@@ -874,8 +889,6 @@ aside.quote {
/* }}} */
/* }}} */
/* Related posts section {{{ */
.full-width-page-list {
@@ -911,6 +924,8 @@ aside.quote {
/* }}} */
/* }}} */
/* @media specializations {{{ */

View File

@@ -1,6 +1,6 @@
<div class="top">
<header class="header">
<a class="heading-link" href="{{ .Site.Home.Permalink | absLangURL }}">
<a href="{{ .Site.Home.Permalink | absLangURL }}">
{{ .Site.Title | markdownify }}
</a>
</header>

View File

@@ -1,5 +1,5 @@
<h2 class="page-title">
<a class="heading-link" href="{{ .Permalink }}">{{ .Title | markdownify }}</a>
<a href="{{ .Permalink }}">{{ .Title | markdownify }}</a>
{{ if .Draft }}{{ partial "icon.html" "write" }}{{ end }}
</h2>

View File

@@ -13,16 +13,11 @@
{{ partial "breadcrumb.html" . }}
{{ end }}
<main id="main-content" {{ if .IsPage }}data-pagefind-body{{ end }}>
<main id="main-content">
{{ block "main" . }}
THIS TEXT SHOULD NOT SHOW. YUZSIQGHE (that string is so I can grep for it)
{{ end }}
</main>
</div>
{{ block "post-body" . }}
{{/* currently this is only used for related posts */}}
{{ end }}
{{ if or .Site.Copyright .Site.Params.footer }}
<footer>
@@ -35,6 +30,11 @@
{{ end }}
</footer>
{{ end }}
</div>
{{ block "post-body" . }}
{{/* currently this is only used for related posts */}}
{{ end }}
</body>
</html>

View File

@@ -24,7 +24,7 @@
{{ partial "feature-figure.html" . }}
<article class="post-content">
<article class="post-content" data-pagefind-body>
{{ .Content }}
</article>

View File

@@ -1,6 +1,6 @@
<h2 class="page-title">
{{ with .Parent.Params.icon }}{{ partial "icon.html" . }}{{ end }}
<a class="heading-link" href="{{ .Permalink }}">{{ .Title | markdownify }}</a>
<a href="{{ .Permalink }}">{{ .Title | markdownify }}</a>
{{ if .Draft }}{{ partial "icon.html" "write" }}{{ end }}
</h2>

View File

@@ -1,6 +1,6 @@
<h2 class="page-title">
{{ with .Parent.Params.icon }}{{ partial "icon.html" . }}{{ end }}
<a class="heading-link" href="{{ .Permalink }}">{{ .Title | markdownify }}</a>
<a href="{{ .Permalink }}">{{ .Title | markdownify }}</a>
{{ if .Draft }}{{ partial "icon.html" "write" }}{{ end }}
</h2>