diff --git a/templates/base.html b/templates/base.html index b80eced9a6708747897cb6488000b39cadbf7961..42b434bec38b181d498956c4f8b8d09cb68b0b32 100644 --- a/templates/base.html +++ b/templates/base.html @@ -23,6 +23,7 @@ --code-color: #f9f9f9; --border-width: 1px; --header-color: black; --header-border-width: 2px; + --content-width: 840px; } * { box-sizing: border-box; } @@ -38,22 +39,21 @@ table.normal tr td:first-child { width: auto; } 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 @@ pre code { padding: 0; } .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 f979c7fc186953297f9db04bbbd80ed804daab54..60f41076e845d684a2956251e11ea2b012018a02 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/