diff options
Diffstat (limited to 'templates')
| -rw-r--r-- | templates/head.html | 6 | ||||
| -rw-r--r-- | templates/header.html | 18 | ||||
| -rw-r--r-- | templates/index.html | 41 | ||||
| -rw-r--r-- | templates/pico.min.css | 888 | ||||
| -rw-r--r-- | templates/post.html | 13 | ||||
| -rw-r--r-- | templates/simple_header.html | 12 |
6 files changed, 942 insertions, 36 deletions
diff --git a/templates/head.html b/templates/head.html new file mode 100644 index 0000000..cc1bdb8 --- /dev/null +++ b/templates/head.html @@ -0,0 +1,6 @@ +<meta charset="UTF-8"> +<meta name="viewport" content="width=device-width, initial-scale=1"> +<title>Yet Another Blog</title> +<style> + <% include!("pico.min.css"); %> +</style> diff --git a/templates/header.html b/templates/header.html new file mode 100644 index 0000000..e55cebe --- /dev/null +++ b/templates/header.html @@ -0,0 +1,18 @@ +<header class="container"> + <nav class="container-fluid"> + <ul> + <li><strong>Yet Another Blog</strong></li> + </ul> + <ul> + <li><a class="secondary">Posts</a></li> + <li><a class="secondary">Projects</a></li> + <li><a class="secondary">Resume</a></li> + </ul> + </nav> + <hgroup> + <h2> + A gathering of information about some things I do on my spare time. You can find me on gitlab , twitter and + linkedin . + </h2> + </hgroup> +</header> diff --git a/templates/index.html b/templates/index.html index 90826de..3558e06 100644 --- a/templates/index.html +++ b/templates/index.html @@ -1,49 +1,18 @@ <!DOCTYPE html> <html data-theme="light" lang="en"> <head> - <meta charset="UTF-8"> - <meta name="viewport" content="width=device-width, initial-scale=1"> - <title>Yet Another Blog</title> - <style> - <%- pico %> - </style> + <% include!("head.html"); %> </head> <body> -<header class="container"> - <nav class="container-fluid"> - <ul> - <li><strong>Yet Another Blog</strong></li> - </ul> - <ul> - <li><a class="secondary">Posts</a></li> - <li><a class="secondary">Projects</a></li> - <li><a class="secondary">Resume</a></li> - </ul> - </nav> - <hgroup> - <h2> - A gathering of information about some things I do on my spare time. You can find me on gitlab , twitter and - linkedin . - </h2> - </hgroup> -</header> - +<% include!("header.html"); %> <main class="container"> <section> <ul> - <li><a>K8S private gitlab registry using podman</a></li> - <li><a>K8S private gitlab registry using podman</a></li> + <% for p in &posts { %> + <li><a href="/post/<%- p.0 %>"><%- p.1 %></a></li> + <% } %> </ul> </section> - <section> - <h2>Title</h2> - <p> - Nice content - <code> - My code here - </code> - </p> - </section> </main> </body> </html>
\ No newline at end of file diff --git a/templates/pico.min.css b/templates/pico.min.css new file mode 100644 index 0000000..1179471 --- /dev/null +++ b/templates/pico.min.css @@ -0,0 +1,888 @@ +@charset "UTF-8"; +:root { + --font-family: system-ui, -apple-system, "Segoe UI", "Roboto", "Ubuntu", "Cantarell", "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + --line-height: 1.5; + --font-weight: 400; + --font-size: 16px; + --border-radius: 0.25rem; + --border-width: 1px; + --outline-width: 3px; + --spacing: 1rem; + --typography-spacing-vertical: 1.5rem; + --block-spacing-vertical: calc(var(--spacing) * 2); + --block-spacing-horizontal: var(--spacing); + --grid-spacing-vertical: 0; + --grid-spacing-horizontal: var(--spacing); + --form-element-spacing-vertical: 0.75rem; + --form-element-spacing-horizontal: 1rem; + --nav-element-spacing-vertical: 1rem; + --nav-element-spacing-horizontal: 0.5rem; + --nav-link-spacing-vertical: 0.5rem; + --nav-link-spacing-horizontal: 0.5rem; + --form-label-font-weight: var(--font-weight); + --transition: 0.2s ease-in-out +} + +@media (min-width: 576px) { + :root { + --font-size: 17px + } +} + +@media (min-width: 768px) { + :root { + --font-size: 18px + } +} + +@media (min-width: 992px) { + :root { + --font-size: 19px + } +} + +@media (min-width: 1200px) { + :root { + --font-size: 20px + } +} + +@media (min-width: 576px) { + body > footer, body > header, body > main, section { + --block-spacing-vertical: calc(var(--spacing) * 2.5) + } +} + +@media (min-width: 768px) { + body > footer, body > header, body > main, section { + --block-spacing-vertical: calc(var(--spacing) * 3) + } +} + +@media (min-width: 992px) { + body > footer, body > header, body > main, section { + --block-spacing-vertical: calc(var(--spacing) * 3.5) + } +} + +@media (min-width: 1200px) { + body > footer, body > header, body > main, section { + --block-spacing-vertical: calc(var(--spacing) * 4) + } +} + +@media (min-width: 576px) { + article { + --block-spacing-horizontal: calc(var(--spacing) * 1.25) + } +} + +@media (min-width: 768px) { + article { + --block-spacing-horizontal: calc(var(--spacing) * 1.5) + } +} + +@media (min-width: 992px) { + article { + --block-spacing-horizontal: calc(var(--spacing) * 1.75) + } +} + +@media (min-width: 1200px) { + article { + --block-spacing-horizontal: calc(var(--spacing) * 2) + } +} + +a { + --text-decoration: none +} + +h1, h2, h3, h4, h5, h6 { + --font-weight: 700 +} + +h1 { + --font-size: 2rem; + --typography-spacing-vertical: 3rem +} + +h2 { + --font-size: 1.75rem; + --typography-spacing-vertical: 2.625rem +} + +h3 { + --font-size: 1.5rem; + --typography-spacing-vertical: 2.25rem +} + +h4 { + --font-size: 1.25rem; + --typography-spacing-vertical: 1.874rem +} + +h5 { + --font-size: 1.125rem; + --typography-spacing-vertical: 1.6875rem +} + +:root:not([data-theme=dark]), [data-theme=light] { + color-scheme: light; + --background-color: #fff; + --color: #415462; + --h1-color: #1b2832; + --h2-color: #24333e; + --h3-color: #2c3d49; + --h4-color: #374956; + --h5-color: #415462; + --h6-color: #4d606d; + --muted-color: #73828c; + --muted-border-color: #edf0f3; + --primary: #1095c1; + --primary-hover: #08769b; + --primary-focus: rgba(16, 149, 193, 0.125); + --primary-inverse: #fff; + --secondary: #596b78; + --secondary-hover: #415462; + --secondary-focus: rgba(89, 107, 120, 0.125); + --secondary-inverse: #fff; + --contrast: #1b2832; + --contrast-hover: #000; + --contrast-focus: rgba(89, 107, 120, 0.125); + --contrast-inverse: #fff; + --mark-background-color: #fff2ca; + --mark-color: #543a26; + --ins-color: #388e3c; + --del-color: #c62828; + --blockquote-border-color: var(--muted-border-color); + --blockquote-footer-color: var(--muted-color); + --button-box-shadow: 0 0 0 rgba(0, 0, 0, 0); + --button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0); + --form-element-background-color: transparent; + --form-element-border-color: #a2afb9; + --form-element-color: var(--color); + --form-element-placeholder-color: var(--muted-color); + --form-element-active-background-color: transparent; + --form-element-active-border-color: var(--primary); + --form-element-focus-color: var(--primary-focus); + --form-element-disabled-background-color: #d5dce2; + --form-element-disabled-border-color: #a2afb9; + --form-element-disabled-opacity: 0.5; + --form-element-invalid-border-color: #c62828; + --form-element-invalid-active-border-color: #d32f2f; + --form-element-invalid-focus-color: rgba(211, 47, 47, 0.125); + --form-element-valid-border-color: #388e3c; + --form-element-valid-active-border-color: #43a047; + --form-element-valid-focus-color: rgba(67, 160, 71, 0.125); + --switch-background-color: #bbc6ce; + --switch-color: var(--primary-inverse); + --switch-checked-background-color: var(--primary); + --range-border-color: #d5dce2; + --range-active-border-color: #bbc6ce; + --range-thumb-border-color: var(--background-color); + --range-thumb-color: var(--secondary); + --range-thumb-hover-color: var(--secondary-hover); + --range-thumb-active-color: var(--primary); + --table-border-color: var(--muted-border-color); + --table-row-stripped-background-color: #f6f8f9; + --code-background-color: #edf0f3; + --code-color: var(--muted-color); + --code-kbd-background-color: var(--contrast); + --code-kbd-color: var(--contrast-inverse); + --code-tag-color: #b34d80; + --code-property-color: #3d888f; + --code-value-color: #998866; + --code-comment-color: #a2afb9; + --accordion-border-color: var(--muted-border-color); + --accordion-close-summary-color: var(--color); + --accordion-open-summary-color: var(--muted-color); + --card-background-color: var(--background-color); + --card-border-color: var(--muted-border-color); + --card-box-shadow: 0 0.125rem 1rem rgba(27, 40, 50, 0.04), 0 0.125rem 2rem rgba(27, 40, 50, 0.08), 0 0 0 0.0625rem rgba(27, 40, 50, 0.024); + --card-sectionning-background-color: #fbfbfc; + --dropdown-background-color: #fbfbfc; + --dropdown-border-color: #e1e6eb; + --dropdown-box-shadow: var(--card-box-shadow); + --dropdown-color: var(--color); + --dropdown-hover-background-color: #edf0f3; + --modal-overlay-background-color: rgba(213, 220, 226, 0.8); + --progress-background-color: #d5dce2; + --progress-color: var(--primary); + --loading-spinner-opacity: 0.5; + --tooltip-background-color: var(--contrast); + --tooltip-color: var(--contrast-inverse); + --icon-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); + --icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(65, 84, 98, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); + --icon-chevron-button: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(255, 255, 255, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); + --icon-chevron-button-inverse: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(255, 255, 255, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); + --icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E"); + --icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(65, 84, 98, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E"); + --icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(198, 40, 40, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E"); + --icon-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E"); + --icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(65, 84, 98, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E"); + --icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(65, 84, 98, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E"); + --icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(56, 142, 60, 0.999)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E") +} + +*, ::after, ::before { + box-sizing: border-box; + background-repeat: no-repeat +} + +::after, ::before { + text-decoration: inherit; + vertical-align: inherit +} + +:where(:root) { + -webkit-tap-highlight-color: transparent; + -webkit-text-size-adjust: 100%; + -moz-text-size-adjust: 100%; + text-size-adjust: 100%; + text-rendering: optimizeLegibility; + background-color: var(--background-color); + color: var(--color); + font-weight: var(--font-weight); + font-size: var(--font-size); + line-height: var(--line-height); + font-family: var(--font-family); + overflow-wrap: break-word; + cursor: default; + -moz-tab-size: 4; + -o-tab-size: 4; + tab-size: 4 +} + +main { + display: block +} + +body { + width: 100%; + margin: 0 +} + +body > footer, body > header, body > main { + width: 100%; + margin-right: auto; + margin-left: auto; + padding: 1rem +} + +.container, .container-fluid { + width: 100%; + margin-right: auto; + margin-left: auto; + padding-right: var(--spacing); + padding-left: var(--spacing) +} + +@media (min-width: 576px) { + .container { + max-width: 510px; + padding-right: 0; + padding-left: 0 + } +} + +@media (min-width: 768px) { + .container { + max-width: 700px + } +} + +@media (min-width: 992px) { + .container { + max-width: 800px + } +} + +section { + margin-bottom: var(--block-spacing-vertical) +} + +.grid { + grid-column-gap: var(--grid-spacing-horizontal); + grid-row-gap: var(--grid-spacing-vertical); + display: grid; + grid-template-columns:1fr; + margin: 0 +} + +@media (min-width: 992px) { + .grid { + grid-template-columns:repeat(auto-fit, minmax(0%, 1fr)) + } +} + +.grid > * { + min-width: 0 +} + +b, strong { + font-weight: bolder +} + +address, blockquote, dl, figure, form, ol, p, pre, table, ul { + margin-top: 0; + margin-bottom: var(--typography-spacing-vertical); + color: var(--color); + font-style: normal; + font-weight: var(--font-weight); + font-size: var(--font-size) +} + +[role=link], a { + --color: var(--primary); + --background-color: transparent; + outline: 0; + background-color: var(--background-color); + color: var(--color); + -webkit-text-decoration: var(--text-decoration); + text-decoration: var(--text-decoration); + transition: background-color var(--transition), color var(--transition), box-shadow var(--transition), -webkit-text-decoration var(--transition); + transition: background-color var(--transition), color var(--transition), text-decoration var(--transition), box-shadow var(--transition); + transition: background-color var(--transition), color var(--transition), text-decoration var(--transition), box-shadow var(--transition), -webkit-text-decoration var(--transition) +} + +[role=link]:is([aria-current],:hover,:active,:focus), a:is([aria-current],:hover,:active,:focus) { + --color: var(--primary-hover); + --text-decoration: underline +} + +[role=link]:focus, a:focus { + --background-color: var(--primary-focus) +} + +[role=link].secondary, a.secondary { + --color: var(--secondary) +} + +[role=link].secondary:is([aria-current],:hover,:active,:focus), a.secondary:is([aria-current],:hover,:active,:focus) { + --color: var(--secondary-hover) +} + +[role=link].secondary:focus, a.secondary:focus { + --background-color: var(--secondary-focus) +} + +[role=link].contrast, a.contrast { + --color: var(--contrast) +} + +[role=link].contrast:is([aria-current],:hover,:active,:focus), a.contrast:is([aria-current],:hover,:active,:focus) { + --color: var(--contrast-hover) +} + +[role=link].contrast:focus, a.contrast:focus { + --background-color: var(--contrast-focus) +} + +h1, h2, h3, h4, h5, h6 { + margin-top: 0; + margin-bottom: var(--typography-spacing-vertical); + color: var(--color); + font-weight: var(--font-weight); + font-size: var(--font-size); + font-family: var(--font-family) +} + +h1 { + --color: var(--h1-color) +} + +h2 { + --color: var(--h2-color) +} + +h3 { + --color: var(--h3-color) +} + +h4 { + --color: var(--h4-color) +} + +h5 { + --color: var(--h5-color) +} + +h6 { + --color: var(--h6-color) +} + +:where(address,blockquote,dl,figure,form,ol,p,pre,table,ul) ~ :is(h1,h2,h3,h4,h5,h6) { + margin-top: var(--typography-spacing-vertical) +} + +.headings, hgroup { + margin-bottom: var(--typography-spacing-vertical) +} + +.headings > *, hgroup > * { + margin-bottom: 0 +} + +.headings > :last-child, hgroup > :last-child { + --color: var(--muted-color); + --font-weight: unset; + font-size: 1rem; + font-family: unset +} + +p { + margin-bottom: var(--typography-spacing-vertical) +} + +:where(dl,ol,ul) { + padding-right: 0; + padding-left: var(--spacing); + -webkit-padding-start: var(--spacing); + padding-inline-start: var(--spacing); + -webkit-padding-end: 0; + padding-inline-end: 0 +} + +:where(dl,ol,ul) li { + margin-bottom: calc(var(--typography-spacing-vertical) * .25) +} + +:where(dl,ol,ul):is(dl,ol,ul) { + margin: calc(var(--typography-spacing-vertical) * .25) 0 0 +} + +ul li { + list-style: none +} + +mark { + padding: 0.125rem 0.25rem; + background-color: var(--mark-background-color); + color: var(--mark-color); + vertical-align: baseline +} + +abbr[title] { + border-bottom: 1px dotted; + text-decoration: none; + cursor: help +} + +::-moz-selection { + background-color: var(--primary-focus) +} + +::selection { + background-color: var(--primary-focus) +} + +:where(audio,canvas,iframe,img,svg,video) { + vertical-align: middle +} + +legend { + max-width: 100%; + padding: 0; + color: inherit; + white-space: normal +} + +::-webkit-inner-spin-button, ::-webkit-outer-spin-button { + height: auto +} + +fieldset legend, label { + display: block; + margin-bottom: calc(var(--spacing) * .25); + font-weight: var(--form-label-font-weight, var(--font-weight)) +} + +[type=color]::-webkit-color-swatch-wrapper { + padding: 0 +} + +code, kbd, pre, samp { + font-size: 0.875em; + font-family: var(--font-family) +} + +pre { + -ms-overflow-style: scrollbar; + overflow: auto +} + +code, kbd, pre { + border-radius: var(--border-radius); + background: var(--code-background-color); + color: var(--code-color); + font-weight: var(--font-weight); + line-height: initial +} + +code, kbd { + display: inline-block; + padding: 0.375rem 0.5rem +} + +pre { + display: block; + margin-bottom: var(--spacing); + overflow-x: auto +} + +pre > code { + display: block; + padding: var(--spacing); + background: 0 0; + font-size: 14px; + line-height: var(--line-height) +} + +code b { + color: var(--code-tag-color); + font-weight: var(--font-weight) +} + +code i { + color: var(--code-property-color); + font-style: normal +} + +code u { + color: var(--code-value-color); + text-decoration: none +} + +code em { + color: var(--code-comment-color); + font-style: normal +} + +kbd { + background-color: var(--code-kbd-background-color); + color: var(--code-kbd-color); + vertical-align: baseline +} + +hr { + height: 0; + border: 0; + border-top: 1px solid var(--muted-border-color); + color: inherit +} + +[hidden], template { + display: none !important +} + +article { + margin: var(--block-spacing-vertical) 0; + padding: var(--block-spacing-vertical) var(--block-spacing-horizontal); + border-radius: var(--border-radius); + background: var(--card-background-color); + box-shadow: var(--card-box-shadow) +} + +article > footer, article > header { + margin-right: calc(var(--block-spacing-horizontal) * -1); + margin-left: calc(var(--block-spacing-horizontal) * -1); + padding: calc(var(--block-spacing-vertical) * .66) var(--block-spacing-horizontal); + background-color: var(--card-sectionning-background-color) +} + +article > header { + margin-top: calc(var(--block-spacing-vertical) * -1); + margin-bottom: var(--block-spacing-vertical); + border-bottom: var(--border-width) solid var(--card-border-color) +} + +article > footer { + margin-top: var(--block-spacing-vertical); + margin-bottom: calc(var(--block-spacing-vertical) * -1); + border-top: var(--border-width) solid var(--card-border-color) +} + +:root { + --scrollbar-width: 0 +} + +dialog article { + max-height: calc(100vh - var(--spacing) * 2); + overflow: auto +} + +@media (min-width: 576px) { + dialog article { + max-width: 510px + } +} + +@media (min-width: 768px) { + dialog article { + max-width: 700px + } +} + +dialog article > footer, dialog article > header { + padding: calc(var(--block-spacing-vertical) * .5) var(--block-spacing-horizontal) +} + +dialog article > header .close { + margin: 0 0 0 var(--spacing); + float: right +} + +dialog article > footer { + text-align: right +} + +dialog article > footer [role=button] { + margin-bottom: 0 +} + +dialog article > footer [role=button]:not(:first-of-type) { + margin-left: calc(var(--spacing) * .5) +} + +dialog article p:last-of-type { + margin: 0 +} + +dialog article .close { + display: block; + width: 1rem; + height: 1rem; + margin-top: calc(var(--block-spacing-vertical) * -.5); + margin-bottom: var(--typography-spacing-vertical); + margin-left: auto; + background-image: var(--icon-close); + background-position: center; + background-size: auto 1rem; + background-repeat: no-repeat; + opacity: 0.5; + transition: opacity var(--transition) +} + +dialog article .close:is([aria-current],:hover,:active,:focus) { + opacity: 1 +} + +dialog:not([open]), dialog[open=false] { + display: none +} + +.modal-is-open { + padding-right: var(--scrollbar-width, 0); + overflow: hidden; + pointer-events: none +} + +.modal-is-open dialog { + pointer-events: auto +} + +:where(.modal-is-opening,.modal-is-closing) dialog, :where(.modal-is-opening,.modal-is-closing) dialog > article { + -webkit-animation-duration: 0.2s; + animation-duration: 0.2s; + -webkit-animation-timing-function: ease-in-out; + animation-timing-function: ease-in-out; + -webkit-animation-fill-mode: both; + animation-fill-mode: both +} + +:where(.modal-is-opening,.modal-is-closing) dialog { + -webkit-animation-duration: 0.8s; + animation-duration: 0.8s; + -webkit-animation-name: fadeIn; + animation-name: fadeIn +} + +:where(.modal-is-opening,.modal-is-closing) dialog > article { + -webkit-animation-delay: 0.2s; + animation-delay: 0.2s; + -webkit-animation-name: slideInDown; + animation-name: slideInDown +} + +.modal-is-closing dialog, .modal-is-closing dialog > article { + -webkit-animation-delay: 0s; + animation-delay: 0s; + animation-direction: reverse +} + +:where(nav li)::before { + float: left; + content: "" +} + +nav, nav ul { + display: flex +} + +nav { + justify-content: space-between +} + +nav ol, nav ul { + align-items: center; + margin-bottom: 0; + padding: 0; + list-style: none +} + +nav ol:first-of-type, nav ul:first-of-type { + margin-left: calc(var(--nav-element-spacing-horizontal) * -1) +} + +nav ol:last-of-type, nav ul:last-of-type { + margin-right: calc(var(--nav-element-spacing-horizontal) * -1) +} + +nav li { + display: inline-block; + margin: 0; + padding: var(--nav-element-spacing-vertical) var(--nav-element-spacing-horizontal) +} + +nav li > * { + --spacing: 0 +} + +nav:where(a,[role=link]) { + display: inline-block; + margin: calc(var(--nav-link-spacing-vertical) * -1) calc(var(--nav-link-spacing-horizontal) * -1); + padding: var(--nav-link-spacing-vertical) var(--nav-link-spacing-horizontal); + border-radius: var(--border-radius); + text-decoration: none +} + +nav:where(a,[role=link]):is([aria-current],:hover,:active,:focus) { + text-decoration: none +} + +nav [role=button] { + margin-right: inherit; + margin-left: inherit; + padding: var(--nav-link-spacing-vertical) var(--nav-link-spacing-horizontal) +} + +details[role=list], li[role=list] { + position: relative +} + +details[role=list] summary + ul, li[role=list] > ul { + display: flex; + z-index: 99; + position: absolute; + top: auto; + right: 0; + left: 0; + flex-direction: column; + margin: 0; + padding: 0; + border: var(--border-width) solid var(--dropdown-border-color); + border-radius: var(--border-radius); + border-top-right-radius: 0; + border-top-left-radius: 0; + background-color: var(--dropdown-background-color); + box-shadow: var(--card-box-shadow); + color: var(--dropdown-color); + white-space: nowrap +} + +details[role=list] summary + ul li, li[role=list] > ul li { + width: 100%; + margin-bottom: 0; + padding: calc(var(--form-element-spacing-vertical) * .5) var(--form-element-spacing-horizontal); + list-style: none +} + +details[role=list] summary + ul li:first-of-type, li[role=list] > ul li:first-of-type { + margin-top: calc(var(--form-element-spacing-vertical) * .5) +} + +details[role=list] summary + ul li:last-of-type, li[role=list] > ul li:last-of-type { + margin-bottom: calc(var(--form-element-spacing-vertical) * .5) +} + +details[role=list] summary + ul li a, li[role=list] > ul li a { + display: block; + margin: calc(var(--form-element-spacing-vertical) * -.5) calc(var(--form-element-spacing-horizontal) * -1); + padding: calc(var(--form-element-spacing-vertical) * .5) var(--form-element-spacing-horizontal); + overflow: hidden; + color: var(--dropdown-color); + text-decoration: none; + text-overflow: ellipsis +} + +details[role=list] summary + ul li a:hover, li[role=list] > ul li a:hover { + background-color: var(--dropdown-hover-background-color) +} + +details[role=list] summary::after, li[role=list] > a::after { + display: block; + width: 1rem; + height: calc(1rem * var(--line-height, 1.5)); + -webkit-margin-start: 0.5rem; + margin-inline-start: 0.5rem; + float: right; + transform: rotate(0); + background-position: right center; + background-size: 1rem auto; + background-repeat: no-repeat; + content: "" +} + +nav details[role=list] summary + ul, nav li[role=list] > ul { + min-width: -webkit-fit-content; + min-width: -moz-fit-content; + min-width: fit-content; + border-radius: var(--border-radius) +} + +nav details[role=list] summary + ul li a, nav li[role=list] > ul li a { + border-radius: 0 +} + +nav details[role=list] summary, nav details[role=list] summary:not([role]) { + height: auto; + padding: var(--nav-link-spacing-vertical) var(--nav-link-spacing-horizontal) +} + +nav details[role=list][open] summary { + border-radius: var(--border-radius) +} + +nav details[role=list] summary + ul { + margin-top: var(--outline-width); + -webkit-margin-start: 0; + margin-inline-start: 0 +} + +nav details[role=list] summary[role=link] { + margin-bottom: calc(var(--nav-link-spacing-vertical) * -1); + line-height: var(--line-height) +} + +nav details[role=list] summary[role=link] + ul { + margin-top: calc(var(--nav-link-spacing-vertical) + var(--outline-width)); + -webkit-margin-start: calc(var(--nav-link-spacing-horizontal) * -1); + margin-inline-start: calc(var(--nav-link-spacing-horizontal) * -1) +} + +li[role=list] a:active ~ ul, li[role=list] a:focus ~ ul, li[role=list]:hover > ul { + display: flex +} + +li[role=list] > ul { + display: none; + margin-top: calc(var(--nav-link-spacing-vertical) + var(--outline-width)); + -webkit-margin-start: calc(var(--nav-element-spacing-horizontal) - var(--nav-link-spacing-horizontal)); + margin-inline-start: calc(var(--nav-element-spacing-horizontal) - var(--nav-link-spacing-horizontal)) +} + +li[role=list] > a::after { + background-image: var(--icon-chevron) +} diff --git a/templates/post.html b/templates/post.html new file mode 100644 index 0000000..68211c1 --- /dev/null +++ b/templates/post.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<html data-theme="light" lang="en"> +<head> + <% include!("head.html"); %> +</head> +<body> +<% include!("simple_header.html"); %> +<main class="container"> + <%- content %> +</section> +</main> +</body> +</html> diff --git a/templates/simple_header.html b/templates/simple_header.html new file mode 100644 index 0000000..0132334 --- /dev/null +++ b/templates/simple_header.html @@ -0,0 +1,12 @@ +<header class="container"> + <nav class="container-fluid"> + <ul> + <li><strong><a href="/">Yet Another Blog</a></strong></li> + </ul> + <ul> + <li><a class="secondary">Posts</a></li> + <li><a class="secondary">Projects</a></li> + <li><a class="secondary">Resume</a></li> + </ul> + </nav> +</header> |