Skip to content

Commit

Permalink
accessbiilty fixes
Browse files Browse the repository at this point in the history
  • Loading branch information
pelikhan committed Apr 24, 2023
1 parent 1210618 commit 7c4ea1b
Show file tree
Hide file tree
Showing 3 changed files with 261 additions and 53 deletions.
2 changes: 1 addition & 1 deletion jacdac-ts
171 changes: 167 additions & 4 deletions website/docusaurus.config.js
@@ -1,8 +1,171 @@
// @ts-check
// @ts-nocheck
const { configure } = require("@rise4fun/docusaurus-plugin-rise4fun")

const lightCodeTheme = require("prism-react-renderer/themes/github")
const darkCodeTheme = require("prism-react-renderer/themes/dracula")
const darkCodeTheme = require("prism-react-renderer/themes/vsDark")

const lightTheme = {
...lightCodeTheme,
styles: [
...lightCodeTheme.styles,
{
types: ['title'],
style: {
color: '#0550AE',
fontWeight: 'bold',
},
},
{
types: ['parameter'],
style: {
color: '#953800',
},
},
{
types: ['boolean', 'rule', 'color', 'number', 'constant', 'property'],
style: {
color: '#005CC5',
},
},
{
types: ['atrule', 'tag'],
style: {
color: '#22863A',
},
},
{
types: ['script'],
style: {
color: '#24292E',
},
},
{
types: ['operator', 'unit', 'rule'],
style: {
color: '#D73A49',
},
},
{
types: ['font-matter', 'string', 'attr-value'],
style: {
color: '#C6105F',
},
},
{
types: ['class-name'],
style: {
color: '#116329',
},
},
{
types: ['attr-name'],
style: {
color: '#0550AE',
},
},
{
types: ['keyword'],
style: {
color: '#CF222E',
},
},
{
types: ['function'],
style: {
color: '#8250DF',
},
},
{
types: ['selector'],
style: {
color: '#6F42C1',
},
},
{
types: ['variable'],
style: {
color: '#E36209',
},
},
{
types: ['comment'],
style: {
color: '#6B6B6B',
},
},
],
};

const darkTheme = {
plain: {
color: '#D4D4D4',
backgroundColor: '#212121',
},
styles: [
...darkCodeTheme.styles,
{
types: ['title'],
style: {
color: '#569CD6',
fontWeight: 'bold',
},
},
{
types: ['property', 'parameter'],
style: {
color: '#9CDCFE',
},
},
{
types: ['script'],
style: {
color: '#D4D4D4',
},
},
{
types: ['boolean', 'arrow', 'atrule', 'tag'],
style: {
color: '#569CD6',
},
},
{
types: ['number', 'color', 'unit'],
style: {
color: '#B5CEA8',
},
},
{
types: ['font-matter'],
style: {
color: '#CE9178',
},
},
{
types: ['keyword', 'rule'],
style: {
color: '#C586C0',
},
},
{
types: ['regex'],
style: {
color: '#D16969',
},
},
{
types: ['maybe-class-name'],
style: {
color: '#4EC9B0',
},
},
{
types: ['constant'],
style: {
color: '#4FC1FF',
},
},
],
};

const config = configure(
{
Expand Down Expand Up @@ -119,8 +282,8 @@ const config = configure(
],
},
prism: {
theme: lightCodeTheme,
darkTheme: darkCodeTheme,
theme: lightTheme,
darkTheme: darkTheme,
},
}),
},
Expand Down
141 changes: 93 additions & 48 deletions website/src/css/custom.css
Expand Up @@ -6,87 +6,132 @@

/* You can override the default Infima variables here. */
:root {
--ifm-color-primary: #005d8f;
--ifm-color-primary-dark: #005481;
--ifm-color-primary-darker: #004f7a;
--ifm-color-primary-darkest: #004164;
--ifm-color-primary-light: #00669d;
--ifm-color-primary-lighter: #006ba4;
--ifm-color-primary-lightest: #0079ba;
--ifm-color-primary: #005d8f;
--ifm-color-primary-dark: #005481;
--ifm-color-primary-darker: #004f7a;
--ifm-color-primary-darkest: #004164;
--ifm-color-primary-light: #00669d;
--ifm-color-primary-lighter: #006ba4;
--ifm-color-primary-lightest: #0079ba;
}

/* accelerometer */
.markdown a {
--ifm-link-decoration: underline;
}

/* For readability concerns, you should choose a lighter palette in dark mode. */
[data-theme='dark'] {
--ifm-color-primary: #2eb6ff;
--ifm-color-primary-dark: #10abff;
--ifm-color-primary-darker: #01a6ff;
--ifm-color-primary-darkest: #0089d3;
--ifm-color-primary-light: #4cc1ff;
--ifm-color-primary-lighter: #5bc6ff;
--ifm-color-primary-lightest: #88d6ff;
[data-theme="dark"] {
--ifm-color-primary: #2eb6ff;
--ifm-color-primary-dark: #10abff;
--ifm-color-primary-darker: #01a6ff;
--ifm-color-primary-darkest: #0089d3;
--ifm-color-primary-light: #4cc1ff;
--ifm-color-primary-lighter: #5bc6ff;
--ifm-color-primary-lightest: #88d6ff;
}

/* code styling */
:root {
--ifm-code-font-size: 95%;
--docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
--ifm-code-font-size: 95%;
--docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
}
[data-theme='dark'] {
--docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
[data-theme="dark"] {
--docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
}

/** react split pane **/
.Resizer {
background: #000;
opacity: 0.2;
z-index: 1000;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-moz-background-clip: padding;
-webkit-background-clip: padding;
background-clip: padding-box;
background: #000;
opacity: 0.2;
z-index: 1000;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-moz-background-clip: padding;
-webkit-background-clip: padding;
background-clip: padding-box;
}

.Resizer:hover {
-webkit-transition: all 2s ease;
transition: all 2s ease;
-webkit-transition: all 2s ease;
transition: all 2s ease;
}

.Resizer.vertical {
width: 17px;
margin: 0 -8px;
border-left: 8px solid rgba(255, 255, 255, 0);
border-right: 8px solid rgba(255, 255, 255, 0);
cursor: col-resize;
width: 17px;
margin: 0 -8px;
border-left: 8px solid rgba(255, 255, 255, 0);
border-right: 8px solid rgba(255, 255, 255, 0);
cursor: col-resize;
}

.Resizer.vertical:hover {
border-left: 8px solid rgba(0, 0, 0, 0.5);
border-right: 8px solid rgba(0, 0, 0, 0.5);
border-left: 8px solid rgba(0, 0, 0, 0.5);
border-right: 8px solid rgba(0, 0, 0, 0.5);
}
.Resizer.disabled {
cursor: not-allowed;
cursor: not-allowed;
}
.Resizer.disabled:hover {
border-color: transparent;
border-color: transparent;
}

.pane {
position: absolute;
overflow-y: auto;
border: 0;
width: 100%;
top: 0;
height: 100%;
position: absolute;
overflow-y: auto;
border: 0;
width: 100%;
top: 0;
height: 100%;
}
.pane.left {
left: 0px;
left: 0px;
}
.pane.right {
right: 0px;
right: 0px;
}

div.navbar__logo {
margin-right: 1.5rem;
margin-right: 1.5rem;
}

[data-theme="light"] .DocSearch {
/* --docsearch-primary-color: var(--ifm-color-primary); */
/* --docsearch-text-color: var(--ifm-font-color-base); */
--docsearch-muted-color: var(--ifm-color-emphasis-700);
--docsearch-container-background: rgb(94 100 112 / 70%);
/* Modal */
--docsearch-modal-background: var(--ifm-color-secondary-lighter);
/* Search box */
--docsearch-searchbox-background: var(--ifm-color-secondary);
--docsearch-searchbox-focus-background: var(--ifm-color-white);
/* Hit */
--docsearch-hit-color: var(--ifm-font-color-base);
--docsearch-hit-active-color: var(--ifm-color-white);
--docsearch-hit-background: var(--ifm-color-white);
/* Footer */
--docsearch-footer-background: var(--ifm-color-white);
}

[data-theme="dark"] .DocSearch {
--docsearch-text-color: var(--ifm-font-color-base);
--docsearch-muted-color: var(--ifm-color-secondary-darkest);
--docsearch-container-background: rgb(47 55 69 / 70%);
/* Modal */
--docsearch-modal-background: var(--ifm-background-color);
/* Search box */
--docsearch-searchbox-background: var(--ifm-background-color);
--docsearch-searchbox-focus-background: var(--ifm-color-black);
/* Hit */
--docsearch-hit-color: var(--ifm-font-color-base);
--docsearch-hit-active-color: var(--ifm-color-white);
--docsearch-hit-background: var(--ifm-color-emphasis-100);
/* Footer */
--docsearch-footer-background: var(--ifm-background-surface-color);
--docsearch-key-gradient: linear-gradient(
-26.5deg,
var(--ifm-color-emphasis-200) 0%,
var(--ifm-color-emphasis-100) 100%
);
}

0 comments on commit 7c4ea1b

Please sign in to comment.