devel #221
6 changed files with 64 additions and 26 deletions
|
@ -5,6 +5,7 @@
|
|||
@import "./reset.css";
|
||||
@import "./gruvbox.css";
|
||||
@import "./lightbox.css";
|
||||
@import "./tablesort.css";
|
||||
|
||||
@layer base {
|
||||
:root {
|
||||
|
@ -78,8 +79,8 @@
|
|||
@apply prose-invert;
|
||||
}
|
||||
|
||||
.prose a {
|
||||
@apply underline decoration-2 decoration-theme-primary hover:bg-theme-primary hover:text-theme-background transition;
|
||||
.prose a, a.underline-link {
|
||||
@apply underline decoration-1 decoration-theme-primary hover:decoration-theme-base transition;
|
||||
}
|
||||
|
||||
.prose a[href^="http://"], .prose a[href^="https://"] {
|
||||
|
@ -115,7 +116,7 @@
|
|||
}
|
||||
|
||||
.prose img {
|
||||
@apply rounded;
|
||||
@apply rounded-lg;
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -143,9 +144,3 @@
|
|||
@apply inline-block text-theme-base px-3 py-2.5 border border-theme-background1 hover:bg-theme-background1 rounded transition font-semibold;
|
||||
}
|
||||
}
|
||||
|
||||
@layer utilities {
|
||||
a.underline-link {
|
||||
@apply underline decoration-2 decoration-theme-primary hover:decoration-theme-secondary transition;
|
||||
}
|
||||
}
|
33
assets/css/tablesort.css
Normal file
33
assets/css/tablesort.css
Normal file
|
@ -0,0 +1,33 @@
|
|||
th[role=columnheader]:not(.no-sort) {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
th[role=columnheader]:not(.no-sort):after {
|
||||
content: '';
|
||||
float: right;
|
||||
margin-top: 7px;
|
||||
border-width: 0 4px 4px;
|
||||
border-style: solid;
|
||||
border-color: rgb(var(--color-primary)) transparent;
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
-ms-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
th[aria-sort=ascending]:not(.no-sort):after {
|
||||
border-bottom: none;
|
||||
border-width: 4px 4px 0;
|
||||
}
|
||||
|
||||
th[aria-sort]:not(.no-sort):after {
|
||||
visibility: visible;
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
th[role=columnheader]:not(.no-sort):hover:after {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
|
@ -1,29 +1,32 @@
|
|||
// Include phoenix_html to handle method=PUT/DELETE in forms and buttons.
|
||||
import "phoenix_html"
|
||||
import 'phoenix_html'
|
||||
|
||||
import hljs from "highlight.js"
|
||||
import hljs from 'highlight.js'
|
||||
import GLightbox from 'glightbox'
|
||||
import Tablesort from 'tablesort'
|
||||
|
||||
document.addEventListener('DOMContentLoaded', (event) => {
|
||||
document.querySelectorAll('pre code').forEach((el) => {
|
||||
hljs.highlightElement(el);
|
||||
});
|
||||
document.querySelectorAll('.prose pre code').forEach((el) =>
|
||||
hljs.highlightElement(el))
|
||||
|
||||
document.querySelectorAll('.prose table').forEach(el =>
|
||||
new Tablesort(el))
|
||||
});
|
||||
|
||||
document
|
||||
.querySelector("#dark-mode-toggle")
|
||||
.addEventListener("click", (e) => {
|
||||
.querySelector('#dark-mode-toggle')
|
||||
.addEventListener('click', (e) => {
|
||||
e.preventDefault()
|
||||
const data = document.documentElement.dataset
|
||||
if (data["mode"] && data["mode"] == "dark") {
|
||||
delete data["mode"]
|
||||
window.localStorage.removeItem("theme")
|
||||
if (data['mode'] && data['mode'] == 'dark') {
|
||||
delete data['mode']
|
||||
window.localStorage.removeItem('theme')
|
||||
} else {
|
||||
data["mode"] = "dark"
|
||||
window.localStorage.setItem("theme", "dark")
|
||||
data['mode'] = 'dark'
|
||||
window.localStorage.setItem('theme', 'dark')
|
||||
}
|
||||
})
|
||||
|
||||
GLightbox({ selector: ".lightbox" })
|
||||
GLightbox({ selector: '.lightbox' })
|
||||
|
||||
window.hljs = hljs
|
8
assets/package-lock.json
generated
8
assets/package-lock.json
generated
|
@ -11,7 +11,8 @@
|
|||
"kbar": "^0.1.0-beta.40",
|
||||
"phoenix": "file:../deps/phoenix",
|
||||
"phoenix_html": "file:../deps/phoenix_html",
|
||||
"phoenix_live_view": "file:../deps/phoenix_live_view"
|
||||
"phoenix_live_view": "file:../deps/phoenix_live_view",
|
||||
"tablesort": "^5.3.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"esbuild": "^0.18.0"
|
||||
|
@ -645,6 +646,11 @@
|
|||
"loose-envify": "^1.1.0"
|
||||
}
|
||||
},
|
||||
"node_modules/tablesort": {
|
||||
"version": "5.3.0",
|
||||
"resolved": "https://registry.npmjs.org/tablesort/-/tablesort-5.3.0.tgz",
|
||||
"integrity": "sha512-WkfcZBHsp47gVH9CBHG0ZXopriG01IA87arGrchvIe868d4RiXVvoYPS1zMq9IdW05kBs5iGsqxTABqLyWonbg=="
|
||||
},
|
||||
"node_modules/tiny-invariant": {
|
||||
"version": "1.3.1",
|
||||
"resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.3.1.tgz",
|
||||
|
|
|
@ -9,7 +9,8 @@
|
|||
"kbar": "^0.1.0-beta.40",
|
||||
"phoenix": "file:../deps/phoenix",
|
||||
"phoenix_html": "file:../deps/phoenix_html",
|
||||
"phoenix_live_view": "file:../deps/phoenix_live_view"
|
||||
"phoenix_live_view": "file:../deps/phoenix_live_view",
|
||||
"tablesort": "^5.3.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "^18.0",
|
||||
|
|
|
@ -131,8 +131,8 @@ defmodule ChiyaWeb.PublicComponents do
|
|||
href={~p"/note/#{note.slug}"}
|
||||
class="rounded-lg px-6 pt-4 pb-5 border border-theme-background1 hover:bg-theme-background1 transition"
|
||||
>
|
||||
<header>
|
||||
<span class="text-theme-secondary text-lg font-semibold leading-8">
|
||||
<header class="flex flex-row items-center">
|
||||
<span class="text-theme-primary text-lg font-semibold leading-8 flex-1">
|
||||
<%= note.name %>
|
||||
</span>
|
||||
<span class="text-theme-base/75 text-sm">
|
||||
|
|
Loading…
Reference in a new issue