- {% assign url = post.url %}
- {% assign title = post.title %}
- {{ title }}
+
+
+ {% assign url = post.url %}
+ {% assign title = post.title %}
+ {% assign image = post.image %}
- {%
- include post-info.html
- author=post.author
- published=post.date
- updated=post.last_modified_at
- tags=post.tags
- %}
+ {% if image %}
+
+ 
+
+ {% endif %}
- {% assign excerpt = post.content
- | default: ""
- | regex_scan: "(.*)", true
- | default: post.excerpt
- | default: ""
- | strip_html
- %}
- {% assign search = post.content
- | strip_html
- | strip_newlines
- | regex_strip
- %}
-
- {{ excerpt }}
-
+
+
{{ title }}
+
+ {%
+ include post-info.html
+ author=post.author
+ published=post.date
+ updated=post.last_modified_at
+ tags=post.tags
+ %}
+
+ {% assign excerpt = post.content
+ | default: ""
+ | regex_scan: "(.*)", true
+ | default: post.excerpt
+ | default: ""
+ | strip_html
+ %}
+ {% assign search = post.content
+ | strip_html
+ | strip_newlines
+ | regex_strip
+ %}
+
+ {{ excerpt }}
+
+
+
diff --git a/_layouts/post.html b/_layouts/post.html
index 9b1641a903..09fd57b0fe 100644
--- a/_layouts/post.html
+++ b/_layouts/post.html
@@ -2,6 +2,8 @@
layout: default
---
+{% include section.html background=page.image %}
+
{{ page.title }}
{%
diff --git a/_plugins/misc.rb b/_plugins/misc.rb
index 6b4cb0fc8d..fe19bd8f08 100644
--- a/_plugins/misc.rb
+++ b/_plugins/misc.rb
@@ -1,4 +1,5 @@
require 'liquid'
+require 'html-proofer'
module Jekyll
module MiscFilters
@@ -14,7 +15,7 @@ def object_items(object)
elsif object.is_a?(Array)
return object
end
- return []
+ return object
end
# filter a list of hashes by comma-sep'd field:value pairs
@@ -54,6 +55,33 @@ def google_fonts(css)
return url
end
end
+
+ # based on https://github.com/episource/jekyll-html-proofer
+ module HtmlProofer
+ priority = Jekyll::Hooks::PRIORITY_MAP[:high] + 1000
+
+ Jekyll::Hooks.register(:site, :post_write, priority: priority) do |site|
+ if not site.config["proofer"] == false
+ options = {
+ allow_missing_href: true,
+ enforce_https: false,
+ ignore_files: [/.*testbed.html/],
+ ignore_urls: [
+ /fonts\.gstatic\.com/,
+ /localhost:/,
+ /0\.0\.0\.0:/,
+ ],
+ }
+
+ begin
+ HTMLProofer.check_directory(site.dest, options).run
+ rescue Exception => error
+ STDERR.puts error
+ # raise error
+ end
+ end
+ end
+ end
end
Liquid::Template.register_filter(Jekyll::MiscFilters)
diff --git a/_posts/2023-02-23-example-post-3.md b/_posts/2023-02-23-example-post-3.md
index c7b1038d5b..0aa5a15377 100644
--- a/_posts/2023-02-23-example-post-3.md
+++ b/_posts/2023-02-23-example-post-3.md
@@ -1,5 +1,6 @@
---
title: Example post 3
+image: images/photo.jpg
author: john-doe
tags: biology, medicine
---
diff --git a/_scripts/anchors.js b/_scripts/anchors.js
index 904edf9c15..58daabcbea 100644
--- a/_scripts/anchors.js
+++ b/_scripts/anchors.js
@@ -6,7 +6,7 @@
const onLoad = () => {
// for each heading
const headings = document.querySelectorAll(
- "h1[id], h2[id], h3[id], h4[id]"
+ "h1[id], h2[id], h3[id], h4[id], h5[id], h6[id]"
);
for (const heading of headings) {
// create anchor link
diff --git a/_scripts/dark-mode.js b/_scripts/dark-mode.js
index b0124d94f2..b75b25eb24 100644
--- a/_scripts/dark-mode.js
+++ b/_scripts/dark-mode.js
@@ -3,12 +3,9 @@
*/
{
- // save/load user's dark mode preference from local storage
- const loadDark = () => window.localStorage.getItem("dark-mode") === "true";
- const saveDark = (value) => window.localStorage.setItem("dark-mode", value);
-
- // immediately load saved mode before page renders
- document.documentElement.dataset.dark = loadDark();
+ // immediately load saved (or default) mode before page renders
+ document.documentElement.dataset.dark =
+ window.localStorage.getItem("dark-mode") ?? "false";
const onLoad = () => {
// update toggle button to match loaded mode
@@ -23,6 +20,6 @@
window.onDarkToggleChange = (event) => {
const value = event.target.checked;
document.documentElement.dataset.dark = value;
- saveDark(value);
+ window.localStorage.setItem("dark-mode", value);
};
}
diff --git a/_scripts/table-wrap.js b/_scripts/table-wrap.js
new file mode 100644
index 0000000000..4c5bddd8c6
--- /dev/null
+++ b/_scripts/table-wrap.js
@@ -0,0 +1,25 @@
+/*
+ put a wrapper around each table to allow scrolling.
+*/
+
+{
+ const onLoad = () => {
+ // for each top-level table
+ const tables = document.querySelectorAll("table:not(table table)");
+ for (const table of tables) {
+ // create wrapper with scroll
+ const wrapper = document.createElement("div");
+ wrapper.style.overflowX = "auto";
+
+ // undo css force-text-wrap
+ table.style.overflowWrap = "normal";
+
+ // add wrapper around table
+ table.parentNode.insertBefore(wrapper, table);
+ wrapper.appendChild(table);
+ }
+ };
+
+ // after page loads
+ window.addEventListener("load", onLoad);
+}
diff --git a/_styles/-theme.scss b/_styles/-theme.scss
index 6ceff0f0da..0caecc6192 100644
--- a/_styles/-theme.scss
+++ b/_styles/-theme.scss
@@ -3,23 +3,25 @@
// colors
[data-dark="false"] {
- --primary: #0ea5e9;
+ --primary: #0795d9;
--secondary: #7dd3fc;
--text: #000000;
--background: #ffffff;
--background-alt: #fafafa;
--light-gray: #e0e0e0;
--gray: #808080;
+ --dark-gray: #404040;
--overlay: #00000020;
}
[data-dark="true"] {
- --primary: #0ea5e9;
+ --primary: #0795d9;
--secondary: #075985;
--text: #ffffff;
--background: #181818;
--background-alt: #1c1c1c;
--light-gray: #404040;
--gray: #808080;
+ --dark-gray: #b0b0b0;
--overlay: #ffffff10;
}
@@ -31,7 +33,6 @@
--code: "Roboto Mono", monospace;
// font sizes
- --medium: 1rem;
--large: 1.2rem;
--xl: 1.4rem;
--xxl: 1.6rem;
@@ -44,8 +45,10 @@
// text line spacing
--spacing: 2;
+ --compact: 1.5;
// effects
--rounded: 3px;
--shadow: 0 0 10px 0 var(--overlay);
+ --transition: 0.2s ease;
}
diff --git a/_styles/alert.scss b/_styles/alert.scss
index c789ad8061..6e77eec227 100644
--- a/_styles/alert.scss
+++ b/_styles/alert.scss
@@ -28,10 +28,10 @@
font-size: var(--large);
}
-.alert-content > *:first-child {
+.alert-content > :first-child {
margin-top: 0;
}
-.alert-content > *:last-child {
+.alert-content > :last-child {
margin-bottom: 0;
}
diff --git a/_styles/all.scss b/_styles/all.scss
index 3cceebd595..a8aeeaaaf1 100644
--- a/_styles/all.scss
+++ b/_styles/all.scss
@@ -1,7 +1,11 @@
---
---
-* {
+*,
+::before,
+::after {
box-sizing: border-box;
- transition: none 0.2s;
+ -moz-text-size-adjust: none;
+ -webkit-text-size-adjust: none;
+ text-size-adjust: none;
}
diff --git a/_styles/anchor.scss b/_styles/anchor.scss
index 96c1a87bb8..65c18d8d2c 100644
--- a/_styles/anchor.scss
+++ b/_styles/anchor.scss
@@ -11,10 +11,10 @@
opacity: 0;
font-size: 0.75em;
text-decoration: none;
- transition-property: opacity, color;
+ transition: opacity var(--transition), color var(--transition);
}
-*:hover > .anchor,
+:hover > .anchor,
.anchor:focus {
opacity: 1;
}
diff --git a/_styles/body.scss b/_styles/body.scss
index ef74897660..91ecffcfb4 100644
--- a/_styles/body.scss
+++ b/_styles/body.scss
@@ -1,18 +1,15 @@
---
---
-html,
body {
+ display: flex;
+ flex-direction: column;
margin: 0;
padding: 0;
min-height: 100vh;
background: var(--background);
color: var(--text);
font-family: var(--body);
-}
-
-body {
- display: flex;
- flex-direction: column;
text-align: center;
+ line-height: var(--compact);
}
diff --git a/_styles/button.scss b/_styles/button.scss
index 7b4122e461..ed497f0051 100644
--- a/_styles/button.scss
+++ b/_styles/button.scss
@@ -22,14 +22,13 @@ button {
background: var(--primary);
color: var(--background);
text-align: center;
+ font: inherit;
font-family: var(--heading);
font-weight: var(--semi-bold);
- line-height: 1;
text-decoration: none;
vertical-align: middle;
- -webkit-appearance: none;
appearance: none;
- transition-property: background, color;
+ transition: background var(--transition), color var(--transition);
}
.button:hover {
diff --git a/_styles/card.scss b/_styles/card.scss
index 57fe20df78..d95888e443 100644
--- a/_styles/card.scss
+++ b/_styles/card.scss
@@ -37,9 +37,8 @@
padding: 20px;
}
-.card-text > *,
-.card-text > .tags {
- margin: 0;
+.card-text > * {
+ margin: 0 !important;
}
.card-title {
@@ -48,6 +47,6 @@
}
.card-subtitle {
- margin-top: -15px;
+ margin-top: -10px !important;
font-style: italic;
}
diff --git a/_styles/citation.scss b/_styles/citation.scss
index 0bcda4452a..dc6c95e2a6 100644
--- a/_styles/citation.scss
+++ b/_styles/citation.scss
@@ -4,9 +4,13 @@
$thumb-size: 180px;
$wrap: 800px;
+.citation-container {
+ container-type: inline-size;
+}
+
.citation {
display: flex;
- margin: 15px 0;
+ margin: 20px 0;
border-radius: var(--rounded);
background: var(--background);
overflow: hidden;
@@ -32,7 +36,7 @@ $wrap: 800px;
position: relative;
display: inline-flex;
flex-wrap: wrap;
- gap: 15px;
+ gap: 10px;
max-width: 100%;
height: min-content;
padding: 20px;
@@ -47,7 +51,6 @@ $wrap: 800px;
.citation-details,
.citation-description {
width: 100%;
- line-height: calc(var(--spacing) - 0.4);
}
.citation-title {
@@ -64,6 +67,10 @@ $wrap: 800px;
z-index: -1;
}
+.citation-publisher {
+ text-transform: capitalize;
+}
+
.citation-description {
color: var(--gray);
}
@@ -84,7 +91,7 @@ $wrap: 800px;
margin: 0;
}
-@media (max-width: $wrap) {
+@container (max-width: #{$wrap}) {
.citation {
flex-direction: column;
}
diff --git a/_styles/code.scss b/_styles/code.scss
index 79ada5e085..4a50657eb9 100644
--- a/_styles/code.scss
+++ b/_styles/code.scss
@@ -13,7 +13,6 @@ code.highlighter-rouge {
padding: 2px 6px;
background: var(--light-gray);
border-radius: var(--rounded);
- line-height: calc(var(--spacing) - 0.2);
}
// code block
@@ -24,7 +23,6 @@ div.highlighter-rouge {
overflow-x: auto;
overflow-y: auto;
text-align: left;
- line-height: calc(var(--spacing) - 0.4);
div.highlight {
display: contents;
diff --git a/_styles/cols.scss b/_styles/cols.scss
index 7f5e9110ae..a3500b3ca2 100644
--- a/_styles/cols.scss
+++ b/_styles/cols.scss
@@ -18,11 +18,11 @@ $one: 500px;
min-height: 0;
}
-.cols > div > *:first-child {
+.cols > div > :first-child {
margin-top: 0 !important;
}
-.cols > div > *:last-child {
+.cols > div > :last-child {
margin-bottom: 0 !important;
}
diff --git a/_styles/dark-toggle.scss b/_styles/dark-toggle.scss
index 66d5906faf..ade9c05d9c 100644
--- a/_styles/dark-toggle.scss
+++ b/_styles/dark-toggle.scss
@@ -8,9 +8,8 @@
margin: 0;
border-radius: 999px;
background: var(--primary);
- -webkit-appearance: none;
appearance: none;
- transition-property: background;
+ transition: background var(--transition);
}
.dark-toggle:after {
@@ -23,7 +22,7 @@
font-family: "Font Awesome 6 Free";
font-weight: 900;
transform: translate(-50%, -50%);
- transition: left 0.2s;
+ transition: left var(--transition);
}
.dark-toggle:checked:after {
diff --git a/_styles/feature.scss b/_styles/feature.scss
index f304252924..3d2a53f94c 100644
--- a/_styles/feature.scss
+++ b/_styles/feature.scss
@@ -47,7 +47,7 @@ $wrap: 800px;
}
.feature-image {
- width: unset;
+ width: 100%;
max-width: calc($wrap / 2);
}
}
diff --git a/_styles/grid.scss b/_styles/grid.scss
index 21a3a3378e..8ff6d2ebb7 100644
--- a/_styles/grid.scss
+++ b/_styles/grid.scss
@@ -49,6 +49,6 @@ $one: 500px;
}
}
-.grid > *:where(h1, h2, h3, h4) {
+.grid > :where(h1, h2, h3, h4, h5, h6) {
display: none;
}
diff --git a/_styles/header.scss b/_styles/header.scss
index 4d2519927d..045e29354f 100644
--- a/_styles/header.scss
+++ b/_styles/header.scss
@@ -46,7 +46,7 @@ header a {
height: 100%;
}
-.title {
+.title-text {
display: flex;
justify-content: flex-start;
align-items: baseline;
@@ -57,13 +57,11 @@ header a {
text-align: left;
}
-// main title
-.title > *:first-child {
+.title {
font-size: var(--large);
}
-// subtitle
-.title > *:last-child {
+.subtitle {
opacity: 0.65;
font-weight: var(--thin);
}
@@ -75,9 +73,8 @@ header a {
height: 30px;
margin: 0;
color: var(--text);
- -webkit-appearance: none;
appearance: none;
- transition-property: background;
+ transition: background var(--transition);
}
.nav-toggle:after {
@@ -153,17 +150,17 @@ header[data-big] {
height: $logo-big;
}
- .title {
+ .title-text {
flex-direction: column;
align-items: center;
text-align: center;
}
- .title > *:first-child {
+ .title {
font-size: var(--xxl);
}
- .title > *:last-child {
+ .subtitle {
font-size: var(--large);
}
}
diff --git a/_styles/heading.scss b/_styles/heading.scss
index e02dc47cd2..2ea35a4289 100644
--- a/_styles/heading.scss
+++ b/_styles/heading.scss
@@ -4,45 +4,47 @@
h1,
h2,
h3,
-h4 {
+h4,
+h5,
+h6 {
+ margin: 40px 0 20px 0;
font-family: var(--heading);
- line-height: calc(var(--spacing) - 0.2);
+ font-weight: var(--semi-bold);
+ text-align: left;
+ letter-spacing: 1px;
}
h1 {
- margin: 40px 0 20px 0;
- font-size: var(--xxl);
+ font-size: 1.6rem;
font-weight: var(--regular);
- letter-spacing: 1px;
text-transform: uppercase;
- text-align: left;
+ text-align: center;
}
h2 {
- margin: 40px 0 20px 0;
+ font-size: 1.6rem;
padding-bottom: 5px;
border-bottom: solid 1px var(--light-gray);
- font-size: var(--xl);
font-weight: var(--regular);
- letter-spacing: 1px;
- text-align: left;
}
h3 {
- margin: 40px 0 20px 0;
- font-size: var(--large);
- font-weight: var(--semi-bold);
- text-align: left;
+ font-size: 1.5rem;
}
h4 {
- margin: 40px 0 20px 0;
- font-size: var(--medium);
- font-weight: var(--semi-bold);
- text-align: left;
+ font-size: 1.3rem;
+}
+
+h5 {
+ font-size: 1.15rem;
+}
+
+h6 {
+ font-size: 1rem;
}
-:where(h1, h2, h3, h4) > .icon {
+:where(h1, h2, h3, h4, h5, h6) > .icon {
margin-right: 1em;
color: var(--light-gray);
}
diff --git a/_styles/link.scss b/_styles/link.scss
index 7d1fb844d0..41230d38b7 100644
--- a/_styles/link.scss
+++ b/_styles/link.scss
@@ -3,7 +3,7 @@
a {
color: var(--primary);
- transition-property: color;
+ transition: color var(--transition);
overflow-wrap: break-word;
}
diff --git a/_styles/list.scss b/_styles/list.scss
index e90094fe13..d769a6a38a 100644
--- a/_styles/list.scss
+++ b/_styles/list.scss
@@ -16,4 +16,9 @@ li {
padding-left: 10px;
text-align: justify;
line-height: var(--spacing);
+
+ ul,
+ ol {
+ margin: 0;
+ }
}
diff --git a/_styles/portrait.scss b/_styles/portrait.scss
index 50849f355b..fa0c03960b 100644
--- a/_styles/portrait.scss
+++ b/_styles/portrait.scss
@@ -48,7 +48,6 @@
.portrait-text {
display: flex;
flex-direction: column;
- line-height: calc(var(--spacing) - 0.4);
}
.portrait-name {
@@ -63,7 +62,7 @@
display: flex;
justify-content: center;
align-items: center;
- width: 20%;
+ width: calc(20px + 10%);
aspect-ratio: 1 / 1;
border-radius: 999px;
background: var(--background);
diff --git a/_styles/post-excerpt.scss b/_styles/post-excerpt.scss
index 6e57a105ce..27c7a1dc1b 100644
--- a/_styles/post-excerpt.scss
+++ b/_styles/post-excerpt.scss
@@ -1,31 +1,69 @@
---
---
+$thumb-size: 200px;
+$wrap: 800px;
+
+.post-excerpt-container {
+ container-type: inline-size;
+}
+
.post-excerpt {
display: flex;
- flex-wrap: wrap;
- gap: 20px;
margin: 20px 0;
- padding: 20px 30px;
border-radius: var(--rounded);
background: var(--background);
- text-align: left;
+ overflow: hidden;
box-shadow: var(--shadow);
}
-.post-excerpt > * {
+.post-excerpt-image {
+ position: relative;
+ width: $thumb-size;
+ flex-shrink: 0;
+ // box-shadow: var(--shadow);
+}
+
+.post-excerpt-image img {
+ position: absolute;
+ inset: 0;
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+}
+
+.post-excerpt-text {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 20px;
+ padding: 20px 30px;
+ text-align: left;
+}
+
+.post-excerpt-text > * {
margin: 0 !important;
}
-.post-excerpt > a:first-child {
+.post-excerpt-text > a:first-child {
width: 100%;
font-weight: var(--semi-bold);
}
-.post-excerpt > div {
+.post-excerpt-text > div {
justify-content: flex-start;
}
-.post-excerpt > p {
+.post-excerpt-text > p {
width: 100%;
}
+
+@container (max-width: #{$wrap}) {
+ .post-excerpt {
+ flex-direction: column;
+ }
+
+ .post-excerpt-image {
+ width: unset;
+ height: $thumb-size;
+ }
+}
diff --git a/_styles/post-info.scss b/_styles/post-info.scss
index 4c8eaaab01..65c86cbca2 100644
--- a/_styles/post-info.scss
+++ b/_styles/post-info.scss
@@ -8,7 +8,7 @@
flex-wrap: wrap;
gap: 20px;
margin: 20px 0;
- color: var(--gray);
+ color: var(--dark-gray);
}
.post-info .portrait {
diff --git a/_styles/post-nav.scss b/_styles/post-nav.scss
index 2fba2fc2db..40b5dd170a 100644
--- a/_styles/post-nav.scss
+++ b/_styles/post-nav.scss
@@ -9,22 +9,21 @@ $wrap: 600px;
align-items: flex-start;
gap: 10px;
color: var(--gray);
- line-height: calc(var(--spacing) - 0.4);
}
-.post-nav > *:first-child {
+.post-nav > :first-child {
text-align: left;
}
-.post-nav > *:last-child {
+.post-nav > :last-child {
text-align: right;
}
-.post-nav > *:first-child .icon {
+.post-nav > :first-child .icon {
margin-right: 0.5em;
}
-.post-nav > *:last-child .icon {
+.post-nav > :last-child .icon {
margin-left: 0.5em;
}
diff --git a/_styles/quote.scss b/_styles/quote.scss
index e6dcb45de5..68b2f3a4c0 100644
--- a/_styles/quote.scss
+++ b/_styles/quote.scss
@@ -7,10 +7,10 @@ blockquote {
border-left: solid 4px var(--light-gray);
}
-blockquote > *:first-child {
+blockquote > :first-child {
margin-top: 0;
}
-blockquote > *:last-child {
+blockquote > :last-child {
margin-bottom: 0;
}
diff --git a/_styles/section.scss b/_styles/section.scss
index bc3e564605..332deb65d5 100644
--- a/_styles/section.scss
+++ b/_styles/section.scss
@@ -6,7 +6,7 @@ $padding: 40px;
section {
padding: $padding max($padding, calc((100% - $page) / 2));
- transition-property: background, color;
+ transition: background var(--transition), color var(--transition);
}
section[data-size="wide"] {
diff --git a/_styles/table.scss b/_styles/table.scss
index c5736ef002..995c700235 100644
--- a/_styles/table.scss
+++ b/_styles/table.scss
@@ -1,14 +1,10 @@
---
---
-.table-wrapper {
- margin: 40px 0;
- overflow-x: auto;
-}
-
table {
- margin: 0 auto;
+ margin: 40px auto;
border-collapse: collapse;
+ overflow-wrap: anywhere;
}
th {
diff --git a/_styles/tags.scss b/_styles/tags.scss
index 932b7ed889..4e98207fa9 100644
--- a/_styles/tags.scss
+++ b/_styles/tags.scss
@@ -2,7 +2,7 @@
---
.tags {
- display: inline-flex;
+ display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
@@ -22,7 +22,7 @@
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
- transition-property: background, color;
+ transition: background var(--transition), color var(--transition);
}
.tag:hover {
diff --git a/_styles/textbox.scss b/_styles/textbox.scss
index 07bc0128e6..6d33cedc6a 100644
--- a/_styles/textbox.scss
+++ b/_styles/textbox.scss
@@ -12,7 +12,6 @@ input[type="text"] {
color: var(--text);
font-family: inherit;
font-size: inherit;
- -webkit-appearance: none;
appearance: none;
box-shadow: var(--shadow);
}
diff --git a/testbed.md b/testbed.md
index 3c95e91bb7..6b343a5eca 100644
--- a/testbed.md
+++ b/testbed.md
@@ -36,10 +36,16 @@ Text with extra blank lines above and below
- list item a
- list item b
- list item c
-
+
1. ordered list item 1
-2. ordered list item 2
-3. ordered list item 3
+1. ordered list item 2
+1. ordered list item 3
+
+
+
+1. top level list item
+ - nested list item
+ 1. even deeper nested list item
Plain image:
@@ -61,6 +67,14 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor i
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+##### Heading 5
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+
+###### Heading 6
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+
---
| TABLE | Game 1 | Game 2 | Game 3 | Total |
@@ -340,7 +354,7 @@ With figure components
### Grid of citations
{% capture content %}
-{% include list.html data="citations" component="citation" %}
+{% include list.html data="citations" component="citation" style="rich" %}
{% endcapture %}
{% include grid.html content=content %}
+
+ {% endif %}
-