Commit 7c61337 - mitjafelicijan.com

Added custom aligment

Author	Mitja Felicijan <mitja.felicijan@gmail.com>	2025-08-09 06:11:16 +0200
Committer	Mitja Felicijan <mitja.felicijan@gmail.com>	2025-08-09 06:11:16 +0200
Commit	`7c61337095ecdab903b5aab23351992ab321079f` (patch)

`-rw-r--r--`	templates/base.html	101
`-rw-r--r--`	templates/index.html	10

2 files changed, 80 insertions, 31 deletions



				--border-width: 1px;
				--header-color: black;
				--header-border-width: 2px;
				--content-width: 840px;
			}
  
			* { box-sizing: border-box; }

			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; }
  
  
  
  
  
			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; }
			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 {  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%; }

  
			.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; }
			}
		</style>
		<script defer src="https://app.tinyanalytics.io/pixel/isfRNEahfHiS2Ttp"></script>

  
	<body>
		<header>
			<div class="content">
				<nav>
					<span><strong>Navigation</strong></span>
				</nav>
				<nav>
					<span><a href="/">Home</a></span>
					<span><a href="/projects.html">Projects</a></span>
					<span><a href="https://github.com/mitjafelicijan/probe" target="_blank">Probe</a></span>
					<span><a href="https://github.com/mitjafelicijan" target="_blank">Code</a></span>
					<span><a href="https://github.com/mitjafelicijan/dotfiles" target="_blank">Dotfiles</a></span>
					<span><a href="/curriculum-vitae.html">CV</a></span>
					<span><a href="/feed.xml">RSS</a></span>
				</nav>
				<nav>
					<button id="content_align_button">center</button>
				</nav>
			</div>
		</header>
  
		<main class="content">
			{{ block "content" . }}{{ end }}
		</main>
  
		<footer>
			<div class="content">
				<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>
				<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>
			</div>
		</footer>
  
		<script>
			function align_content_left() {
				document.querySelectorAll(".content").forEach(el => {
					el.classList.remove("content-center");
				});
				content_align_button.innerText = "center";
				localStorage.setItem("content-align", "left");
			}
  
			function align_content_center() {
				document.querySelectorAll(".content").forEach(el => {
					el.classList.add("content-center");
				});
				content_align_button.innerText = "left";
				localStorage.setItem("content-align", "center");
			}
  
			{
				let initial_align = localStorage.getItem("content-align");
				if (!initial_align) {
					localStorage.setItem("content-align", "left");
					initial_align = localStorage.getItem("content-align");
				}
  
				if (initial_align == "center") {
					align_content_center();
				}
			}
  
			content_align_button.onclick = function(e) {
				const align = localStorage.getItem("content-align");
				if (align == "center") { align_content_left(); }
				if (align == "left") { align_content_center(); }
			}
		</script>
	</body>
</html>
  



		<tbody>
			<tr>
				<td>Visualizations and exploration of binary files</td>
				<td class="text-right"><a target="_blank" href="https://mitjafelicijan.github.io/binary-visualization/">https://mitjafelicijan.github.io/binary-visualization/</a></td>
			</tr>
			<tr>
				<td>Easy convert between HEX to RGBA</td>
				<td class="text-right"><a target="_blank" href="https://mitjafelicijan.github.io/hextorgba/">https://mitjafelicijan.github.io/hextorgba/</a></td>
			</tr>
			<tr>
				<td>Unicode symbol explorer</td>
				<td class="text-right"><a target="_blank" href="https://mitjafelicijan.github.io/symbols/">https://mitjafelicijan.github.io/symbols/</a></td>
			</tr>
			<tr>
				<td>GGUF model list &amp; tools</td>
				<td class="text-right"><a target="_blank" href="https://mitjafelicijan.github.io/gguf-list/">https://mitjafelicijan.github.io/gguf-list/</a></td>
			</tr>
			<tr>
				<td>Maps of DOOM and other well known WADS</td>
				<td class="text-right"><a target="_blank" href="https://mitjafelicijan.github.io/mapsofdoom/">https://mitjafelicijan.github.io/mapsofdoom/</a></td>
			</tr>
		</tbody>
	</table>


diff --git a/templates/base.html b/templates/base.html
...
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	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		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		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

diff --git a/templates/index.html b/templates/index.html
...
50	<tbody>	50	<tbody>
51	<tr>	51	<tr>
52	<td>Visualizations and exploration of binary files</td>	52	<td>Visualizations and exploration of binary files</td>
53	<td class="right"><a target="_blank" href="https://mitjafelicijan.github.io/binary-visualization/">https://mitjafelicijan.github.io/binary-visualization/</a></td>	53	<td class="text-right"><a target="_blank" href="https://mitjafelicijan.github.io/binary-visualization/">https://mitjafelicijan.github.io/binary-visualization/</a></td>
54	</tr>	54	</tr>
55	<tr>	55	<tr>
56	<td>Easy convert between HEX to RGBA</td>	56	<td>Easy convert between HEX to RGBA</td>
57	<td class="right"><a target="_blank" href="https://mitjafelicijan.github.io/hextorgba/">https://mitjafelicijan.github.io/hextorgba/</a></td>	57	<td class="text-right"><a target="_blank" href="https://mitjafelicijan.github.io/hextorgba/">https://mitjafelicijan.github.io/hextorgba/</a></td>
58	</tr>	58	</tr>
59	<tr>	59	<tr>
60	<td>Unicode symbol explorer</td>	60	<td>Unicode symbol explorer</td>
61	<td class="right"><a target="_blank" href="https://mitjafelicijan.github.io/symbols/">https://mitjafelicijan.github.io/symbols/</a></td>	61	<td class="text-right"><a target="_blank" href="https://mitjafelicijan.github.io/symbols/">https://mitjafelicijan.github.io/symbols/</a></td>
62	</tr>	62	</tr>
63	<tr>	63	<tr>
64	<td>GGUF model list & tools</td>	64	<td>GGUF model list & tools</td>
65	<td class="right"><a target="_blank" href="https://mitjafelicijan.github.io/gguf-list/">https://mitjafelicijan.github.io/gguf-list/</a></td>	65	<td class="text-right"><a target="_blank" href="https://mitjafelicijan.github.io/gguf-list/">https://mitjafelicijan.github.io/gguf-list/</a></td>
66	</tr>	66	</tr>
67	<tr>	67	<tr>
68	<td>Maps of DOOM and other well known WADS</td>	68	<td>Maps of DOOM and other well known WADS</td>
69	<td class="right"><a target="_blank" href="https://mitjafelicijan.github.io/mapsofdoom/">https://mitjafelicijan.github.io/mapsofdoom/</a></td>	69	<td class="text-right"><a target="_blank" href="https://mitjafelicijan.github.io/mapsofdoom/">https://mitjafelicijan.github.io/mapsofdoom/</a></td>
70	</tr>	70	</tr>
71	</tbody>	71	</tbody>
72	</table>	72	</table>
...