{{ .Title }}
29 |30 | 33 |
34 | {{ .Content }} 35 |
14 | {{- with .GetPage "about" }}
15 | {{ .Content }}
16 | {{ end }}
17 | {{ .Title }}
9 | 12 |{{ .Description }}
13 |
14 |
{{ end }} 16 | {{- partial "post-preview.html" $page }} 17 | {{ end }} 18 | {{ partial "footer.html" . }} 19 | 20 | 21 | -------------------------------------------------------------------------------- /static/external.svg: -------------------------------------------------------------------------------- 1 | 2 | 8 | -------------------------------------------------------------------------------- /static/feed.svg: -------------------------------------------------------------------------------- 1 | 20 | -------------------------------------------------------------------------------- /static/lightbox.css: -------------------------------------------------------------------------------- 1 | #lightbox {width: 100%; height: 100%; position: fixed; top: 0; left: 0; background: rgba(0,0,0,0.85); z-index: 9999999; line-height: 0; cursor: pointer; display: none;} 2 | #lightbox .img { 3 | position: relative; 4 | top: 50%; 5 | left: 50%; 6 | -ms-transform: translateX(-50%) translateY(-50%); 7 | -webkit-transform: translate(-50%,-50%); 8 | transform: translate(-50%,-50%); 9 | max-width: 100%; 10 | max-height: 100%; 11 | } 12 | #lightbox .img img {opacity: 0; pointer-events: none; width: auto;} 13 | @media screen and (min-width: 1200px) { 14 | #lightbox .img { 15 | max-width: 1200px; 16 | } 17 | } 18 | @media screen and (min-height: 1200px) { 19 | #lightbox .img { 20 | max-height: 1200px; 21 | } 22 | } 23 | #lightbox span {display: block; position: fixed; bottom: 13px; height: 1.5em; line-height: 1.4em; width: 100%; text-align: center; color: white; text-shadow: 24 | -1px -1px 0 #000, 25 | 1px -1px 0 #000, 26 | -1px 1px 0 #000, 27 | 1px 1px 0 #000; 28 | } 29 | 30 | #lightbox span {display: none;} 31 | 32 | #lightbox .videoWrapperContainer { 33 | position: relative; 34 | top: 50%; 35 | left: 50%; 36 | -ms-transform: translateX(-50%) translateY(-50%); 37 | -webkit-transform: translate(-50%,-50%); 38 | transform: translate(-50%,-50%); 39 | max-width: 900px; 40 | max-height: 100%; 41 | } 42 | #lightbox .videoWrapperContainer .videoWrapper { 43 | height: 0; 44 | line-height: 0; 45 | margin: 0; 46 | padding: 0; 47 | position: relative; 48 | padding-bottom: 56.333%; /* custom */ 49 | background: black; 50 | } 51 | #lightbox .videoWrapper iframe { 52 | position: absolute; 53 | top: 0; 54 | left: 0; 55 | width: 100%; 56 | height: 100%; 57 | border: 0; 58 | display: block; 59 | } 60 | #lightbox #prev, #lightbox #next {height: 50px; line-height: 36px; display: none; margin-top: -25px; position: fixed; top: 50%; padding: 0 15px; cursor: pointer; text-decoration: none; z-index: 99; color: white; font-size: 60px;} 61 | #lightbox.gallery #prev, #lightbox.gallery #next {display: block;} 62 | #lightbox #prev {left: 0;} 63 | #lightbox #next {right: 0;} 64 | #lightbox #close {height: 50px; width: 50px; position: fixed; cursor: pointer; text-decoration: none; z-index: 99; right: 0; top: 0;} 65 | #lightbox #close:after, #lightbox #close:before {position: absolute; margin-top: 22px; margin-left: 14px; content: ""; height: 3px; background: white; width: 23px; 66 | -webkit-transform-origin: 50% 50%; 67 | -moz-transform-origin: 50% 50%; 68 | -o-transform-origin: 50% 50%; 69 | transform-origin: 50% 50%; 70 | /* Safari */ 71 | -webkit-transform: rotate(-45deg); 72 | /* Firefox */ 73 | -moz-transform: rotate(-45deg); 74 | /* IE */ 75 | -ms-transform: rotate(-45deg); 76 | /* Opera */ 77 | -o-transform: rotate(-45deg); 78 | } 79 | #lightbox #close:after { 80 | /* Safari */ 81 | -webkit-transform: rotate(45deg); 82 | /* Firefox */ 83 | -moz-transform: rotate(45deg); 84 | /* IE */ 85 | -ms-transform: rotate(45deg); 86 | /* Opera */ 87 | -o-transform: rotate(45deg); 88 | } 89 | #lightbox, #lightbox * { 90 | -webkit-user-select: none; 91 | -moz-user-select: none; 92 | -ms-user-select: none; 93 | user-select: none; 94 | } -------------------------------------------------------------------------------- /static/lightbox.js: -------------------------------------------------------------------------------- 1 | function is_youtubelink(url) { 2 | var p = /^(?:https?:\/\/)?(?:www\.)?(?:youtu\.be\/|youtube\.com\/(?:embed\/|v\/|watch\?v=|watch\?.+&v=))((\w|-){11})(?:\S+)?$/; 3 | return (url.match(p)) ? RegExp.$1 : false; 4 | } 5 | function is_imagelink(url) { 6 | var p = /([a-z\-_0-9\/\:\.]*\.(jpg|jpeg|png|gif))/i; 7 | return (url.match(p)) ? true : false; 8 | } 9 | function is_vimeolink(url,el) { 10 | var id = false; 11 | var xmlhttp = new XMLHttpRequest(); 12 | xmlhttp.onreadystatechange = function() { 13 | if (xmlhttp.readyState == XMLHttpRequest.DONE) { // XMLHttpRequest.DONE == 4 14 | if (xmlhttp.status == 200) { 15 | var response = JSON.parse(xmlhttp.responseText); 16 | id = response.video_id; 17 | console.log(id); 18 | el.classList.add('lightbox-vimeo'); 19 | el.setAttribute('data-id',id); 20 | 21 | el.addEventListener("click", function(event) { 22 | event.preventDefault(); 23 | document.getElementById('lightbox').innerHTML = '›‹
';
24 | document.getElementById('lightbox').style.display = 'block';
25 |
26 | setGallery(this);
27 | });
28 | }
29 | else if (xmlhttp.status == 400) {
30 | alert('There was an error 400');
31 | }
32 | else {
33 | alert('something else other than 200 was returned');
34 | }
35 | }
36 | };
37 | xmlhttp.open("GET", 'https://vimeo.com/api/oembed.json?url='+url, true);
38 | xmlhttp.send();
39 | }
40 | function setGallery(el) {
41 | var elements = document.body.querySelectorAll(".gallery");
42 | elements.forEach(element => {
43 | element.classList.remove('gallery');
44 | });
45 | if(el.closest('ul, p')) {
46 | var link_elements = el.closest('ul, p').querySelectorAll("a[class*='lightbox-']");
47 | link_elements.forEach(link_element => {
48 | link_element.classList.remove('current');
49 | });
50 | link_elements.forEach(link_element => {
51 | if(el.getAttribute('href') == link_element.getAttribute('href')) {
52 | link_element.classList.add('current');
53 | }
54 | });
55 | if(link_elements.length>1) {
56 | document.getElementById('lightbox').classList.add('gallery');
57 | link_elements.forEach(link_element => {
58 | link_element.classList.add('gallery');
59 | });
60 | }
61 | var currentkey;
62 | var gallery_elements = document.querySelectorAll('a.gallery');
63 | Object.keys(gallery_elements).forEach(function (k) {
64 | if(gallery_elements[k].classList.contains('current')) currentkey = k;
65 | });
66 | if(currentkey==(gallery_elements.length-1)) var nextkey = 0;
67 | else var nextkey = parseInt(currentkey)+1;
68 | if(currentkey==0) var prevkey = parseInt(gallery_elements.length-1);
69 | else var prevkey = parseInt(currentkey)-1;
70 | document.getElementById('next').addEventListener("click", function() {
71 | gallery_elements[nextkey].click();
72 | });
73 | document.getElementById('prev').addEventListener("click", function() {
74 | gallery_elements[prevkey].click();
75 | });
76 | }
77 | }
78 |
79 | document.addEventListener("DOMContentLoaded", function() {
80 |
81 | //create lightbox div in the footer
82 | var newdiv = document.createElement("div");
83 | newdiv.setAttribute('id',"lightbox");
84 | document.body.appendChild(newdiv);
85 |
86 | //add classes to links to be able to initiate lightboxes
87 | var elements = document.querySelectorAll('a');
88 | elements.forEach(element => {
89 | var url = element.getAttribute('href');
90 | if(url) {
91 | if(url.indexOf('vimeo') !== -1 && !element.classList.contains('no-lightbox')) {
92 | is_vimeolink(url,element);
93 | }
94 | if(is_youtubelink(url) && !element.classList.contains('no-lightbox')) {
95 | element.classList.add('lightbox-youtube');
96 | element.setAttribute('data-id',is_youtubelink(url));
97 | }
98 | if(is_imagelink(url) && !element.classList.contains('no-lightbox')) {
99 | element.classList.add('lightbox-image');
100 | var href = element.getAttribute('href');
101 | var filename = href.split('/').pop();
102 | var split = filename.split(".");
103 | var name = split[0];
104 | element.setAttribute('title',name);
105 | }
106 | }
107 | });
108 |
109 | //remove the clicked lightbox
110 | document.getElementById('lightbox').addEventListener("click", function(event) {
111 | if(event.target.id != 'next' && event.target.id != 'prev'){
112 | this.innerHTML = '';
113 | document.getElementById('lightbox').style.display = 'none';
114 | }
115 | });
116 |
117 | //add the youtube lightbox on click
118 | var elements = document.querySelectorAll('a.lightbox-youtube');
119 | elements.forEach(element => {
120 | element.addEventListener("click", function(event) {
121 | event.preventDefault();
122 | document.getElementById('lightbox').innerHTML = '›‹
';
123 | document.getElementById('lightbox').style.display = 'block';
124 |
125 | setGallery(this);
126 | });
127 | });
128 |
129 | //add the image lightbox on click
130 | var elements = document.querySelectorAll('a.lightbox-image');
131 | elements.forEach(element => {
132 | element.addEventListener("click", function(event) {
133 | event.preventDefault();
134 | document.getElementById('lightbox').innerHTML = '›‹+')
'+this.getAttribute('title')+'';
135 | document.getElementById('lightbox').style.display = 'block';
136 |
137 | setGallery(this);
138 | });
139 | });
140 |
141 | });
--------------------------------------------------------------------------------
/static/linkedin.svg:
--------------------------------------------------------------------------------
1 |
12 |
--------------------------------------------------------------------------------
/static/main.css:
--------------------------------------------------------------------------------
1 | html {
2 | scroll-behavior: smooth;
3 | }
4 |
5 | body {
6 | -webkit-font-smoothing: antialiased;
7 | background-color: #fff;
8 | color: rgb(36, 36, 36);
9 | font-family: source-serif-pro, Georgia, Cambria, "Times New Roman", Times, serif;
10 | font-size: 20px;
11 | font-style: normal;
12 | font-weight: 400;
13 | letter-spacing: -0.003em;
14 | line-break: auto;
15 | line-height: 32px;
16 | margin: 48px auto;
17 | max-width: 680px;
18 | overflow-wrap: normal;
19 | padding: 0 20px;
20 | text-rendering: optimizeLegibility;
21 | text-transform: none;
22 | word-break: break-word;
23 | }
24 |
25 | h1, h2, h3, h4, h5, h6 {
26 | font-family: sohne, "Helvetica Neue", Helvetica, Arial, sans-serif;
27 | font-weight: 600;
28 | line-height: 1.1em;
29 | }
30 |
31 | article > h1 {
32 | font-size: 2em;
33 | margin: 0.67em 0;
34 | }
35 |
36 | article > h2 {
37 | margin: -0.83em 0 0.83em;
38 | padding: 0.83em 0 0;
39 | }
40 |
41 | a {
42 | color: inherit;
43 | cursor: pointer;
44 | }
45 |
46 | a.anchor {
47 | text-decoration: none;
48 | }
49 |
50 | a.anchor:hover {
51 | text-decoration: underline;
52 | }
53 |
54 | a.anchor:hover:after {
55 | color: #c0c0c0;
56 | content: ' ¶';
57 | }
58 |
59 | a.external {
60 | color: #66c43b;
61 | }
62 |
63 | a.external::after {
64 | background-image: url('/external.svg');
65 | background-size: 1em 1em;
66 | content: '';
67 | display: inline-block;
68 | height: 1em;
69 | margin-left: 0.3em;
70 | width: 1em;
71 | }
72 |
73 | p, ul, ol {
74 | margin: 0 0 2em;
75 | }
76 |
77 | p.description {
78 | margin: 0 0 0.5em;
79 | }
80 |
81 | li {
82 | margin: 0 0 1em;
83 | }
84 | img {
85 | max-width: 100%;
86 | }
87 |
88 | blockquote {
89 | background-color: #f0f0f0;
90 | border-left: solid 4px #c0c0c0;
91 | margin: 1em 0 2em 2em;
92 | padding: 0.5em 1em;
93 | }
94 |
95 | blockquote > p:last-child {
96 | margin-bottom: 0;
97 | }
98 |
99 | hr {
100 | border: solid 1px #e5e5e5;
101 | margin: 0 0 2em;
102 | }
103 |
104 | time {
105 | display: inline-block;
106 | font-style: italic;
107 | margin-bottom: 0.5em;
108 | }
109 |
110 | nav:after {
111 | content: ".";
112 | display: block;
113 | clear: both;
114 | visibility: hidden;
115 | line-height: 0;
116 | height: 0;
117 | }
118 |
119 | nav {
120 | zoom: 1;
121 | }
122 |
123 | .github {
124 | border: 0;
125 | color: #fff;
126 | fill: #151513;
127 | position: absolute;
128 | right: 0;
129 | top: 0;
130 | z-index: -1
131 | }
132 |
133 | .topLeftMenu {
134 | float: left;
135 | margin: 0;
136 | padding: 0;
137 | }
138 |
139 | .topLeftMenu > li {
140 | display: inline-block;
141 | margin: 0 1em 0 0;
142 | }
143 |
144 | .topRightMenu {
145 | float: right;
146 | margin: 0;
147 | padding: 0;
148 | }
149 |
150 | .topRightMenu > li {
151 | display: inline-block;
152 | margin: 0 0.5em;
153 | }
154 |
155 | .topRightMenu > li img {
156 | height: 28px;
157 | width: 28px;
158 | vertical-align: middle;
159 | }
160 |
161 | .footer {
162 | float: right;
163 | font-size: 0.9em;
164 | font-style: italic;
165 | margin: 15px 0 40px;
166 | }
167 |
168 | @media (prefers-color-scheme: dark) {
169 | body {
170 | background-color: #000;
171 | color: rgb(219, 219, 219);
172 | }
173 |
174 | a.anchor:hover:after {
175 | color: rgb(110, 110, 110);
176 | }
177 |
178 | blockquote {
179 | background-color: #2c2c2c;
180 | }
181 | }
182 |
--------------------------------------------------------------------------------
/static/photo.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/stebunovd/blog/9654792e6ad2284de8db69e3ead8badc6e5c1b9c/static/photo.jpeg
--------------------------------------------------------------------------------
/static/prettify.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | function activateAnchors() {
4 | var article = document.querySelector('article');
5 | if (!article) {
6 | return;
7 | }
8 | document.querySelectorAll('h2').forEach(function (h) {
9 | var id = h.id;
10 | if (id) {
11 | h.innerHTML = '' + h.innerHTML + '';
12 | }
13 | });
14 | }
15 |
16 | activateAnchors();
17 |
--------------------------------------------------------------------------------
/static/x.svg:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------