mirror of
https://github.com/expressjs/expressjs.com.git
synced 2026-02-21 19:41:33 +00:00
chore: refactor footer and header icons (#1962)
* refactor footer * fix icons layout * remove font awesome icons * refactor header icons * redeploy netlify preview * use absolute path for a svg icons * replace img elements with CSS background-image and mask-image for theme icons * fix bugs and remove unused css classes * apply thin scroller for tables (chrome) * inherit colors for footer social icons * simplify openjs icon * use openjs white logo * simplify theme icons * fix theme icons * fix background color * fix bugs and refactor theme.js * remove color flicker * fix bugs and refactor theme.js * refactor * remove comments from svg * legacy fix: alignment of icons
This commit is contained in:
shubham oulkar
@@ -3,13 +3,8 @@
|
||||
<footer>
|
||||
<section id="footer-content">
|
||||
<div id="footer-copyright">
|
||||
<a href="https://openjsf.org/">
|
||||
<img
|
||||
src="https://raw.githubusercontent.com/openjs-foundation/artwork/main/openjs_foundation/openjs_foundation-logo-horizontal-color.svg"
|
||||
alt="OpenJS Foundation" width="125" height="39" class="hidden-dark" />
|
||||
<img
|
||||
src="https://raw.githubusercontent.com/openjs-foundation/artwork/main/openjs_foundation/openjs_foundation-logo-horizontal-white.svg"
|
||||
alt="OpenJS Foundation" width="125" height="39" class="hidden-light" />
|
||||
<a href="https://openjsf.org/" class="openjs-logo" title="OpenJS Foundation">
|
||||
{% include icons/openjs_foundation-logo-horizontal-white.svg %}
|
||||
</a>
|
||||
<div id="footer-policy">
|
||||
<a href="https://terms-of-use.openjsf.org">
|
||||
@@ -33,44 +28,36 @@
|
||||
<div class="footer-social">
|
||||
<div>
|
||||
<a href="https://github.com/expressjs/express" aria-label="Go to the repository on GitHub">
|
||||
<span class="hidden-dark">
|
||||
{% include icons/github-light.svg %}
|
||||
</span>
|
||||
<span class="hidden-light">
|
||||
{% include icons/github-dark.svg %}
|
||||
</span>
|
||||
{% include icons/github.svg %}
|
||||
</a>
|
||||
</div>
|
||||
<div>
|
||||
<a href="https://www.youtube.com/channel/UCYjxjAeH6TRik9Iwy5nXw7g"
|
||||
aria-label="Go to the repository on Youtube">{% include icons/youtube.svg %}</a>
|
||||
aria-label="Go to the repository on Youtube">
|
||||
{% include icons/youtube.svg %}</a>
|
||||
</div>
|
||||
<div>
|
||||
<a href="https://x.com/UseExpressJS" aria-label="Go to the repository on X">
|
||||
<span class="hidden-dark">
|
||||
{% include icons/x-light.svg %}
|
||||
</span>
|
||||
<span class="hidden-light">
|
||||
{% include icons/x-dark.svg %}
|
||||
</span>
|
||||
<a href="https://x.com/UseExpressJS" aria-label="Go to the X account">
|
||||
{% include icons/X.svg %}
|
||||
</a>
|
||||
</div>
|
||||
<div>
|
||||
<a href="https://openjs-foundation.slack.com/archives/C02QB1731FH"
|
||||
aria-label="Go to the repository on Slack">{% include icons/slack.svg %}</a>
|
||||
aria-label="Join Slack group">
|
||||
{% include icons/slack.svg %}</a>
|
||||
</div>
|
||||
<div>
|
||||
<a href="https://opencollective.com/express" aria-label="Go to the repository on Open Collective">{% include
|
||||
<a href="https://opencollective.com/express" aria-label="Go to Open Collective">{% include
|
||||
icons/opencollective.svg %}</a>
|
||||
</div>
|
||||
<div>
|
||||
<a href="https://bsky.app/profile/expressjs.bsky.social" aria-label="Go to the repository on Bluesky">{%
|
||||
<a href="https://bsky.app/profile/expressjs.bsky.social" aria-label="Go to the Bluesky">{%
|
||||
include icons/bluesky.svg %}</a>
|
||||
</div>
|
||||
</div>
|
||||
<a href="https://www.netlify.com">
|
||||
<img src="https://www.netlify.com/v3/img/components/netlify-color-accent.svg" alt="Preview Deploys by Netlify"
|
||||
width="80" />
|
||||
<img src="https://www.netlify.com/v3/img/components/netlify-color-accent.svg" alt="Preview Deploys by Netlify"
|
||||
width="80" />
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -35,7 +35,6 @@
|
||||
<link rel="stylesheet" href="/css/themes/dark-theme.css?_={{ site.time | date: '%s' }}">
|
||||
<link rel="stylesheet" href="/css/style.css?_={{ site.time | date: '%s' }}">
|
||||
<link rel="stylesheet" href="/css/sintax.css?_={{ site.time | date: '%s' }}">
|
||||
<link rel="stylesheet" href="/css/font-awesome.min.css">
|
||||
<link rel="stylesheet" href="/css/langs/{{ page.lang }}.css">
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||||
<meta name="description" content="{{page.description}}">
|
||||
|
||||
@@ -1,6 +1,8 @@
|
||||
<header>
|
||||
<div id="mobile-menu">
|
||||
<div id="nav-button" class="fa fa-bars fa-2x button"></div>
|
||||
<div id="nav-button" class="header-btn">
|
||||
{% include icons/hamburger.svg %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="logo-container">
|
||||
<a href="/" title="Go to homepage" aria-label="Go to homepage">
|
||||
@@ -245,9 +247,9 @@
|
||||
</ul>
|
||||
</nav>
|
||||
<div class="header-right">
|
||||
<button id="theme-toggle" type="button" class="theme-btn" title="change theme">
|
||||
<i class="fa fa-moon-o fa-2x hidden-dark"></i>
|
||||
<span class="sun-icon hidden-light"></span>
|
||||
<button id="theme-toggle" type="button" class="theme-btn" title="change theme" aria-label="Switch to dark mode">
|
||||
<span id="icon-moon">{% include icons/moon.svg %}</span>
|
||||
<span id="icon-sun">{% include icons/sun.svg %}</span>
|
||||
</button>
|
||||
{% include language-picker.html %}
|
||||
{% include language-picker-mobile.html %}
|
||||
|
||||
1
_includes/icons/X.svg
Normal file
1
_includes/icons/X.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" width="20" height="20" viewBox="0 0 1200 1227"><path d="M714.163 519.284 1160.89 0h-105.86L667.137 450.887 357.328 0H0l468.492 681.821L0 1226.37h105.866l409.625-476.152 327.181 476.152H1200L714.137 519.284h.026ZM569.165 687.828l-47.468-67.894-377.686-540.24h162.604l304.797 435.991 47.468 67.894 396.2 566.721H892.476L569.165 687.854v-.026Z"/></svg>
|
||||
|
After Width: | Height: | Size: 409 B |
@@ -1,11 +0,0 @@
|
||||
<svg
|
||||
viewBox="0 0 256 250"
|
||||
width="20"
|
||||
height="20"
|
||||
fill="#fff"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
preserveAspectRatio="xMidYMid"
|
||||
>
|
||||
<path
|
||||
d="M128.001 0C57.317 0 0 57.307 0 128.001c0 56.554 36.676 104.535 87.535 121.46 6.397 1.185 8.746-2.777 8.746-6.158 0-3.052-.12-13.135-.174-23.83-35.61 7.742-43.124-15.103-43.124-15.103-5.823-14.795-14.213-18.73-14.213-18.73-11.613-7.944.876-7.78.876-7.78 12.853.902 19.621 13.19 19.621 13.19 11.417 19.568 29.945 13.911 37.249 10.64 1.149-8.272 4.466-13.92 8.127-17.116-28.431-3.236-58.318-14.212-58.318-63.258 0-13.975 5-25.394 13.188-34.358-1.329-3.224-5.71-16.242 1.24-33.874 0 0 10.749-3.44 35.21 13.121 10.21-2.836 21.16-4.258 32.038-4.307 10.878.049 21.837 1.47 32.066 4.307 24.431-16.56 35.165-13.12 35.165-13.12 6.967 17.63 2.584 30.65 1.255 33.873 8.207 8.964 13.173 20.383 13.173 34.358 0 49.163-29.944 59.988-58.447 63.157 4.591 3.972 8.682 11.762 8.682 23.704 0 17.126-.148 30.91-.148 35.126 0 3.407 2.304 7.398 8.792 6.14C219.37 232.5 256 184.537 256 128.002 256 57.307 198.691 0 128.001 0Zm-80.06 182.34c-.282.636-1.283.827-2.194.39-.929-.417-1.45-1.284-1.15-1.922.276-.655 1.279-.838 2.205-.399.93.418 1.46 1.293 1.139 1.931Zm6.296 5.618c-.61.566-1.804.303-2.614-.591-.837-.892-.994-2.086-.375-2.66.63-.566 1.787-.301 2.626.591.838.903 1 2.088.363 2.66Zm4.32 7.188c-.785.545-2.067.034-2.86-1.104-.784-1.138-.784-2.503.017-3.05.795-.547 2.058-.055 2.861 1.075.782 1.157.782 2.522-.019 3.08Zm7.304 8.325c-.701.774-2.196.566-3.29-.49-1.119-1.032-1.43-2.496-.726-3.27.71-.776 2.213-.558 3.315.49 1.11 1.03 1.45 2.505.701 3.27Zm9.442 2.81c-.31 1.003-1.75 1.459-3.199 1.033-1.448-.439-2.395-1.613-2.103-2.626.301-1.01 1.747-1.484 3.207-1.028 1.446.436 2.396 1.602 2.095 2.622Zm10.744 1.193c.036 1.055-1.193 1.93-2.715 1.95-1.53.034-2.769-.82-2.786-1.86 0-1.065 1.202-1.932 2.733-1.958 1.522-.03 2.768.818 2.768 1.868Zm10.555-.405c.182 1.03-.875 2.088-2.387 2.37-1.485.271-2.861-.365-3.05-1.386-.184-1.056.893-2.114 2.376-2.387 1.514-.263 2.868.356 3.061 1.403Z" />
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 2.0 KiB |
@@ -1,11 +0,0 @@
|
||||
<svg
|
||||
viewBox="0 0 256 250"
|
||||
width="20"
|
||||
height="20"
|
||||
fill="#24292f"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
preserveAspectRatio="xMidYMid"
|
||||
>
|
||||
<path
|
||||
d="M128.001 0C57.317 0 0 57.307 0 128.001c0 56.554 36.676 104.535 87.535 121.46 6.397 1.185 8.746-2.777 8.746-6.158 0-3.052-.12-13.135-.174-23.83-35.61 7.742-43.124-15.103-43.124-15.103-5.823-14.795-14.213-18.73-14.213-18.73-11.613-7.944.876-7.78.876-7.78 12.853.902 19.621 13.19 19.621 13.19 11.417 19.568 29.945 13.911 37.249 10.64 1.149-8.272 4.466-13.92 8.127-17.116-28.431-3.236-58.318-14.212-58.318-63.258 0-13.975 5-25.394 13.188-34.358-1.329-3.224-5.71-16.242 1.24-33.874 0 0 10.749-3.44 35.21 13.121 10.21-2.836 21.16-4.258 32.038-4.307 10.878.049 21.837 1.47 32.066 4.307 24.431-16.56 35.165-13.12 35.165-13.12 6.967 17.63 2.584 30.65 1.255 33.873 8.207 8.964 13.173 20.383 13.173 34.358 0 49.163-29.944 59.988-58.447 63.157 4.591 3.972 8.682 11.762 8.682 23.704 0 17.126-.148 30.91-.148 35.126 0 3.407 2.304 7.398 8.792 6.14C219.37 232.5 256 184.537 256 128.002 256 57.307 198.691 0 128.001 0Zm-80.06 182.34c-.282.636-1.283.827-2.194.39-.929-.417-1.45-1.284-1.15-1.922.276-.655 1.279-.838 2.205-.399.93.418 1.46 1.293 1.139 1.931Zm6.296 5.618c-.61.566-1.804.303-2.614-.591-.837-.892-.994-2.086-.375-2.66.63-.566 1.787-.301 2.626.591.838.903 1 2.088.363 2.66Zm4.32 7.188c-.785.545-2.067.034-2.86-1.104-.784-1.138-.784-2.503.017-3.05.795-.547 2.058-.055 2.861 1.075.782 1.157.782 2.522-.019 3.08Zm7.304 8.325c-.701.774-2.196.566-3.29-.49-1.119-1.032-1.43-2.496-.726-3.27.71-.776 2.213-.558 3.315.49 1.11 1.03 1.45 2.505.701 3.27Zm9.442 2.81c-.31 1.003-1.75 1.459-3.199 1.033-1.448-.439-2.395-1.613-2.103-2.626.301-1.01 1.747-1.484 3.207-1.028 1.446.436 2.396 1.602 2.095 2.622Zm10.744 1.193c.036 1.055-1.193 1.93-2.715 1.95-1.53.034-2.769-.82-2.786-1.86 0-1.065 1.202-1.932 2.733-1.958 1.522-.03 2.768.818 2.768 1.868Zm10.555-.405c.182 1.03-.875 2.088-2.387 2.37-1.485.271-2.861-.365-3.05-1.386-.184-1.056.893-2.114 2.376-2.387 1.514-.263 2.868.356 3.061 1.403Z" />
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 2.0 KiB |
@@ -3,7 +3,7 @@
|
||||
width="20"
|
||||
height="20"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
preserveAspectRatio="xMidYMid"
|
||||
fill="currentColor"
|
||||
>
|
||||
<path
|
||||
d="M128.001 0C57.317 0 0 57.307 0 128.001c0 56.554 36.676 104.535 87.535 121.46 6.397 1.185 8.746-2.777 8.746-6.158 0-3.052-.12-13.135-.174-23.83-35.61 7.742-43.124-15.103-43.124-15.103-5.823-14.795-14.213-18.73-14.213-18.73-11.613-7.944.876-7.78.876-7.78 12.853.902 19.621 13.19 19.621 13.19 11.417 19.568 29.945 13.911 37.249 10.64 1.149-8.272 4.466-13.92 8.127-17.116-28.431-3.236-58.318-14.212-58.318-63.258 0-13.975 5-25.394 13.188-34.358-1.329-3.224-5.71-16.242 1.24-33.874 0 0 10.749-3.44 35.21 13.121 10.21-2.836 21.16-4.258 32.038-4.307 10.878.049 21.837 1.47 32.066 4.307 24.431-16.56 35.165-13.12 35.165-13.12 6.967 17.63 2.584 30.65 1.255 33.873 8.207 8.964 13.173 20.383 13.173 34.358 0 49.163-29.944 59.988-58.447 63.157 4.591 3.972 8.682 11.762 8.682 23.704 0 17.126-.148 30.91-.148 35.126 0 3.407 2.304 7.398 8.792 6.14C219.37 232.5 256 184.537 256 128.002 256 57.307 198.691 0 128.001 0Zm-80.06 182.34c-.282.636-1.283.827-2.194.39-.929-.417-1.45-1.284-1.15-1.922.276-.655 1.279-.838 2.205-.399.93.418 1.46 1.293 1.139 1.931Zm6.296 5.618c-.61.566-1.804.303-2.614-.591-.837-.892-.994-2.086-.375-2.66.63-.566 1.787-.301 2.626.591.838.903 1 2.088.363 2.66Zm4.32 7.188c-.785.545-2.067.034-2.86-1.104-.784-1.138-.784-2.503.017-3.05.795-.547 2.058-.055 2.861 1.075.782 1.157.782 2.522-.019 3.08Zm7.304 8.325c-.701.774-2.196.566-3.29-.49-1.119-1.032-1.43-2.496-.726-3.27.71-.776 2.213-.558 3.315.49 1.11 1.03 1.45 2.505.701 3.27Zm9.442 2.81c-.31 1.003-1.75 1.459-3.199 1.033-1.448-.439-2.395-1.613-2.103-2.626.301-1.01 1.747-1.484 3.207-1.028 1.446.436 2.396 1.602 2.095 2.622Zm10.744 1.193c.036 1.055-1.193 1.93-2.715 1.95-1.53.034-2.769-.82-2.786-1.86 0-1.065 1.202-1.932 2.733-1.958 1.522-.03 2.768.818 2.768 1.868Zm10.555-.405c.182 1.03-.875 2.088-2.387 2.37-1.485.271-2.861-.365-3.05-1.386-.184-1.056.893-2.114 2.376-2.387 1.514-.263 2.868.356 3.061 1.403Z" />
|
||||
|
||||
|
Before Width: | Height: | Size: 2.0 KiB After Width: | Height: | Size: 2.0 KiB |
5
_includes/icons/hamburger.svg
Normal file
5
_includes/icons/hamburger.svg
Normal file
@@ -0,0 +1,5 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<line x1="3" y1="6" x2="21" y2="6"/>
|
||||
<line x1="3" y1="12" x2="21" y2="12"/>
|
||||
<line x1="3" y1="18" x2="21" y2="18"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 309 B |
3
_includes/icons/i18n.svg
Normal file
3
_includes/icons/i18n.svg
Normal file
@@ -0,0 +1,3 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6" width="24" height="24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="m10.5 21 5.25-11.25L21 21m-9-3h7.5M3 5.621a49 49 0 0 1 6-.371m0 0q1.681 0 3.334.114M9 5.25V3m3.334 2.364C11.176 10.658 7.69 15.08 3 17.502m9.334-12.138A48 48 0 0 1 15 5.621m-4.589 8.495a18 18 0 0 1-3.827-5.802"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 430 B |
5
_includes/icons/moon.svg
Normal file
5
_includes/icons/moon.svg
Normal file
@@ -0,0 +1,5 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" fill="currentColor">
|
||||
<g transform="translate(1, 4) scale(0.7)">
|
||||
<path d="M16.2 5c-9.3 5.7-9.5 19.7-.3 24.5 6.3 3.2 16.2.9 19.1-4.5 1.5-2.9.7-3.4-4.4-3.1-6.3.4-10.1-3.1-10.1-9.2 0-2.9.6-5.2 1.8-6.4 3.2-3.6-.8-4.5-6.1-1.3m2 6.3c-.4 4.9-.1 5.7 2.8 9 2 2.4 4.4 3.9 6.7 4.3 3.2.6 3.3.8 1.9 2.3-2.7 2.6-10.9 2.2-13.9-.7-4-3.8-5.2-7.6-3.8-12.2.9-3 5-8 6.6-8 .1 0 0 2.4-.3 5.3"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 475 B |
61
_includes/icons/openjs_foundation-logo-horizontal-white.svg
Normal file
61
_includes/icons/openjs_foundation-logo-horizontal-white.svg
Normal file
@@ -0,0 +1,61 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 23.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" id="ARTWORK" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 1000 314.4" style="enable-background:new 0 0 1000 314.4;" xml:space="preserve">
|
||||
<style type="text/css">
|
||||
.st0{fill:var(--fg);}
|
||||
</style>
|
||||
<g>
|
||||
<path class="st0" d="M271.4,78.1L137,0.5L136.1,0l-0.9,0.5L1.6,77.7l-0.7,0.4L0,78.6v157.2l0.9,0.5l134.4,77.6l0.9,0.5l0.9-0.5
|
||||
l132.6-76.5l1.8-1l0.9-0.5V78.6L271.4,78.1z M122.7,20.1L89.8,77H24.1L122.7,20.1z M84.4,86.4L69,113.1L22.8,86.4H84.4z
|
||||
M72.4,125.8l54.3,31.4l-54.3,31.4l-18.1-31.4L72.4,125.8z M64.4,121.2l-15.4,26.7L18.1,94.5L64.4,121.2z M10.7,100.3l32.9,56.9
|
||||
l-32.9,56.9V100.3z M48.9,166.6l15.4,26.7l-46.2,26.7L48.9,166.6z M69,201.3L84.4,228H22.8L69,201.3z M24.1,237.4h65.7l32.9,56.9
|
||||
L24.1,237.4z M131.5,290.8l-30.8-53.4h30.8V290.8z M131.5,228H95.2l-18.1-31.4l54.3-31.4V228z M131.5,149.1l-54.3-31.4l18.1-31.4
|
||||
h36.2V149.1z M131.5,77h-30.8l30.8-53.4V77z M207.9,121.2l46.2-26.7l-30.8,53.4L207.9,121.2z M217.9,157.2l-18.1,31.4l-54.3-31.4
|
||||
l54.3-31.4L217.9,157.2z M203.2,113.1l-15.4-26.7h61.6L203.2,113.1z M248.1,77h-65.7l-32.8-56.9L248.1,77z M140.8,23.6L171.6,77
|
||||
h-30.8V23.6z M140.8,86.4H177l18.1,31.4l-54.3,31.4V86.4z M140.8,165.3l54.3,31.4L177,228h-36.2V165.3z M140.8,237.4h30.8
|
||||
l-30.8,53.4V237.4z M149.6,294.3l32.8-56.9h65.7L149.6,294.3z M187.8,228l15.4-26.7l46.2,26.7H187.8z M207.9,193.2l15.4-26.7
|
||||
l30.8,53.4L207.9,193.2z M261.6,214.1l-32.9-56.9l32.9-56.9V214.1z"/>
|
||||
<polygon class="st0" points="308.4,202.7 372.6,202.7 372.6,208.5 315,208.5 315,257 367.2,257 367.2,263 315,263 315,312.9
|
||||
308.4,312.9 "/>
|
||||
<path class="st0" d="M383.8,279.7c0-19,15.2-34.4,34.5-34.4c19.3,0,34.2,15.4,34.2,34.4c0,19-14.9,34.5-34.2,34.5
|
||||
C399,314.2,383.8,298.7,383.8,279.7 M446,279.7c0-16.4-11.2-28.7-27.7-28.7c-16.5,0-28,12.3-28,28.7c0,16.4,11.5,28.9,28,28.9
|
||||
C434.8,308.6,446,296.1,446,279.7"/>
|
||||
<path class="st0" d="M469.9,288.5v-41.7h6.3v40.7c0,13.5,6.3,21.1,19,21.1c14.3,0,24.3-9.6,24.3-24.8v-37h6.3v66.2h-6.3l0.2-14.6
|
||||
c-4.4,9.9-13.5,16-25.1,16C479.8,314.4,469.9,304.7,469.9,288.5"/>
|
||||
<path class="st0" d="M543,246.8h6.3l-0.2,14.8c4.4-10,13.6-16.2,25.3-16.2c14.8,0,24.6,9.9,24.6,26.3v41.3h-6.3v-40.2
|
||||
c0-13.6-6.3-21.6-19.1-21.6c-14.3,0-24.3,9.4-24.3,24.8v37H543V246.8z"/>
|
||||
<path class="st0" d="M616.3,279.7c0-19.5,13.8-34.4,32.8-34.4c13.5,0,23.2,7.3,28,17.2v-66.6h6.3v117.1h-6.3l0.3-16.5
|
||||
c-4.7,10.2-15.6,17.8-28.4,17.8C630.1,314.2,616.3,299.2,616.3,279.7 M677.6,279.7c0-16.4-11-28.7-27.7-28.7
|
||||
c-16.4,0-26.9,12.3-26.9,28.7c0,16.4,10.5,28.9,26.9,28.9C666.6,308.6,677.6,296.1,677.6,279.7"/>
|
||||
<path class="st0" d="M748,271.4c0-14.9-6.8-20.6-17.7-20.6c-10.1,0-16.9,4.2-21.6,11.4l-4.5-3.2c5.5-8.6,14.9-13.6,26.3-13.6
|
||||
c13.6,0,23.8,8.3,23.8,25.5v42.2H748l0.3-10.2c-4.2,6.3-11.5,11.5-22.9,11.5c-15.1,0-25-7-25-20.3c0-13.1,11.5-19.3,24.2-19.3H748
|
||||
V271.4z M725.4,279.9c-10.1,0-18.6,3.9-18.6,13.9c0,10.1,6.6,14.8,19.3,14.8c11,0,21.9-6.5,21.9-16.7v-12H725.4z"/>
|
||||
<path class="st0" d="M782.5,295.4v-43.3h-10.4v-5.4h10.4v-23.2h6.3v23.2h19.1v5.4h-19.1v43.1c0,9.7,3.4,13.3,8.9,13.3
|
||||
c5.8,0,8.1-2.3,10.5-4.9l4.1,3.9c-3.2,3.7-7.1,6.6-14.6,6.6C789.3,314.2,782.5,308.9,782.5,295.4"/>
|
||||
<path class="st0" d="M829.5,218.2c0-3.1,2.6-5.4,5.4-5.4c2.8,0,5.4,2.3,5.4,5.4c0,3.2-2.6,5.3-5.4,5.3
|
||||
C832.1,223.6,829.5,221.5,829.5,218.2 M831.8,246.8h6.3v66.2h-6.3V246.8z"/>
|
||||
<path class="st0" d="M857.1,279.7c0-19,15.2-34.4,34.5-34.4c19.3,0,34.2,15.4,34.2,34.4c0,19-14.9,34.5-34.2,34.5
|
||||
C872.4,314.2,857.1,298.7,857.1,279.7 M919.4,279.7c0-16.4-11.2-28.7-27.7-28.7c-16.5,0-28,12.3-28,28.7c0,16.4,11.5,28.9,28,28.9
|
||||
C908.2,308.6,919.4,296.1,919.4,279.7"/>
|
||||
<path class="st0" d="M943.9,246.8h6.3l-0.2,14.8c4.4-10,13.6-16.2,25.3-16.2c14.8,0,24.6,9.9,24.6,26.3v41.3h-6.3v-40.2
|
||||
c0-13.6-6.3-21.6-19.1-21.6c-14.3,0-24.3,9.4-24.3,24.8v37h-6.3V246.8z"/>
|
||||
<path class="st0" d="M308.4,73.1c0-41.4,31.8-71.3,71.7-71.3c39.6,0,71.5,29.8,71.5,71.3c0,41.4-31.9,71.3-71.5,71.3
|
||||
C340.2,144.3,308.4,114.5,308.4,73.1 M429.4,73.1c0-29.6-20.4-51.9-49.4-51.9c-29,0-49.6,22.3-49.6,51.9
|
||||
c0,29.6,20.6,51.9,49.6,51.9C409,124.9,429.4,102.7,429.4,73.1"/>
|
||||
<path class="st0" d="M473.9,56.8h20.8l-0.6,15.9c5.5-10.6,15.7-17.8,30.4-17.8c22,0,39.8,18.6,39.8,44.5c0,25.9-18,44.9-40.2,44.9
|
||||
c-14.3,0-24.5-6.9-29.4-16.5v58h-20.8V56.8z M543.1,99.4c0-15.5-9.4-26.1-24.3-26.1c-15.1,0-24.9,10.6-24.9,26.1
|
||||
c0,16.1,9.8,26.7,24.9,26.7C533.8,126.2,543.1,115.6,543.1,99.4"/>
|
||||
<path class="st0" d="M635,127c11.2,0,19.4-4.5,24.3-9.2l12,12.7c-8,8-19,13.9-36.1,13.9c-29.4,0-48.4-19-48.4-44.7
|
||||
c0-25.5,20-44.7,45.7-44.7c29.2,0,45.7,21.6,44.3,51.7h-69C610.3,119,619.3,127,635,127 M656.1,92.3c-1.8-11.6-9-20.2-23.3-20.2
|
||||
c-13.3,0-22.5,7.3-24.9,20.2H656.1z"/>
|
||||
<path class="st0" d="M699.7,56.8h20.6l-0.4,15.9c5.3-11.2,16.1-17.8,29-17.8c19,0,32.1,13.5,32.1,36.7v50.8h-20.6V93.3
|
||||
c0-12.3-5.7-19.4-17.8-19.4c-13.5,0-22.3,8.2-22.3,22v46.5h-20.6V56.8z"/>
|
||||
<path class="st0" d="M803.5,120.9l17.6-10.8c4.9,8.8,10.6,14.9,20.8,14.9c11.6,0,19.2-5.5,19.2-21.6V3.7h21.6v100
|
||||
c0,27.6-16.5,40.6-39.8,40.6C822.3,144.3,810.1,133.7,803.5,120.9"/>
|
||||
<path class="st0" d="M904.9,115.6l17.8-9.8c6.5,10.8,14.9,19.4,31.8,19.4c14.1,0,24.1-7.6,24.1-19c0-12-8.2-17.4-23.3-24.1
|
||||
l-9.2-4.1c-20.2-9-32.5-19.2-32.5-40.6c0-20.6,15.9-35.3,39-35.3C971,2,983.5,9,991.8,23.9l-16.9,10.4
|
||||
c-5.3-9.2-11.4-13.5-22.3-13.5c-11,0-18,6.7-18,16.1c0,10.4,5.9,15.1,20,21.2l9,4.1c23.7,10.4,36.3,21.4,36.3,43.7
|
||||
c0,24.3-19,38.4-45.1,38.4C928.5,144.3,912.6,131.3,904.9,115.6"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 5.5 KiB |
17
_includes/icons/sun.svg
Normal file
17
_includes/icons/sun.svg
Normal file
@@ -0,0 +1,17 @@
|
||||
<svg width="24" height="24" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g transform="translate(4 4)" stroke="currentColor" stroke-width="2" stroke-linecap="round">
|
||||
<circle cx="12" cy="12" r="7.5"/>
|
||||
<line x1="12" y1="-2" x2="12" y2="1" transform="rotate(0 12 12)"/>
|
||||
<line x1="12" y1="-2" x2="12" y2="1" transform="rotate(30 12 12)"/>
|
||||
<line x1="12" y1="-2" x2="12" y2="1" transform="rotate(60 12 12)"/>
|
||||
<line x1="12" y1="-2" x2="12" y2="1" transform="rotate(90 12 12)"/>
|
||||
<line x1="12" y1="-2" x2="12" y2="1" transform="rotate(120 12 12)"/>
|
||||
<line x1="12" y1="-2" x2="12" y2="1" transform="rotate(150 12 12)"/>
|
||||
<line x1="12" y1="-2" x2="12" y2="1" transform="rotate(180 12 12)"/>
|
||||
<line x1="12" y1="-2" x2="12" y2="1" transform="rotate(210 12 12)"/>
|
||||
<line x1="12" y1="-2" x2="12" y2="1" transform="rotate(240 12 12)"/>
|
||||
<line x1="12" y1="-2" x2="12" y2="1" transform="rotate(270 12 12)"/>
|
||||
<line x1="12" y1="-2" x2="12" y2="1" transform="rotate(300 12 12)"/>
|
||||
<line x1="12" y1="-2" x2="12" y2="1" transform="rotate(330 12 12)"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
@@ -1 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" viewBox="0 0 1200 1227"><path fill="#fff" d="M714.163 519.284 1160.89 0h-105.86L667.137 450.887 357.328 0H0l468.492 681.821L0 1226.37h105.866l409.625-476.152 327.181 476.152H1200L714.137 519.284h.026ZM569.165 687.828l-47.468-67.894-377.686-540.24h162.604l304.797 435.991 47.468 67.894 396.2 566.721H892.476L569.165 687.854v-.026Z"/></svg>
|
||||
|
Before Width: | Height: | Size: 413 B |
@@ -1 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" viewBox="0 0 1200 1227"><path fill="#000" d="M714.163 519.284 1160.89 0h-105.86L667.137 450.887 357.328 0H0l468.492 681.821L0 1226.37h105.866l409.625-476.152 327.181 476.152H1200L714.137 519.284h.026ZM569.165 687.828l-47.468-67.894-377.686-540.24h162.604l304.797 435.991 47.468 67.894 396.2 566.721H892.476L569.165 687.854v-.026Z"/></svg>
|
||||
|
Before Width: | Height: | Size: 413 B |
@@ -1,8 +1,6 @@
|
||||
<div id="mobile-menu">
|
||||
<div id="language-picker-button" class="button">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6" width="24" height="24" style="margin-top: 5px;">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="m10.5 21 5.25-11.25L21 21m-9-3h7.5M3 5.621a48.474 48.474 0 0 1 6-.371m0 0c1.12 0 2.233.038 3.334.114M9 5.25V3m3.334 2.364C11.176 10.658 7.69 15.08 3 17.502m9.334-12.138c.896.061 1.785.147 2.666.257m-4.589 8.495a18.023 18.023 0 0 1-3.827-5.802" />
|
||||
</svg>
|
||||
<div id="language-picker-button" class="header-btn">
|
||||
{% include icons/i18n.svg %}
|
||||
</div>
|
||||
</div>
|
||||
<div id="language-picker-menu">
|
||||
|
||||
4
css/font-awesome.min.css
vendored
4
css/font-awesome.min.css
vendored
File diff suppressed because one or more lines are too long
@@ -327,7 +327,7 @@ header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding-inline: 1.5rem;
|
||||
padding-inline: 1rem;
|
||||
border-bottom: 1px solid var(--hover-fg);
|
||||
}
|
||||
|
||||
@@ -390,7 +390,7 @@ pre:has(code) button {
|
||||
&::after {
|
||||
content: "";
|
||||
background-color: var(--card-fg);
|
||||
mask-image: url("../images/copy-btn.svg");
|
||||
mask-image: url("/images/copy-btn.svg");
|
||||
mask-size: 1.5rem;
|
||||
mask-repeat: no-repeat;
|
||||
width: 1.5rem;
|
||||
@@ -667,9 +667,9 @@ table ul {
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
.button {
|
||||
display: block;
|
||||
padding: 3px 5px;
|
||||
div.header-btn {
|
||||
display: flex;
|
||||
padding: 3px;
|
||||
border-radius: 3px;
|
||||
cursor: pointer;
|
||||
color: var(--box-fg);
|
||||
@@ -688,10 +688,6 @@ a.edit-github-btn{
|
||||
background-color: var(--hover-bg);
|
||||
outline: 1px solid var(--card-fg);
|
||||
}
|
||||
|
||||
> svg {
|
||||
fill : var(--card-fg)
|
||||
}
|
||||
}
|
||||
|
||||
#mobile-menu {
|
||||
@@ -712,6 +708,10 @@ footer {
|
||||
flex-direction: column;
|
||||
padding-block: 2rem;
|
||||
padding-inline: 3rem;
|
||||
|
||||
@media screen and (max-width : 360px) {
|
||||
padding: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
#footer-content {
|
||||
@@ -728,14 +728,6 @@ footer {
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
#footer-copyright a {
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
#footer-copyright img {
|
||||
max-width: 125px;
|
||||
}
|
||||
|
||||
#footer-policy {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
@@ -749,29 +741,54 @@ footer {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.footer-social {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
font-size: 20px;
|
||||
@media screen and (max-width: 340px) {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
gap: 2.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.footer-social a {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
/* icons */
|
||||
a.openjs-logo {
|
||||
display: inline-block;
|
||||
width: 125px;
|
||||
height: 39px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* theme and lang btn */
|
||||
button.theme-btn,
|
||||
button.lang-btn {
|
||||
button.theme-btn {
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
appearance: none;
|
||||
color: var(--fg);
|
||||
background-color: inherit;
|
||||
border: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#icon-moon,
|
||||
#icon-sun {
|
||||
display: none;
|
||||
align-self: center;
|
||||
}
|
||||
html.light-mode #icon-moon {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
button.lang-btn {
|
||||
appearance: none;
|
||||
background-color: inherit;
|
||||
border: 0;
|
||||
cursor: pointer;
|
||||
color: var(--card-fg);
|
||||
padding: 0.2rem;
|
||||
font-size: inherit;
|
||||
@@ -1290,9 +1307,7 @@ h2 a {
|
||||
|
||||
.header-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-right: -10px;
|
||||
}
|
||||
|
||||
#language-picker-menu #navmenu>li:first-child {
|
||||
@@ -1626,14 +1641,6 @@ strong.eol {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.hidden-dark {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.hidden-light {
|
||||
display: none;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
margin-left: 0;
|
||||
font-weight: 600;
|
||||
|
||||
@@ -1,21 +1,9 @@
|
||||
html.dark-mode {
|
||||
|
||||
.sun-icon {
|
||||
background-image: url(/images/sun-icon.png);
|
||||
background-size: 100%;
|
||||
background-repeat: no-repeat;
|
||||
width: 27px;
|
||||
height: 27px;
|
||||
#icon-sun {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.hidden-light {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.hidden-dark {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
.submenu-content {
|
||||
box-shadow: 1px 2px var(--hover-bg);
|
||||
background-color: var(--card-bg);
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 802 B |
86
js/theme.js
86
js/theme.js
@@ -1,7 +1,9 @@
|
||||
let themeBtn;
|
||||
const themeWatcher = watchColorSchemeChange((colorScheme) => {
|
||||
if (!hasLocalStorage()) {
|
||||
// If localStorage is not supported, use system preference
|
||||
document?.addEventListener('DOMContentLoaded', () => {
|
||||
// remove icon - toggle not supported
|
||||
// remove icon
|
||||
document.querySelector('#theme-toggle').remove()
|
||||
setTheme(colorScheme);
|
||||
})
|
||||
@@ -10,82 +12,64 @@ const themeWatcher = watchColorSchemeChange((colorScheme) => {
|
||||
const systemTheme = localStorage.getItem('system-theme')
|
||||
// setting stored in local storage
|
||||
const localTheme = localStorage.getItem('local-theme')
|
||||
// // if no local theme set - system is default
|
||||
// if no local theme set - system is default
|
||||
if (localTheme === null) {
|
||||
setTheme(colorScheme)
|
||||
localStorage.setItem('system-theme', colorScheme || 'light')
|
||||
localStorage.setItem('system-theme', colorScheme)
|
||||
// page load - load any stored themes or set theme
|
||||
} else {
|
||||
// listen for system changes, update if any
|
||||
if (colorScheme != systemTheme) {
|
||||
setTheme(colorScheme)
|
||||
localStorage.setItem('system-theme', colorScheme || 'light')
|
||||
// override local theme
|
||||
localStorage.removeItem('local-theme')
|
||||
localStorage.setItem('system-theme', colorScheme)
|
||||
} else {
|
||||
// else load local theme
|
||||
if (localTheme === 'light') {
|
||||
lightModeOn()
|
||||
} else if (localTheme === 'dark') {
|
||||
darkModeOn()
|
||||
}
|
||||
setTheme(localTheme);
|
||||
}
|
||||
}
|
||||
// wait for load then and add listner on button
|
||||
// wait for load then and add listener on button
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
|
||||
document
|
||||
.querySelector('#theme-toggle')
|
||||
.addEventListener('click', toggleLocalStorageTheme)
|
||||
const themeToggle = document?.querySelector('#theme-toggle');
|
||||
themeToggle.addEventListener('click', toggleLocalStorageTheme);
|
||||
// set area-label for screen readers
|
||||
themeToggle.setAttribute('aria-label', colorScheme ? 'Switch to light mode' : 'Switch to dark mode');
|
||||
})
|
||||
}
|
||||
})
|
||||
// set the theme to given value
|
||||
// apply current theme
|
||||
function setTheme(theme) {
|
||||
// only support dark else any other defaults to light
|
||||
if (theme === 'dark') {
|
||||
darkModeOn()
|
||||
} else {
|
||||
lightModeOn()
|
||||
}
|
||||
}
|
||||
// toggle btwn themes or set a theme if none set
|
||||
function toggleLocalStorageTheme(e) {
|
||||
const localTheme = localStorage.getItem('local-theme')
|
||||
// toggle btn themes
|
||||
function toggleLocalStorageTheme() {
|
||||
const localTheme = localStorage.getItem('local-theme');
|
||||
if (localTheme === 'light') {
|
||||
localStorage.setItem('local-theme', 'dark')
|
||||
darkModeOn()
|
||||
} else if (localTheme === 'dark') {
|
||||
localStorage.setItem('local-theme', 'light')
|
||||
lightModeOn()
|
||||
// localTheme still null
|
||||
setTheme('dark');
|
||||
} else {
|
||||
// need to check page state then set
|
||||
if (darkModeState()) {
|
||||
localStorage.setItem('local-theme', 'light')
|
||||
lightModeOn()
|
||||
} else {
|
||||
localStorage.setItem('local-theme', 'dark')
|
||||
darkModeOn()
|
||||
}
|
||||
setTheme('light');
|
||||
}
|
||||
}
|
||||
function darkModeOn() {
|
||||
document?.documentElement?.classList?.remove('light-mode')
|
||||
document?.documentElement?.classList?.add('dark-mode')
|
||||
document?.documentElement?.classList.remove('light-mode')
|
||||
document?.documentElement?.classList.add('dark-mode')
|
||||
updateThemeIcon('dark');
|
||||
localStorage.setItem('local-theme', 'dark');
|
||||
}
|
||||
function lightModeOn() {
|
||||
document?.documentElement?.classList.remove('dark-mode')
|
||||
document?.documentElement?.classList?.add('light-mode')
|
||||
}
|
||||
function darkModeState() {
|
||||
return document?.documentElement?.classList.contains('dark-mode')
|
||||
document?.documentElement?.classList.add('light-mode')
|
||||
updateThemeIcon('light');
|
||||
localStorage.setItem('local-theme', 'light');
|
||||
}
|
||||
function hasLocalStorage() {
|
||||
return typeof Storage !== 'undefined'
|
||||
}
|
||||
function watchColorSchemeChange(callback) {
|
||||
// query user's machine for system setting & use that
|
||||
// get system theme preference
|
||||
const darkMediaQuery = window?.matchMedia('(prefers-color-scheme: dark)')
|
||||
|
||||
const handleChange = (event) => {
|
||||
@@ -93,8 +77,20 @@ function watchColorSchemeChange(callback) {
|
||||
callback(newColorScheme)
|
||||
}
|
||||
darkMediaQuery.addEventListener('change', handleChange)
|
||||
// handle init load value
|
||||
callback(darkMediaQuery.matches ? 'dark': 'light')
|
||||
// Return a function to remove the event listener
|
||||
// initial call : if system theme is not dark then light mode is choosen
|
||||
callback(darkMediaQuery.matches ? 'dark' : 'light')
|
||||
// remove event from window
|
||||
return () => darkMediaQuery.removeEventListener('change', handleChange)
|
||||
}
|
||||
|
||||
function updateThemeIcon (theme) {
|
||||
const sun = document?.getElementById('icon-sun');
|
||||
const moon = document?.getElementById('icon-moon');
|
||||
const themeToggle = document?.getElementById('theme-toggle');
|
||||
if (!sun || !moon || !themeToggle) return;
|
||||
const isDark = theme === 'dark';
|
||||
// improve accessibility for screen readers
|
||||
sun.setAttribute('aria-hidden', isDark ? 'false' : 'true');
|
||||
moon.setAttribute('aria-hidden', isDark ? 'true' : 'false');
|
||||
themeToggle.setAttribute('aria-label', isDark ? 'Switch to light mode' : 'Switch to dark mode');
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user