aboutsummaryrefslogtreecommitdiff
path: root/templates/base.html
diff options
context:
space:
mode:
authorMitja Felicijan <mitja.felicijan@gmail.com>2025-08-09 06:11:16 +0200
committerMitja Felicijan <mitja.felicijan@gmail.com>2025-08-09 06:11:16 +0200
commit7c61337095ecdab903b5aab23351992ab321079f (patch)
tree13befa7912a72e2396a223eb2fd9bef4f3deb0e6 /templates/base.html
parent26f4e947ce04e5e3b61e108e60dd642af0d52b76 (diff)
downloadmitjafelicijan.com-7c61337095ecdab903b5aab23351992ab321079f.tar.gz
Added custom aligment
Diffstat (limited to 'templates/base.html')
-rw-r--r--templates/base.html101
1 files changed, 75 insertions, 26 deletions
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 @@
23 --border-width: 1px; 23 --border-width: 1px;
24 --header-color: black; 24 --header-color: black;
25 --header-border-width: 2px; 25 --header-border-width: 2px;
26 --content-width: 840px;
26 } 27 }
27 28
28 * { box-sizing: border-box; } 29 * { box-sizing: border-box; }
@@ -38,22 +39,21 @@
38 table td.tags { display: flex; gap: 0.5em; justify-content: flex-end; align-items: center; } 39 table td.tags { display: flex; gap: 0.5em; justify-content: flex-end; align-items: center; }
39 table td.tags mark { padding: 0 0.4em; background: var(--primary-color); font-size: small; } 40 table td.tags mark { padding: 0 0.4em; background: var(--primary-color); font-size: small; }
40 41
41 .left { text-align: left }
42 .center { text-align: center }
43 .right { text-align: right }
44
45 a { color: var(--link-color); text-decoration: none; } 42 a { color: var(--link-color); text-decoration: none; }
46 a:hover { text-decoration: underline; } 43 a:hover { text-decoration: underline; }
47 44
48 header { border-bottom: var(--header-border-width) solid var(--secondary-color); padding: 0.5em 0; display: flex; } 45 header { border-bottom: var(--header-border-width) solid var(--secondary-color); padding: 0.5em 0; }
49 header nav:first-child { display: flex; width: var(--first-child-width); } 46 header div { min-width: var(--content-width); max-width: var(--content-width); display: flex; }
50 header nav:last-child { display: flex; gap: 1.5em; } 47 header div nav:first-child { display: flex; width: var(--first-child-width); }
51 header nav:last-child a { color: var(--base-color); } 48 header div nav:nth-child(2) { display: flex; gap: 1.5em; }
49 header div nav:nth-child(2) a { color: var(--base-color); }
50 header div nav:last-child { text-align: right; margin-left: auto; display: flex; }
52 51
53 footer { color: gray; } 52 footer { color: gray; }
53 footer div { min-width: var(--content-width); max-width: var(--content-width); }
54 footer a { color: gray; text-decoration: underline; } 54 footer a { color: gray; text-decoration: underline; }
55 55
56 main { max-width: 840px; display: flex; gap: 2em; flex-direction: column; } 56 main { min-width: var(--content-width); max-width: var(--content-width); display: flex; gap: 2em; flex-direction: column; }
57 h1, h2, h3, h4 { font-size: initial; } 57 h1, h2, h3, h4 { font-size: initial; }
58 article h2, article h3, article h4 { margin-block-start: 2.5em; } 58 article h2, article h3, article h4 { margin-block-start: 2.5em; }
59 article h1 { font-size: 130%; line-height: 110%; } 59 article h1 { font-size: 130%; line-height: 110%; }
@@ -69,12 +69,18 @@
69 69
70 .capitalize { text-transform: capitalize; } 70 .capitalize { text-transform: capitalize; }
71 71
72 .text-left { text-align: left; }
73 .text-center { text-align: center; }
74 .text-right { text-align: right; }
75
76 .content-center { margin: 0 auto; }
77
72 /* Hotfixes for strange behaviour. */ 78 /* Hotfixes for strange behaviour. */
73 article iframe { margin: 0!important; } 79 article iframe { margin: 0!important; }
74 pre code span { display: initial !important; } 80 pre code span { display: initial !important; }
75 81
76 @media print { 82 @media print {
77 header, footer { display: none } 83 header, footer { display: none; }
78 } 84 }
79 </style> 85 </style>
80 <script defer src="https://app.tinyanalytics.io/pixel/isfRNEahfHiS2Ttp"></script> 86 <script defer src="https://app.tinyanalytics.io/pixel/isfRNEahfHiS2Ttp"></script>
@@ -82,27 +88,70 @@
82 88
83 <body> 89 <body>
84 <header> 90 <header>
85 <nav> 91 <div class="content">
86 <span><strong>Navigation</strong></span> 92 <nav>
87 </nav> 93 <span><strong>Navigation</strong></span>
88 <nav> 94 </nav>
89 <span><a href="/">Home</a></span> 95 <nav>
90 <span><a href="/projects.html">Projects</a></span> 96 <span><a href="/">Home</a></span>
91 <span><a href="https://github.com/mitjafelicijan/probe" target="_blank">Probe</a></span> 97 <span><a href="/projects.html">Projects</a></span>
92 <span><a href="https://github.com/mitjafelicijan" target="_blank">Code</a></span> 98 <span><a href="https://github.com/mitjafelicijan/probe" target="_blank">Probe</a></span>
93 <span><a href="https://github.com/mitjafelicijan/dotfiles" target="_blank">Dotfiles</a></span> 99 <span><a href="https://github.com/mitjafelicijan" target="_blank">Code</a></span>
94 <span><a href="/curriculum-vitae.html">CV</a></span> 100 <span><a href="https://github.com/mitjafelicijan/dotfiles" target="_blank">Dotfiles</a></span>
95 <span><a href="/feed.xml">RSS</a></span> 101 <span><a href="/curriculum-vitae.html">CV</a></span>
96 </nav> 102 <span><a href="/feed.xml">RSS</a></span>
103 </nav>
104 <nav>
105 <button id="content_align_button">center</button>
106 </nav>
107 </div>
97 </header> 108 </header>
98 <main> 109
110 <main class="content">
99 {{ block "content" . }}{{ end }} 111 {{ block "content" . }}{{ end }}
100 </main> 112 </main>
101 113
102 <footer> 114 <footer>
103 <p>You can write me an email at <a href="mailto:mitja.felicijan@gmail.com">mitja.felicijan@gmail.com</a> or catch up with me <a href="https://telegram.me/mitjafelicijan" target="_blank">on Telegram</a>.</p> 115 <div class="content">
104 <p>This page's is also available as <a href="/feed.xml" target="_blank">RSS feed</a>. Page was built with <a href="https://github.com/mitjafelicijan/jbmafp" target="_blank">jbmafp</a>.</p> 116 <p>You can write me an email at <a href="mailto:mitja.felicijan@gmail.com">mitja.felicijan@gmail.com</a> or catch up with me <a href="https://telegram.me/mitjafelicijan" target="_blank">on Telegram</a>.</p>
117 <p>This page's is also available as <a href="/feed.xml" target="_blank">RSS feed</a>. Page was built with <a href="https://github.com/mitjafelicijan/jbmafp" target="_blank">jbmafp</a>.</p>
118 </div>
105 </footer> 119 </footer>
120
121 <script>
122 function align_content_left() {
123 document.querySelectorAll(".content").forEach(el => {
124 el.classList.remove("content-center");
125 });
126 content_align_button.innerText = "center";
127 localStorage.setItem("content-align", "left");
128 }
129
130 function align_content_center() {
131 document.querySelectorAll(".content").forEach(el => {
132 el.classList.add("content-center");
133 });
134 content_align_button.innerText = "left";
135 localStorage.setItem("content-align", "center");
136 }
137
138 {
139 let initial_align = localStorage.getItem("content-align");
140 if (!initial_align) {
141 localStorage.setItem("content-align", "left");
142 initial_align = localStorage.getItem("content-align");
143 }
144
145 if (initial_align == "center") {
146 align_content_center();
147 }
148 }
149
150 content_align_button.onclick = function(e) {
151 const align = localStorage.getItem("content-align");
152 if (align == "center") { align_content_left(); }
153 if (align == "left") { align_content_center(); }
154 }
155 </script>
106 </body> 156 </body>
107</html> 157</html>
108
generated by cgit v1.2.3 (git 2.46.0) at 2026-04-30 21:29:50 +0000