kidwellj/jeremykidwell.info
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

first commit

Browse source
This commit is contained in:
Jeremy Kidwell 2017-06-26 20:57:02 +01:00
commit 13e2fd6e74
125 changed files with 19943 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

249
static/css/bigfoot-default.css Executable file
View file

@ -0,0 +1,249 @@
.bigfoot-footnote__button {
position: relative;
z-index: 5;
top: -0.1em;
box-sizing: border-box;
-moz-box-sizing: border-box;
display: inline-block;
padding: 0.35em;
margin: 0 0.1em 0 0.2em;
border: none;
border-radius: 0.3em;
cursor: pointer;
background-color: rgba(110, 110, 110, 0.2);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
font-size: 1rem;
line-height: 0;
vertical-align: middle;
text-decoration: none;
-webkit-font-smoothing: antialiased;
-webkit-transition-property: background-color;
transition-property: background-color;
-webkit-transition-duration: 0.25s;
transition-duration: 0.25s;
}
.bigfoot-footnote__button:hover, .bigfoot-footnote__button:focus {
outline: none;
background-color: rgba(110, 110, 110, 0.5);
}
.bigfoot-footnote__button:active {
background-color: rgba(110, 110, 110, 0.5);
}
.bigfoot-footnote__button.is-active {
background-color: #6e6e6e;
-webkit-transition-delay: 0.1s;
transition-delay: 0.1s;
}
.bigfoot-footnote__button:after {
content: '';
display: table;
clear: both;
}
.bigfoot-footnote__button__circle {
display: inline-block;
width: 0.25em;
height: 0.25em;
margin-right: 0.25em;
float: left;
}
.bigfoot-footnote__button__circle:last-child {
margin-right: 0;
}
.bigfoot-footnote__container {
display: inline-block;
position: relative;
text-indent: 0;
}
@media not print {
.footnote-print-only {
display: none !important;
}
}
@media print {
.bigfoot-footnote,
.bigfoot-footnote__button {
display: none !important;
}
}
.bigfoot-footnote {
position: absolute;
z-index: 10;
top: 0;
left: 0;
display: inline-block;
box-sizing: border-box;
max-width: 90%;
margin: 1.96924em 0;
background: #fafafa;
opacity: 0;
border-radius: 0.5em;
border: 1px solid #c3c3c3;
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
line-height: 0;
-webkit-transition-property: opacity, -webkit-transform;
transition-property: opacity, transform;
-webkit-transition-duration: 0.25s;
transition-duration: 0.25s;
-webkit-transition-timing-function: ease;
transition-timing-function: ease;
-webkit-transform: scale(0.1) translateZ(0);
transform: scale(0.1) translateZ(0);
-webkit-transform-origin: 50% 0;
-ms-transform-origin: 50% 0;
transform-origin: 50% 0;
}
.bigfoot-footnote.is-positioned-top {
top: auto;
bottom: 0;
}
.bigfoot-footnote.is-active {
-webkit-transform: scale(1) translateZ(0);
transform: scale(1) translateZ(0);
opacity: 0.97;
}
.bigfoot-footnote.is-bottom-fixed {
position: fixed;
bottom: 0;
top: auto;
left: 0;
right: auto;
-webkit-transform: translateY(100%);
-ms-transform: translateY(100%);
transform: translateY(100%);
width: 100%;
margin: 0;
border-radius: 0;
opacity: 1;
border-width: 1px 0 0;
-webkit-transition: -webkit-transform 0.3s ease;
transition: transform 0.3s ease;
}
.bigfoot-footnote.is-bottom-fixed.is-active {
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
.bigfoot-footnote.is-bottom-fixed .bigfoot-footnote__wrapper {
margin: 0 0 0 50%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
max-width: 100%;
}
.bigfoot-footnote.is-bottom-fixed .bigfoot-footnote__wrapper,
.bigfoot-footnote.is-bottom-fixed .bigfoot-footnote__content {
border-radius: 0;
}
.bigfoot-footnote.is-bottom-fixed .bigfoot-footnote__tooltip {
display: none;
}
.bigfoot-footnote.is-scrollable:after {
content: '';
position: absolute;
bottom: 0.3375em;
left: 0.3375em;
z-index: 14;
display: block;
height: 0.78125em;
width: 0.625em;
background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTJweCIgaGVpZ2h0PSIxNXB4IiB2aWV3Qm94PSIwIDAgMTIgMTUiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pbllNaW4iPgogICAgPGcgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPGcgaWQ9IkFycm93IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxLjAwMDAwMCwgMS4wMDAwMDApIiBzdHJva2U9ImJsYWNrIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJzcXVhcmUiPgogICAgICAgICAgICA8cGF0aCBkPSJNNSwwIEw1LDExLjUiIGlkPSJMaW5lIj48L3BhdGg+CiAgICAgICAgICAgIDxwYXRoIGQ9Ik0wLjUsNy41IEw1LjAyNzY5Mjc5LDEyLjAyNzY5MjgiIGlkPSJMaW5lIj48L3BhdGg+CiAgICAgICAgICAgIDxwYXRoIGQ9Ik00LjUsNy41IEw5LjAyNzY5Mjc5LDEyLjAyNzY5MjgiIGlkPSJMaW5lLTIiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDcuMDAwMDAwLCAxMC4wMDAwMDApIHNjYWxlKC0xLCAxKSB0cmFuc2xhdGUoLTcuMDAwMDAwLCAtMTAuMDAwMDAwKSAiPjwvcGF0aD4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPgo=");
background-size: cover;
opacity: 0.1;
transition-properties: opacity;
-webkit-transition-duration: 0.25s;
transition-duration: 0.25s;
-webkit-transition-timing-function: ease;
transition-timing-function: ease;
}
.bigfoot-footnote.is-scrollable .bigfoot-footnote__wrapper:before, .bigfoot-footnote.is-scrollable .bigfoot-footnote__wrapper:after {
content: '';
position: absolute;
width: 100%;
z-index: 12;
left: 0;
}
.bigfoot-footnote.is-scrollable .bigfoot-footnote__wrapper:before {
top: -1px;
height: 1.1em;
border-radius: 0.5em 0.5em 0 0;
background-image: -webkit-linear-gradient(top, #fafafa 50%, rgba(250, 250, 250, 0) 100%);
background-image: linear-gradient(to bottom, #fafafa 50%, rgba(250, 250, 250, 0) 100%);
}
.bigfoot-footnote.is-scrollable .bigfoot-footnote__wrapper:after {
bottom: -1px;
height: 1.2em;
border-radius: 0 0 0.5em 0.5em;
background-image: -webkit-linear-gradient(bottom, #fafafa 50%, rgba(250, 250, 250, 0) 100%);
background-image: linear-gradient(to top, #fafafa 50%, rgba(250, 250, 250, 0) 100%);
}
.bigfoot-footnote.is-scrollable ::-webkit-scrollbar {
display: none;
}
.bigfoot-footnote.is-fully-scrolled:after, .bigfoot-footnote.is-fully-scrolled:before {
opacity: 0;
-webkit-transition-delay: 0;
transition-delay: 0;
}
.bigfoot-footnote__wrapper {
position: relative;
z-index: 14;
width: 22em;
display: inline-block;
box-sizing: inherit;
overflow: hidden;
margin: 0;
background-color: #fafafa;
border-radius: 0.5em;
line-height: 0;
}
.bigfoot-footnote__content {
position: relative;
z-index: 8;
display: inline-block;
max-height: 15em;
padding: 1.1em 1.3em 1.2em;
box-sizing: inherit;
overflow: auto;
-webkit-overflow-scrolling: touch;
background: #fafafa;
border-radius: 0.5em;
-webkit-font-smoothing: subpixel-antialiased;
line-height: normal;
}
.bigfoot-footnote__content img {
max-width: 100%;
}
.bigfoot-footnote__content *:last-child {
margin-bottom: 0 !important;
}
.bigfoot-footnote__content *:first-child {
margin-top: 0 !important;
}
.bigfoot-footnote__tooltip {
position: absolute;
z-index: 12;
box-sizing: border-box;
margin-left: -0.65em;
width: 1.3em;
height: 1.3em;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
background: #fafafa;
border: 1px solid #c3c3c3;
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
border-top-left-radius: 0;
}
.is-positioned-bottom .bigfoot-footnote__tooltip {
top: -0.65em;
}
.is-positioned-top .bigfoot-footnote__tooltip {
bottom: -0.65em;
}

619
static/css/bigfoot-default.scss Executable file
View file

@ -0,0 +1,619 @@
// bigfoot - v2.1.1 - 2015.04.04
// ___ ___ ___ ___ ___ ___
// / /\ / /\ / /\ / /\ ___ / /\ / /\
// / /::\ / /::\ / /::\ / /::\ /__/\ / /:/_ / /::\
// / /:/\:\ / /:/\:\ / /:/\:\ / /:/\:\ \ \:\ / /:/ /\ / /:/\:\
// / /:/~/:// /:/ \:\ / /:/~/:// /:/ \:\ \ \:\ / /:/ /:/_ / /:/~/:/
// /__/:/ /://__/:/ \__\:\/__/:/ /://__/:/ \__\:\ ___ \__\:\/__/:/ /:/ /\/__/:/ /:/___
// \ \:\/:/ \ \:\ / /:/\ \:\/:/ \ \:\ / /://__/\ | |:|\ \:\/:/ /:/\ \:\/:::::/
// \ \::/ \ \:\ /:/ \ \::/ \ \:\ /:/ \ \:\| |:| \ \::/ /:/ \ \::/~~~~
// \ \:\ \ \:\/:/ \ \:\ \ \:\/:/ \ \:\__|:| \ \:\/:/ \ \:\
// \ \:\ \ \::/ \ \:\ \ \::/ \__\::::/ \ \::/ \ \:\
// \__\/ \__\/ \__\/ \__\/ ~~~~ \__\/ \__\/
//
// These are the key variables for styling the popover.
// Just set the variable to none if you don't want that styling.
// KEY VARIABLES
// =============================================================================
// STYLES
$popover-width: 22em !default; // Ideal width of the popover
$popover-max-width: 90% !default; // Best as a % to accommodate smaller viewports
$popover-max-height: 15em !default; // Maximum size of the content area
$popover-color-background: rgb(250, 250, 250) !default; // Color of the popover background
$popover-border-radius: 0.5em !default; // Radius of the corners of the popover
$popover-border: 1px solid rgb(195, 195, 195) !default; // Border of the popover/ tooltip
$popover-inactive-opacity: 0 !default; // Opacity of the popover when instantiated/ deactivating
$popover-active-opacity: 0.97 !default; // Opacity of the popover when active
$popover-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3) !default; // Sets the box shadow under the popover/ tooltip
$popover-bottom-position: auto !default; // Sets the bottom position of the popover. Use only when setting positionPopover to false in the script
$popover-left-position: auto !default; // Sets the left position of the popover. Use only when setting positionPopover to false in the script
$popover-tooltip-size: 1.3em !default; // Sets the side lengths of the tooltip
$popover-scroll-indicator-width: 0.625em !default; // The width of the scroll indicator
$popover-scroll-indicator-aspect-ratio: (15/12) !default; // The ratio of the height over the width of the scroll indicator
$popover-scroll-indicator-opacity: 0.1 !default; // The active opacity of scroll indicators
$popover-initial-transform-state: scale(0.1) translateZ(0) !default; // The inital transform state for the popover
$popover-active-transform-state: scale(1) translateZ(0) !default; // The transform state for the popover once it is fully activated
// OPTIONAL ELEMENTS
$popover-include-tooltip: true !default; // Adds a tooltip pointing to the footnote button
$popover-include-scroll-indicator: true !default; // Adds an elipsis at the bottom of scrollable popovers
$popover-include-scrolly-fades: true !default; // Fades content in on scrollable popovers
$popover-scroll-indicator-icon: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTJweCIgaGVpZ2h0PSIxNXB4IiB2aWV3Qm94PSIwIDAgMTIgMTUiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pbllNaW4iPgogICAgPGcgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPGcgaWQ9IkFycm93IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxLjAwMDAwMCwgMS4wMDAwMDApIiBzdHJva2U9ImJsYWNrIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJzcXVhcmUiPgogICAgICAgICAgICA8cGF0aCBkPSJNNSwwIEw1LDExLjUiIGlkPSJMaW5lIj48L3BhdGg+CiAgICAgICAgICAgIDxwYXRoIGQ9Ik0wLjUsNy41IEw1LjAyNzY5Mjc5LDEyLjAyNzY5MjgiIGlkPSJMaW5lIj48L3BhdGg+CiAgICAgICAgICAgIDxwYXRoIGQ9Ik00LjUsNy41IEw5LjAyNzY5Mjc5LDEyLjAyNzY5MjgiIGlkPSJMaW5lLTIiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDcuMDAwMDAwLCAxMC4wMDAwMDApIHNjYWxlKC0xLCAxKSB0cmFuc2xhdGUoLTcuMDAwMDAwLCAtMTAuMDAwMDAwKSAiPjwvcGF0aD4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPgo=") !default;
// OTHER VARIABLES
// =============================================================================
// POPOVER
$popover-margin-top: 0.1em !default;
$popover-padding-content-horizontal: 1.3em !default;
$popover-padding-content-top: 1.1em !default;
$popover-padding-content-bottom: 1.2em !default;
$popover-z-index: 10 !default; // Set the base so that it's above the other body children
$popover-initial-transform-origin: 50% 0 !default;
// POPOVER CONTENT WRAPPER
$popover-content-color-background: $popover-color-background !default;
$popover-content-border-radius: $popover-border-radius !default;
// OTHER POPOVER ELEMENTS
$popover-tooltip-background: $popover-color-background !default;
$popover-tooltip-radius: 0 !default;
$popover-scroll-indicator-bottom-position: 0.45em !default;
$popover-scrolly-fade-gradient-start-location: 50% !default;
$popover-scroll-indicator-padding: (($popover-padding-content-horizontal/2) - ($popover-scroll-indicator-width/2)) !default;
// TRANSITIONS
$popover-transition-default-duration: 0.25s !default;
$popover-scroll-indicator-transition-properties: opacity !default;
// Use none for areas you don't want to transition
$popover-transition-properties: opacity, transform !default; // no mixin to do proper prefixing of the transform, so I have to do it manually; see mixin below
$popover-scroll-indicator-transition-properties: opacity !default;
$popover-scroll-up-transition-delay: 0.4s !default; // Sets the delay for the transition of the scroll indicator when scrolling upwards
$popover-transition-default-timing-function: ease !default;
// ___ ___ ___
// _____ /__/\ ___ ___ / /\ /__/\
// / /::\ \ \:\ / /\ / /\ / /::\ \ \:\
// / /:/\:\ \ \:\ / /:/ / /:/ / /:/\:\ \ \:\
// / /:/~/::\ ___ \ \:\ / /:/ / /:/ / /:/ \:\ _____\__\:\
// /__/:/ /:/\:|/__/\ \__\:\ / /::\ / /::\ /__/:/ \__\:\/__/::::::::\
// \ \:\/:/~/:/\ \:\ / /://__/:/\:\ /__/:/\:\\ \:\ / /:/\ \:\~~\~~\/
// \ \::/ /:/ \ \:\ /:/ \__\/ \:\\__\/ \:\\ \:\ /:/ \ \:\ ~~~
// \ \:\/:/ \ \:\/:/ \ \:\ \ \:\\ \:\/:/ \ \:\
// \ \::/ \ \::/ \__\/ \__\/ \ \::/ \ \:\
// \__\/ \__\/ \__\/ \__\/
//
// These are the key variables for styling the button.
// Just set the variable to none if you don't want that styling.
// KEY VARIABLES
// =============================================================================
$button-height: 0.95em !default; // The total height of the button
$button-width: auto !default; // The total button width (applies only if $button-apply-dimensions is true)
$button-inner-circle-size: 0.25em !default; // Total height/width of the ellipsis circles
$button-border-radius: 0.3em !default; // Border radius on the button itself
$button-left-margin: 0.2em !default; // Margin between the button and the text to its left
$button-right-margin: 0.1em !default; // Margin between the button and the text to its right
$button-vertical-adjust: -0.1em !default; // Pushes the buttons along the vertical axis to align it with text as desired
$button-inner-circle-left-margin: 1*$button-inner-circle-size !default; // Space between the ellipsis circles
$button-color: rgb(110, 110, 110) !default; // Background color of the button
$button-hovered-color: $button-color !default; // Background color of the button when being hovered
$button-activating-color: $button-color !default; // Background color of the button when being clicked
$button-active-color: $button-color !default; // Background color of the button when active
$button-standard-opacity: 0.2 !default; // Opacity for when the button is just sittin' there
$button-hovered-opacity: 0.5 !default; // Opacity for when the button is being hovered over
$button-activating-opacity: $button-hovered-opacity !default; // Opacity for when the button is being clicked
$button-active-opacity: 1 !default; // Opacity for when the button is active
$button-active-style-delay: 0.1s !default; // Delay before applying .active styles; this can be used to match to the popover activation transition
$button-inner-circle-color: white !default; // Background color of the ellipsis circle
$button-inner-circle-border: none !default; // Border of the ellipsis circle
// OTHER VARIABLES
// =============================================================================
$button-total-padding: $button-height - $button-inner-circle-size !default;
$button-per-side-padding: 0.5*$button-total-padding !default;
$button-transition-properties: background-color !default;
// -----
// ___ ___ ___ ___
// /__/\ ___ /__/| ___ /__/\ / /\
// | |::\ / /\ | |:| / /\ \ \:\ / /:/_
// | |:|:\ / /:/ | |:| / /:/ \ \:\ / /:/ /\
// __|__|:|\:\ /__/::\ __|__|:| /__/::\ _____\__\:\ / /:/ /::\
// /__/::::| \:\\__\/\:\__/__/::::\____\__\/\:\__ /__/::::::::\/__/:/ /:/\:\
// \ \:\~~\__\/ \ \:\/\ ~\~~\::::/ \ \:\/\\ \:\~~\~~\/\ \:\/:/~/:/
// \ \:\ \__\::/ |~~|:|~~ \__\::/ \ \:\ ~~~ \ \::/ /:/
// \ \:\ /__/:/ | |:| /__/:/ \ \:\ \__\/ /:/
// \ \:\ \__\/ | |:| \__\/ \ \:\ /__/:/
// \__\/ |__|/ \__\/ \__\/
@mixin print-styles {
// These styles restore the original footnote numbers and texts when the page is printed
@media not print {
.footnote-print-only {
display: none !important;
}
}
@media print {
.bigfoot-footnote,
.bigfoot-footnote__button {
display: none !important;
}
}
}
// -----
// ___ ___ ___
// _____ /__/\ ___ ___ / /\ /__/\
// / /::\ \ \:\ / /\ / /\ / /::\ \ \:\
// / /:/\:\ \ \:\ / /:/ / /:/ / /:/\:\ \ \:\
// / /:/~/::\ ___ \ \:\ / /:/ / /:/ / /:/ \:\ _____\__\:\
// /__/:/ /:/\:|/__/\ \__\:\ / /::\ / /::\ /__/:/ \__\:\/__/::::::::\
// \ \:\/:/~/:/\ \:\ / /://__/:/\:\ /__/:/\:\\ \:\ / /:/\ \:\~~\~~\/
// \ \::/ /:/ \ \:\ /:/ \__\/ \:\\__\/ \:\\ \:\ /:/ \ \:\ ~~~
// \ \:\/:/ \ \:\/:/ \ \:\ \ \:\\ \:\/:/ \ \:\
// \ \::/ \ \::/ \__\/ \__\/ \ \::/ \ \:\
// \__\/ \__\/ \__\/ \__\/
//*
// The button that activates the footnote. By default, this will appear as a
// flat button that has an ellipse contained inside of it.
// @state .is-active - The associated popover has been activated and is visible.
// @since 2.1.0
// @author Chris Sauve
.bigfoot-footnote__button {
// POSITIONING
position: relative;
z-index: 5;
top: $button-vertical-adjust;
// DISPLAY AND SIZING
box-sizing: border-box;
-moz-box-sizing: border-box;;
display: inline-block;
padding: $button-per-side-padding;
margin: 0 $button-right-margin 0 $button-left-margin;
// BACKDROP
border: none;
border-radius: $button-border-radius;
cursor: pointer;
background-color: rgba($button-color, $button-standard-opacity);
backface-visibility: hidden;
// TEXT
font-size: 1rem;
line-height: 0;
vertical-align: middle;
text-decoration: none;
-webkit-font-smoothing: antialiased;
// TRANSITIONS
transition-property: $button-transition-properties;
transition-duration: $popover-transition-default-duration;
&:hover,
&:focus {
outline: none;
background-color: rgba($button-hovered-color, $button-hovered-opacity);
}
&:active {
background-color: rgba($button-activating-color, $button-activating-opacity);
}
&.is-active {
background-color: rgba($button-active-color, $button-active-opacity);
transition-delay: $button-active-style-delay;
}
// Clearfix
&:after {
content: '';
display: table;
clear: both;
}
}
// _____ ___ ___
// / /::\ / /\ ___ / /\
// / /:/\:\ / /::\ / /\ / /:/_
// / /:/ \:\ / /:/\:\ / /:/ / /:/ /\
// /__/:/ \__\:| / /:/ \:\ / /:/ / /:/ /::\
// \ \:\ / /://__/:/ \__\:\ / /::\ /__/:/ /:/\:\
// \ \:\ /:/ \ \:\ / /://__/:/\:\\ \:\/:/~/:/
// \ \:\/:/ \ \:\ /:/ \__\/ \:\\ \::/ /:/
// \ \::/ \ \:\/:/ \ \:\\__\/ /:/
// \__\/ \ \::/ \__\/ /__/:/
// \__\/ \__\/
//*
// Each of the three circles forming the ellipse within the button.
// @since 2.1.0
// @author Chris Sauve
.bigfoot-footnote__button__circle {
// DISPLAY AND SIZING
display: inline-block;
width: $button-inner-circle-size;
height: $button-inner-circle-size;
margin-right: $button-inner-circle-left-margin;
float: left;
// Gets rid of margin on the last circle
&:last-child { margin-right: 0; }
}
// ___ ___ ___ ___ ___
// / /\ / /\ /__/\ ___ / /\ ___ /__/\
// / /:/ / /::\ \ \:\ / /\ / /::\ / /\ \ \:\
// / /:/ / /:/\:\ \ \:\ / /:/ / /:/\:\ / /:/ \ \:\
// / /:/ ___ / /:/ \:\ _____\__\:\ / /:/ / /:/~/::\ /__/::\ _____\__\:\
// /__/:/ / /\/__/:/ \__\:\/__/::::::::\ / /::\ /__/:/ /:/\:\\__\/\:\__ /__/::::::::\
// \ \:\ / /:/\ \:\ / /:/\ \:\~~\~~\//__/:/\:\\ \:\/:/__\/ \ \:\/\\ \:\~~\~~\/
// \ \:\ /:/ \ \:\ /:/ \ \:\ ~~~ \__\/ \:\\ \::/ \__\::/ \ \:\ ~~~
// \ \:\/:/ \ \:\/:/ \ \:\ \ \:\\ \:\ /__/:/ \ \:\
// \ \::/ \ \::/ \ \:\ \__\/ \ \:\ \__\/ \ \:\
// \__\/ \__\/ \__\/ \__\/ \__\/
//*
// The container for the button and popover. This is required so that the popover
// is guaranteed to have a relatively-positioned container, and to help with the
// positioning calculation.
// @since 2.1.0
// @author Chris Sauve
.bigfoot-footnote__container {
display: inline-block;
position: relative;
text-indent: 0;
}
// ___ ___ ___
// / /\ / /\ ___ /__/\ ___
// / /::\ / /::\ / /\ \ \:\ / /\
// / /:/\:\ / /:/\:\ / /:/ \ \:\ / /:/
// / /:/~/:// /:/~/:/ /__/::\ _____\__\:\ / /:/
// /__/:/ /://__/:/ /:/___\__\/\:\__ /__/::::::::\ / /::\
// \ \:\/:/ \ \:\/:::::/ \ \:\/\\ \:\~~\~~\//__/:/\:\
// \ \::/ \ \::/~~~~ \__\::/ \ \:\ ~~~ \__\/ \:\
// \ \:\ \ \:\ /__/:/ \ \:\ \ \:\
// \ \:\ \ \:\ \__\/ \ \:\ \__\/
// \__\/ \__\/ \__\/
@include print-styles;
// -----
// ___ ___ ___ ___ ___ ___
// / /\ / /\ / /\ / /\ ___ / /\ / /\
// / /::\ / /::\ / /::\ / /::\ /__/\ / /:/_ / /::\
// / /:/\:\ / /:/\:\ / /:/\:\ / /:/\:\ \ \:\ / /:/ /\ / /:/\:\
// / /:/~/:// /:/ \:\ / /:/~/:// /:/ \:\ \ \:\ / /:/ /:/_ / /:/~/:/
// /__/:/ /://__/:/ \__\:\/__/:/ /://__/:/ \__\:\ ___ \__\:\/__/:/ /:/ /\/__/:/ /:/___
// \ \:\/:/ \ \:\ / /:/\ \:\/:/ \ \:\ / /://__/\ | |:|\ \:\/:/ /:/\ \:\/:::::/
// \ \::/ \ \:\ /:/ \ \::/ \ \:\ /:/ \ \:\| |:| \ \::/ /:/ \ \::/~~~~
// \ \:\ \ \:\/:/ \ \:\ \ \:\/:/ \ \:\__|:| \ \:\/:/ \ \:\
// \ \:\ \ \::/ \ \:\ \ \::/ \__\::::/ \ \::/ \ \:\
// \__\/ \__\/ \__\/ \__\/ ~~~~ \__\/ \__\/
//
//*
// The popover for the footnote. This popover will be, by default, be sized and positioned
// by the script. However, many of the sizes can be established in this stylesheet and
// will be respected by the script. `max-width` will limit the width of the popover
// relative to the viewport. `width` (on `bigfoot-footnote__wrapper`) will set the
// absolute max width. Max height can be set via a `max-height` property
// on `bigfoot-footnote__content`.
// By default, the popover has a light gray background, a shadow for some depth,
// rounded corners, and a tooltip pointing to the footnote button.
// @state .is-active - The popover has been activated and is visible.
// @state .is-positioned-top - The popover is above the button.
// @state .is-positioned-bottom - The popover is below the button.
// @state .is-scrollable - The popover content is greater than the popover height.
// @state .is-fully-scrolled - The popover content is scrolled to the bottom.
// @since 2.1.0
// @author Chris Sauve
.bigfoot-footnote {
// POSITIONING
position: absolute;
z-index: $popover-z-index;
top: 0; left: 0;
// DISPLAY AND SIZING
display: inline-block;
box-sizing: border-box;
// Height is set in .footnote-content-wrapper
max-width: $popover-max-width;
// 1.414213... is to get the diagonal height of the tooltip using pythagorus, yo.
margin: ((1.4142135624 * $popover-tooltip-size / 2) + $button-height + $popover-margin-top) 0;
// fits the popover to the contents
// BACKDROP
background: $popover-color-background;
opacity: $popover-inactive-opacity;
border-radius: $popover-border-radius;
border: $popover-border;
box-shadow: $popover-box-shadow;
// TEXT
line-height: 0;
// TRANSITIONS
transition-property: $popover-transition-properties;
transition-duration: $popover-transition-default-duration;
transition-timing-function: $popover-transition-default-timing-function;
// TRANSFORMS
transform: $popover-initial-transform-state;
transform-origin: $popover-initial-transform-origin;
&.is-positioned-top {
top: auto;
bottom: 0;
}
&.is-active {
transform: $popover-active-transform-state;
opacity: $popover-active-opacity;
}
&.is-bottom-fixed {
// POSITIONING
position: fixed;
bottom: 0; top: auto;
left: 0; right: auto;
transform: translateY(100%);
// DISPLAY AND SIZING
width: 100%;
margin: 0;
// BACKDROP
border-radius: 0;
opacity: 1;
border-width: 1px 0 0;
// TRANSITIONS
transition: transform 0.3s ease;
&.is-active {
transform: translateY(0);
}
.bigfoot-footnote__wrapper {
margin: 0 0 0 50%;
transform: translateX(-50%);
max-width: 100%;
}
.bigfoot-footnote__wrapper,
.bigfoot-footnote__content {
border-radius: 0;
}
.bigfoot-footnote__tooltip {
display: none;
}
}
&.is-scrollable {
// A scrollable indicator in the left margin of the popover.
&:after {
// CONTENT
content: '';
// POSITIONING
position: absolute;
bottom: $popover-scroll-indicator-padding;
left: $popover-scroll-indicator-padding;
z-index: ($popover-z-index + 4);
// DISPLAY AND SIZING
display: block;
height: ($popover-scroll-indicator-width*$popover-scroll-indicator-aspect-ratio);
width: $popover-scroll-indicator-width;
// BACKDROP
background-image: $popover-scroll-indicator-icon;
background-size: cover;
opacity: $popover-scroll-indicator-opacity;
transition-properties: $popover-scroll-indicator-transition-properties;
transition-duration: $popover-transition-default-duration;
transition-timing-function: $popover-transition-default-timing-function;
}
.bigfoot-footnote__wrapper {
&:before,
&:after {
content: '';
position: absolute;
width: 100%;
// Above the content
z-index: ($popover-z-index + 2);
left: 0;
}
&:before {
top: -1px;
height: $popover-padding-content-top;
border-radius: $popover-border-radius $popover-border-radius 0 0;
background-image: linear-gradient(to bottom, $popover-color-background $popover-scrolly-fade-gradient-start-location, transparentize($popover-color-background, 1) 100%);
}
&:after {
bottom: -1px;
height: $popover-padding-content-bottom;
border-radius: 0 0 $popover-border-radius $popover-border-radius;
background-image: linear-gradient(to top, $popover-color-background $popover-scrolly-fade-gradient-start-location, transparentize($popover-color-background, 1) 100%);
}
}
::-webkit-scrollbar { display: none; }
}
&.is-fully-scrolled {
&:after,
&:before {
opacity: 0;
transition-delay: 0;
}
}
}
//*
// Wraps around the footnote content. This is necessary in order to have an element
// above the tooltip and that can provide top and bottom indicators that there is
// additional content on scrollable popovers.
// @since 2.1.0
// @author Chris Sauve
.bigfoot-footnote__wrapper {
// POSITIONING
position: relative;
// Above the outer tooltip, below the inner tooltip
z-index: ($popover-z-index + 4);
// DISPLAY AND SIZING
width: $popover-width;
display: inline-block;
box-sizing: inherit;
overflow: hidden;
margin: 0;
// BACKDROP
background-color: $popover-color-background;
border-radius: $popover-border-radius;
// TEXT
line-height: 0;
}
//*
// Contains the actual footnote content. There is very little prescription here
// on the footnote content itself, except for removing and top margin on the first
// element and bottom margin on the last child.
// @since 2.1.0
// @author Chris Sauve
.bigfoot-footnote__content {
// POSITIONING
position: relative;
z-index: ($popover-z-index - 2); // Below fading bars
// DISPLAY AND SIZING
display: inline-block;
max-height: $popover-max-height;
padding: $popover-padding-content-top $popover-padding-content-horizontal $popover-padding-content-bottom;
box-sizing: inherit;
overflow: auto;
-webkit-overflow-scrolling: touch;
// BACKDROP
background: $popover-content-color-background;
border-radius: $popover-content-border-radius;
// TEXT
-webkit-font-smoothing: subpixel-antialiased;
line-height: normal;
// INTERIOR ELEMENTS
img { max-width: 100%; }
*:last-child { margin-bottom: 0 !important; }
*:first-child { margin-top: 0 !important; }
}
//*
// A triangular shape pointing towards the footnote button.
// @since 2.1.0
// @author Chris Sauve
.bigfoot-footnote__tooltip {
// POSITIONING
position: absolute;
// Above the footnote-main-wrapper and the outer tooltip
z-index: ($popover-z-index + 2);
// DISPLAY AND SIZING
box-sizing: border-box;
margin-left: (-0.5 * $popover-tooltip-size);
// Smaller by one border-width's worth
width: $popover-tooltip-size;
height: $popover-tooltip-size;
transform: rotate(45deg);
// BACKDROP
background: $popover-tooltip-background;
border: $popover-border;
box-shadow: $popover-box-shadow;
border-top-left-radius: $popover-tooltip-radius;
.is-positioned-bottom & {
top: (-0.5 * $popover-tooltip-size);
}
.is-positioned-top & {
bottom: (-0.5 * $popover-tooltip-size);
}
}

327
static/css/demo.css Executable file
View file

@ -0,0 +1,327 @@
/* =Typography
-----------------------------------------------------------------------------*/
body {
font-family: 'ff-tisa-web-pro', Georgia, 'Times New Roman', Times, Serif;
font-size: 1.05em;
line-height: 1.6em;
background-color: #faf8f8;
}
form, input[type="search"], select[multiple="multiple"] {font-family: 'ff-tisa-web-pro', 'Trebuchet MS', Helvetica, Arial, sans-serif;}
h1, h2, h3, h4, h5 {
font-family: 'ff-tisa-web-pro', 'Trebuchet MS', 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-style: italic;
color: #36454f;
}
h2, h3, h4, h5 {
font-weight: normal;
font-style: italic;
}
h2, h3 {
text-transform: lowercase;
font-family: 'ff-meta-serif-sc-web-pro', 'Trebuchet MS', 'Helvetica Neue', Tahoma;
font-style: normal;
}
.label-red {
background-color: #36454f;
}
a {color: #36454f;
text-decoration:none;
border-bottom: dotted 1px #A1A3A1;}
a:hover {text-decoration:underline;}
a.badge.badge-red { color: #fff;}
/* =Code
-----------------------------------------------------------------------------*/
pre,
code,
kbd,
samp,
var,
output {
font-size: 90%;
font-style: normal;
font-family: PragmataPro, Menlo, Monaco, "Andale Mono", "Lucida Console", "Courier New", monospace;
}
/* =Common
-----------------------------------------------------------------------------*/
img,
#feedback,
#banner,
#intro li {
border-radius: 3px;
}
nav {text-transform: lowercase;
font-family: 'ff-meta-serif-sc-web-pro';}
.hd {font-family: 'ff-tisa-web-pro'; }
.caps {text-transform: lowercase;
font-family: 'ff-meta-serif-sc-web-pro'; }
.compact { margin: 0 0 0 1.3em; }
hr {border-top: 1px solid #b3cde0; margin-top:5ex; margin-bottom: 5ex;}
.separator {border-top: 5px solid #b3cde0;}
h2 {border-bottom: 1px solid #b3cde0;}
h2 a {border-bottom: none;}
/* =Layout
-----------------------------------------------------------------------------*/
.wrapper {
padding: 0 10px;
width: 94%;
max-width: 1300px;
margin: auto;
}
#outer {
padding: 3em 0 1em 0;
margin: 1em 0 3em 0;
background: url(hero-image1.jpg) #282828;
background-size: cover;
background-position: 50% 50%;
box-shadow: 0 0 3px #333 inset;
/* border: 1px solid #000; */
color: #f2f2f2;
height: 200px;
}
#outer h2,
#outer h3 {
color: #ccc;
}
#topbar {
background: #536878;
padding:0px;
margin:0ex;
/* border-bottom: 3px solid #36454f; */
}
#midbar {
background: #eaa;
padding:0px;
margin:0ex;
/* border-bottom: 3px solid #36454f; */
}
#topbar .navbar {padding-bottom:14px; font-size:120%;}
#topbar li a {color: #fff; border-bottom: none;}
#topbar li a {color: #b3cde0;}
#topbar li span a {color: #fff;}
.avatar {
-webkit-border-radius: 50em;
-moz-border-radius: 50em;
border-radius: 50em;
}
.image-left {
float: left;
margin: 0 1em 1em 0;
}
/* =Header
-----------------------------------------------------------------------------*/
header {
padding-top: 15px;
margin-bottom: 0em;
}
/* #header h1 {
float: left;
font-size: 48px;
margin-top: 1px;
margin-bottom: 0;
color: #ffffff;
} */
/* #header nav {
margin-top: 1.2em;
margin-bottom: 0;
float: right;
} */
header h1 { font-size: 24px;
margin-top: 1px;
margin-bottom: 0;
/* color: #ffffff;*/ }
#topbar form {float:right; display:inline-block; }
/* =Promo
-----------------------------------------------------------------------------*/
#promo {
margin-bottom: 1.5em;
}
/* =Intro
-----------------------------------------------------------------------------*/
#intro .subheader {
color: rgba(0, 0, 0, .4);
padding-bottom: .3em;
border-bottom: 1px solid #ccc;
}
#intro li {
/* background-color: #e9e6da;*/
}
/* =Feedback
-----------------------------------------------------------------------------*/
#feedback {
background-color: rgba(0,0,0,.5);
padding: 2em 3em;
}
/* =Banner
-----------------------------------------------------------------------------*/
#banner {
line-height: 0;
padding: 1.5em;
background-color: #e9e6da;
}
/* =Blocks
-----------------------------------------------------------------------------*/
#blocks dl {
overflow: hidden;
margin: 0;
padding-bottom: 1.5em;
}
#blocks dt {
float: left;
width: 22%;
margin-right: 4%;
}
#blocks dt img {
padding: 4px;
background-color: #fff;
border: 1px solid #000;
box-shadow: 4px 4px 0 #000;
}
#blocks dd {
margin: 0;
float: left;
width: 74%;
padding-bottom: 1.5em;
}
/* =Partners
-----------------------------------------------------------------------------*/
#partners {
padding-top: 1.5em;
}
#partners h4 {
color: #666;
}
/* =Footer
-----------------------------------------------------------------------------*/
.dateblock {text-align:right; }
/* =Footer
-----------------------------------------------------------------------------*/
#footer {
color: #b3cde0;
margin-top: 3ex;
padding-bottom: 20px;
font-size: .9em;
padding-top: 1em;
background-color: #536878;
overflow: hidden;
/* box-shadow: 0 2px 4px #bbb inset;*/
/* background: #f0f0f0;*/
border-top: 3px solid #36454f;
}
#footer a { color: #fff; }
#footer section {
float: none;
text-align:center;
}
#footer nav {
float: right;
}
#footer nav ul {
list-style: none;
margin: 0;
}
#footer nav ul li {
float: left;
margin-left: 2em;
}
/* =Tablet (Portrait)
-----------------------------------------------------------------------------*/
@media only screen and (min-width: 768px) and (max-width: 959px) {
.wrapper { width: 748px; }
}
/* =Mobile (Portrait)
-----------------------------------------------------------------------------*/
@media only screen and (max-width: 767px) {
/* .wrapper { width: 300px; }*/
/* #header h1 { float: none; text-align:center; font-size: 36px;}*/
/* #header nav { float:none; text-align:center;}*/
/* #header nav ul li { margin: 0; margin-right: 1em; } */
#topbar .navbar {padding-bottom:12px; font-size:120%; }
#topbar .navbar li {float:left; margin-left:1.1em;}
#banner { text-align: center; margin-bottom: 1.5em; }
#footer section, #footer nav { float: none; text-align:center;}
#footer nav ul { margin-top: 1em; text-align:center;}
#footer nav ul li { margin: 0; margin-right: 1em;}
.dateblock {text-align:center;}
h1, h2, h3, h4, h5, form, input {text-align:center;}
}
/* =Mobile (Landscape)
-----------------------------------------------------------------------------*/
@media only screen and (min-width: 480px) and (max-width: 767px) {
.wrapper { width: 420px; }
}
.grlog blockquote { font-style:normal; border: 0px ; font-size:1em;}
.grlog blockquote blockquote { border-left: 2px solid #dddddd; }
.grlog .datestamp { text-transform: lowercase;
font-family: 'ff-meta-serif-sc-web-pro'; }
.grlog img { margin-left: 12px; margin-bottom: 12px; margin-top:12px;}
.grlog p {padding-top:0.5em;}
.oldcons img { margin-left: 0px; margin-bottom: 24px; margin-top:12px;}
.oldcons p {padding-top:0.5em;}
.oldcons h3 {padding-top:0.2em;}
.logician {float: left; margin-right:16px;}
p.capitalize {
text-transform: capitalize;
}

3646
static/css/kube.css Executable file
View file

File diff suppressed because it is too large Load diff

1
static/css/kube.min.css vendored Executable file
View file

File diff suppressed because one or more lines are too long

22
static/css/mine.css Executable file
View file

@ -0,0 +1,22 @@
/* =Typography
-----------------------------------------------------------------------------*/
body {
font-family: 'Alegreya', 'Hoefler Text', Times, Serif;
font-size: 1.05em;
line-height: 1.6em;
background-color: #faf8f8;
}
h1, h2, h3, h4, h5 {
font-family: 'Alegreya', 'Trebuchet MS', Helvetica, Arial, sans-serif;
font-style: italic;
color: #b24;
}
h2, h3, h4, h5 {
font-weight: normal;
font-style: italic;
}
h2, h3 {
text-transform: lowercase;
font-family: 'Alegreya SC';
font-style: normal;
}

70
static/css/syntax.css Executable file
View file

@ -0,0 +1,70 @@
.highlight .hll { background-color: #ffffcc }
.highlight { background: #f8f8f8; }
.highlight .c { color: #8f5902; font-style: italic } /* Comment */
.highlight .err { color: #a40000; border: 1px solid #ef2929 } /* Error */
.highlight .g { color: #000000 } /* Generic */
.highlight .k { color: #204a87; font-weight: bold } /* Keyword */
.highlight .l { color: #000000 } /* Literal */
.highlight .n { color: #000000 } /* Name */
.highlight .o { color: #ce5c00; font-weight: bold } /* Operator */
.highlight .x { color: #000000 } /* Other */
.highlight .p { color: #000000; font-weight: bold } /* Punctuation */
.highlight .cm { color: #8f5902; font-style: italic } /* Comment.Multiline */
.highlight .cp { color: #8f5902; font-style: italic } /* Comment.Preproc */
.highlight .c1 { color: #8f5902; font-style: italic } /* Comment.Single */
.highlight .cs { color: #8f5902; font-style: italic } /* Comment.Special */
.highlight .gd { color: #a40000 } /* Generic.Deleted */
.highlight .ge { color: #000000; font-style: italic } /* Generic.Emph */
.highlight .gr { color: #ef2929 } /* Generic.Error */
.highlight .gh { color: #000080; font-weight: bold } /* Generic.Heading */
.highlight .gi { color: #00A000 } /* Generic.Inserted */
.highlight .go { color: #000000; font-style: italic } /* Generic.Output */
.highlight .gp { color: #8f5902 } /* Generic.Prompt */
.highlight .gs { color: #000000; font-weight: bold } /* Generic.Strong */
.highlight .gu { color: #800080; font-weight: bold } /* Generic.Subheading */
.highlight .gt { color: #a40000; font-weight: bold } /* Generic.Traceback */
.highlight .kc { color: #204a87; font-weight: bold } /* Keyword.Constant */
.highlight .kd { color: #204a87; font-weight: bold } /* Keyword.Declaration */
.highlight .kn { color: #204a87; font-weight: bold } /* Keyword.Namespace */
.highlight .kp { color: #204a87; font-weight: bold } /* Keyword.Pseudo */
.highlight .kr { color: #204a87; font-weight: bold } /* Keyword.Reserved */
.highlight .kt { color: #204a87; font-weight: bold } /* Keyword.Type */
.highlight .ld { color: #000000 } /* Literal.Date */
.highlight .m { color: #0000cf; font-weight: bold } /* Literal.Number */
.highlight .s { color: #4e9a06 } /* Literal.String */
.highlight .na { color: #c4a000 } /* Name.Attribute */
.highlight .nb { color: #204a87 } /* Name.Builtin */
.highlight .nc { color: #000000 } /* Name.Class */
.highlight .no { color: #000000 } /* Name.Constant */
.highlight .nd { color: #5c35cc; font-weight: bold } /* Name.Decorator */
.highlight .ni { color: #ce5c00 } /* Name.Entity */
.highlight .ne { color: #cc0000; font-weight: bold } /* Name.Exception */
.highlight .nf { color: #000000 } /* Name.Function */
.highlight .nl { color: #f57900 } /* Name.Label */
.highlight .nn { color: #000000 } /* Name.Namespace */
.highlight .nx { color: #000000 } /* Name.Other */
.highlight .py { color: #000000 } /* Name.Property */
.highlight .nt { color: #204a87; font-weight: bold } /* Name.Tag */
.highlight .nv { color: #000000 } /* Name.Variable */
.highlight .ow { color: #204a87; font-weight: bold } /* Operator.Word */
.highlight .w { color: #f8f8f8; text-decoration: underline } /* Text.Whitespace */
.highlight .mf { color: #0000cf; font-weight: bold } /* Literal.Number.Float */
.highlight .mh { color: #0000cf; font-weight: bold } /* Literal.Number.Hex */
.highlight .mi { color: #0000cf; font-weight: bold } /* Literal.Number.Integer */
.highlight .mo { color: #0000cf; font-weight: bold } /* Literal.Number.Oct */
.highlight .sb { color: #4e9a06 } /* Literal.String.Backtick */
.highlight .sc { color: #4e9a06 } /* Literal.String.Char */
.highlight .sd { color: #8f5902; font-style: italic } /* Literal.String.Doc */
.highlight .s2 { color: #4e9a06 } /* Literal.String.Double */
.highlight .se { color: #4e9a06 } /* Literal.String.Escape */
.highlight .sh { color: #4e9a06 } /* Literal.String.Heredoc */
.highlight .si { color: #4e9a06 } /* Literal.String.Interpol */
.highlight .sx { color: #4e9a06 } /* Literal.String.Other */
.highlight .sr { color: #4e9a06 } /* Literal.String.Regex */
.highlight .s1 { color: #4e9a06 } /* Literal.String.Single */
.highlight .ss { color: #4e9a06 } /* Literal.String.Symbol */
.highlight .bp { color: #3465a4 } /* Name.Builtin.Pseudo */
.highlight .vc { color: #000000 } /* Name.Variable.Class */
.highlight .vg { color: #000000 } /* Name.Variable.Global */
.highlight .vi { color: #000000 } /* Name.Variable.Instance */
.highlight .il { color: #0000cf; font-weight: bold } /* Literal.Number.Integer.Long */