mirror of
https://github.com/BBaoVanC/bobatheme.git
synced 2025-08-31 00:57:33 -05:00
Compare commits
11 Commits
share-butt
...
14475c13f4
Author | SHA1 | Date | |
---|---|---|---|
14475c13f4
|
|||
6b729c6acf
|
|||
f751c4b104
|
|||
de20387b5a
|
|||
84004d3ac0
|
|||
52a6440011
|
|||
322928ed7a
|
|||
4e753395ba
|
|||
5d335647d0
|
|||
22fff1a9c5
|
|||
b79c956c07
|
@@ -158,61 +158,38 @@ 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 {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.post-media > figure img,
|
||||
.post-media > figure video {
|
||||
figure > .figure-media {
|
||||
padding: 5px;
|
||||
border: 7px solid var(--figure-border);
|
||||
}
|
||||
|
||||
figure img,
|
||||
figure video {
|
||||
padding: 5px;
|
||||
figure > .figure-media.border {
|
||||
border: 2px solid var(--figure-border);
|
||||
}
|
||||
|
||||
.post-media > figure > .figure-media {
|
||||
border: 7px solid var(--figure-border);
|
||||
}
|
||||
|
||||
figure {
|
||||
margin: auto;
|
||||
display: inline-block;
|
||||
display: block;
|
||||
text-align: center;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
figcaption {
|
||||
@@ -240,14 +217,6 @@ hr {
|
||||
border: 1px solid var(--background-3);
|
||||
}
|
||||
|
||||
@media (min-width: 720px) {
|
||||
.full-width-hr {
|
||||
/* see also: the related-posts section too */
|
||||
margin-left: calc(-100vw / 2 + 760px / 2);
|
||||
margin-right: calc(-100vw / 2 + 760px / 2);
|
||||
}
|
||||
}
|
||||
|
||||
table.simple {
|
||||
border-collapse: collapse;
|
||||
border: 2px solid var(--text-1);
|
||||
@@ -307,12 +276,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;
|
||||
}
|
||||
|
||||
/* }}} */
|
||||
@@ -325,23 +322,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;
|
||||
}
|
||||
|
||||
@@ -375,7 +379,7 @@ table.simple tbody tr:nth-child(even) {
|
||||
/* Breadcrumb navigation {{{ */
|
||||
|
||||
.breadcrumb {
|
||||
margin: 20px 0;
|
||||
margin: var(--page-margin) 0;
|
||||
}
|
||||
|
||||
.breadcrumb ul {
|
||||
@@ -483,6 +487,10 @@ table.simple tbody tr:nth-child(even) {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.page-title a {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.page-title h1 {
|
||||
margin: 0;
|
||||
}
|
||||
@@ -633,7 +641,7 @@ table.simple tbody tr:nth-child(even) {
|
||||
/* }}} */
|
||||
|
||||
|
||||
/* Content (single) formatting {{{ */
|
||||
/* Components exclusive to content/single pages {{{ */
|
||||
|
||||
.series-box {
|
||||
background-color: var(--background-1);
|
||||
@@ -873,19 +881,16 @@ aside.quote {
|
||||
|
||||
/* }}} */
|
||||
|
||||
/* }}} */
|
||||
|
||||
/* Related posts section {{{ */
|
||||
|
||||
.full-width-page-list {
|
||||
/* make left/right 0 margin so it takes up full width */
|
||||
margin: 25px 0;
|
||||
}
|
||||
/* set the margins on the contents instead of the parent .related-posts
|
||||
* so that the posts in the list clip off the edge of the screen,
|
||||
* which makes a more obvious indicator that it's scrollable
|
||||
*/
|
||||
|
||||
.related-posts > hr,
|
||||
.related-posts > h1 {
|
||||
margin-left: 20px;
|
||||
margin-right: 20px;
|
||||
margin: var(--page-margin);
|
||||
}
|
||||
|
||||
.related-posts .page {
|
||||
@@ -895,21 +900,24 @@ aside.quote {
|
||||
}
|
||||
|
||||
.related-posts .page:first-child {
|
||||
margin-left: 20px;
|
||||
margin-left: var(--page-margin);
|
||||
}
|
||||
.related-posts .page:last-child {
|
||||
margin-right: 20px;
|
||||
margin-right: var(--page-margin);
|
||||
}
|
||||
|
||||
.related-posts .page-list {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 20px;
|
||||
overflow-x: scroll;
|
||||
overflow-x: auto;
|
||||
margin-bottom: var(--page-margin);
|
||||
}
|
||||
|
||||
/* }}} */
|
||||
|
||||
/* }}} */
|
||||
|
||||
|
||||
/* @media specializations {{{ */
|
||||
|
||||
|
@@ -1,7 +0,0 @@
|
||||
{{ with .Description }}
|
||||
<p>{{ . | markdownify }}</p>
|
||||
{{ else }}
|
||||
{{ with .Summary }}
|
||||
{{ . }}
|
||||
{{ end }}
|
||||
{{ end }}
|
@@ -3,9 +3,9 @@
|
||||
* claims that images won't work with JS disabled since it would
|
||||
* make tracking possible, but my experience says otherwise
|
||||
*/}}
|
||||
<img src="{{ .Permalink }}" {{ with .Params.alt }}alt="{{ . }}"{{ end }} />
|
||||
<img class="figure-media" src="{{ .Permalink }}" {{ with .Params.alt }}alt="{{ . }}"{{ end }} />
|
||||
{{ else if eq .ResourceType "video" }}
|
||||
<video controls preload="metadata">
|
||||
<video class="figure-media" controls preload="metadata">
|
||||
{{ with .Params.alt }}
|
||||
{{ warnf "video does not support alt text, '%s'" . }}
|
||||
{{ end }}
|
||||
|
@@ -1,6 +1,6 @@
|
||||
{{ if gt .Paginator.TotalPages 1 }}
|
||||
<nav class="pagination">
|
||||
{{/* https://github.com/gohugoio/hugo/blob/a88b488181279befd50e1d127f9f67604f2f9854/tpl/tplimpl/embedded/templates/_partials/pagination.html */}}
|
||||
{{ partial "_internal/pagination.html" . }}
|
||||
{{ partial "pagination-hugo.html" . }}
|
||||
</nav>
|
||||
{{ end }}
|
||||
|
@@ -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>
|
||||
|
@@ -1 +0,0 @@
|
||||
<hr class="full-width-hr">
|
@@ -1,13 +1,15 @@
|
||||
<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>
|
||||
|
||||
{{ partial "page-metadata/author.html" . }}
|
||||
|
||||
<div class="page-description">
|
||||
{{ partial "description-or-summary.html" . }}
|
||||
</div>
|
||||
{{ with .Summary }}
|
||||
<div class="page-description">
|
||||
{{ . }}
|
||||
</div>
|
||||
{{ end }}
|
||||
|
||||
<div class="readmore">
|
||||
<a href="{{ .Permalink }}">{{ i18n "read_more" }} →</a>
|
||||
|
@@ -13,28 +13,28 @@
|
||||
{{ 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>
|
||||
|
||||
{{ if or .Site.Copyright .Site.Params.footer }}
|
||||
<footer>
|
||||
{{ with .Site.Copyright }}
|
||||
{{ . | safeHTML }}
|
||||
{{ end }}
|
||||
|
||||
{{ with .Site.Params.footer }}
|
||||
{{ . | $.RenderString (dict "display" "block") }}
|
||||
{{ end }}
|
||||
</footer>
|
||||
{{ end }}
|
||||
</div>
|
||||
|
||||
{{ block "post-body" . }}
|
||||
{{/* currently this is only used for related posts */}}
|
||||
{{ end }}
|
||||
|
||||
{{ if or .Site.Copyright .Site.Params.footer }}
|
||||
<footer>
|
||||
{{ with .Site.Copyright }}
|
||||
{{ . | safeHTML }}
|
||||
{{ end }}
|
||||
|
||||
{{ with .Site.Params.footer }}
|
||||
{{ . | $.RenderString (dict "display" "block") }}
|
||||
{{ end }}
|
||||
</footer>
|
||||
{{ end }}
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
@@ -24,7 +24,7 @@
|
||||
|
||||
{{ partial "feature-figure.html" . }}
|
||||
|
||||
<article class="post-content">
|
||||
<article class="post-content" data-pagefind-body>
|
||||
{{ .Content }}
|
||||
</article>
|
||||
|
||||
|
@@ -5,8 +5,10 @@
|
||||
{{ .Title | markdownify }}
|
||||
</h2>
|
||||
|
||||
<div class="section-description">
|
||||
{{ partial "description-or-summary.html" . }}
|
||||
</div>
|
||||
{{ with .Summary }}
|
||||
<div class="section-description">
|
||||
{{ . }}
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
</a>
|
||||
|
@@ -1,14 +1,16 @@
|
||||
<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>
|
||||
|
||||
{{ partial "page-metadata/series.html" . }}
|
||||
|
||||
<div class="page-description">
|
||||
{{ partial "description-or-summary.html" . }}
|
||||
</div>
|
||||
{{ with .Summary }}
|
||||
<div class="page-description">
|
||||
{{ . }}
|
||||
</div>
|
||||
{{ end }}
|
||||
|
||||
<div class="page-list series-inner">
|
||||
{{ range .Data.Pages.Reverse }}
|
||||
|
@@ -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>
|
||||
|
||||
@@ -8,9 +8,11 @@
|
||||
|
||||
{{ partial "feature-figure.html" . }}
|
||||
|
||||
<div class="page-description">
|
||||
{{ partial "description-or-summary.html" . }}
|
||||
</div>
|
||||
{{ with .Summary }}
|
||||
<div class="page-description">
|
||||
{{ . }}
|
||||
</div>
|
||||
{{ end }}
|
||||
|
||||
<div class="readmore">
|
||||
<a href="{{ .Permalink }}">{{ i18n "read_more" }} →</a>
|
||||
|
@@ -28,7 +28,7 @@
|
||||
</a>
|
||||
{{ partial "page-metadata/taxonomy.html" . }}
|
||||
</div>
|
||||
{{ partial "description-or-summary.html" . }}
|
||||
{{ .Summary }}
|
||||
</article>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
|
Reference in New Issue
Block a user