summaryrefslogtreecommitdiffci
path: root/views/layouts
diff refs
from: back
to: back
| flip
diff options
context:
space:
mode:
Diffstat (limited to 'views/layouts')
-rw-r--r--views/layouts/general-page.html352
1 files changed, 144 insertions, 208 deletions
diff --git a/views/layouts/general-page.html b/views/layouts/general-page.html
index 06ef625..b435402 100644
--- a/views/layouts/general-page.html
+++ b/views/layouts/general-page.html
@@ -13,32 +13,34 @@
.Content}}content="{{.}}"
{{end}}
/>
- {{- if eq .Property "og:title" }}
- <title>{{.Content}}</title>
- {{- end }} {{- if eq .Property "og:description" }}
+ {{- if eq .Property "og:description" }}
<meta name="description" content="{{.Content}}" />
{{- end }} {{- if eq .Property "og:url" }}
<link rel="canonical" href="{{.Content}}" />
{{- end }} {{- end }}
<link
rel="stylesheet"
- href="{{ .StaticStorage.BaseUrl }}/fonts/fonts.css"
+ href="{{ .StaticStorageBaseUrl }}/fonts/fonts.css"
/>
<link
rel="stylesheet"
- href="{{ .StaticStorage.BaseUrl }}/libs/leaflet/1.9.4/leaflet.css"
+ href="{{ .StaticStorageBaseUrl }}/libs/font-awesome/7.2.0/css/fontawesome.min.css"
/>
<link
rel="stylesheet"
- href="{{ .StaticStorage.BaseUrl }}/libs/leaflet.markercluster/1.4.1/MarkerCluster.css"
+ href="{{ .StaticStorageBaseUrl }}/libs/font-awesome/7.2.0/css/brands.min.css"
/>
<link
rel="stylesheet"
- href="{{ .StaticStorage.BaseUrl }}/libs/leaflet.markercluster/1.4.1/MarkerCluster.Default.css"
+ href="{{ .StaticStorageBaseUrl }}/libs/font-awesome/7.2.0/css/solid.min.css"
/>
<link
rel="stylesheet"
- href="{{ .StaticStorage.BaseUrl }}/libs/glightbox/3.3.0/css/glightbox.min.css"
+ href="{{ .StaticStorageBaseUrl }}/libs/leaflet/1.9.4/leaflet.css"
+ />
+ <link
+ rel="stylesheet"
+ href="{{ .StaticStorageBaseUrl }}/libs/glightbox/3.3.0/css/glightbox.min.css"
/>
<link rel="stylesheet" href="/output.css" />
<link
@@ -53,21 +55,11 @@
type="image/svg+xml"
media="(prefers-color-scheme: dark)"
/>
- <link
- rel="icon"
- href="/favicon.ico"
- type="image/x-icon"
- />
{{- with .LinkedData }}
<script type="application/ld+json">
{{ . }}
</script>
{{- end }}
- <script src="{{ .StaticStorage.BaseUrl }}/libs/htmx/2.0.6/htmx.min.js"></script>
- <script src="{{ .StaticStorage.BaseUrl }}/libs/leaflet/1.9.4/leaflet.js"></script>
- <script src="{{ .StaticStorage.BaseUrl }}/libs/protomaps-leaflet/5.0.0/dist/protomaps-leaflet.js"></script>
- <script src="{{ .StaticStorage.BaseUrl }}/libs/leaflet.markercluster/1.4.1/leaflet.markercluster.js"></script>
- <script src="{{ .StaticStorage.BaseUrl }}/libs/glightbox/3.3.0/js/glightbox.min.js"></script>
</head>
<body
@@ -122,17 +114,6 @@
<path d="M17.71 1c0.79 0.05 1.58 0 2.37 0a7.47 7.47 0 0 1 0.94 0.09 9 9 0 0 1 1.26 0.16 0.47 0.47 0 0 1 0.29 0.28 4.56 4.56 0 0 1 0.25 1.14 32.83 32.83 0 0 1 0.28 3.72c0 0.09 0.51 0.32 0.6 -0.14l0.06 -0.47a21.7 21.7 0 0 0 0.16 -3.22 4.7 4.7 0 0 0 -0.28 -1.5 1.53 1.53 0 0 0 -1 -0.93 8.59 8.59 0 0 0 -1.49 -0.1 9.73 9.73 0 0 0 -1.08 0c-0.79 0.06 -1.56 0.2 -2.35 0.25a0.34 0.34 0 0 0 -0.34 0.34 0.34 0.34 0 0 0 0.33 0.38Z" fill="var(--color-accent-deep)" fill-rule="evenodd" stroke-width="1"></path>
<path d="M23.82 18.17c0 -0.42 -0.05 -0.84 -0.4 -0.78s-0.26 0.35 -0.27 0.81a28.84 28.84 0 0 1 -0.27 3.08 4.63 4.63 0 0 1 -0.24 1.14 0.46 0.46 0 0 1 -0.3 0.28 7.6 7.6 0 0 1 -1.25 0.16 7.63 7.63 0 0 1 -0.95 0.09l-2.36 0a0.35 0.35 0 1 0 0 0.69c0.79 0.05 1.56 0.19 2.35 0.25a9.53 9.53 0 0 0 1.07 0 8.52 8.52 0 0 0 1.49 -0.1 1.55 1.55 0 0 0 1 -0.93 4.7 4.7 0 0 0 0.28 -1.5 23 23 0 0 0 -0.15 -3.19Z" fill="var(--color-accent-deep)" fill-rule="evenodd" stroke-width="1"></path>
</g></symbol>
- <symbol id="icon-like" viewBox="-2 -2 28 28" fill="none">
- <path fill="currentColor" d="M22.155 6.29294c-0.8113 -1.34837 -1.8229 -2.56561 -3 -3.61 -1.6282 -1.47261 -3.6782 -2.396134 -5.86 -2.6399952C11.1388 -0.137008 8.97321 0.252665 7.015 1.17294c-1.6708 0.75913 -3.14018 1.8997 -4.29 3.33C1.59785 5.92036 0.798705 7.56988 0.385003 9.33294c-0.010341 0.04271 -0.012051 0.08704 -0.005029 0.13041 0.007022 0.04337 0.022633 0.08491 0.045919 0.12216 0.023286 0.03726 0.053777 0.06949 0.089685 0.09481 0.035908 0.02532 0.07651 0.04321 0.119425 0.05262 0.083317 0.01503 0.169224 -0.00254 0.239953 -0.04907 0.070728 -0.04653 0.120867 -0.11846 0.140044 -0.20093 0.42729 -1.65655 1.22384 -3.19495 2.33 -4.5 1.0777 -1.30186 2.44846 -2.32993 4 -3 1.83266 -0.80027 3.84 -1.117035 5.83 -0.92 1.9654 0.25006 3.804 1.10643 5.26 2.45 1.0733 0.9746 1.9996 2.09963 2.75 3.34 0.77 1.20382 1.2366 2.57635 1.36 3.99996 0.1304 1.5877 -0.0565 3.1854 -0.55 4.7 -0.5032 1.5017 -1.4221 2.8298 -2.65 3.83 -0.7981 0.673 -1.7331 1.1644 -2.74 1.44 -1.5427 0.4432 -3.1354 0.6885 -4.74 0.73 -0.0778 0.0052 -0.1505 0.0404 -0.2028 0.0983 -0.0523 0.0579 -0.08 0.1338 -0.0772 0.2117 0 0.039 0.0078 0.0775 0.023 0.1134 0.0152 0.0358 0.0374 0.0683 0.0654 0.0953 0.028 0.0271 0.0612 0.0482 0.0976 0.0622 0.0363 0.014 0.0751 0.0205 0.114 0.0191 1.6629 -0.0085 3.3184 -0.2201 4.93 -0.63 1.0928 -0.2824 2.1146 -0.7899 3 -1.49 1.3927 -1.0653 2.454 -2.5046 3.06 -4.15 0.5754 -1.6287 0.8235 -3.3551 0.73 -5.08 -0.1076 -1.59917 -0.6055 -3.14765 -1.45 -4.50996Z" stroke-width="1"></path>
- <path fill="currentColor" d="M15.935 15.903c0.6791 -0.2938 1.2468 -0.7964 1.6208 -1.4347 0.3741 -0.6384 0.5349 -1.3794 0.4592 -2.1153 -0.0284 -0.1682 -0.0994 -0.3264 -0.2061 -0.4594 -0.1068 -0.133 -0.2458 -0.2365 -0.4039 -0.3007 -0.4529 -0.1228 -0.927 -0.1466 -1.39 -0.0699 -1.22 0.07 -3.05 0.38 -4.54 0.54 -0.4 0.05 -0.78 0.08 -1.11 0.1 -0.0689 0.0127 -0.1312 0.0492 -0.1761 0.1031 -0.0448 0.0539 -0.0693 0.1217 -0.0693 0.1919 0 0.0701 0.0245 0.1379 0.0693 0.1918 0.0449 0.0539 0.1072 0.0904 0.1761 0.1032l5.66 -0.18h0.83c0.0328 0.5028 -0.0896 1.0037 -0.3508 1.4347 -0.2611 0.431 -0.6483 0.7715 -1.1092 0.9753 -0.4499 0.3065 -0.9606 0.5125 -1.4972 0.6039 -0.5367 0.0915 -1.0868 0.0663 -1.6128 -0.074 -0.4102 -0.1727 -0.7888 -0.4126 -1.12 -0.71 -0.3351 -0.2774 -0.6136 -0.6169 -0.82 -1 -0.0184 -0.0407 -0.0446 -0.0774 -0.0771 -0.108 -0.0326 -0.0305 -0.0709 -0.0544 -0.1127 -0.0702 -0.0418 -0.0158 -0.0862 -0.0232 -0.1309 -0.0218 -0.04465 0.0014 -0.08858 0.0116 -0.12929 0.03 -0.04037 0.0174 -0.07686 0.0426 -0.10734 0.0743 -0.03049 0.0316 -0.05435 0.069 -0.07018 0.11 -0.01584 0.041 -0.02333 0.0847 -0.02203 0.1286 0.00129 0.044 0.01133 0.0872 0.02955 0.1272 0.21114 0.4969 0.52069 0.9459 0.90999 1.32 0.3786 0.3811 0.8137 0.7015 1.29 0.95 0.6592 0.2289 1.361 0.3082 2.0546 0.2321 0.6936 -0.0762 1.3616 -0.3057 1.9554 -0.6721Z" stroke-width="1"></path>
- <path fill="currentColor" d="M8.33499 10.9829c0.22252 0.0613 0.45748 0.0613 0.68 0 0.17653 -0.0617 0.33498 -0.1663 0.46112 -0.3044 0.12615 -0.1381 0.21605 -0.3053 0.26164 -0.4867 0.04559 -0.1814 0.04545 -0.37124 -0.00041 -0.55256 -0.04586 -0.18131 -0.136 -0.34841 -0.26235 -0.4863 -1 -1.24 -3 0.82 -1.74 1.71996 0.1869 0.0887 0.39382 0.1266 0.6 0.11Z" stroke-width="1"></path>
- <path fill="currentColor" d="M19.1653 10.343c0.2247 0.0401 0.456 0.0194 0.67 -0.06 0.1784 -0.0611 0.3386 -0.1658 0.4661 -0.30464 0.1275 -0.13885 0.2183 -0.3074 0.264 -0.4903 0.0457 -0.1829 0.045 -0.37432 -0.0022 -0.55685 -0.0472 -0.18253 -0.1393 -0.35035 -0.2679 -0.48818 -1 -1.23 -3 0.83 -1.74 1.72997 0.1838 0.1117 0.3949 0.1705 0.61 0.17Z" stroke-width="1"></path>
- <path fill="currentColor" d="M9.63505 20.0929c-0.10233 -0.204 -0.25778 -0.3768 -0.45 -0.5 0.19629 -0.3235 0.27075 -0.7064 0.21 -1.08 -0.04172 -0.3535 -0.15757 -0.6943 -0.34 -1 -0.13496 -0.1997 -0.31256 -0.3671 -0.52 -0.49 0.04212 -0.0952 0.06912 -0.1964 0.08 -0.3 0.05325 -0.3277 0.02651 -0.6634 -0.07796 -0.9786 -0.10447 -0.3151 -0.28357 -0.6003 -0.52204 -0.8314 -0.51428 -0.3306 -1.1194 -0.4915 -1.73 -0.46 -0.74972 -0.022 -1.49478 0.125 -2.18 0.43 0.05982 -0.8997 -0.19079 -1.7927 -0.71 -2.53 -0.9 -1 -2.54 -0.13 -2.71 1.36 -0.017326 0.6116 0.060262 1.2222 0.23 1.81 0.28 1 0.23 0.95 0.48 1.33 -0.22002 0.2395 -0.405175 0.5088 -0.55 0.8 -0.1 0.34 -0.28 0.74 -0.12 1 0.16 0.26 0.3 0.23 0.47 0.06 0.17 -0.17 0.09 -0.44 0.14 -0.6 0.07428 -0.2866 0.22256 -0.5487 0.43 -0.76 0.16 -0.21 0.28 -0.22 0.47 -0.4 1.85 -1.77 4.62 -1.97 5.12 -1.28 0.85 1.16 -1.16 1.29 -2.9 2.37 -0.03825 0.011 -0.07372 0.03 -0.10405 0.0557 -0.03034 0.0258 -0.05483 0.0577 -0.07187 0.0936 -0.01703 0.036 -0.0262 0.0752 -0.02691 0.1149 -0.0007 0.0398 0.00708 0.0793 0.02283 0.1158 0.01228 0.0374 0.03203 0.0719 0.05805 0.1014 0.02602 0.0295 0.05777 0.0534 0.09332 0.0702 0.03554 0.0168 0.07414 0.0263 0.11345 0.0277 0.0393 0.0015 0.07849 -0.0051 0.11518 -0.0193 0.41 -0.06 0.77 -0.06 1.12 -0.11 1 -0.17 1.25 -0.66 2.16 -0.51 0.15573 0.127 0.26274 0.3039 0.30284 0.5008 0.0401 0.1968 0.01083 0.4015 -0.08284 0.5792 -0.45993 0.315 -0.97588 0.539 -1.52 0.66 -0.36935 0.1765 -0.72678 0.377 -1.07 0.6 -0.03798 0.0103 -0.07348 0.0282 -0.10433 0.0526 -0.03085 0.0244 -0.05641 0.0549 -0.07512 0.0895 -0.01871 0.0346 -0.03018 0.0727 -0.03371 0.1119 -0.00353 0.0391 0.00094 0.0786 0.01316 0.116 0.01027 0.038 0.02815 0.0735 0.05258 0.1044 0.02442 0.0308 0.05486 0.0564 0.08948 0.0751 0.03461 0.0187 0.07267 0.0302 0.11185 0.0337 0.03919 0.0035 0.07869 -0.0009 0.11609 -0.0132 0.36103 -0.003 0.7216 -0.0264 1.08 -0.07 0.15662 -0.0212 0.31072 -0.0581 0.46 -0.11 0.36406 -0.2158 0.79585 -0.2872 1.21 -0.2 0.03286 0.0062 0.06407 0.0192 0.09162 0.0381 0.02755 0.019 0.05084 0.0435 0.06838 0.0719 0.03012 0.0772 0.03012 0.1629 0 0.24 -0.05277 0.2543 -0.17376 0.4893 -0.35 0.68 -0.20205 0.2292 -0.43028 0.434 -0.68 0.61 -0.66869 0.4607 -1.44234 0.7461 -2.25 0.83 -0.80071 0.1179 -1.61838 -0.0039 -2.35 -0.35 -0.53395 -0.2824 -0.95681 -0.737 -1.2 -1.29 -0.27045 -0.5855 -0.42982 -1.2162 -0.47 -1.86 -0.00126 -0.0442 -0.0114 -0.0877 -0.02981 -0.1279 -0.01841 -0.0403 -0.04473 -0.0764 -0.07738 -0.1062 -0.03265 -0.0299 -0.07097 -0.0529 -0.11269 -0.0676 -0.04171 -0.0148 -0.08596 -0.021 -0.13012 -0.0183 -0.044675 0.0026 -0.088408 0.0139 -0.12869 0.0334s-0.076321 0.0468 -0.106051 0.0802c-0.029729 0.0334 -0.052563 0.0724 -0.067194 0.1147 -0.014631 0.0423 -0.02077 0.0871 -0.018065 0.1317 0.012623 0.8862 0.235395 1.7567 0.65 2.54 0.30359 0.5453 0.74942 0.9981 1.29 1.31 0.8694 0.479 1.8607 0.6912 2.85 0.61 0.9936 -0.0912 1.94725 -0.4355 2.77 -1 0.4107 -0.274 0.77525 -0.6115 1.08 -1 0.2272 -0.2941 0.3845 -0.6361 0.46 -1 0.04902 -0.304 -0.00001 -0.6157 -0.14 -0.89Zm-7.81 -3.72 -0.09 -1c0 -0.75 -0.13 -1.73 0.37 -2.19 0.1 0 0.45 -0.59 0.88 0.22 0.2375 0.4432 0.38371 0.9294 0.43 1.43 -0.00039 0.0506 0.01118 0.1005 0.03377 0.1457 0.0226 0.0451 0.05557 0.0843 0.09623 0.1143 -0.63566 0.3358 -1.2158 0.7676 -1.72 1.28Z" stroke-width="1"></path>
- </symbol>
- <symbol id="icon-view" viewBox="-2 -2 28 28" fill="none">
- <path fill="currentColor" fill-rule="evenodd" d="M23.6534 10.5263c-1.3628 -1.56103 -3.0387 -2.81795 -4.9189 -3.68916 -1.8052 -0.8978 -3.7485 -1.48585 -5.7486 -1.7396 -0.998 -0.11306 -2.0067 -0.09289 -2.99934 0.05999 -2.63062 0.3739 -5.14267 1.33771 -7.34828 2.81934 -0.84337 0.55535 -1.63325 1.18793 -2.359454 1.88956 -0.08425 0.0868 -0.161162 0.18047 -0.2299462 0.27997C0.0169406 10.1973 0 10.2562 0 10.3163s0.0169406 0.1191 0.0488798 0.17c0.0179573 0.0358 0.0429176 0.0677 0.0734052 0.0937 0.030488 0.0261 0.065885 0.0457 0.104099 0.0578 0.038214 0.0122 0.078469 0.0165 0.118385 0.0128 0.039917 -0.0037 0.078686 -0.0154 0.114015 -0.0343C1.5971 9.42178 2.95486 8.45777 4.45785 7.77692c0.959 -0.48729 1.9636 -0.87909 2.9993 -1.16973 0.88979 -0.25558 1.79943 -0.43617 2.71935 -0.53987 0.8961 -0.11518 1.8033 -0.11518 2.6994 0 1.8879 0.28843 3.7154 0.88632 5.4087 1.76959 1.6883 0.80557 3.2029 1.93308 4.459 3.31919 0.0877 0.152 0.1339 0.3244 0.1339 0.4999s-0.0462 0.3479 -0.1339 0.4999c-0.2004 0.4189 -0.4747 0.7983 -0.8098 1.1197 -0.9132 0.9438 -1.9179 1.7945 -2.9993 2.5394 -1.0941 0.7277 -2.2767 1.3123 -3.5192 1.7396 -0.786 0.2536 -1.6039 0.395 -2.4294 0.4199 -1.2488 0.0246 -2.4978 -0.0321 -3.73917 -0.1699 -1.55221 -0.2376 -3.01813 -0.8673 -4.259 -1.8296 -1.29902 -0.9356 -2.40844 -2.1095 -3.26924 -3.4592 -0.02265 -0.0404 -0.05333 -0.0757 -0.09014 -0.1039 -0.03681 -0.0281 -0.07898 -0.0484 -0.12392 -0.0596 -0.04494 -0.0113 -0.0917 -0.0132 -0.13741 -0.0057s-0.08941 0.0243 -0.12842 0.0492c-0.07659 0.0529 -0.13044 0.1327 -0.15082 0.2235 -0.02039 0.0908 -0.0058 0.1859 0.04085 0.2664 0.8813 1.4449 2.02784 2.7102 3.37921 3.7292 1.34805 1.0808 2.9532 1.7938 4.65891 2.0695 1.26545 0.179 2.54115 0.2758 3.81915 0.2899 0.8996 0.0048 1.7952 -0.1198 2.6593 -0.3699 1.3434 -0.4251 2.6244 -1.0269 3.8092 -1.7896 1.1699 -0.7705 2.2556 -1.6619 3.2392 -2.6594 0.5478 -0.5108 0.9601 -1.1498 1.1997 -1.8595 0.0999 -0.2934 0.1302 -0.606 0.0886 -0.9131 -0.0417 -0.3071 -0.1541 -0.6003 -0.3285 -0.8565Z" clip-rule="evenodd" stroke-width="1"></path>
- <path fill="currentColor" fill-rule="evenodd" d="M10.6964 9.1166c0.7827 -0.2444 1.6136 -0.29247 2.4194 -0.13997 0.3938 0.09551 0.7634 0.27195 1.0852 0.51809 0.3219 0.24613 0.589 0.55658 0.7844 0.91158 0.0189 0.0362 0.0448 0.0683 0.0762 0.0944 0.0314 0.0262 0.0677 0.0458 0.1067 0.0579 0.039 0.0121 0.08 0.0163 0.1207 0.0125 0.0407 -0.0038 0.0802 -0.0157 0.1163 -0.0348 0.0713 -0.04 0.124 -0.1066 0.1465 -0.1853 0.0224 -0.0786 0.0129 -0.163 -0.0266 -0.2346 -0.213 -0.44629 -0.5169 -0.84312 -0.8922 -1.16507 -0.3753 -0.32195 -0.8138 -0.56192 -1.2873 -0.70452 -0.9344 -0.26583 -1.92 -0.29674 -2.8693 -0.08998 -0.53345 0.13369 -1.02665 0.39446 -1.4375 0.76005 -0.41085 0.36559 -0.72716 0.82514 -0.92194 1.33942 -0.41881 1.0115 -0.41881 2.1478 0 3.1593 0.4668 0.9845 1.29879 1.7483 2.31944 2.1295 0.9793 0.3819 2.0556 0.438 3.0693 0.16 0.8982 -0.2612 1.6632 -0.8546 2.1395 -1.6596 0.4789 -0.7747 0.6995 -1.6814 0.6299 -2.5894 -0.0061 -0.0449 -0.0211 -0.0881 -0.0441 -0.127 -0.0231 -0.039 -0.0536 -0.073 -0.0899 -0.1 -0.0363 -0.027 -0.0777 -0.0465 -0.1216 -0.0573 -0.044 -0.0108 -0.0897 -0.0127 -0.1344 -0.0057 -0.0457 0.0049 -0.0899 0.019 -0.1301 0.0415 -0.0401 0.0224 -0.0752 0.0528 -0.1033 0.0893 -0.028 0.0364 -0.0484 0.0782 -0.0598 0.1227 -0.0114 0.0446 -0.0137 0.091 -0.0067 0.1364 -0.0016 0.7166 -0.2252 1.4151 -0.6398 1.9996 -0.3854 0.5945 -0.9884 1.0144 -1.6796 1.1697 -0.8061 0.1738 -1.6466 0.0863 -2.3995 -0.2499 -0.7468 -0.2609 -1.36555 -0.7974 -1.72958 -1.4997 -0.29453 -0.7244 -0.29453 -1.5351 0 -2.2595 0.1115 -0.3727 0.31161 -0.7129 0.58321 -0.99148 0.27161 -0.27856 0.60667 -0.48722 0.97647 -0.60812Z" clip-rule="evenodd" stroke-width="1"></path>
- </symbol>
</svg>
<script>
@@ -173,6 +154,8 @@
}
</script>
+ <script src="{{ .StaticStorageBaseUrl }}/libs/glightbox/3.3.0/js/glightbox.min.js"></script>
+
<script>
function sfc32(a, b, c, d) {
return function () {
@@ -213,91 +196,18 @@
var seed = cyrb128("{{ .Title }}");
var rand = sfc32(seed[0], seed[1], seed[2], seed[3]);
- function calculateRem(remNum) {
- return remNum * parseFloat(getComputedStyle(document.documentElement).fontSize);
- }
-
- const _probe = document.createElement('div');
- _probe.style.cssText = 'position:absolute;visibility:hidden;pointer-events:none';
- document.body.appendChild(_probe);
- const _ctx = document.createElement('canvas').getContext('2d');
-
- function resolveColor(cssValue) {
- // Step 1: let the DOM resolve color-mix/oklch/var to its computed form
- _probe.style.backgroundColor = '';
- _probe.style.backgroundColor = cssValue;
- const computed = getComputedStyle(_probe).backgroundColor;
- if (!computed) return [0,0,0];
-
- // Step 2: funnel through canvas to force sRGB
- _ctx.fillStyle = '#000';
- _ctx.fillStyle = computed;
- const s = _ctx.fillStyle; // "#rrggbb" or "rgba(...)"
-
- if (s.startsWith('#')) {
- return [
- parseInt(s.slice(1,3),16)/255,
- parseInt(s.slice(3,5),16)/255,
- parseInt(s.slice(5,7),16)/255,
- ];
- }
- const m = s.match(/[\d.]+/g);
- return [+m[0]/255, +m[1]/255, +m[2]/255];
- }
-
- function oklchMix(c1, c2, t) {
- // Use the browser's color-mix() to interpolate in oklch
- return `color-mix(in oklch, ${c1} ${(1-t)*100}%, ${c2})`;
- }
-
- function makeMultitoneOklch(id, stops, ...vars) {
- if (vars.length < 2) {
- console.error('Less than 2 colors set in input');
- return;
- }
-
- const root = getComputedStyle(document.body);
- const rs = [], gs = [], bs = [];
-
- for (let i = 0; i < vars.length - 1; i++) {
- const c1 = root.getPropertyValue(vars[i]).trim();
- const c2 = root.getPropertyValue(vars[i+1]).trim();
+ function calculateVmin(percent) {
+ const viewportWidth = window.innerWidth;
+ const viewportHeight = window.innerHeight;
- if (!c1) {
- console.error(`CSS variable ${vars[i]} not found`);
- return;
- }
- if (!c2) {
- console.error(`CSS variable ${vars[i+1]} not found`);
- return;
- }
+ const smallerDimension = Math.min(
+ viewportWidth,
+ viewportHeight,
+ );
- for (let i = 0; i < stops; i++) {
- const t = i / (stops - 1);
- const [r, g, b] = resolveColor(oklchMix(c1, c2, t));
- rs.push(r.toFixed(4));
- gs.push(g.toFixed(4));
- bs.push(b.toFixed(4));
- }
- }
+ const vminValue = (smallerDimension / 100) * percent;
- let svg = document.getElementById(id + '-svg');
- if (svg) svg.remove();
- document.body.insertAdjacentHTML('beforeend', `
- <svg id="${id}-svg" width="0" height="0" style="position:absolute">
- <filter id="${id}">
- <feColorMatrix type="matrix" values="
- 0.299 0.587 0.114 0 0
- 0.299 0.587 0.114 0 0
- 0.299 0.587 0.114 0 0
- 0 0 0 1 0"/>
- <feComponentTransfer color-interpolation-filters="sRGB">
- <feFuncR type="table" tableValues="${rs.join(' ')}"/>
- <feFuncG type="table" tableValues="${gs.join(' ')}"/>
- <feFuncB type="table" tableValues="${bs.join(' ')}"/>
- </feComponentTransfer>
- </filter>
- </svg>`);
+ return vminValue;
}
function switchThemeDecor(theme) {
@@ -309,7 +219,7 @@
theme = document.body.getAttribute("data-theme");
}
- rem = calculateRem(1);
+ vmin = calculateVmin(1);
var clWidth = document.documentElement.clientWidth;
var clHeight = document.documentElement.clientHeight;
@@ -328,11 +238,11 @@
"z-0",
"absolute",
);
+ const x = Math.floor(rand() * clWidth);
+ const y = Math.floor(rand() * clHeight * 0.8);
const rot = rand() * 90;
const animDuration = rand() * 10 + 3;
const sz = Math.floor(rand() * 8) + 12;
- const x = Math.floor(rand() * clWidth - 1.42 * sz); // 1.42 ~ sqrt(2)
- const y = Math.floor(rand() * clHeight * 0.8);
star.style.transform = `translateX(${x}px) translateY(${y}px) rotate(${rot}deg)`;
star.style.animationDuration = `${animDuration}s`;
star.style.fontSize = `${sz}px`;
@@ -343,7 +253,7 @@
const frameCenters = new Array(4);
for (i = 1; i <= 4; i++) {
let frame = document.createElement("img");
- frame.src = `{{ .StaticStorage.BaseUrl }}/themes/ram/ram-frame${i}.webp`;
+ frame.src = `{{ .StaticStorageBaseUrl }}/themes/ram/ram-frame${i}.webp`;
frame.classList.add(
"ram-frame",
"theme-decor",
@@ -352,14 +262,14 @@
);
let x, y;
outerLoop: while (true) {
- x = Math.floor(rand() * clWidth - 22.64 * rem) + 11.32 * rem; // 11.32 ~ 8 * sqrt(2)
- y = Math.floor(rand() * clHeight - 22.64 * rem) + 11.32 * rem;
+ x = Math.floor(rand() * clWidth - 20 * vmin);
+ y = Math.floor(rand() * clHeight - 20 * vmin);
for (j = 0; j < i - 1; j++) {
const xd = frameCenters[j].x - x;
const yd = frameCenters[j].y - y;
if (
Math.sqrt(xd * xd + yd * yd) <
- 23 * rem
+ 30 * vmin
) {
continue outerLoop;
}
@@ -402,68 +312,20 @@
localStorage.setItem("theme", theme);
document.body.setAttribute("data-theme", theme);
switchThemeDecor(theme);
- switchColorScheme(matchMedia('(prefers-color-scheme: dark)').matches);
}
const savedTheme = localStorage.getItem("theme") || "lilac";
switchTheme(savedTheme);
-
- function switchColorScheme(isNightMode) {
- if (isNightMode) {
- makeMultitoneOklch('multitone', 4, '--color-background-dark', '--color-accent-light', '--color-background-light');
- } else {
- makeMultitoneOklch('multitone', 4, '--color-background-light', '--color-accent-light', '--color-background-dark');
- }
- }
-
- const mq = matchMedia('(prefers-color-scheme: dark)');
- switchColorScheme(mq.matches);
- mq.addEventListener('change', (e) => switchColorScheme(e.matches));
</script>
- <script src="{{ .StaticStorage.BaseUrl }}/libs/htmx/2.0.6/htmx.min.js"></script>
- <script src="{{ .StaticStorage.BaseUrl }}/libs/imagesloaded/5.0.0/imagesloaded.pkgd.min.js"></script>
- <script src="{{ .StaticStorage.BaseUrl }}/libs/packery/3.0.0/dist/packery.pkgd.min.js"></script>
-
- <script>
- // Enable fitWidth-like attribute for Packery. Source: https://codepen.io/desandro/pen/kVmLYz
- var __resetLayout = Packery.prototype._resetLayout;
- Packery.prototype._resetLayout = function () {
- __resetLayout.call(this);
- var parentSize = getSize(this.element.parentNode);
- var colW = this.columnWidth + this.gutter;
- this.fitWidth =
- Math.floor((parentSize.innerWidth + this.gutter) / colW) *
- colW;
- this.packer.width = this.fitWidth;
- this.packer.height = Number.POSITIVE_INFINITY;
- this.packer.reset();
- };
-
- Packery.prototype._getContainerSize = function () {
- var emptyWidth = 0;
- for (var i = 0, len = this.packer.spaces.length; i < len; i++) {
- var space = this.packer.spaces[i];
- if (
- space.y === 0 &&
- space.height === Number.POSITIVE_INFINITY
- ) {
- emptyWidth += space.width;
- }
- }
-
- return {
- width: this.fitWidth - this.gutter - emptyWidth,
- height: this.maxY - this.gutter,
- };
- };
-
- Packery.prototype.needsResizeLayout = function () {
- return true;
- };
- </script>
-
- <div id="general-page-top-embeds" class="flex">{{ .RenderedTopEmbeds }}</div>
+ <div
+ id="general-page-top-embeds"
+ class="flex"
+ hx-get="/api/v1/general-page/top-embeds{{ if .QueryString }}?{{ .QueryString }}{{ end }}"
+ hx-trigger="load"
+ hx-target="this"
+ hx-swap="innerHTML"
+ ></div>
<div
id="general-page-top-embeds-trigger"
hx-get="/api/v1/general-page/top-embeds{{ if .QueryString }}?{{ .QueryString }}{{ end }}"
@@ -484,7 +346,9 @@
class="flex flex-row w-full h-24 md:flex-col md:w-24 md:h-full bg-paper bg-background shadow-elevation-6 z-2 shrink-0"
>
<a
- class="w-18 h-18 rounded-xl m-3 accent-button"
+ class="w-18 h-18 bg-conic-225 rounded-xl m-3
+ from-accent-light/10 via-transparent to-accent-light/10 transition-colors duration-1500 ease-in-out
+ hover:cursor-pointer hover:from-accent-light/50 hover:via-transparent hover:to-accent-light/50"
onclick="return changeUrl('/..', true);"
href="../"
id="sidebar-back-button"
@@ -493,7 +357,9 @@
<svg viewBox="0 0 24 24"><use href="#icon-back"/></svg>
</a>
<a
- class="w-18 h-18 rounded-xl m-3 accent-button"
+ class="w-18 h-18 bg-conic-225 rounded-xl m-3
+ from-accent-light/10 via-transparent to-accent-light/10 transition-colors duration-1500 ease-in-out
+ hover:cursor-pointer hover:from-accent-light/50 hover:via-transparent hover:to-accent-light/50"
onclick="return changeUrl('/{{ .Lang }}');"
href="/{{ .Lang }}"
id="sidebar-home-button"
@@ -502,7 +368,9 @@
<svg viewBox="0 0 24 24"><use href="#icon-logo"/></svg>
</a>
<a
- class="w-18 h-18 rounded-xl m-3 accent-button"
+ class="w-18 h-18 bg-conic-225 rounded-xl m-3
+ from-accent-light/10 via-transparent to-accent-light/10 transition-colors duration-1500 ease-in-out
+ hover:cursor-pointer hover:from-accent-light/50 hover:via-transparent hover:to-accent-light/50"
onclick="return changeUrl('/{{ .Lang }}/blog');"
href="/{{ .Lang }}/blog"
id="sidebar-blog-button"
@@ -511,7 +379,9 @@
<svg viewBox="0 0 24 24"><use href="#icon-newspaper"/></svg>
</a>
<a
- class="w-18 h-18 rounded-xl m-3 accent-button"
+ class="w-18 h-18 bg-conic-225 rounded-xl m-3
+ from-accent-light/10 via-transparent to-accent-light/10 transition-colors duration-1500 ease-in-out
+ hover:cursor-pointer hover:from-accent-light/50 hover:via-transparent hover:to-accent-light/50"
href="/{{ .Lang }}/map"
id="sidebar-map-button"
draggable="false"
@@ -519,7 +389,9 @@
<svg viewBox="0 0 24 24"><use href="#icon-map"/></svg>
</a>
<div
- class="w-18 h-18 rounded-xl m-3 accent-button"
+ class="w-18 h-18 bg-conic-225 rounded-xl m-3
+ from-accent-light/10 via-transparent to-accent-light/10 transition-colors duration-1500 ease-in-out
+ hover:cursor-pointer hover:from-accent-light/50 hover:via-transparent hover:to-accent-light/50"
onclick="toggleThemeWheel()"
id="sidebar-theme-button"
draggable="false"
@@ -527,7 +399,9 @@
<svg class="sidebar-theme-button-content" viewBox="0 0 24 24"><use href="#icon-palette"/></svg>
</div>
<a
- class="w-18 h-18 rounded-xl m-3 accent-button"
+ class="w-18 h-18 bg-conic-225 rounded-xl m-3
+ from-accent-light/10 via-transparent to-accent-light/10 transition-colors duration-1500 ease-in-out
+ hover:cursor-pointer hover:from-accent-light/50 hover:via-transparent hover:to-accent-light/50"
onclick="return changeUrl('/{{ .Lang }}/user');"
href="/{{ .Lang }}/user"
id="sidebar-user-button"
@@ -560,11 +434,6 @@
);
function updateSidebar() {
- sidebarHomeButton.classList.remove("active");
- sidebarMapButton.classList.remove("active");
- sidebarBlogButton.classList.remove("active");
- sidebarBackButton.classList.remove("active");
- sidebarUserButton.classList.remove("active");
if (
location.pathname == "" ||
location.pathname == "/"
@@ -586,9 +455,6 @@
"onclick",
`return changeUrl('/${lang}', false);`,
);
- if (location.pathname == `/${lang}`) {
- sidebarHomeButton.classList.add("active");
- }
sidebarMapButton.setAttribute(
"href",
`/${lang}/map`,
@@ -601,9 +467,6 @@
"onclick",
`return changeUrl('/${lang}/blog', false);`,
);
- if (location.pathname.startsWith(`/${lang}/blog`)) {
- sidebarBlogButton.classList.add("active");
- }
sidebarUserButton.setAttribute(
"href",
`/${lang}/user`,
@@ -612,9 +475,6 @@
"onclick",
`return changeUrl('/${lang}/user', false);`,
);
- if (location.pathname.startsWith(`/${lang}/user`)) {
- sidebarUserButton.classList.add("active");
- }
}
}
window.addEventListener("popstate", updateSidebar);
@@ -625,19 +485,23 @@
</nav>
<div
- class="flex flex-1 min-h-0 z-1 bg-paper bg-background shadow-elevation-3 @container/body"
+ class="flex flex-1 z-1 bg-paper bg-background shadow-elevation-3 @container/body"
>
<div
- class="bg-paper bg-background-dark border-r-[0.25rem] border-dashed border-main-hard"
+ class="bg-paper bg-background-dark border-r-2 border-dashed border-main-hard"
></div>
<div
- class="max-h-full max-w-full flex flex-col grow bg-paper bg-background-dark relative md:pr-4"
+ class="max-h-full max-w-full flex flex-col grow bg-paper bg-background-dark relative pt-4 pr-0 md:pr-4"
>
<header
id="general-page-header"
- class="max-xs:hidden [@media(max-height:32rem)]:hidden pt-4 flex flex-col ml-8 basis-8"
- >{{ .RenderedHeader }}</header>
+ class="max-xs:hidden [@media(max-height:32rem)]:hidden flex flex-col ml-8 basis-8"
+ hx-get="/api/v1/general-page/header{{ if .QueryString }}?{{ .QueryString }}{{ end }}"
+ hx-trigger="load"
+ hx-target="this"
+ hx-swap="innerHTML"
+ ></header>
<div
id="general-page-header-trigger"
hx-get="/api/v1/general-page/header{{ if .QueryString }}?{{ .QueryString }}{{ end }}"
@@ -647,26 +511,33 @@
></div>
<hr
- class="max-xs:hidden [@media(max-height:32rem)]:hidden border-t-[0.5rem] border-dotted border-main-hard mb-2"
+ class="max-xs:hidden [@media(max-height:32rem)]:hidden border-t-4 border-dotted border-main-hard mb-2"
/>
<main
id="general-page-body"
- class="relative flex-1 overflow-y-auto @container-size inset-shadow-elevation-8"
- >{{ .RenderedBody }}</main>
+ class="relative flex flex-col grow overflow-y-auto"
+ hx-get="/api/v1/general-page/body{{ if .QueryString }}?{{ .QueryString }}{{ end }}"
+ hx-trigger="load"
+ hx-target="this"
+ hx-swap="innerHTML"
+ ></main>
<div
id="general-page-body-trigger"
hx-get="/api/v1/general-page/body{{ if .QueryString }}?{{ .QueryString }}{{ end }}"
hx-trigger="popstate from:window"
hx-target="#general-page-body"
hx-swap="innerHTML"
- hx-include="#general-page-body .htmx-exit-trigger"
></div>
<footer
id="general-page-footer"
class="flex flex-row basis-4 my-1"
- >{{ .RenderedFooter }}</footer>
+ hx-get="/api/v1/general-page/footer{{ if .QueryString }}?{{ .QueryString }}{{ end }}"
+ hx-trigger="load"
+ hx-target="this"
+ hx-swap="innerHTML"
+ ></footer>
<div
id="general-page-footer-trigger"
hx-get="/api/v1/general-page/footer{{ if .QueryString }}?{{ .QueryString }}{{ end }}"
@@ -674,17 +545,71 @@
hx-target="#general-page-footer"
hx-swap="innerHTML"
></div>
+
+ <hr
+ class="border-t-4 border-dotted border-main-hard mb-2"
+ />
</div>
<div
- class="bg-paper bg-background-dark shadow-2xl border-l-[0.25rem] border-dotted border-main-hard"
+ class="bg-paper bg-background-dark shadow-2xl border-l-2 border-dotted border-main-hard"
></div>
</div>
</div>
<div class="grow bg-split-right"></div>
- <div id="general-page-bottom-embeds" class="flex">{{ .RenderedBottomEmbeds }}</div>
+ <script src="{{ .StaticStorageBaseUrl }}/libs/htmx/2.0.6/htmx.min.js"></script>
+ <script src="{{ .StaticStorageBaseUrl }}/libs/leaflet/1.9.4/leaflet.js"></script>
+ <script src="{{ .StaticStorageBaseUrl }}/libs/imagesloaded/5.0.0/imagesloaded.pkgd.min.js"></script>
+ <script src="{{ .StaticStorageBaseUrl }}/libs/packery/3.0.0/dist/packery.pkgd.min.js"></script>
+
+ <script>
+ // Enable fitWidth-like attribute for Packery. Source: https://codepen.io/desandro/pen/kVmLYz
+ var __resetLayout = Packery.prototype._resetLayout;
+ Packery.prototype._resetLayout = function () {
+ __resetLayout.call(this);
+ var parentSize = getSize(this.element.parentNode);
+ var colW = this.columnWidth + this.gutter;
+ this.fitWidth =
+ Math.floor((parentSize.innerWidth + this.gutter) / colW) *
+ colW;
+ this.packer.width = this.fitWidth;
+ this.packer.height = Number.POSITIVE_INFINITY;
+ this.packer.reset();
+ };
+
+ Packery.prototype._getContainerSize = function () {
+ var emptyWidth = 0;
+ for (var i = 0, len = this.packer.spaces.length; i < len; i++) {
+ var space = this.packer.spaces[i];
+ if (
+ space.y === 0 &&
+ space.height === Number.POSITIVE_INFINITY
+ ) {
+ emptyWidth += space.width;
+ }
+ }
+
+ return {
+ width: this.fitWidth - this.gutter - emptyWidth,
+ height: this.maxY - this.gutter,
+ };
+ };
+
+ Packery.prototype.needsResizeLayout = function () {
+ return true;
+ };
+ </script>
+
+ <div
+ id="general-page-bottom-embeds"
+ class="flex"
+ hx-get="/api/v1/general-page/bottom-embeds{{ if .QueryString }}?{{ .QueryString }}{{ end }}"
+ hx-trigger="load"
+ hx-target="this"
+ hx-swap="innerHTML"
+ ></div>
<div
id="general-page-bottom-embeds-trigger"
hx-get="/api/v1/general-page/bottom-embeds{{ if .QueryString }}?{{ .QueryString }}{{ end }}"
@@ -697,6 +622,7 @@
const themeWheel = document.getElementById("theme-wheel");
const themeButton = document.getElementById("sidebar-theme-button");
const themeIcons = document.querySelectorAll(".theme-icon");
+ const themeWheelRadius = convertRemToPixels(6);
themeIcons.forEach((icon) => {
if (icon.getAttribute("data-theme") == savedTheme) {
@@ -704,6 +630,17 @@
}
});
+ function calculateVmax(percent) {
+ const viewportWidth = window.innerWidth;
+ const viewportHeight = window.innerHeight;
+
+ const largerDimension = Math.max(viewportWidth, viewportHeight);
+
+ const vmaxValue = (largerDimension / 100) * percent;
+
+ return vmaxValue;
+ }
+
function positionThemeIcons() {
const sliceAngle = 360 / themeIcons.length;
@@ -714,7 +651,7 @@
const clipPath = createSliceClipPath(
startAngle,
endAngle,
- convertRemToPixels(6),
+ themeWheelRadius,
);
icon.style.clipPath = clipPath;
});
@@ -749,7 +686,6 @@
const buttonRect = themeButton.getBoundingClientRect();
const buttonCenterX = buttonRect.left + buttonRect.width / 2;
const buttonCenterY = buttonRect.top + buttonRect.height / 2;
- const themeWheelRadius = convertRemToPixels(6);
const margin = 0;