Skip to content

Commit 51ea745

Browse files
mzagozdamzagozda
authored
Visual improvements
Visual improvements
2 parents 6bfdd18 + 2b9e614 commit 51ea745

1 file changed

Lines changed: 79 additions & 7 deletions

File tree

‎template.html‎

Lines changed: 79 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,9 @@
55
<meta charset="UTF-8">
66
<meta name="viewport" content="width=device-width, initial-scale=1.0">
77
<script src="https://acrobatservices.adobe.com/view-sdk/viewer.js"></script>
8+
<link rel="preconnect" href="https://fonts.googleapis.com">
9+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10+
<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
811
<style>
912
* {
1013
margin: 0;
@@ -24,25 +27,53 @@
2427
line-height: 1.6;
2528
}
2629

27-
.header {
30+
.upperline {
31+
border-top: 5px solid #2a6fc3;
32+
}
33+
34+
.footer {
2835
background-color: #F9F9F9;
2936
padding: 20px;
3037
width: 100%;
3138
box-sizing: border-box;
3239
line-height: 1.5;
3340
border-top: 5px solid #2a6fc3;
41+
bottom: 0; /* Stick to the bottom */
42+
left: 0; /* Span the full width of the viewport */
43+
display: flex; /* Use flexbox for layout */
44+
align-items: center; /* Align items vertically center */
45+
justify-content: space-between; /* Space items out */
3446
}
3547

36-
.header img {
37-
width: auto;
48+
.footer img {
49+
height: calc(0.75 * 50px); /* Set the height of the image */
50+
margin-right: 20px; /* Optional: Space between image and text */
3851
}
3952

53+
.footer .footer-content {
54+
display: flex; /* Flex container for the text */
55+
flex-direction: column; /* Stack text vertically */
56+
align-items: flex-end; /* Align text to the start of the flex container */
57+
}
58+
59+
.footer .footer-content p {
60+
margin: 0;
61+
font-size: 10px;
62+
}
63+
64+
.footer .footer-content a {
65+
color: #2a6fc3; /* Optional: Style the link */
66+
text-decoration: none; /* Optional: Remove underline from the link */
67+
}
68+
4069
.container {
4170
display: flex;
4271
justify-content: center;
4372
align-items: center;
4473
width: 100%;
4574
padding: 20px;
75+
padding-bottom: 0px;
76+
margin-bottom: 0px;
4677
}
4778

4879
.content {
@@ -56,7 +87,14 @@
5687
width: 100%;
5788
height: auto;
5889
display: block;
59-
margin-bottom: 20px;
90+
}
91+
92+
.content ol {
93+
padding-left: 19px;
94+
}
95+
96+
.content ul {
97+
padding-left: 20px;
6098
}
6199

62100
.video-container {
@@ -148,13 +186,47 @@
148186
</style>
149187
</head>
150188
<body>
151-
<div class="header">
152-
<img alt="Infostacker Logo" src="data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDI5OSA1MCIgd2lkdGg9IjMyMCIgaGVpZ2h0PSI1MCI+Cgk8dGl0bGU+aW5mb3N0YWNrZXIgbG9nbyAyIC0gY29sb3Itc3ZnPC90aXRsZT4KCTxzdHlsZT4KCQkudDEgeyBmb250LXNpemU6IDE2MHB4OyBmaWxsOiAjNTBjMWU5OyBmb250LXdlaWdodDogNDAwOyBmb250LWZhbWlseTogIlBvcHBpbnMiLCBBcmlhbCwgc2Fucy1zZXJpZjsgfQoJPC9zdHlsZT4KCTxkZWZzPgoJCTxsaW5lYXJHcmFkaWVudCBpZD0iZzEiIHgyPSIxIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgZ3JhZGllbnRUcmFuc2Zvcm09Im1hdHJpeCgwLC0yOS41OSwxMS44MzYsMCw0Myw0NS42NjQpIj4KCQkJPHN0b3Agb2Zmc2V0PSIwIiBzdG9wLWNvbG9yPSIjMDM2MmIwIi8+CgkJCTxzdG9wIG9mZnNldD0iLjExMiIgc3RvcC1jb2xvcj0iIzAzNmFiZCIvPgoJCQk8c3RvcCBvZmZzZXQ9Ii4yNTgiIHN0b3AtY29sb3I9IiMwMzZmYzUiLz4KCQkJPHN0b3Agb2Zmc2V0PSIuNSIgc3RvcC1jb2xvcj0iIzAzNzBjOCIvPgoJCQk8c3RvcCBvZmZzZXQ9Ii43NDIiIHN0b3AtY29sb3I9IiMwMzZmYzUiLz4KCQkJPHN0b3Agb2Zmc2V0PSIuODg4IiBzdG9wLWNvbG9yPSIjMDM2YWJkIi8+CgkJCTxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iIzAzNjJiMCIvPgoJCTwvbGluZWFyR3JhZGllbnQ+CgkJPGxpbmVhckdyYWRpZW50IGlkPSJnMiIgeDI9IjEiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiBncmFkaWVudFRyYW5zZm9ybT0ibWF0cml4KDMyLDAsMCwzOCw4LDI2KSI+CgkJCTxzdG9wIG9mZnNldD0iMCIgc3RvcC1jb2xvcj0iIzMyYmRlZiIvPgoJCQk8c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiMxZWEyZTQiLz4KCQk8L2xpbmVhckdyYWRpZW50PgoJCTxsaW5lYXJHcmFkaWVudCBpZD0iZzMiIHgyPSIxIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgZ3JhZGllbnRUcmFuc2Zvcm09Im1hdHJpeCgwLC0xNC45NDgsNy45NzIsMCwyMywzNSkiPgoJCQk8c3RvcCBvZmZzZXQ9Ii4yNzMiIHN0b3AtY29sb3I9IiM4ZGQzZmYiLz4KCQkJPHN0b3Agb2Zmc2V0PSIuNjExIiBzdG9wLWNvbG9yPSIjNzBjYWZmIi8+CgkJCTxzdG9wIG9mZnNldD0iLjc5NSIgc3RvcC1jb2xvcj0iIzU3YzJmZiIvPgoJCQk8c3RvcCBvZmZzZXQ9Ii45NCIgc3RvcC1jb2xvcj0iIzQ2YmRmZiIvPgoJCQk8c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiMzY2JhZmYiLz4KCQk8L2xpbmVhckdyYWRpZW50PgoJCTxsaW5lYXJHcmFkaWVudCBpZD0iZzQiIHgyPSIxIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgZ3JhZGllbnRUcmFuc2Zvcm09Im1hdHJpeCgxNiwxNiwtMjEuMDYyLDIxLjA2MiwzMSwxOCkiPgoJCQk8c3RvcCBvZmZzZXQ9IjAiIHN0b3AtY29sb3I9IiM4ZGQzZmYiLz4KCQkJPHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjM2NiYWZmIi8+CgkJPC9saW5lYXJHcmFkaWVudD4KCTwvZGVmcz4KCTxzdHlsZT4KCQl0c3BhbiB7IHdoaXRlLXNwYWNlOiBwcmU7IH0KCQkuczAgeyBmaWxsOiB1cmwoI2cxKTsgfQoJCS5zMSB7IGZpbGw6IHVybCgjZzIpOyB9CgkJLnMyIHsgZmlsbDogdXJsKCNnMyk7IH0KCQkuczMgeyBmaWxsOiB1cmwoI2c0KTsgfQoJCS50NCB7IGZvbnQtc2l6ZTogMTYwcHg7IGZpbGw6ICM1MGMxZTk7IGZvbnQtZmFtaWx5OiAiUG9wcGlucyI7IH0KCTwvc3R5bGU+Cgk8ZyBpZD0iMSI+CgkJPHBhdGggaWQ9IkxheWVyIiBjbGFzcz0iczAiIGQ9Im01OS44IDQwLjJsLTQuOCA0Ljh2LTE0YzAtMC42IDAuNC0xIDEtMWg0YzAuNiAwIDEgMC40IDEgMXY2LjNjMCAxLjEtMC40IDIuMS0xLjIgMi45eiIvPgoJCTxwYXRoIGlkPSJMYXllciIgY2xhc3M9InMxIiBkPSJtNTUgMzl2NmgtMjhjLTIuMiAwLTQtMS44LTQtNHYtMzNjMC0wLjYgMC40LTEgMS0xaDRjMC42IDAgMSAwLjQgMSAxdjMwYzAgMC42IDAuNCAxIDEgMXoiLz4KCQk8cGF0aCBpZD0iTGF5ZXIiIGNsYXNzPSJzMiIgZD0ibTQyIDIwdjEzYzAgMS4xLTAuOSAyLTIgMmgtNGMtMS4xIDAtMi0wLjktMi0ydi0xM3oiLz4KCQk8cGF0aCBpZD0iTGF5ZXIiIGNsYXNzPSJzMyIgZD0ibTYyLjYgMTUuNGwtOS05LjFjLTAuMy0wLjMtMC43LTAuNC0xLTAuMi0wLjQgMC4xLTAuNiAwLjQtMC42IDAuOHY1LjFoLTYuN2MtMi4xIDAtNC4xIDAuOC01LjYgMi4zbC01LjcgNS43aDE4djUuMWMwIDAuNCAwLjIgMC43IDAuNiAwLjhxMC4xIDAuMSAwLjMgMC4xIDAuNCAwIDAuNy0wLjNsOS05LjFjMC40LTAuMyAwLjQtMC45IDAtMS4yeiIvPgoJCTxnIGlkPSJJTkZPU1RBQ0tFUiI+CgkJCTx0ZXh0IGlkPSJJTkZPU1RBQ0tFUiIgc3R5bGU9InRyYW5zZm9ybTogbWF0cml4KC4xOTgsMCwwLC4xOTgsNzEuMTM4LDkuOTAxKSI+CgkJCQk8dHNwYW4geD0iMCIgeT0iMTM5LjQiIGNsYXNzPSJ0MSI+STwvdHNwYW4+CgkJCQk8dHNwYW4geT0iMTM5LjQiIGNsYXNzPSJ0MSI+TjwvdHNwYW4+CgkJCQk8dHNwYW4geT0iMTM5LjQiIGNsYXNzPSJ0MSI+RjwvdHNwYW4+CgkJCQk8dHNwYW4geT0iMTM5LjQiIGNsYXNzPSJ0MSI+TzwvdHNwYW4+CgkJCQk8dHNwYW4geT0iMTM5LjQiIGNsYXNzPSJ0MSI+UzwvdHNwYW4+CgkJCQk8dHNwYW4geT0iMTM5LjQiIGNsYXNzPSJ0MSI+VDwvdHNwYW4+CgkJCQk8dHNwYW4geT0iMTM5LjQiIGNsYXNzPSJ0MSI+QTwvdHNwYW4+CgkJCQk8dHNwYW4geT0iMTM5LjQiIGNsYXNzPSJ0MSI+QzwvdHNwYW4+CgkJCQk8dHNwYW4geT0iMTM5LjQiIGNsYXNzPSJ0MSI+SzwvdHNwYW4+CgkJCQk8dHNwYW4geT0iMTM5LjQiIGNsYXNzPSJ0MSI+RTwvdHNwYW4+CgkJCQk8dHNwYW4geT0iMTM5LjQiIGNsYXNzPSJ0MSI+UjwvdHNwYW4+CgkJCQk8dHNwYW4geT0iMTM5LjQiIGNsYXNzPSJ0MSI+CgkJCQk8L3RzcGFuPgoJCQk8L3RleHQ+CgkJPC9nPgoJPC9nPgo8L3N2Zz4K" />
153-
</div>
189+
<div class="upperline"/>
154190
<div class="container">
155191
<div class="content">
156192
{markdown}
157193
</div>
158194
</div>
195+
<div class="footer">
196+
<img alt="Infostacker Logo" src="data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDI5OSA1MCIgd2lkdGg9IjMyMCIgaGVpZ2h0PSI1MCI+Cgk8dGl0bGU+aW5mb3N0YWNrZXIgbG9nbyAyIC0gY29sb3Itc3ZnPC90aXRsZT4KCTxzdHlsZT4KCQkudDEgeyBmb250LXNpemU6IDE2MHB4OyBmaWxsOiAjNTBjMWU5OyBmb250LXdlaWdodDogNDAwOyBmb250LWZhbWlseTogIlBvcHBpbnMiLCBBcmlhbCwgc2Fucy1zZXJpZjsgfQoJPC9zdHlsZT4KCTxkZWZzPgoJCTxsaW5lYXJHcmFkaWVudCBpZD0iZzEiIHgyPSIxIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgZ3JhZGllbnRUcmFuc2Zvcm09Im1hdHJpeCgwLC0yOS41OSwxMS44MzYsMCw0Myw0NS42NjQpIj4KCQkJPHN0b3Agb2Zmc2V0PSIwIiBzdG9wLWNvbG9yPSIjMDM2MmIwIi8+CgkJCTxzdG9wIG9mZnNldD0iLjExMiIgc3RvcC1jb2xvcj0iIzAzNmFiZCIvPgoJCQk8c3RvcCBvZmZzZXQ9Ii4yNTgiIHN0b3AtY29sb3I9IiMwMzZmYzUiLz4KCQkJPHN0b3Agb2Zmc2V0PSIuNSIgc3RvcC1jb2xvcj0iIzAzNzBjOCIvPgoJCQk8c3RvcCBvZmZzZXQ9Ii43NDIiIHN0b3AtY29sb3I9IiMwMzZmYzUiLz4KCQkJPHN0b3Agb2Zmc2V0PSIuODg4IiBzdG9wLWNvbG9yPSIjMDM2YWJkIi8+CgkJCTxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iIzAzNjJiMCIvPgoJCTwvbGluZWFyR3JhZGllbnQ+CgkJPGxpbmVhckdyYWRpZW50IGlkPSJnMiIgeDI9IjEiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiBncmFkaWVudFRyYW5zZm9ybT0ibWF0cml4KDMyLDAsMCwzOCw4LDI2KSI+CgkJCTxzdG9wIG9mZnNldD0iMCIgc3RvcC1jb2xvcj0iIzMyYmRlZiIvPgoJCQk8c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiMxZWEyZTQiLz4KCQk8L2xpbmVhckdyYWRpZW50PgoJCTxsaW5lYXJHcmFkaWVudCBpZD0iZzMiIHgyPSIxIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgZ3JhZGllbnRUcmFuc2Zvcm09Im1hdHJpeCgwLC0xNC45NDgsNy45NzIsMCwyMywzNSkiPgoJCQk8c3RvcCBvZmZzZXQ9Ii4yNzMiIHN0b3AtY29sb3I9IiM4ZGQzZmYiLz4KCQkJPHN0b3Agb2Zmc2V0PSIuNjExIiBzdG9wLWNvbG9yPSIjNzBjYWZmIi8+CgkJCTxzdG9wIG9mZnNldD0iLjc5NSIgc3RvcC1jb2xvcj0iIzU3YzJmZiIvPgoJCQk8c3RvcCBvZmZzZXQ9Ii45NCIgc3RvcC1jb2xvcj0iIzQ2YmRmZiIvPgoJCQk8c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiMzY2JhZmYiLz4KCQk8L2xpbmVhckdyYWRpZW50PgoJCTxsaW5lYXJHcmFkaWVudCBpZD0iZzQiIHgyPSIxIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgZ3JhZGllbnRUcmFuc2Zvcm09Im1hdHJpeCgxNiwxNiwtMjEuMDYyLDIxLjA2MiwzMSwxOCkiPgoJCQk8c3RvcCBvZmZzZXQ9IjAiIHN0b3AtY29sb3I9IiM4ZGQzZmYiLz4KCQkJPHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjM2NiYWZmIi8+CgkJPC9saW5lYXJHcmFkaWVudD4KCTwvZGVmcz4KCTxzdHlsZT4KCQl0c3BhbiB7IHdoaXRlLXNwYWNlOiBwcmU7IH0KCQkuczAgeyBmaWxsOiB1cmwoI2cxKTsgfQoJCS5zMSB7IGZpbGw6IHVybCgjZzIpOyB9CgkJLnMyIHsgZmlsbDogdXJsKCNnMyk7IH0KCQkuczMgeyBmaWxsOiB1cmwoI2c0KTsgfQoJCS50NCB7IGZvbnQtc2l6ZTogMTYwcHg7IGZpbGw6ICM1MGMxZTk7IGZvbnQtZmFtaWx5OiAiUG9wcGlucyI7IH0KCTwvc3R5bGU+Cgk8ZyBpZD0iMSI+CgkJPHBhdGggaWQ9IkxheWVyIiBjbGFzcz0iczAiIGQ9Im01OS44IDQwLjJsLTQuOCA0Ljh2LTE0YzAtMC42IDAuNC0xIDEtMWg0YzAuNiAwIDEgMC40IDEgMXY2LjNjMCAxLjEtMC40IDIuMS0xLjIgMi45eiIvPgoJCTxwYXRoIGlkPSJMYXllciIgY2xhc3M9InMxIiBkPSJtNTUgMzl2NmgtMjhjLTIuMiAwLTQtMS44LTQtNHYtMzNjMC0wLjYgMC40LTEgMS0xaDRjMC42IDAgMSAwLjQgMSAxdjMwYzAgMC42IDAuNCAxIDEgMXoiLz4KCQk8cGF0aCBpZD0iTGF5ZXIiIGNsYXNzPSJzMiIgZD0ibTQyIDIwdjEzYzAgMS4xLTAuOSAyLTIgMmgtNGMtMS4xIDAtMi0wLjktMi0ydi0xM3oiLz4KCQk8cGF0aCBpZD0iTGF5ZXIiIGNsYXNzPSJzMyIgZD0ibTYyLjYgMTUuNGwtOS05LjFjLTAuMy0wLjMtMC43LTAuNC0xLTAuMi0wLjQgMC4xLTAuNiAwLjQtMC42IDAuOHY1LjFoLTYuN2MtMi4xIDAtNC4xIDAuOC01LjYgMi4zbC01LjcgNS43aDE4djUuMWMwIDAuNCAwLjIgMC43IDAuNiAwLjhxMC4xIDAuMSAwLjMgMC4xIDAuNCAwIDAuNy0wLjNsOS05LjFjMC40LTAuMyAwLjQtMC45IDAtMS4yeiIvPgoJCTxnIGlkPSJJTkZPU1RBQ0tFUiI+CgkJCTx0ZXh0IGlkPSJJTkZPU1RBQ0tFUiIgc3R5bGU9InRyYW5zZm9ybTogbWF0cml4KC4xOTgsMCwwLC4xOTgsNzEuMTM4LDkuOTAxKSI+CgkJCQk8dHNwYW4geD0iMCIgeT0iMTM5LjQiIGNsYXNzPSJ0MSI+STwvdHNwYW4+CgkJCQk8dHNwYW4geT0iMTM5LjQiIGNsYXNzPSJ0MSI+TjwvdHNwYW4+CgkJCQk8dHNwYW4geT0iMTM5LjQiIGNsYXNzPSJ0MSI+RjwvdHNwYW4+CgkJCQk8dHNwYW4geT0iMTM5LjQiIGNsYXNzPSJ0MSI+TzwvdHNwYW4+CgkJCQk8dHNwYW4geT0iMTM5LjQiIGNsYXNzPSJ0MSI+UzwvdHNwYW4+CgkJCQk8dHNwYW4geT0iMTM5LjQiIGNsYXNzPSJ0MSI+VDwvdHNwYW4+CgkJCQk8dHNwYW4geT0iMTM5LjQiIGNsYXNzPSJ0MSI+QTwvdHNwYW4+CgkJCQk8dHNwYW4geT0iMTM5LjQiIGNsYXNzPSJ0MSI+QzwvdHNwYW4+CgkJCQk8dHNwYW4geT0iMTM5LjQiIGNsYXNzPSJ0MSI+SzwvdHNwYW4+CgkJCQk8dHNwYW4geT0iMTM5LjQiIGNsYXNzPSJ0MSI+RTwvdHNwYW4+CgkJCQk8dHNwYW4geT0iMTM5LjQiIGNsYXNzPSJ0MSI+UjwvdHNwYW4+CgkJCQk8dHNwYW4geT0iMTM5LjQiIGNsYXNzPSJ0MSI+CgkJCQk8L3RzcGFuPgoJCQk8L3RleHQ+CgkJPC9nPgoJPC9nPgo8L3N2Zz4K" />
197+
<div class="footer-content">
198+
<p>Copyright 2024 Infostacker.</p>
199+
<p>Please visit our website <a href="https://infostacker.com" target="_blank">infostacker.com</a> to publish your own notes from Obsidian</p>
200+
</div>
201+
</div>
202+
<script type="text/javascript">
203+
window.onload = function () {
204+
// Style the first <p> element as <h1>
205+
const firstParagraph = document.querySelector('p');
206+
if (firstParagraph) {
207+
firstParagraph.style.fontSize = '40px';
208+
firstParagraph.style.fontWeight = 'bold';
209+
firstParagraph.style.marginTop = '1em';
210+
firstParagraph.style.marginBottom = '0.5em';
211+
firstParagraph.style.color = '#333'; // Match the color for <h1>
212+
// Add more styles if needed
213+
}
214+
215+
// Existing code to style the "tags:" paragraph
216+
const tagsParagraph = Array.from(document.querySelectorAll('p')).find(p => p.innerText.trim() === 'tags:');
217+
if (tagsParagraph) {
218+
tagsParagraph.style.fontSize = '22px';
219+
tagsParagraph.style.textTransform = 'uppercase';
220+
tagsParagraph.style.fontWeight = 'bold';
221+
tagsParagraph.style.marginBottom = '0';
222+
const tagsList = tagsParagraph.nextElementSibling;
223+
if (tagsList && tagsList.tagName.toLowerCase() === 'ul') {
224+
tagsList.style.listStylePosition = 'inside';
225+
tagsList.style.paddingLeft = '4px';
226+
tagsList.style.marginTop = '0';
227+
}
228+
}
229+
};
230+
</script>
159231
</body>
160232
</html>

0 commit comments

Comments
 (0)