brendan/brendan-ch.github.io
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Properly style the backlinks

Browse Source
This commit is contained in:
Brendan Chen
2026-08-08 20:56:45 -04:00
parent fa8f0b3a03
commit af843da6fd
6 changed files with 34 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
_layouts/note.html
View File

@@ -6,12 +6,14 @@ layout: default
{{ content }} {{ content }}
<div> <hr class="backlink-divider">
<div class="backlink-box">
{% if page.backlinks.size > 0 %} {% if page.backlinks.size > 0 %}
<h3>Notes mentioning this note</h3> <h3>Notes mentioning this note</h3>
<div> <div>
{% for backlink in page.backlinks %} {% for backlink in page.backlinks %}
<div class="backlink-box"> <div class="backlinks">
<a class="internal-link" href="{{ site.baseurl }}{{ backlink.url }}{%- if site.use_html_extension -%}.html{%- endif -%}">{{ backlink.title }}</a><br> <a class="internal-link" href="{{ site.baseurl }}{{ backlink.url }}{%- if site.use_html_extension -%}.html{%- endif -%}">{{ backlink.title }}</a><br>
</div> </div>
{% endfor %} {% endfor %}

10
assets/css/colors.css
View File

@@ -1,12 +1,14 @@
:root { :root {
--color-background: #f4f4f4; --color-background-1: #f4f4f4;
--color-primary: #000000; --color-background-2: #e4e4e4;
--color-primary-1: #000000;
} }
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
:root { :root {
--color-background: #111111; --color-background-1: #111111;
--color-primary: #eeeeee; --color-background-2: #222222;
--color-primary-1: #eeeeee;
} }
} }

8
assets/css/content.css
View File

@@ -8,21 +8,21 @@
} }
.primary-action { .primary-action {
background: var(--color-primary); background: var(--color-primary-1);
padding: 0.8em; padding: 0.8em;
color: var(--color-background); color: var(--color-background-1);
text-decoration-line: unset; text-decoration-line: unset;
border-radius: 4px; border-radius: 4px;
border-style: solid; border-style: solid;
border-width: 1px; border-width: 1px;
border-color: var(--color-primary); border-color: var(--color-primary-1);
box-sizing: border-box; box-sizing: border-box;
} }
.secondary-action { .secondary-action {
border-width: 1px; border-width: 1px;
border-style: solid; border-style: solid;
border-color: var(--color-primary); border-color: var(--color-primary-1);
padding: 0.8em; padding: 0.8em;
text-decoration-line: unset; text-decoration-line: unset;
border-radius: 4px; border-radius: 4px;

5
assets/css/global.css
View File

@@ -2,14 +2,15 @@
@import url('navigation.css'); @import url('navigation.css');
@import url('colors.css'); @import url('colors.css');
@import url('content.css'); @import url('content.css');
@import url('note.css');
html { html {
background-color: var(--color-background); background-color: var(--color-background-1);
} }
body { body {
font-family: 'FormaDJRText', sans-serif; font-family: 'FormaDJRText', sans-serif;
color: var(--color-primary); color: var(--color-primary-1);
display: flex; display: flex;
flex-direction: column; flex-direction: column;

14
assets/css/navigation.css
View File

@@ -14,7 +14,7 @@
display: flex; display: flex;
align-items: center; align-items: center;
text-decoration: none; text-decoration: none;
color: var(--color-primary); color: var(--color-primary-1);
} }
.nav-logo-icon { .nav-logo-icon {
@@ -36,7 +36,7 @@
.nav-link { .nav-link {
text-decoration: none; text-decoration: none;
color: var(--color-primary); color: var(--color-primary-1);
} }
.nav-link:hover { .nav-link:hover {
@@ -56,14 +56,14 @@
height: 64px; height: 64px;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
background-color: var(--color-primary); background-color: var(--color-primary-1);
gap: 4px; gap: 4px;
} }
.hamburger-line { .hamburger-line {
width: 20px; width: 20px;
height: 2px; height: 2px;
background-color: var(--color-background); background-color: var(--color-background-1);
} }
.menu-overlay { .menu-overlay {
@@ -90,7 +90,7 @@
left: -100%; left: -100%;
top: 80px; top: 80px;
flex-direction: column; flex-direction: column;
background-color: var(--color-background); background-color: var(--color-background-1);
width: 100%; width: 100%;
z-index: 1000; z-index: 1000;
gap: 0; gap: 0;
@@ -147,8 +147,8 @@
justify-content: space-between; justify-content: space-between;
height: 64px; height: 64px;
border-top: 1px solid var(--color-primary); border-top: 1px solid var(--color-primary-1);
border-bottom: 1px solid var(--color-primary); border-bottom: 1px solid var(--color-primary-1);
padding-top: 16px; padding-top: 16px;
padding-bottom: 16px; padding-bottom: 16px;

10
assets/css/note.css Normal file
View File

@@ -0,0 +1,10 @@
.backlink-divider {
color: var(--color-background-2);
}
.backlink-box {
}
.backlinks {
}