*: update to Bootstrap 5
All checks were successful
/ preview (pull_request) Successful in 37s

This commit is contained in:
IkiWiki 2024-09-10 21:07:45 -04:00
parent 6f3374233e
commit 08834e87d8
Signed by untrusted user who does not match committer: forge
GPG key ID: D62A472A4AA7D541
8 changed files with 13300 additions and 132 deletions

View file

@ -1,36 +1,11 @@
/* Color palette */
:root {
/* Purple */
--dark-purple: #3a2354;
--medium-purple: #56347c; /* logo */
--light-purple: #9f73d2;
--background-purple: #f3edf9;
--bs-light-rgb: 248, 248, 248;
}
/* Green */
--darker-green: #014d00;
--dark-green: #3b833a;
--medium-dark-green: #53b351;
--medium-light-green: #73d171; /* buttons */
--background-green: #a8ffa0;
/* Gray */
--dark-gray: #393a35;
--medium-dark-gray: #58595b;
--medium-light-gray: #b5b7b9;
--light-gray: #dadbdc;
--background-gray: #f0f1f2;
/* Misc */
--yellow: #ffd500;
--light-yellow: #ffec8c;
--background-yellow: #fffff0;
--red: #ef1f31;
/* Shadows */
--banner-button-shadow: 1px 1px 1px black, 2px 2px 5px var(--dark-gray), inset 1px 1px 1px var(--background-green);
--green-button-shadow: 1px 1px 1px var(--medium-dark-gray), 2px 2px 5px var(--light-gray), inset 1px 1px 1px var(--background-green);
--gray-button-shadow: 1px 1px 1px black, 2px 2px 5px var(--dark-gray), inset 1px 1px 1px var(--background-gray);
a {
--bs-link-color: #337ab7;
}
@ -93,33 +68,6 @@ code {
font-size: 80%;
}
/* comments fixup */
.comment {
border: none;
padding: 1em;
margin: 1em;
background: #f3f3f3;
}
.mastodon-comment {
display: flex;
}
/* mastodon posts have a span to hide the scheme and post id, use it */
.mastodon-comment-content span.invisible {
display: none;
}
.mastodon-comment .avatar img {
margin-right: 1rem;
}
.mastodon-comment span.disabled {
display: none;
}
.mastodon-comment .author {
display: flex;
justify-content: space-between;
}
.mastodon-comment .author time {
font-size: small;
}
.actions ul {
margin: inherit;
padding: inherit;
@ -127,6 +75,10 @@ code {
/* list-style-type: none; */
}
a {
text-decoration: none;
}
/* limit main content to ~90 chars per line */
/* update: practical typography recommends 2-3 alphabets */
#content {
@ -134,15 +86,10 @@ code {
}
/* limit header as well otherwise logo is out of whack without sidebar */
.navbar-fixed-top .container {
.fixed-top .container-fluid {
max-width: 55em;
}
.navbar .selflink {
display: block;
padding: 15px 15px;
}
/* some hacking at typefaces to get some fresh zest in here
* fallbacks from:
* https://en.wikipedia.org/wiki/List_of_typefaces_included_with_Microsoft_Windows
@ -209,12 +156,12 @@ blockquote {
/* enlarge body point size for charter for larger displays */
@media (min-device-width: 750px) {
body {
font-size: 20px;
font-size: 18px;
line-height: 1.3; /* default in FF is ~1.48, try seems a bit to sparse */
}
/* to match the other bootstrap workaround, below */
blockquote {
font-size: 20px;
font-size: 18px;
}
/* UI elements should be a little less intrusive */
.navbar, .footer {
@ -442,6 +389,7 @@ header h1::before {
.language-switcher {
font-size: 14px;
background: #f8f8f8;
color: #333;
border-color: #ccc;
@ -449,15 +397,59 @@ header h1::before {
.language-switcher:hover {
background: #e6e6e6;
}
/* NavBar */
/* Navbar variables */
.navbar {
--bs-navbar-padding-y: 0;
--bs-navbar-padding-x: 0;
}
.nav-link {
--bs-nav-link-padding-y: 5px;
--bs-nav-link-padding-x: 15px;
}
.dropdown-menu li a {
font-size: 14px;
display: block;
padding: 3px 20px;
clear: both;
font-weight: 400;
line-height: 1.42857143;
color: #333;
border-color: #ccc;
white-space: nowrap;
}
.language-switcher-top {
.dropdown-menu li a:hover {
background: #e6e6e6;
}
/* Usually is set automatically by bootstrap, but do it manually to let ikiwiki handle links */
.nav-link li a, .nav-link .selflink {
display: block;
padding-top: 9px;
width: 120px; /* Force size to prevent overflowing breadcrumbs */
height: 35px;
z-index: 5;
padding: var(--bs-nav-link-padding-y) var(--bs-nav-link-padding-x);
font-size: var(--bs-nav-link-font-size);
font-weight: var(--bs-nav-link-font-weight);
color: var(--bs-nav-link-color);
text-decoration: none;
transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out;
}
.nav-link .selflink {
color: #393a35;
}
.nav-link li a:hover, .nav-link .selflink:hover {
color: #393a35;
}
.navbar-brand {
height: 50px;
padding: 15px 0;
}

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

10
content/footer.html Normal file
View file

@ -0,0 +1,10 @@
<p class="text-muted">
<div class="container-fluid">
<span class="me-auto copyright">
Copyleft © 2024-2024 ayakael [[CC-BY-SA|meta/license]]
</span>
<span class="ms-auto powered-by">
Powered by [[ikiwiki|http://ikiwiki.info/]].
</span>
</div>
</p>

View file

@ -1,9 +0,0 @@
<p class="text-muted">
<span class="copyright">
Copyleft © 2024-2024 ayakael [[CC-BY-SA|meta/license]]
</span>
<span class="pull-right powered-by">
Powered by [[ikiwiki|http://ikiwiki.info/]].
[[Theme|https://gitlab.com/anarcat/ikiwiki-bootstrap-anarcat]] by [[anarcat|https://anarc.at/blog/2015-09-09-bootstrap]].
</span>
</p>

View file

@ -1,5 +1,5 @@
<!-- the anchors force ikiwiki to use a tags instead of spans. hopefully. -->
<ul class="nav navbar-nav navbar-right">
<ul class="nav navbar-nav nav-link align-items-center ms-auto">
<li>[[Home|index]]</li>
<li>[[Forge|https://ayakael.net/forge/]]</li>
<li>[[Contact]]</li>

View file

@ -30,7 +30,7 @@
<!-- Bootstrap core CSS -->
<!-- those checksums can be verified with: shasum -b -a 384 $file | xxd -r -p | base64 -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<!-- Custom styles for this template -->
<link href="<TMPL_VAR BASEURL>bootstrap.local.css" rel="stylesheet" />
@ -62,30 +62,23 @@
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="<TMPL_VAR BASEURL>">
<nav class="navbar fixed-top navbar-expand-lg navbar-light bg-light border">
<div class="container-fluid">
<a class="navbar-brand me-auto" href="<TMPL_VAR BASEURL>">
<img alt="<TMPL_VAR WIKINAME>" src="<TMPL_VAR BASEURL>favicon.png" width="48" height="48" />
</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<TMPL_IF OTHERLANGUAGES>
<div class="dropdown language-switcher-top navbar-left">
<button class="btn language-switcher dropdown-toggle" type="button" id="language-menu-top" data-toggle=
"dropdown" aria-haspopup="true" aria-expanded="true">
<div class="dropdown ps-2 pe-2">
<button class="btn language-switcher dropdown" type="button" id="l
anguage-menu-top" data-bs-toggle="dropdown" aria-expanded="false">
<div class="collapse navbar-collapse float-end ms-1" id="navb
ar">
<TMPL_VAR LANG_NAME>
</div>
<img src="<TMPL_VAR BASEURL>wikiicons/languages.png">
</button>
<ul class="dropdown-menu" aria-labelledby="language-menu-top">
<ul class="dropdown-menu dropdown-menu-end dropdown-menu-lg-start">
<TMPL_LOOP OTHERLANGUAGES>
<li>
<a href="<TMPL_VAR URL>"><TMPL_VAR LANGUAGE></a>
@ -95,6 +88,16 @@
</div>
</TMPL_IF>
<button class="navbar-toggler collapsed" type="button" data-bs-togg
le="collapse" data-bs-target="#navbar" aria-controls="navbarScroll" aria-expanded="fa
lse" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div id="navbar" class="collapse navbar-collapse">
<TMPL_IF SIDEBAR>
<TMPL_VAR SIDEBAR>
</TMPL_IF>
@ -220,19 +223,15 @@
</span>
</div>
<TMPL_IF HTML5><nav class="navbar navbar-default">
<TMPL_ELSE>
<div class="navbar navbar-default">
</TMPL_IF>
<div class="navbar-brand"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></div>
<nav class="navbar navbar-expand-lg navbar-light bg-light border">
<div class="navbar-brand">
<img src="<TMPL_VAR BASEURL>wikiicons/languages.png">
</div>
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-footer" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<div class="navbar navbar-expand-lg navbar-light border">
<button class="navbar-toggler collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-footer" aria-controls="navbarScroll" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</div>
@ -241,7 +240,7 @@
<TMPL_VAR SEARCHFORM>
</TMPL_IF>
<ul class="nav navbar-nav navbar-right">
<ul class="nav navbar-nav nav-link">
<TMPL_IF TAGS>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Tags <span class="caret"></span></a>
@ -327,8 +326,8 @@
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://code.jquery.com/jquery-3.2.1.min.js" crossorigin="anonymous" integrity="sha384-xBuQ/xzmlsLoJpyjoggmTEz8OWUFM0/RC5BsqQBDX2v5cMvDHcMakNTNrHIW2I5f"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" crossorigin="anonymous" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
<!-- TODO: Find other ways to setup analytics
<script data-goatcounter="https://analytics.anarc.at/count" async src="//analytics.anarc.at/count.js"></script>