Redesign website (#2628)
* Bump up Bootstrap to v5.3.1, Bootstrap Icon to v1.10.5. * Use autoComplete.js to drop dependency on jQuery and typeahead.js. * Support dark mode. * New svg logo and icon with responsive color mode support. * Normalize section ids to lower kebab-case for easiness of linking. * Use relative paths for links for local development (--root /output). * Various markup cleanups and accessibility improvements.
This commit is contained in:
itchyny authored and GitHub committed
1 parent
4af3f99728
commit
c8e28da129
26 files changed
+402
-656
No files matched your search
@@ -1,173 +0,0 @@
|
||||
body {
|
||||
padding-top: 80px;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 970px;
|
||||
}
|
||||
|
||||
/* index.liquid *******************************************/
|
||||
#blurb {
|
||||
padding-top: 40px;
|
||||
}
|
||||
#blurb p {
|
||||
font-size: 1.9em;
|
||||
}
|
||||
#blurb .btn-group {
|
||||
margin: 4px;
|
||||
}
|
||||
|
||||
#multiblurb {
|
||||
line-height: 1.7;
|
||||
text-align: center;
|
||||
font-size: 12pt;
|
||||
}
|
||||
#multiblurb code {
|
||||
border: 0;
|
||||
font-size: 12pt;
|
||||
}
|
||||
|
||||
#news {
|
||||
font-size: 12pt;
|
||||
}
|
||||
#news .date {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/* default.liquid *****************************************/
|
||||
.tutorial-example {
|
||||
position: relative;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.tutorial-example pre {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
.tutorial-example a {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
right: 0px;
|
||||
padding: 15px 8px;
|
||||
color: #777777;
|
||||
font-weight: bold;
|
||||
line-height: 10px;
|
||||
font-size: 12px;
|
||||
border-left: 1px solid #DDDDDD;
|
||||
display: block;
|
||||
}
|
||||
.tutorial-example .accordion-body pre {
|
||||
margin: 0 4px;
|
||||
border-top: 0;
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
}
|
||||
|
||||
@media print {
|
||||
.tutorial-example a {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
/* manual.liquid ******************************************/
|
||||
section {
|
||||
padding-top: 24px;
|
||||
}
|
||||
|
||||
h3 code {
|
||||
border: 0;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
@media (max-width: 991px) {
|
||||
#navcolumn {
|
||||
/* Put nav column above manual content */
|
||||
position: relative !important;
|
||||
margin-bottom: 60px;
|
||||
}
|
||||
}
|
||||
@media (min-width: 992px) {
|
||||
#manualcontent {
|
||||
/* Put nav column left of manual content */
|
||||
padding-left: 280px;
|
||||
}
|
||||
}
|
||||
.nav-pills {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.nav-pills li a {
|
||||
padding: 8px 12px;
|
||||
}
|
||||
|
||||
.manual-example table {
|
||||
border-top: 1px solid #E5E5E5;
|
||||
}
|
||||
.manual-example table td {
|
||||
white-space: pre-wrap;
|
||||
font-family: Monaco, Menlo, Consolas, "Courier New", monospace;
|
||||
}
|
||||
.manual-example table td.jqprogram {
|
||||
font-weight: bold;
|
||||
}
|
||||
.manual-example table th {
|
||||
text-align: right;
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
@media print {
|
||||
#navcolumn {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.manual-example {
|
||||
display: block !important;
|
||||
height: auto !important;
|
||||
}
|
||||
|
||||
.jqplay-btn {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
/* shared/_footer.liquid **********************************/
|
||||
footer {
|
||||
background-color: #F5F5F5;
|
||||
padding: 20px 0;
|
||||
margin-top: 40px;
|
||||
color: #999999;
|
||||
text-align: center;
|
||||
}
|
||||
footer p {
|
||||
margin: 8px 0;
|
||||
}
|
||||
|
||||
/* typeahead **********************************************/
|
||||
.twitter-typeahead {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.tt-menu {
|
||||
width: 100%;
|
||||
background-color: #fff;
|
||||
padding: 8px 0;
|
||||
border: 1px solid #ccc;
|
||||
border: 1px solid rgba(0, 0, 0, 0.2);
|
||||
-webkit-border-radius: 8px;
|
||||
-moz-border-radius: 8px;
|
||||
border-radius: 8px;
|
||||
-webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
|
||||
-moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
|
||||
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.tt-suggestion {
|
||||
padding: 3px 20px;
|
||||
}
|
||||
.tt-suggestion:hover {
|
||||
cursor: pointer;
|
||||
color: #fff;
|
||||
background-color: #446e9b;
|
||||
}
|
||||
.tt-suggestion.tt-cursor {
|
||||
color: #fff;
|
||||
background-color: #446e9b;
|
||||
}
|
||||
.tt-suggestion p {
|
||||
margin: 0;
|
||||
}
|
||||
@@ -1,181 +0,0 @@
|
||||
@charset "utf-8";
|
||||
body {
|
||||
padding-top: 80px;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 970px;
|
||||
}
|
||||
|
||||
/* index.liquid *******************************************/
|
||||
|
||||
#blurb {
|
||||
padding-top: 40px;
|
||||
p {
|
||||
font-size: 1.9em;
|
||||
}
|
||||
.btn-group {
|
||||
margin: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
#multiblurb {
|
||||
line-height: 1.7;
|
||||
text-align: center;
|
||||
font-size: 12pt;
|
||||
code {
|
||||
border: 0;
|
||||
font-size: 12pt;
|
||||
}
|
||||
}
|
||||
|
||||
#news {
|
||||
font-size: 12pt;
|
||||
.date {
|
||||
font-style: italic;
|
||||
}
|
||||
}
|
||||
|
||||
/* default.liquid *****************************************/
|
||||
|
||||
.tutorial-example {
|
||||
position: relative;
|
||||
margin-bottom: 10px;
|
||||
pre {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
a {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
right: 0px;
|
||||
padding: 15px 8px;
|
||||
color: #777777;
|
||||
font-weight: bold;
|
||||
line-height: 10px;
|
||||
font-size: 12px;
|
||||
border-left: 1px solid #DDDDDD;
|
||||
display: block;
|
||||
}
|
||||
.accordion-body pre {
|
||||
margin: 0 4px;
|
||||
border-top: 0;
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media print {
|
||||
.tutorial-example a {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* manual.liquid ******************************************/
|
||||
|
||||
section {
|
||||
padding-top: 24px;
|
||||
}
|
||||
|
||||
h3 code {
|
||||
border: 0;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
@media(max-width: 991px){
|
||||
#navcolumn {
|
||||
/* Put nav column above manual content */
|
||||
position: relative !important;
|
||||
margin-bottom: 60px;
|
||||
}
|
||||
}
|
||||
|
||||
@media(min-width: 992px) {
|
||||
#manualcontent {
|
||||
/* Put nav column left of manual content */
|
||||
padding-left: 280px;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-pills {
|
||||
li a {
|
||||
padding: 8px 12px;
|
||||
}
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.manual-example table {
|
||||
border-top: 1px solid #E5E5E5;
|
||||
td {
|
||||
white-space: pre-wrap;
|
||||
font-family: Monaco, Menlo, Consolas, "Courier New", monospace;
|
||||
}
|
||||
td.jqprogram {
|
||||
font-weight: bold;
|
||||
}
|
||||
th {
|
||||
text-align: right;
|
||||
padding-right: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
@media print {
|
||||
#navcolumn {
|
||||
display: none !important;
|
||||
}
|
||||
.manual-example {
|
||||
display: block !important;
|
||||
height: auto !important;
|
||||
}
|
||||
.jqplay-btn {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* shared/_footer.liquid **********************************/
|
||||
|
||||
footer {
|
||||
background-color: #F5F5F5;
|
||||
padding: 20px 0;
|
||||
margin-top: 40px;
|
||||
color: #999999;
|
||||
text-align: center;
|
||||
p {
|
||||
margin: 8px 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* typeahead **********************************************/
|
||||
|
||||
.twitter-typeahead {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.tt-menu {
|
||||
width: 100%;
|
||||
background-color: #fff;
|
||||
padding: 8px 0;
|
||||
border: 1px solid #ccc;
|
||||
border: 1px solid rgba(0, 0, 0, 0.2);
|
||||
-webkit-border-radius: 8px;
|
||||
-moz-border-radius: 8px;
|
||||
border-radius: 8px;
|
||||
-webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2);
|
||||
-moz-box-shadow: 0 5px 10px rgba(0,0,0,.2);
|
||||
box-shadow: 0 5px 10px rgba(0,0,0,.2);
|
||||
}
|
||||
|
||||
.tt-suggestion {
|
||||
padding: 3px 20px;
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
color: #fff;
|
||||
background-color: #446e9b;
|
||||
}
|
||||
&.tt-cursor {
|
||||
color: #fff;
|
||||
background-color: #446e9b;
|
||||
}
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,99 @@
|
||||
main {
|
||||
padding: 1rem;
|
||||
|
||||
& * {
|
||||
scroll-margin-top: 4rem;
|
||||
}
|
||||
|
||||
@media print {
|
||||
width: 100%!important;
|
||||
--bs-code-color: --bs-body-color;
|
||||
}
|
||||
}
|
||||
|
||||
header {
|
||||
z-index: 1050!important; /* higher than #contents */
|
||||
}
|
||||
|
||||
section[id] {
|
||||
display: flow-root;
|
||||
|
||||
> :first-child {
|
||||
.icon-link {
|
||||
opacity: 0;
|
||||
|
||||
&:focus {
|
||||
opacity: .8;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover .icon-link {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.offcanvas[aria-modal=true] .nav-link {
|
||||
padding: .7rem;
|
||||
}
|
||||
.offcanvas-md {
|
||||
--bs-offcanvas-width: auto;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
padding-left: 1rem;
|
||||
}
|
||||
|
||||
pre {
|
||||
margin: 0 .5rem 1rem;
|
||||
padding: .5rem 1rem;
|
||||
background-color: var(--bs-secondary-bg-subtle);
|
||||
border: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color);
|
||||
}
|
||||
|
||||
button{
|
||||
&[aria-expanded=false] .bi-chevron-down {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&[aria-expanded=true] .bi-chevron-right {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
mark {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.container-searchbox {
|
||||
position: relative;
|
||||
|
||||
& input:focus ~ kbd {
|
||||
display: none;
|
||||
}
|
||||
|
||||
& ul {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
top: 100%;
|
||||
padding: 0;
|
||||
background-color: var(--bs-body-bg);
|
||||
border: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color);
|
||||
}
|
||||
|
||||
& li {
|
||||
padding: .3em .6em;
|
||||
white-space: nowrap;
|
||||
overflow-x: hidden;
|
||||
|
||||
&[aria-selected=true] {
|
||||
background-color: var(--bs-secondary-bg);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
background-color: var(--bs-secondary-bg-subtle);
|
||||
}
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 4.8 KiB |
@@ -0,0 +1 @@
|
||||
<svg width="48" height="48" version="1.0" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg"><style>@media(prefers-color-scheme:dark){g[fill]{filter:invert(1)}}</style><g transform="matrix(.011 0 0 .011 1.94 12)"><g fill="#444"><circle cx="220" cy="1570" r="190"/><path d="m1330 312c-30 41-698 1492-710 1528s25 66 100 101c77 36 102 34 124 3s701-1477 716-1525c15-47-20-73-84-104s-116-44-146-3z"/></g><g fill="#111"><circle cx="2410" cy="200" r="190"/><path d="m1830 655c0 129 0 130 70 130h360v423c0 246-5 474-10 506-19 112-88 176-190 176-59 0-120-27-147-66-51-73-65-84-99-84-31 0-40 8-104 93-84 111-86 129-32 189 227 252 692 187 836-118 53-112 56-153 56-795v-514c0-64-30-100-100-100h-490c-149 0-150 0-150 160zM2867 1233c30 302 250 499 438 527 144 19 244 0 375-90v410c0 81 0 100 150 100 136 0 150-20 150-150v-1420c0-99-19-100-150-100s-139 15-139 82c-103-89-351-149-523-49s-342 278-301 690zm803-107c0 292-105 356-237 356-178 0-249-147-273-296-27-168 25-420 262-420 171 0 248 89 248 360z"/></g></g></svg>
|
||||
|
After Width: | Height: | Size: 1006 B |
Binary file not shown.
|
Before Width: | Height: | Size: 8.0 KiB |
@@ -0,0 +1 @@
|
||||
<svg width="400" height="220" version="1.0" viewBox="0 0 400 220" xmlns="http://www.w3.org/2000/svg"><style>@media (prefers-color-scheme:dark){g[fill]{filter:invert(1);stroke:none}}</style><g transform="scale(.1)" stroke="#fff" stroke-width="10"><g fill="#444"><circle cx="220" cy="1570" r="190"/><path d="m1330 312c-30 41-698 1492-710 1528s25 66 100 101c77 36 102 34 124 3s701-1477 716-1525c15-47-20-73-84-104s-116-44-146-3z"/></g><g fill="#111"><circle cx="2410" cy="200" r="190"/><path d="m1830 655c0 129 0 130 70 130h360v423c0 246-5 474-10 506-19 112-88 176-190 176-59 0-120-27-147-66-51-73-65-84-99-84-31 0-40 8-104 93-84 111-86 129-32 189 227 252 692 187 836-118 53-112 56-153 56-795v-514c0-64-30-100-100-100h-490c-149 0-150 0-150 160zM2867 1233c30 302 250 499 438 527 144 19 244 0 375-90v410c0 81 0 100 150 100 136 0 150-20 150-150v-1420c0-99-19-100-150-100s-139 15-139 82c-103-89-351-149-523-49s-342 278-301 690zm803-107c0 292-105 356-237 356-178 0-249-147-273-296-27-168 25-420 262-420 171 0 248 89 248 360z"/></g></g></svg>
|
||||
|
After Width: | Height: | Size: 1.0 KiB |
@@ -1,52 +1,34 @@
|
||||
var section_names = function(q) {
|
||||
if (!q) {
|
||||
return [];
|
||||
}
|
||||
var matches = [];
|
||||
q = q.toLowerCase();
|
||||
$.each(section_map, function(k, v) {
|
||||
if (k.toLowerCase().indexOf(q) != -1) {
|
||||
matches.push(k);
|
||||
(() => {
|
||||
const searchInput = document.querySelector('input#searchbox');
|
||||
const sectionIDs = JSON.parse(document.querySelector('#section-ids').innerText);
|
||||
const sanitize = (string) => string.replaceAll('<', '<').replaceAll('>', '>');
|
||||
new autoComplete({
|
||||
selector: `#${searchInput.id}`,
|
||||
wrapper: false,
|
||||
data: {
|
||||
src: Object.keys(sectionIDs),
|
||||
filter: (list) => list.sort((x, y) =>
|
||||
x.match.indexOf('<') - y.match.indexOf('<') || x.value.length - y.value.length),
|
||||
},
|
||||
searchEngine: (query, value) => {
|
||||
const index = value.toLowerCase().indexOf(query.toLowerCase());
|
||||
if (index >= 0) {
|
||||
return sanitize(value.substring(0, index)) +
|
||||
`<mark>${sanitize(value.substring(index, index + query.length))}</mark>` +
|
||||
sanitize(value.substring(index + query.length));
|
||||
}
|
||||
},
|
||||
});
|
||||
searchInput.addEventListener('selection', (event) => {
|
||||
event.target.value = event.detail.selection.value;
|
||||
location.hash = `#${sectionIDs[event.detail.selection.value]}`;
|
||||
});
|
||||
document.addEventListener('keydown', (event) => {
|
||||
if (event.code === 'Slash' && !event.altKey && !event.ctrlKey && !event.metaKey
|
||||
&& !event.shiftKey && !/^(INPUT|TEXTAREA)$/.test(event.target.nodeName)) {
|
||||
searchInput.focus();
|
||||
searchInput.select();
|
||||
event.preventDefault();
|
||||
}
|
||||
});
|
||||
matches.sort(function(a, b) {
|
||||
// shortest to longest
|
||||
return a.length - b.length;
|
||||
});
|
||||
return matches;
|
||||
}
|
||||
var section_names_cb = function(q, cb) {
|
||||
cb(section_names(q));
|
||||
}
|
||||
var go_to_section = function() {
|
||||
query = $('#searchbox').val();
|
||||
results = section_names(query);
|
||||
if (results.length == 0) {
|
||||
return;
|
||||
}
|
||||
result = results[0];
|
||||
location.hash = '#' + section_map[result];
|
||||
if (result != query) {
|
||||
$('#searchbox').val(result);
|
||||
}
|
||||
}
|
||||
$(function(){
|
||||
$('#searchbox').typeahead(
|
||||
{hint: false, highlight: true, minLength: 1},
|
||||
{name: "contents", source: section_names_cb, limit: 6}
|
||||
).on('typeahead:selected', function(e, data) {
|
||||
go_to_section();
|
||||
});
|
||||
$('#searchbox').change(go_to_section);
|
||||
});
|
||||
// add "Run" button to execute examples on jqplay.org
|
||||
$(function() {
|
||||
$.each($('.manual-example table'), function(index, value) {
|
||||
$value = $(value)
|
||||
var j = $value.find('tr:nth-child(2) td:first').text();
|
||||
var q = $value.find('.jqprogram').text().replace(/^jq /, '').replace(/(\r\n|\n|\r)/gm," ").replace(/^'(.+)'$/, '$1');
|
||||
var url = 'https://jqplay.org/jq?q=' + encodeURIComponent(q) +'&j=' + encodeURIComponent(j)
|
||||
var $last_tr = $value.find('tr:last');
|
||||
$last_tr.after('<tr class="jqplay-btn"><th><a href="' + url + '" class="btn btn-primary btn-sm">Run</a></th><th></th></tr><tr><th></th><th></th></tr>');
|
||||
});
|
||||
});
|
||||
})();
|
||||
Reference in new issue
Block a user