From 7c61337095ecdab903b5aab23351992ab321079f Mon Sep 17 00:00:00 2001 From: Mitja Felicijan Date: Sat, 9 Aug 2025 06:11:16 +0200 Subject: Added custom aligment --- templates/base.html | 101 ++++++++++++++++++++++++++++++++++++++------------- templates/index.html | 10 ++--- 2 files changed, 80 insertions(+), 31 deletions(-) (limited to 'templates') diff --git a/templates/base.html b/templates/base.html index b80eced..42b434b 100644 --- a/templates/base.html +++ b/templates/base.html @@ -23,6 +23,7 @@ --border-width: 1px; --header-color: black; --header-border-width: 2px; + --content-width: 840px; } * { box-sizing: border-box; } @@ -38,22 +39,21 @@ table td.tags { display: flex; gap: 0.5em; justify-content: flex-end; align-items: center; } table td.tags mark { padding: 0 0.4em; background: var(--primary-color); font-size: small; } - .left { text-align: left } - .center { text-align: center } - .right { text-align: right } - a { color: var(--link-color); text-decoration: none; } a:hover { text-decoration: underline; } - header { border-bottom: var(--header-border-width) solid var(--secondary-color); padding: 0.5em 0; display: flex; } - header nav:first-child { display: flex; width: var(--first-child-width); } - header nav:last-child { display: flex; gap: 1.5em; } - header nav:last-child a { color: var(--base-color); } + header { border-bottom: var(--header-border-width) solid var(--secondary-color); padding: 0.5em 0; } + header div { min-width: var(--content-width); max-width: var(--content-width); display: flex; } + header div nav:first-child { display: flex; width: var(--first-child-width); } + header div nav:nth-child(2) { display: flex; gap: 1.5em; } + header div nav:nth-child(2) a { color: var(--base-color); } + header div nav:last-child { text-align: right; margin-left: auto; display: flex; } footer { color: gray; } + footer div { min-width: var(--content-width); max-width: var(--content-width); } footer a { color: gray; text-decoration: underline; } - main { max-width: 840px; display: flex; gap: 2em; flex-direction: column; } + main { min-width: var(--content-width); max-width: var(--content-width); display: flex; gap: 2em; flex-direction: column; } h1, h2, h3, h4 { font-size: initial; } article h2, article h3, article h4 { margin-block-start: 2.5em; } article h1 { font-size: 130%; line-height: 110%; } @@ -69,12 +69,18 @@ .capitalize { text-transform: capitalize; } + .text-left { text-align: left; } + .text-center { text-align: center; } + .text-right { text-align: right; } + + .content-center { margin: 0 auto; } + /* Hotfixes for strange behaviour. */ article iframe { margin: 0!important; } pre code span { display: initial !important; } @media print { - header, footer { display: none } + header, footer { display: none; } } @@ -82,27 +88,70 @@
- - +
+ + + +
-
+ +
{{ block "content" . }}{{ end }}
+ + - diff --git a/templates/index.html b/templates/index.html index f979c7f..60f4107 100644 --- a/templates/index.html +++ b/templates/index.html @@ -50,23 +50,23 @@ Visualizations and exploration of binary files - https://mitjafelicijan.github.io/binary-visualization/ + https://mitjafelicijan.github.io/binary-visualization/ Easy convert between HEX to RGBA - https://mitjafelicijan.github.io/hextorgba/ + https://mitjafelicijan.github.io/hextorgba/ Unicode symbol explorer - https://mitjafelicijan.github.io/symbols/ + https://mitjafelicijan.github.io/symbols/ GGUF model list & tools - https://mitjafelicijan.github.io/gguf-list/ + https://mitjafelicijan.github.io/gguf-list/ Maps of DOOM and other well known WADS - https://mitjafelicijan.github.io/mapsofdoom/ + https://mitjafelicijan.github.io/mapsofdoom/ -- cgit v1.2.3