aboutsummaryrefslogtreecommitdiff
path: root/templates/base.html
diff options
context:
space:
mode:
authorMitja Felicijan <mitja.felicijan@gmail.com>2025-02-09 03:34:10 +0100
committerMitja Felicijan <mitja.felicijan@gmail.com>2025-02-09 03:34:10 +0100
commit24fa9b6b84b233181b9c624826be5dd901fbe7d1 (patch)
treecfbe8290017875cd4bb01a8a2188e94aeeaa6b61 /templates/base.html
parent65f8e680c62f7f22587d839d7c76adfef0dab782 (diff)
downloadmitjafelicijan.com-24fa9b6b84b233181b9c624826be5dd901fbe7d1.tar.gz
New style
Diffstat (limited to 'templates/base.html')
-rw-r--r--templates/base.html277
1 files changed, 65 insertions, 212 deletions
diff --git a/templates/base.html b/templates/base.html
index d1be68a..ab2bff4 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -1,215 +1,68 @@
1<!doctype html> 1<!doctype html>
2<html lang="{{ .Config.Language }}"> 2<html lang="{{ .Config.Language }}">
3 <head> 3 <head>
4 <meta charset="utf-8" /> 4 <meta charset="utf-8" />
5 <meta name="viewport" content="width=device-width,initial-scale=1" /> 5 <meta name="viewport" content="width=device-width,initial-scale=1" />
6 <title>{{ block "title" . }}{{ .Config.Title }}{{ end }}</title> 6
7 <meta name="description" content="{{ block "description" . }}{{ .Config.Description }}{{ end }}"/> 7 <title>{{ block "title" . }}{{ .Config.Title }}{{ end }}</title>
8 <link rel="alternate" type="application/rss+xml" href="{{ .Config.BaseURL }}/index.xml" /> 8 <meta name="description" content="{{ block "description" . }}{{ .Config.Description }}{{ end }}"/>
9 <link href="data:image/x-icon;base64,AAABAAEAEBAAAAEAIABoBAAAFgAAACgAAAAQAAAAIAAAAAEAIAAAAAAAAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAL69vf8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAv76+/8LBwQkAAAAAAAAAAAAAAAC+vb3/AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAL+9vf/Bv78JAAAAAAAAAAAAAAAAu7q6/wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAC7ubr/vr29CAAAAAAAAAAAy8nJAZ6foP8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAnqGj/6GipAoAAAAAHLjU/xcXHf/BwsL/I8XY/yPK3v8XGiD/IbjL/yPF2f8XGiD/Fxkf/yLF2f8gnK3/Fxog/62ztv8fwNf/FRcd/x271v8mz93/GRsi/xkXHf8p097/GiIp/xobIv8p0t3/KdPe/xocIv8fYmr/KNPe/xoZH/8aHCL/J87c/xy81/8VFxz/IsPZ/8zS0/8XGiD/Ir/R/yPH2/8XGiD/Fxkf/yPH2/8dd4T/GBog/yPJ3f8jyNr/uru9/xcUGv8cudb/EhITDKi5vRKlvMP/RUpOERwcHRAdOj4QHTk8EBwdHRAdNTgQHTo/EBwcHRAcHB0QSGduEKW4vf+koqQfHzg+EBqz0ewSFRv7EyMr/xq51vsTERb7ExUb+xq41fsau9j7ExUb+xiPp/sZudb7ExUb+xMVG/sZuNX/GKvI/BIUGfMdvdn/IrfL/xcaIP8n1eb/J9Dh/xkcIf8ZGR7/J8/f/xxCSv8ZGyH/J9Dg/ybQ4P8ZHCL/FSQs/yPK3/8UExj/GE1b/ybS5P8ZGB7/Ghwj/ynW5P8p2Ob/Ghwi/yWrtv8p1eH/Ghwi/xocIv8p1uT/J8XT/xkcIv8m1un/Hb7d/xUYH/8hzOr/HtHu/xcaIf8XGB//I8vi/xgxOv8XGSD/I8rg/yPK4P8XGiD/GUFL/yPP6f8SERj/Fhkh/x3A4f8AAAAAJ2f9/ydr//8mZPH/AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAlYu38J2v//ydo/f8AAAAAAAAAAAd8/fkFqf//Iob8sAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAMY39awWr//8FfP3/AAAAAAAAAAAFm/7/SfD//wR+/f8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAOB/f9B7v//BaX+/wAAAAAAAAAAQ878SAyZ/v9n1v4KAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADu9v8DDJb+/z3N/XgAAAAA3/sAAN/7AADf+wAA3/sAAAAAAAAAAAAAAAAAAN/7AAAAAAAAAAAAAAAAAAAAAAAAj/EAAI/5AACP8QAA3/sAAA==" rel="icon" type="image/x-icon" /> 9
10 <meta name="theme-color" content="#0000ff"> 10 <link rel="alternate" type="application/rss+xml" href="{{ .Config.BaseURL }}/index.xml" />
11 <style> 11 <link href="data:image/x-icon;base64,AAABAAEAEBAAAAEAIABoBAAAFgAAACgAAAAQAAAAIAAAAAEAIAAAAAAAAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAL69vf8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAv76+/8LBwQkAAAAAAAAAAAAAAAC+vb3/AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAL+9vf/Bv78JAAAAAAAAAAAAAAAAu7q6/wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAC7ubr/vr29CAAAAAAAAAAAy8nJAZ6foP8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAnqGj/6GipAoAAAAAHLjU/xcXHf/BwsL/I8XY/yPK3v8XGiD/IbjL/yPF2f8XGiD/Fxkf/yLF2f8gnK3/Fxog/62ztv8fwNf/FRcd/x271v8mz93/GRsi/xkXHf8p097/GiIp/xobIv8p0t3/KdPe/xocIv8fYmr/KNPe/xoZH/8aHCL/J87c/xy81/8VFxz/IsPZ/8zS0/8XGiD/Ir/R/yPH2/8XGiD/Fxkf/yPH2/8dd4T/GBog/yPJ3f8jyNr/uru9/xcUGv8cudb/EhITDKi5vRKlvMP/RUpOERwcHRAdOj4QHTk8EBwdHRAdNTgQHTo/EBwcHRAcHB0QSGduEKW4vf+koqQfHzg+EBqz0ewSFRv7EyMr/xq51vsTERb7ExUb+xq41fsau9j7ExUb+xiPp/sZudb7ExUb+xMVG/sZuNX/GKvI/BIUGfMdvdn/IrfL/xcaIP8n1eb/J9Dh/xkcIf8ZGR7/J8/f/xxCSv8ZGyH/J9Dg/ybQ4P8ZHCL/FSQs/yPK3/8UExj/GE1b/ybS5P8ZGB7/Ghwj/ynW5P8p2Ob/Ghwi/yWrtv8p1eH/Ghwi/xocIv8p1uT/J8XT/xkcIv8m1un/Hb7d/xUYH/8hzOr/HtHu/xcaIf8XGB//I8vi/xgxOv8XGSD/I8rg/yPK4P8XGiD/GUFL/yPP6f8SERj/Fhkh/x3A4f8AAAAAJ2f9/ydr//8mZPH/AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAlYu38J2v//ydo/f8AAAAAAAAAAAd8/fkFqf//Iob8sAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAMY39awWr//8FfP3/AAAAAAAAAAAFm/7/SfD//wR+/f8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAOB/f9B7v//BaX+/wAAAAAAAAAAQ878SAyZ/v9n1v4KAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADu9v8DDJb+/z3N/XgAAAAA3/sAAN/7AADf+wAA3/sAAAAAAAAAAAAAAAAAAN/7AAAAAAAAAAAAAAAAAAAAAAAAj/EAAI/5AACP8QAA3/sAAA==" rel="icon" type="image/x-icon" />
12 :root { 12
13 --link-color: blue; 13 <style>
14 --code-background: #fafafa; 14 html { scroll-padding: 2rem; }
15 --code-border: #aaa; 15 body { display: grid; gap: 2em; grid-template-columns: 14em auto; max-width: 100vw; line-height: 130%; }
16 --inline-code-background: #efefef; 16 h1, h2, h3, h4, h5, h6 { line-height: 120%; }
17 } 17 img, video, audio { max-width: 100%; }
18 18 pre { background: #f5f5f5 !important; text-wrap: wrap; padding: 0.5em; }
19 *::selection { 19 code { background: #f5f5f5; }
20 background: var(--link-color); 20 table { width: 100%; }
21 color: #ffffff; 21 @media only screen and (max-width: 720px) {
22 } 22 body { display: block; }
23 23 main { margin: 1em 0; }
24 *::-moz-selection { 24 .hide-on-mobile { display: none; }
25 background: var(--link-color); 25 }
26 color: #ffffff; 26 /* Fixes embeds going to center. */
27 } 27 article iframe { margin: 0!important; }
28 28 /* Fix desktop and mobile code when font sizes are all over the place. */
29 *::-webkit-selection { 29 pre code span { display: initial !important; }
30 background: var(--link-color); 30 </style>
31 color: #ffffff; 31 <script defer src="https://app.tinyanalytics.io/pixel/isfRNEahfHiS2Ttp"></script>
32 } 32 </head>
33 33
34 html { 34 <body>
35 scroll-padding: 2rem; 35 <aside>
36 } 36 <p>You do not learn by relaxing. You learn by violently assaulting your problem until it surrenders its mysteries to you.</p>
37 37 <strong>About</strong>
38 body { 38 <ul>
39 padding: 1em; 39 <li><a href="/">Home</a></li>
40 background: white; 40 <li><a href="/projects.html">Recent projects</a></li>
41 line-height: 1.3; 41 <li><a href="https://github.com/mitjafelicijan" target="_blank">Code on GitHub</a></li>
42 font-family: sans-serif; 42 <li><a href="https://github.com/mitjafelicijan/probe" target="_blank">Probe repository</a></li>
43 max-width: 700px; 43 <li><a href="https://github.com/mitjafelicijan/dotfiles" target="_blank">My dotfiles</a></li>
44 margin: 0 auto; 44 <li><a href="/curriculum-vitae.html">CV</a></li>
45 display: flex; 45 <li><a href="/feed.xml">RSS</a></li>
46 flex-direction: column; 46 </ul>
47 gap: 1em; 47 </aside>
48 } 48
49 49 <main>
50 header nav { 50 <div>
51 display: flex; 51 {{ block "content" . }}{{ end }}
52 align-items: center; 52 </div>
53 gap: 1em; 53
54 } 54 <footer>
55 55 <hr>
56 h1, h2, h3 { 56 <p><big><strong>Want to comment or have something to add?</strong></big></p>
57 line-height: initial; 57 <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>
58 } 58 <hr>
59 59 <p><small>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>.</small></p>
60 h2, h3 { 60 </footer>
61 margin-block-start: 1em; 61 </main>
62 } 62
63 63 <script>
64 h1 { 64 document.querySelectorAll("table").forEach(t => t.setAttribute("border", 1));
65 font-size: xx-large; 65 </script>
66 line-height: 110%; 66 </body>
67 }
68
69 mark { padding: 0 0.3em; background-color: chartreuse; }
70 cap { text-transform: capitalize; }
71 ul li { padding: 0.1em 0; }
72
73 table td, table th {
74 padding: 0.1em 0.3em;
75 }
76
77 a {
78 color: var(--link-color);
79 text-decoration: none;
80 }
81
82 a:hover {
83 text-decoration: underline;
84 }
85
86 pre {
87 text-wrap: nowrap;
88 overflow-x: auto;
89 padding: 1em;
90 background: var(--code-background)!important;
91 border: 1px solid var(--code-border);
92 }
93
94 code {
95 font-family: monospace;
96 font-size: 13px;
97 padding: 2px 4px;
98 background: var(--inline-code-background)!important;
99 }
100
101 pre code {
102 background: transparent!important;
103 padding: initial;
104 border: none;
105 }
106
107 figure {
108 margin-inline-start: 0;
109 margin-inline-end: 0;
110 }
111
112 figcaption {
113 max-width: 100%;
114 text-align: center;
115 }
116
117 figcaption p {
118 margin: 0.3em 0 1.5em 0;
119 font-style: italic;
120 }
121
122 img, video, audio, table {
123 width: 100%;
124 max-width: 100%;
125 }
126
127 article iframe { /* fixes embeds going to center */
128 margin: 0!important;
129 }
130
131 audio::-webkit-media-controls-enclosure {
132 border-radius: 0;
133 }
134
135 pre { margin-block-start: 1em; margin-block-end: 1em; }
136
137 .promobox {
138 margin-top: 1em;
139 text-decoration: none;
140 display: inline-block;
141 background: blue;
142 color: white;
143 padding: 1em;
144 }
145 .promobox:hover { text-decoration: underline; }
146
147 /* Fix desktop and mobile code when font sizes are all over the place. */
148 pre code span { display: initial!important; }
149
150 @media only screen and (max-width: 1024px) {
151 body {
152 word-wrap: break-word;
153 }
154
155 header nav {
156 gap: 0.7rem;
157 }
158
159 a {
160 word-wrap: break-word;
161 }
162
163 /* Fix mobile code when font sizes are all over the place. */
164 pre code span { display: initial!important; }
165 }
166
167 @media only screen and (max-width: 720px) {
168 /* Responsive tables. */
169 table {
170 display: block;
171 overflow-y: auto;
172 }
173
174 .hide-on-mobile { display: none; }
175 }
176 </style>
177 <script defer src="https://app.tinyanalytics.io/pixel/isfRNEahfHiS2Ttp"></script>
178 </head>
179 <body>
180 <header>
181 <nav>
182 <a href="/">Home</a>
183 <a href="/projects.html">Projects</a>
184 <a href="https://github.com/mitjafelicijan" target="_blank">Code</a>
185 <a href="https://github.com/mitjafelicijan/probe" target="_blank" class="hide-on-mobile">Probe</a>
186 <a href="https://github.com/mitjafelicijan/dotfiles" target="_blank" class="hide-on-mobile">Dotfiles</a>
187 <a href="/curriculum-vitae.html">CV</a>
188 <a href="/feed.xml">RSS</a>
189 </nav>
190 </header>
191
192 <main>{{ block "content" . }}{{ end }}</main>
193
194 <footer>
195 <hr>
196 <p><big><strong>Want to comment or have something to add?</strong></big></p>
197 <p>
198 You can write me an email
199 at <a href="mailto:mitja.felicijan@gmail.com">mitja.felicijan@gmail.com</a> or
200 catch up with me <a href="https://telegram.me/mitjafelicijan" target="_blank">on Telegram</a>.
201 </p>
202 <hr>
203 <p>
204 <small>
205 This page's is also available as <a href="/feed.xml" target="_blank">RSS feed</a>.
206 Page was built with <a href="https://github.com/mitjafelicijan/jbmafp" target="_blank">jbmafp</a>.
207 </small>
208 </p>
209 </footer>
210
211 <script>
212 document.querySelectorAll("table").forEach(t => t.setAttribute("border", 1));
213 </script>
214 </body>
215</html> 67</html>
68