customise bootstrap + refine ranking calendar

This commit is contained in:
perennial
2024-10-01 21:43:43 +10:00
parent 3ed93fa6bc
commit eecffe117c
4 changed files with 11893 additions and 16 deletions
+11875
View File
File diff suppressed because it is too large Load Diff
+5
View File
@@ -0,0 +1,5 @@
/* Bootstrap limits grid-row-columns to 6 by default */
/* src: https://github.com/twbs/bootstrap/issues/36691 */
$grid-row-columns: 7 !default;
@import "../bootstrap-5.3.3/scss/bootstrap";
+2 -2
View File
@@ -13,12 +13,12 @@
<title>{{ title }}</title>
<link href="/img/favicon.png" rel="icon" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<!-- <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous"> -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
<!-- TODO: figure out custom themes (e.g. charcoal theme) -->
<!-- <link href="/css/bootstrap-style.css" rel="stylesheet" /> -->
<link href="/css/bootstrap-style.css" rel="stylesheet" />
<script src="/js/htmx@1.9.10.min.js"
integrity="sha384-D1Kt99CQMDuVetoL1lrYwg5t+9QdHe7NLX/SoJYkXDFfX37iInKRy5xLSi8nO7UC"></script>
+11 -14
View File
@@ -54,20 +54,20 @@
<div class="col-12">
<div class="card border-0 mb-4">
<div class="card-body rounded-5 bg-body-tertiary p-4">
<h2 class="h4 fw-bold mb-3">Calendar</h2>
<div class="row g-3 mb-3">
<div class="col text-center fw-bold">Sun</div>
<div class="col text-center fw-bold">Mon</div>
<div class="col text-center fw-bold">Tue</div>
<div class="col text-center fw-bold">Wed</div>
<div class="col text-center fw-bold">Thu</div>
<div class="col text-center fw-bold">Fri</div>
<div class="col text-center fw-bold">Sat</div>
<h2 class="h4 fw-bold mb-4">Calendar</h2>
<div class="row text-center fw-bold mb-3">
<div class="col">Sun</div>
<div class="col">Mon</div>
<div class="col">Tue</div>
<div class="col">Wed</div>
<div class="col">Thu</div>
<div class="col">Fri</div>
<div class="col">Sat</div>
</div>
<div class="row g-3 mb-3">
<div class="row row-cols-2 row-cols-md-5 row-cols-lg-7 g-3">
{{ range i, day := .Calendar }}
<div class="col">
<div class="card h-100">
<div class="card h-100 border-0">
{{ if day.DayNumber > 0 }}
{{ if day.ImageURL }}
<a href="{{ day.ArtworkLink }}" class="text-decoration-none">
@@ -86,9 +86,6 @@
{{ end }}
</div>
</div>
{{ if (i + 1) % 7 == 0 && i < len(.Calendar) - 1 }}
</div><div class="row g-3 mb-3">
{{ end }}
{{ end }}
</div>
</div>