summaryrefslogtreecommitdiff
path: root/views
diff refs
from: back
to: back
| flip
diff options
context:
space:
mode:
Diffstat (limited to 'views')
-rw-r--r--views/index.html51
-rw-r--r--views/layouts/blog-page.html78
2 files changed, 15 insertions, 114 deletions
diff --git a/views/index.html b/views/index.html
index ce80db6..cff3826 100644
--- a/views/index.html
+++ b/views/index.html
@@ -9,42 +9,9 @@
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Spectral:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,200;1,300;1,400;1,500;1,600;1,700;1,800&family=Patua+One&display=swap" rel="stylesheet">
<link href="/output.css" rel="stylesheet">
- <style>
- .menu-outer-body {
- border-radius: 10%;
- width: 60vw;
- height: 40vh;
- }
-
- .menu-inner-body {
- width: 85%;
- }
-
- @media (max-aspect-ratio: 1.2/1) {
- .menu-outer-body {
- border-radius: 5%;
- }
-
- .menu-inner-body {
- width: 92.5%;
- }
- }
-
- @media (max-aspect-ratio: 0.8/1) {
- .menu-outer-body {
- width: 100vw;
- height: 80vh;
- border-radius: 0;
- }
-
- .menu-inner-body {
- width: 100%;
- }
- }
- </style>
</head>
-<body data-theme="night" class="font-spectral text-main-dark text-vmax1-5 overflow-hidden bg-interlocked-hexagons h-screen flex flex-col">
+<body data-theme="night" class="font-spectral text-main-dark overflow-hidden bg-interlocked-hexagons h-screen flex flex-col">
<div class="absolute star z-0">*</div>
<div class="absolute star z-0">*</div>
@@ -90,22 +57,22 @@
switchTheme(savedTheme);
</script>
- <div class="menu-outer-body p-4 z-1 bg-background-dark flex flex-col mx-auto my-auto opacity-70">
- <p class="font-patua mx-auto text-vmax2-5 mt-vmin0-8 mb-vmin1-6">saya.today</p>
- <div class="menu-inner-body grow bg-background-light flex flex-col mx-auto mb-vmin1-6 overflow-y-auto opacity-100">
+ <div class="p-4 w-6/12 h-4/12 z-1 rounded-4xl bg-background-dark flex flex-col mx-auto my-auto opacity-70">
+ <p class="font-patua mx-auto text-4xl mt-2 mb-4">saya.today</p>
+ <div class="w-10/12 grow bg-background-light flex flex-col mx-auto mb-4 overflow-y-auto opacity-100">
{{- range .BlogPages }}
- <div class="m-2 flex flex-row justify-center justify-items-center gap-4">
- <img onclick="location.href='/blog/{{ .Link }}';" style="flex-grow: 0;" class="flex-1 cursor-pointer object-cover rounded-4xl select-none w-vmax4 h-vmax4" src="https://f003.backblazeb2.com/file/sayana-photos/thumbnails/{{ .Thumbnail }}.webp">
+ <div class="m-2 min-h-16 flex flex-row justify-center justify-items-center gap-4">
+ <img style="flex-grow: 0;" class="flex-1 object-cover w-16 h-16 rounded-4xl select-none" src="https://f003.backblazeb2.com/file/sayana-photos/thumbnails/{{ .Thumbnail }}.webp">
<div class="flex-5 justify-self-center flex-col border-r-1 border-dashed border-opacity-50 border-main-medium">
<a href="/blog/{{ .Link }}" class="block font-extrabold">{{ .Title }}</a>
- <a href="/blog/{{ .Link }}" class="block italic text-vmax1 text-secondary">{{ .ActionDate }}</a>
+ <a href="/blog/{{ .Link }}" class="block italic text-secondary">{{ .ActionDate }}</a>
<p>{{ .ShortDescription }}</p>
</div>
<div class="flex-3 justify-self-center flex flex-col text-right">
- <p class="grow text-vmax1">
+ <p class="grow">
Тэги: {{ .Tags }}
</p>
- <p class="italic text-secondary text-vmax1">
+ <p class="italic text-secondary">
{{ .PublishedTime }}
</p>
</div>
diff --git a/views/layouts/blog-page.html b/views/layouts/blog-page.html
index 427f33e..6ee7d85 100644
--- a/views/layouts/blog-page.html
+++ b/views/layouts/blog-page.html
@@ -8,23 +8,13 @@
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/2.8.3/css/lightgallery.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/2.8.3/css/lg-zoom.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/2.8.3/css/lg-thumbnail.min.css">
-{{- if .MapLocationX }}
- <link rel="stylesheet" href="https://f003.backblazeb2.com/file/sayana-static/libs/leaflet/1.9.4/leaflet.css">
-{{- end }}
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Spectral:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,200;1,300;1,400;1,500;1,600;1,700;1,800&family=Patua+One&display=swap" rel="stylesheet">
<link href="/output.css" rel="stylesheet">
-
- <style>
- .map-container .leaflet-container {
- width: 100% !important;
- height: 100% !important;
- }
- </style>
</head>
-<body data-theme="night" class="font-spectral text-main-dark overflow-hidden bg-interlocked-hexagons h-screen flex">
+<body data-theme="olive" class="font-spectral text-main-dark overflow-hidden bg-interlocked-hexagons bg-repeat bg-pattern-body h-screen flex">
<script>
function switchTheme(theme) {
@@ -40,11 +30,11 @@
document.body.setAttribute('data-theme', theme);
}
- const savedTheme = localStorage.getItem('theme') || 'night';
+ const savedTheme = localStorage.getItem('theme') || 'olive';
switchTheme(savedTheme);
</script>
- <div class="desktop-sidebar-custom sticky bg-squares-and-triangles bg-repeat flex-col items-center shadow-2xl z-20 h-screen desktop">
+ <div class="desktop-sidebar-custom fixed bg-squares-and-triangles bg-repeat flex-col items-center shadow-2xl z-20 h-screen desktop">
<div class="logo-custom text-sidebar font-patua font-extrabold text-center relative z-20">
saya.today
</div>
@@ -56,7 +46,7 @@
</div>
</div>
- <div class="bg-background-dark z-10 h-screen desktop">
+ <div class="bg-background-dark z-10 h-screen desktop" style="padding-left: 5vw;">
<div class="border-left-custom bg-background-dark"></div>
<div class="content-square flex flex-col bg-background-dark relative mt-vmin1-6 mx-vmin1-6">
@@ -70,11 +60,6 @@
<div class="bg-background-light flex flex-col flex-1 overflow-y-auto inset-shadow p-vmin2-4">
{{ .ParsedMarkdownDesktop }}
- {{- if .MapLocationX }}
- <hr class="border-t-4 border-dotted border-main-dark mt-vmin0-8 mb-vmin0-8 w-p80 ml-auto mr-auto">
- <div id="location-map-desktop" class="relative p-vmin0-8 flex-none ml-auto mr-auto w-p60 h-vh40"></div>
- <hr class="border-t-4 border-dotted border-main-dark mt-vmin0-8 mb-vmin0-8 w-p80 ml-auto mr-auto">
- {{- end }}
</div>
<div class="flex flex-row mt-vmin0-8 mb-vmin0-4">
@@ -104,7 +89,7 @@
</div>
</div>
- <div class="bg-background-dark flex-row z-10 w-vw90 h-[92vh] mobile" style="margin-left: 5vw; margin-top: 8vh;">
+ <div class="bg-background-dark flex-row z-10 w-vw90 h-vh90 mobile" style="margin-left: 5vw; margin-top: 10vh;">
<div class="border-left-custom bg-background-dark"></div>
<div class="content-square flex flex-col bg-background-dark relative mt-vmin1-6 mx-vmin1-6">
@@ -116,13 +101,8 @@
</div>
<hr class="border-t-4 border-dotted border-main-dark mb-vmin0-8">
- <div class="bg-background-light flex flex-col overflow-y-auto inset-shadow p-vmin2-4 max-h-[80%]">
+ <div class="bg-background-light flex flex-col flex-1 overflow-y-auto inset-shadow p-vmin2-4">
{{ .ParsedMarkdownMobile }}
- {{- if .MapLocationX }}
- <hr class="border-t-4 border-dotted border-main-dark mt-vmin0-8 mb-vmin0-8 w-p80 ml-auto mr-auto">
- <div id="location-map-mobile" class="relative p-vmin0-8 flex-none ml-auto mr-auto w-p100 h-vh40"></div>
- <hr class="border-t-4 border-dotted border-main-dark mt-vmin0-8 mb-vmin0-8 w-p80 ml-auto mr-auto">
- {{- end }}
</div>
<div class="flex flex-row mt-vmin0-8 mb-vmin0-4">
@@ -143,52 +123,6 @@
<script src="https://f003.backblazeb2.com/file/sayana-static/libs/lightgallery/2.8.3/lightgallery.min.js"></script>
<script src="https://f003.backblazeb2.com/file/sayana-static/libs/lightgallery/2.8.3/plugins/lg-zoom.min.js"></script>
<script src="https://f003.backblazeb2.com/file/sayana-static/libs/lightgallery/2.8.3/plugins/lg-thumbnail.min.js"></script>
-{{- if .MapLocationX }}
- <script src="https://f003.backblazeb2.com/file/sayana-static/libs/leaflet/1.9.4/leaflet.js"></script>
-
- <script>
- function initLocationMap(id, x, y, relativeErrorMeters = 0) {
- var map = L.map(id).setView([x, y], 13);
-
- L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
- maxZoom: 19,
- attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
- }).addTo(map);
-
- if (relativeErrorMeters != 0) {
- var circle = L.circle([x, y], {
- color: '#8a9d8a',
- fillColor: '#8a9d8a',
- fillOpacity: 0.15,
- radius: relativeErrorMeters
- }).addTo(map);
- }
-
- var marker = L.marker([x, y]).addTo(map);
- }
-
- document.addEventListener('DOMContentLoaded', () => {initLocationMap(
- 'location-map-desktop',
- {{ .MapLocationX }},
- {{ .MapLocationY }},
- {{ .MapLocationAreaMeters }}
- )});
-
- document.addEventListener('DOMContentLoaded', () => {initLocationMap(
- 'location-map-mobile',
- {{ .MapLocationX }},
- {{ .MapLocationY }},
- {{ .MapLocationAreaMeters }}
- )});
-
- window.addEventListener('resize', function() {
- setTimeout(() => {
- if (window.location-map-desktop) window.location-map-desktop.invalidateSize();
- if (window.location-map-mobile) window.location-map-mobile.invalidateSize();
- }, 100);
- });
- </script>
-{{- end }}
</body>
</html>