diff --git a/www/content/_index.md b/www/content/_index.md index 5eed5595..b208593a 100644 --- a/www/content/_index.md +++ b/www/content/_index.md @@ -90,20 +90,20 @@ if(window.location.search=="?ads=true") { -
-NEWS: htmx finished 2nd in the 2023 +
+NEWS: htmx finished 2nd in the 2023 JavaScript Rising Stars "Front-end Frameworks" category, just behind React (htmx is a library, btw) and #10 overall! Thank you to everyone who starred us!

introduction

-htmx gives you access to [AJAX](@/docs.md#ajax), [CSS Transitions](@/docs.md#css_transitions), [WebSockets](@/docs.md#websockets) and [Server Sent Events](@/docs.md#sse) -directly in HTML, using [attributes](@/reference.md#attributes), so you can build -[modern user interfaces](@/examples/_index.md) with the [simplicity](https://en.wikipedia.org/wiki/HATEOAS) and +htmx gives you access to [AJAX](@/docs.md#ajax), [CSS Transitions](@/docs.md#css_transitions), [WebSockets](@/docs.md#websockets) and [Server Sent Events](@/docs.md#sse) +directly in HTML, using [attributes](@/reference.md#attributes), so you can build +[modern user interfaces](@/examples/_index.md) with the [simplicity](https://en.wikipedia.org/wiki/HATEOAS) and [power](https://www.ics.uci.edu/~fielding/pubs/dissertation/rest_arch_style.htm) of hypertext -htmx is small ([~14k min.gz'd](https://unpkg.com/htmx.org/dist/)), +htmx is small ([~14k min.gz'd](https://unpkg.com/htmx.org/dist/)), [dependency-free](https://github.com/bigskysoftware/htmx/blob/master/package.json), [extendable](https://extensions.htmx.org), IE11 compatible & has **reduced** code base sizes by [67% when compared with react](@/essays/a-real-world-react-to-htmx-port.md) @@ -138,7 +138,7 @@ Read the [docs introduction](@/docs.md#introduction) for a more in-depth... intr

book

-We are happy to announce the release of [Hypermedia Systems](https://hypermedia.systems), a book on how to build +We are happy to announce the release of [Hypermedia Systems](https://hypermedia.systems), a book on how to build [Hypermedia-Driven Applications](@/essays/hypermedia-driven-applications.md) using htmx & more:
@@ -164,8 +164,8 @@ Thank you to all our generous The GPU Marketplace + + The GPU Marketplace + The GPU Marketplace + @@ -188,31 +191,38 @@ Thank you to all our generous Jetbrains - commspace + + commspace + commspace + - GitHub + GitHub - craft cms + + craft cms + craft cms + - ButterCMS + ButterCMS - Black Host + Black Host - V7N + V7N + V7N @@ -220,29 +230,34 @@ Thank you to all our generous - Das Filter + Das Filter + Das Filter - PullApprove + PullApprove + PullApprove - Transloadit + Transloadit + Transloadit - UI Bakery + + UI Bakery + UI Bakery - Deepsource + Deepsource @@ -256,12 +271,13 @@ Thank you to all our generous - Deepsource + Codacy - AI Code Review Bot + AI Code Review Bot + AI Code Review Bot @@ -273,7 +289,8 @@ Thank you to all our generous - VPS Server Hosting in the Cloud: Cost Efficiency + VPS Server Hosting in the Cloud: Cost Efficiency + VPS Server Hosting in the Cloud: Cost Efficiency diff --git a/www/content/docs.md b/www/content/docs.md index adec84ba..d3782ca6 100644 --- a/www/content/docs.md +++ b/www/content/docs.md @@ -817,7 +817,7 @@ htmx has experimental support for declarative use of both [WebSockets](https://developer.mozilla.org/en-US/docs/Web/API/WebSockets_API/Writing_WebSocket_client_applications) and [Server Sent Events](https://developer.mozilla.org/en-US/docs/Web/API/Server-sent_events/Using_server-sent_events). -
+
**Note:** In htmx 2.0, these features will be migrated to extensions. These new extensions are already available in htmx 1.7+ and, if you are writing new code, you are encouraged to use the extensions instead. All new feature work for diff --git a/www/static/img/codereviewbot-dark.svg b/www/static/img/codereviewbot-dark.svg new file mode 100644 index 00000000..4f438d24 --- /dev/null +++ b/www/static/img/codereviewbot-dark.svg @@ -0,0 +1,22 @@ + + + + + + + + + + + + + + + + + + + + + + diff --git a/www/static/img/commspace-dark.svg b/www/static/img/commspace-dark.svg new file mode 100644 index 00000000..beefbafa --- /dev/null +++ b/www/static/img/commspace-dark.svg @@ -0,0 +1,65 @@ + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/www/static/img/das-filter-dark.svg b/www/static/img/das-filter-dark.svg new file mode 100644 index 00000000..e4ecdd49 --- /dev/null +++ b/www/static/img/das-filter-dark.svg @@ -0,0 +1,52 @@ + + + + + + DAS FILTER + + + + + + + + + + + + + + diff --git a/www/static/img/hydra-hosting-dark.svg b/www/static/img/hydra-hosting-dark.svg new file mode 100644 index 00000000..8ac11f99 --- /dev/null +++ b/www/static/img/hydra-hosting-dark.svg @@ -0,0 +1 @@ + diff --git a/www/static/img/logo-craft-cms-dark.svg b/www/static/img/logo-craft-cms-dark.svg new file mode 100644 index 00000000..53f94fb4 --- /dev/null +++ b/www/static/img/logo-craft-cms-dark.svg @@ -0,0 +1,3 @@ + + + diff --git a/www/static/img/pullapprove-logo-dark.svg b/www/static/img/pullapprove-logo-dark.svg new file mode 100644 index 00000000..0000ea8f --- /dev/null +++ b/www/static/img/pullapprove-logo-dark.svg @@ -0,0 +1,21 @@ + + + + + + + + + + + + + + + + + + + + + diff --git a/www/static/img/transloadit-logo-dark.svg b/www/static/img/transloadit-logo-dark.svg new file mode 100644 index 00000000..7f7a5a9a --- /dev/null +++ b/www/static/img/transloadit-logo-dark.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/www/static/img/ui-bakery-dark.svg b/www/static/img/ui-bakery-dark.svg new file mode 100644 index 00000000..de6f05e8 --- /dev/null +++ b/www/static/img/ui-bakery-dark.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/www/static/img/ui-bakery.png b/www/static/img/ui-bakery.png deleted file mode 100644 index f99290fb..00000000 Binary files a/www/static/img/ui-bakery.png and /dev/null differ diff --git a/www/static/img/ui-bakery.svg b/www/static/img/ui-bakery.svg new file mode 100644 index 00000000..a81f5bfb --- /dev/null +++ b/www/static/img/ui-bakery.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/www/static/img/v7n-logo-dark.png b/www/static/img/v7n-logo-dark.png new file mode 100644 index 00000000..b4b89eba Binary files /dev/null and b/www/static/img/v7n-logo-dark.png differ diff --git a/www/static/img/vps-server-logo-dark.svg b/www/static/img/vps-server-logo-dark.svg new file mode 100644 index 00000000..8f727352 --- /dev/null +++ b/www/static/img/vps-server-logo-dark.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/www/themes/htmx-theme/static/css/site.css b/www/themes/htmx-theme/static/css/site.css index 5e78f447..1a3a245a 100644 --- a/www/themes/htmx-theme/static/css/site.css +++ b/www/themes/htmx-theme/static/css/site.css @@ -1,6 +1,47 @@ :root { - --midBlue: #3366cc; + --alertBackground: whitesmoke; + --alertBorder: lightgrey; + --alertShadow: darkgray; + --anchorColor: #3366cc; + --bodyBackground: white; + --footerBackground: #f6f6f6; --lightBlue: #3d72d7; + --midBlue: #3366cc; + --searchBorder: #eee; + --textColor: #111; + --topNavBackground: linear-gradient(#fff, #f4f5f5); + --topNavBorder: #d0d0d0; + --topNavShadow: #efefef; + color-scheme: light dark; +} + +@media (prefers-color-scheme: dark) { + :root { + --alertBackground: #161719; + --alertBorder: #41464b; + --alertShadow: rgba(0, 0, 0, 0.15); + --anchorColor: #e2dada; + --bodyBackground: #1f1f1f; + --footerBackground: #1a1d1e; + --midBlue: #5b96d5; + --searchBorder: #495057; + --textColor: #c7c4c1; + --topNavBackground: linear-gradient(#161718, #1b1d1f); + --topNavBorder: #41464b; + --topNavShadow: #2d2d2d; + } + + .dark-invert { + filter: invert(1); + } + + .dark-visible { + display: block; + } + + .dark-hidden { + display: none; + } } body { @@ -8,16 +49,31 @@ body { margin: 0px; line-height: 1.5em; font-size: 16px; - color: #111; - background-color: white; + color: var(--textColor); + background-color: var(--bodyBackground); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif !important; } +@media (prefers-color-scheme: light) { + .dark-visible { + display: none; + } +} + table { font-size: 16px; } +.alert { + border: 1px solid var(--alertBorder); + margin: 24px 8px; + padding: 12px; + border-radius: 8px; + background-color: var(--alertBackground); + filter: drop-shadow(3px 3px var(--alertShadow)); +} + .info-table table tbody tr td:first-of-type { white-space: nowrap; } @@ -50,10 +106,10 @@ table { .top-nav { line-height: 30px; - border-bottom: 1px solid #d0d0d0; + border-bottom: 1px solid var(--topNavBorder); margin: 0px; - background-image: linear-gradient(#fff, #f4f5f5); - box-shadow: 0px 4px 15px 0px rgb(239, 239, 239); + background-image: var(--topNavBackground); + box-shadow: 0px 4px 15px 0px var(--topNavShadow); margin-bottom:1em; } @@ -86,7 +142,7 @@ code:not(code[class*="language-"]) { box-shadow: inset 0px 11px 8px -10px #262626, inset 0px -11px 8px -10px #262626; - border-bottom: 1px solid whitesmoke; + border-bottom: 1px solid var(--topNavBorder); } .dark-hero * { opacity: 0; @@ -329,8 +385,8 @@ transition: visibility 0s 1s, opacity 1s linear; padding:1em 0; } -.github-stars iframe{ - max-width:95px +.github-stars { + margin-top: 5px; } /* Content */ @@ -376,13 +432,6 @@ h1,h2,h3,h4{ .navigation-items > *:not(:last-child){ margin-right: calc(.5em + .7vw); } - .github-stars{ - display:flex; - align-items:center; - } - .github-stars a{ - margin:0 calc(.5em + .7vw); - } /* Content */ .content .col:not(:nth-child(1)):not(.nav) { @@ -415,16 +464,6 @@ h1,h2,h3,h4{ } -@media(max-width:45rem) { - .github-stars{ - text-align:center; - margin-top:1em; - } - .github-stars a{ - display:block; - } -} - .logo-wrapper { white-space: nowrap; @@ -440,7 +479,7 @@ background: none; transition: all .2s ease-in-out; width: 2.5rem; padding: 4px 6px; - border: 2px solid #eee; + border: 2px solid var(--searchBorder); border-radius: 10px; margin-right: 10px; outline: 0; @@ -462,7 +501,7 @@ footer { margin-top: 2em; padding-top: 2em; padding-bottom: 5em; -background-color: #f6f6f6; +background-color: var(--footerBackground); } footer .footer-menu { @@ -491,6 +530,7 @@ pre[class|="language"] { margin-left: -1.3rem; margin-right: .3rem; opacity: 40%; + color: var(--anchorColor); } .zola-anchor:hover { opacity: 95%; diff --git a/www/themes/htmx-theme/templates/base.html b/www/themes/htmx-theme/templates/base.html index 5ee3c22a..f35c6735 100644 --- a/www/themes/htmx-theme/templates/base.html +++ b/www/themes/htmx-theme/templates/base.html @@ -52,9 +52,11 @@
-
-
- +
+
+ Star +
+
@@ -98,6 +100,6 @@ - +