Skip to content

GitLab

Commit 9cdfa84d authored by Clark's avatar Clark
Browse files

New site design, overhauled CSS and JS. jQuery and Bootstrap

parent 46ec1b0a
Expand all Hide whitespace changes
Inline Side-by-side
site/3rdParty.css 0 → 100644
View file @ 9cdfa84d
This diff is collapsed.
site/3rdParty.js 0 → 100644
View file @ 9cdfa84d
This diff is collapsed.
site/copy-to-clipboard.js deleted 100644 → 0
View file @ 46ec1b0a
function copyTextToClipboard(text) {
var textArea = document.createElement("textarea");
//
// *** This styling is an extra step which is likely not required. ***
//
// Why is it here? To ensure:
// 1. the element is able to have focus and selection.
// 2. if element was to flash render it has minimal visual impact.
// 3. less flakyness with selection and copying which **might** occur if
// the textarea element is not visible.
//
// The likelihood is the element won't even render, not even a
// flash, so some of these are just precautions. However in
// Internet Explorer the element is visible whilst the popup
// box asking the user for permission for the web page to
// copy to the clipboard.
//
// Place in top-left corner of screen regardless of scroll position.
textArea.style.position = 'fixed';
textArea.style.top = 0;
textArea.style.left = 0;
// Ensure it has a small width and height. Setting to 1px / 1em
// doesn't work as this gives a negative w/h on some browsers.
textArea.style.width = '2em';
textArea.style.height = '2em';
// We don't need padding, reducing the size if it does flash render.
textArea.style.padding = 0;
// Clean up any borders.
textArea.style.border = 'none';
textArea.style.outline = 'none';
textArea.style.boxShadow = 'none';
// Avoid flash of white box if rendered for any reason.
textArea.style.background = 'transparent';
textArea.value = text;
document.body.appendChild(textArea);
textArea.focus();
textArea.select();
try {
var successful = document.execCommand('copy');
var msg = successful ? 'successful' : 'unsuccessful';
console.log('Copying text command was ' + msg);
} catch (err) {
console.log('Oops, unable to copy');
}
document.body.removeChild(textArea);
}
site/htmlize.css deleted 100644 → 0
View file @ 46ec1b0a
@charset "utf-8";
body {
font-family: Arial, sans-serif;
margin-top: 2rem;
margin-bottom: 3rem;
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
dl {
border: solid thin silver;
padding: 0.5rem;
}
dt {
border-top: solid thin silver;
}
dd {
margin-bottom: 1rem;
line-height: 1.5;
}
li {
margin-bottom: .7rem;
line-height: 1.5;
}
p {
line-height: 1.5;
}
img {
max-width: 100%;
height: auto;
margin: 1px
}
audio {
width: 100%;
}
video {
max-width: 100%;
max-height: 95vh;
}
figure {
margin: .5rem
}
/*
blockquote {
color: navy;
}
*/
section {
border: solid thin silver;
padding: .3rem;
margin: .3rem;
border-radius: 1rem;
}
cite {
color: red;
}
caption {
background-color: lightgrey;
border: solid thin black
}
footer {
text-align: center
}
span.xsignet {
font-family: "Times New Roman", serif;
font-size: 3rem;
color: red
}
footer>div.cpr {
font-size: 80%
}
figure>img,
figure>div {
box-shadow: 3px 3px 4px 3px silver
}
kbd {
font-family: Arial, sans-serif;
font-size: 1rem;
padding: 0 .25rem 0 .25rem;
border: solid 1px grey;
border-radius: 4px;
background-color: #f0f0f0;
box-shadow: 2px 2px 2px 2px silver;
}
a:visited,
a:link {
text-decoration: none
}
a:hover {
background-color: pink
}
/*
nav.page {
display: table;
font-size: 1.5rem;
word-spacing: .3rem;
margin:.5rem;
padding: .5rem;
background-color: yellow;
border-radius: 1rem;
border: thin solid #b42222
}
nav.page:before {
content: "Goto Page "
}
nav.page a {
text-decoration: underline;
padding: .2rem;
margin: .2rem;
outline: solid thin grey;
}
*/
div.date-xl {
background-color: silver;
display: table;
margin: 0.5rem;
}
div.topic_xl {
display: table;
margin: .5rem;
padding: .2rem;
max-width: 20rem;
border-radius: 1rem;
border: solid thin silver;
}
div.topic_xl>h4 {
margin: 0.5rem
}
div.rltd {
display: table;
margin: .5rem;
padding: .5rem;
border-radius: .5rem;
border: solid thin grey;
}
div.rltd>ul {
margin: 0
}
div.rltd:before {
content: "See also ";
position: relative;
top: -0.2rem;
left: 0;
}
table.nrm {
border-collapse: collapse;
margin: 1rem;
}
table.nrm th,
table.nrm td {
padding: .25rem;
border: solid thin grey;
line-height: 1.5;
}
table.nrm th {
background-color: silver
}
section.qna_xl {
border: solid thin grey;
}
section.qna_xl h3.q {
margin: .5rem
}
mark.b {
background-color: hsl(190, 60%, 78%)
}
mark.unicode {
font-size: 2rem;
background-color: transparent;
font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji";
}
div>a {
display: inline-block
}
code {
font-family: "Courier", monospace;
white-space: pre-wrap;
color: red;
}
var {
font-family: "Courier", monospace;
}
code.path_xl {
white-space: nowrap;
color: green;
}
code.elisp_f_3d841 {
white-space: nowrap;
font-weight: bold;
color: #b22222;
background-color: transparent;
}
var.elisp {
white-space: nowrap;
font-weight: bold;
color: #a0522d;
}
var.d {
color: teal;
}
.elisp-prefix-command,
.elisp-command,
.elisp-macro,
.elisp-special-form,
.elisp-function {
white-space: nowrap;
font-weight: bold;
color: #b22222;
background-color: transparent;
}
.elisp-constant,
.elisp-user-option,
.elisp-variable {
white-space: nowrap;
font-weight: bold;
color: #a0522d;
}
span.ref {
background-color: #e8ffff;
}
span.ref:before {
content: "REF ";
font-weight: bold;
}
pre {
font-family: "Courier", monospace;
tab-size: 2;
padding: .5rem;
margin: .5rem;
white-space: pre-wrap;
border: solid thin grey;
border-radius: 1rem;
background-color: #eeeeee;
}
pre:before {
content: "";
position: relative;
top: -0.5rem;
right: 0;
float: right;
color: black;
text-shadow: .1rem .1rem .1rem white;
}
pre .bold {
font-weight: bold
}
pre .builtin {
color: #483d8b
}
pre .comment {
color: #b22222
}
pre .comment-delimiter {
color: #b22222
}
pre .constant {
color: #008b8b
}
pre .doc {
color: #8b2252
}
pre .function-name {
color: #0000ff
}
pre .keyword {
color: #a020f0
}
pre .preprocessor {
color: hsl(314, 19%, 30%)
}
pre .string {
color: #8b2252
}
pre .type {
color: #228b22
}
pre .underline {
text-decoration: underline
}
pre .variable-name {
color: #a0522d
}
pre .warning {
color: #ff0000;
font-weight: bold
}
span.css-property {
color: #a0522d
}
span.css-selector {
color: #0000ff
}
pre.src:before {
display: hover;
margin-top: 12px;
border: none;
font-style: oblique;
font-weight: bold;
color: #9b59b6;
background: #F0F8FF;
}
.copyBtn {
text-align: center;
position: relative;
color: #9b59b6;
font-style: oblique;
background: transparent;
padding: 0;
float: right;
}
pre.src-python:before {
content: "Python3"
}
pre.src-sh:before {
content: "Bash"
}
pre.src {background-color: #F0F8FF;}
pre span.org-builtin {color:#006FE0;font-weight:bold;}
pre span.org-string {color:#008000;}
pre span.org-keyword {color:#0000FF;}
pre span.org-variable-name {color:#BA36A5;}
pre span.org-function-name {color:#006699;}
pre span.org-type {color:#6434A3;}
pre span.org-preprocessor {color:#808080;font-weight:bold;}
pre span.org-constant {color:#D0372D;}
pre span.org-comment-delimiter {color:#8D8D84;}
pre span.org-comment {color:#8D8D84;font-style:italic}
pre span.org-outshine-level-1 {color:#8D8D84;font-style:italic}
pre span.org-outshine-level-2 {color:#8D8D84;font-style:italic}
pre span.org-outshine-level-3 {color:#8D8D84;font-style:italic}
pre span.org-outshine-level-4 {color:#8D8D84;font-style:italic}
pre span.org-outshine-level-5 {color:#8D8D84;font-style:italic}
pre span.org-outshine-level-6 {color:#8D8D84;font-style:italic}
pre span.org-outshine-level-7 {color:#8D8D84;font-style:italic}
pre span.org-outshine-level-8 {color:#8D8D84;font-style:italic}
pre span.org-outshine-level-9 {color:#8D8D84;font-style:italic}
pre span.org-rainbow-delimiters-depth-1 {color:#707183;}
pre span.org-rainbow-delimiters-depth-2 {color:#7388d6;}
pre span.org-rainbow-delimiters-depth-3 {color:#909183;}
pre span.org-rainbow-delimiters-depth-4 {color:#709870;}
pre span.org-rainbow-delimiters-depth-5 {color:#907373;}
pre span.org-rainbow-delimiters-depth-6 {color:#6276ba;}
pre span.org-rainbow-delimiters-depth-7 {color:#858580;}
pre span.org-rainbow-delimiters-depth-8 {color:#80a880;}
pre span.org-rainbow-delimiters-depth-9 {color:#887070;}
pre span.org-sh-quoted-exec {color:#FF1493;}
site/site.css
View file @ 9cdfa84d
This diff is collapsed.
site/site.js 0 → 100644
View file @ 9cdfa84d
//Theme toggling
function lightToggle() {
var element = document.body;
element.classList.add('light');
$('.light-button-small')[0].classList.add('d-none');
$('.dark-button-small')[0].classList.remove('d-none');
localStorage.setItem('theme', 'light');
}
//Theme toggling
function darkToggle() {
var element = document.body;
element.classList.remove('light');
$('.dark-button-small')[0].classList.add('d-none');
$('.light-button-small')[0].classList.remove('d-none');
localStorage.setItem('theme', 'dark');
}
//Sidebar toggling
$(document).ready(function() {
$('#leftSidebarCollapse').on('click', function() {
$('#contentWrapper').toggleClass('left-adjust');
if ($('#contentWrapper')[0].classList.contains('left-adjust')) {
$('#left-sidebar')[0].classList.add('left-adjust');
$('#left-sidebar')[0].classList.remove('active');
$('#homeSubmenu')[0].classList.add('d-none');
$('#contactSubmenu')[0].classList.add('d-none');
$('#theme-box')[0].classList.add('d-none');
$('#security-box-small')[0].classList.add('d-none');
$('#bulletin-box-small')[0].classList.add('d-none');
$('#security-box')[0].classList.remove('d-none');
$('#bulletin-box')[0].classList.remove('d-none');
} else {
$('#left-sidebar')[0].classList.remove('left-adjust');
$('#left-sidebar')[0].classList.add('active');
$('#homeSubmenu')[0].classList.remove('d-none');
$('#contactSubmenu')[0].classList.remove('d-none');
$('#contact-box')[0].classList.remove('d-none');
$('#security-box')[0].classList.add('d-none');
$('#bulletin-box')[0].classList.add('d-none');
$('#theme-box')[0].classList.remove('d-none');
$('#security-box-small')[0].classList.remove('d-none');
$('#bulletin-box-small')[0].classList.remove('d-none');
}
});
$('#rightSidebarCollapse').on('click', function() {
$('#contentWrapper').toggleClass('right-adjust');
if($('#contentWrapper')[0].classList.contains('right-adjust')) {
$('#right-sidebar')[0].classList.add('active');
$('#right-sidebar')[0].classList.add('right-adjust');
$('#right-sidebar')[0].classList.remove('d-none');
$('.overlay')[0].classList.add('active');
} else {
$('#right-sidebar')[0].classList.remove('active');
$('#right-sidebar')[0].classList.remove('right-adjust');
$('#right-sidebar')[0].classList.add('d-none');
$('.overlay')[0].classList.remove('active');
}
});
});
// Control default panels on smaller screens
$(window).ready(function() {
var win = $(this);
if (win.width() < 991) {
$('#left-sidebar').addClass('left-adjust');
$('#left-sidebar').removeClass('active');
$('#right-sidebar').addClass('d-none');
$('#right-sidebar').removeClass('active');
$('#right-sidebar').removeClass('right-adjust');
$('#contentWrapper').addClass('left-adjust');
$('#contentWrapper').removeClass('right-adjust');
$('#theme-box')[0].classList.remove('d-none');
$('#security-box')[0].classList.add('d-none');
$('#bulletin-box')[0].classList.add('d-none');
$('#security-box-small')[0].classList.remove('d-none');
$('#bulletin-box-small')[0].classList.remove('d-none');
}
});
//Go to Top Button
var topbutton = document.getElementById('topBtn');
// When the user scrolls down 20px from the top of the document, show the button
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
topbutton.style.display = 'block';
} else {
topbutton.style.display = 'none';
}
}
// When the user clicks on the button, scroll to the top of the document
function topFunction() {
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
}
//Tocify options, see: http://gregfranko.com/jquery.tocify.js/
$(function() {
var toc = $('#toc').tocify({ context: 'body',
selectors: 'h2, h3, h4, h5',
showAndHide: true,
showEffect: 'slideDown',
showEffectSpeed: 'medium',
hideEffect: 'slideUp',
hideEffectSpeed: 'fast',
smoothScroll: true,
smoothScrollSpeed: 'medium',
scrollTo: 0,
showAndHideOnScroll: true,
highlightOnScroll: true,
highlightOffset: 40,
theme: 'none',
extendPage: false,