3533 lines
61 KiB
CSS
3533 lines
61 KiB
CSS
/*! normalize.css v1.1.0 | MIT License | git.io/normalize */
|
|
|
|
/* ==========================================================================
|
|
HTML5 display definitions
|
|
========================================================================== */
|
|
|
|
/**
|
|
* Correct `block` display not defined in IE 6/7/8/9 and Firefox 3.
|
|
*/
|
|
|
|
article,
|
|
aside,
|
|
details,
|
|
figcaption,
|
|
figure,
|
|
footer,
|
|
header,
|
|
hgroup,
|
|
main,
|
|
nav,
|
|
section,
|
|
summary {
|
|
display: block;
|
|
}
|
|
|
|
/**
|
|
* Correct `inline-block` display not defined in IE 6/7/8/9 and Firefox 3.
|
|
*/
|
|
|
|
audio,
|
|
canvas,
|
|
video {
|
|
display: inline-block;
|
|
*display: inline;
|
|
*zoom: 1;
|
|
}
|
|
|
|
/**
|
|
* Prevent modern browsers from displaying `audio` without controls.
|
|
* Remove excess height in iOS 5 devices.
|
|
*/
|
|
|
|
audio:not([controls]) {
|
|
display: none;
|
|
height: 0;
|
|
}
|
|
|
|
/**
|
|
* Address styling not present in IE 7/8/9, Firefox 3, and Safari 4.
|
|
* Known issue: no IE 6 support.
|
|
*/
|
|
|
|
[hidden] {
|
|
display: none;
|
|
}
|
|
|
|
/* ==========================================================================
|
|
Base
|
|
========================================================================== */
|
|
|
|
/**
|
|
* 1. Correct text resizing oddly in IE 6/7 when body `font-size` is set using
|
|
* `em` units.
|
|
* 2. Prevent iOS text size adjust after orientation change, without disabling
|
|
* user zoom.
|
|
*/
|
|
|
|
html {
|
|
font-size: 100%; /* 1 */
|
|
-webkit-text-size-adjust: 100%; /* 2 */
|
|
-ms-text-size-adjust: 100%; /* 2 */
|
|
}
|
|
|
|
/**
|
|
* Address `font-family` inconsistency between `textarea` and other form
|
|
* elements.
|
|
*/
|
|
|
|
html,
|
|
button,
|
|
input,
|
|
select,
|
|
textarea {
|
|
font-family: sans-serif;
|
|
}
|
|
|
|
/**
|
|
* Address margins handled incorrectly in IE 6/7.
|
|
*/
|
|
|
|
body {
|
|
margin: 0;
|
|
}
|
|
|
|
/* ==========================================================================
|
|
Links
|
|
========================================================================== */
|
|
|
|
/**
|
|
* Address `outline` inconsistency between Chrome and other browsers.
|
|
*/
|
|
|
|
a:focus {
|
|
outline: thin dotted;
|
|
}
|
|
|
|
/**
|
|
* Improve readability when focused and also mouse hovered in all browsers.
|
|
*/
|
|
|
|
a:active,
|
|
a:hover {
|
|
outline: 0;
|
|
}
|
|
|
|
/* ==========================================================================
|
|
Typography
|
|
========================================================================== */
|
|
|
|
/**
|
|
* Address font sizes and margins set differently in IE 6/7.
|
|
* Address font sizes within `section` and `article` in Firefox 4+, Safari 5,
|
|
* and Chrome.
|
|
*/
|
|
|
|
h1 {
|
|
font-size: 2em;
|
|
margin: 0.67em 0;
|
|
}
|
|
|
|
h2 {
|
|
font-size: 1.5em;
|
|
margin: 0.83em 0;
|
|
}
|
|
|
|
h3 {
|
|
font-size: 1.17em;
|
|
margin: 1em 0;
|
|
}
|
|
|
|
h4 {
|
|
font-size: 1em;
|
|
margin: 1.33em 0;
|
|
}
|
|
|
|
h5 {
|
|
font-size: 0.83em;
|
|
margin: 1.67em 0;
|
|
}
|
|
|
|
h6 {
|
|
font-size: 0.67em;
|
|
margin: 2.33em 0;
|
|
}
|
|
|
|
/**
|
|
* Address styling not present in IE 7/8/9, Safari 5, and Chrome.
|
|
*/
|
|
|
|
abbr[title] {
|
|
border-bottom: 1px dotted;
|
|
}
|
|
|
|
/**
|
|
* Address style set to `bolder` in Firefox 3+, Safari 4/5, and Chrome.
|
|
*/
|
|
|
|
b,
|
|
strong {
|
|
font-weight: bold;
|
|
}
|
|
|
|
blockquote {
|
|
margin: 1em 40px;
|
|
}
|
|
|
|
/**
|
|
* Address styling not present in Safari 5 and Chrome.
|
|
*/
|
|
|
|
dfn {
|
|
font-style: italic;
|
|
}
|
|
|
|
/**
|
|
* Address differences between Firefox and other browsers.
|
|
* Known issue: no IE 6/7 normalization.
|
|
*/
|
|
|
|
hr {
|
|
-moz-box-sizing: content-box;
|
|
box-sizing: content-box;
|
|
height: 0;
|
|
}
|
|
|
|
/**
|
|
* Address styling not present in IE 6/7/8/9.
|
|
*/
|
|
|
|
mark {
|
|
background: #ff0;
|
|
color: #000;
|
|
}
|
|
|
|
/**
|
|
* Address margins set differently in IE 6/7.
|
|
*/
|
|
|
|
p,
|
|
pre {
|
|
margin: 1em 0;
|
|
}
|
|
|
|
/**
|
|
* Correct font family set oddly in IE 6, Safari 4/5, and Chrome.
|
|
*/
|
|
|
|
code,
|
|
kbd,
|
|
pre,
|
|
samp {
|
|
font-family: monospace, serif;
|
|
_font-family: 'courier new', monospace;
|
|
font-size: 1em;
|
|
}
|
|
|
|
/**
|
|
* Improve readability of pre-formatted text in all browsers.
|
|
*/
|
|
|
|
pre {
|
|
white-space: pre;
|
|
white-space: pre-wrap;
|
|
word-wrap: break-word;
|
|
}
|
|
|
|
/**
|
|
* Address CSS quotes not supported in IE 6/7.
|
|
*/
|
|
|
|
q {
|
|
quotes: none;
|
|
}
|
|
|
|
/**
|
|
* Address `quotes` property not supported in Safari 4.
|
|
*/
|
|
|
|
q:before,
|
|
q:after {
|
|
content: '';
|
|
content: none;
|
|
}
|
|
|
|
/**
|
|
* Address inconsistent and variable font size in all browsers.
|
|
*/
|
|
|
|
small {
|
|
font-size: 80%;
|
|
}
|
|
|
|
/**
|
|
* Prevent `sub` and `sup` affecting `line-height` in all browsers.
|
|
*/
|
|
|
|
sub,
|
|
sup {
|
|
font-size: 75%;
|
|
line-height: 0;
|
|
position: relative;
|
|
vertical-align: baseline;
|
|
}
|
|
|
|
sup {
|
|
top: -0.5em;
|
|
}
|
|
|
|
sub {
|
|
bottom: -0.25em;
|
|
}
|
|
|
|
/* ==========================================================================
|
|
Lists
|
|
========================================================================== */
|
|
|
|
/**
|
|
* Address margins set differently in IE 6/7.
|
|
*/
|
|
|
|
dl,
|
|
menu,
|
|
ol,
|
|
ul {
|
|
margin: 1em 0;
|
|
}
|
|
|
|
dd {
|
|
margin: 0 0 0 40px;
|
|
}
|
|
|
|
/**
|
|
* Address paddings set differently in IE 6/7.
|
|
*/
|
|
|
|
menu,
|
|
ol,
|
|
ul {
|
|
padding: 0 0 0 40px;
|
|
}
|
|
|
|
/**
|
|
* Correct list images handled incorrectly in IE 7.
|
|
*/
|
|
|
|
nav ul,
|
|
nav ol {
|
|
list-style: none;
|
|
list-style-image: none;
|
|
}
|
|
|
|
/* ==========================================================================
|
|
Embedded content
|
|
========================================================================== */
|
|
|
|
/**
|
|
* 1. Remove border when inside `a` element in IE 6/7/8/9 and Firefox 3.
|
|
* 2. Improve image quality when scaled in IE 7.
|
|
*/
|
|
|
|
img {
|
|
border: 0; /* 1 */
|
|
-ms-interpolation-mode: bicubic; /* 2 */
|
|
}
|
|
|
|
/**
|
|
* Correct overflow displayed oddly in IE 9.
|
|
*/
|
|
|
|
svg:not(:root) {
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* ==========================================================================
|
|
Figures
|
|
========================================================================== */
|
|
|
|
/**
|
|
* Address margin not present in IE 6/7/8/9, Safari 5, and Opera 11.
|
|
*/
|
|
|
|
figure {
|
|
margin: 0;
|
|
}
|
|
|
|
/* ==========================================================================
|
|
Forms
|
|
========================================================================== */
|
|
|
|
/**
|
|
* Correct margin displayed oddly in IE 6/7.
|
|
*/
|
|
|
|
form {
|
|
margin: 0;
|
|
}
|
|
|
|
/**
|
|
* Define consistent border, margin, and padding.
|
|
*/
|
|
|
|
fieldset {
|
|
border: 1px solid #c0c0c0;
|
|
margin: 0 2px;
|
|
padding: 0.35em 0.625em 0.75em;
|
|
}
|
|
|
|
/**
|
|
* 1. Correct color not being inherited in IE 6/7/8/9.
|
|
* 2. Correct text not wrapping in Firefox 3.
|
|
* 3. Correct alignment displayed oddly in IE 6/7.
|
|
*/
|
|
|
|
legend {
|
|
border: 0; /* 1 */
|
|
padding: 0;
|
|
white-space: normal; /* 2 */
|
|
*margin-left: -7px; /* 3 */
|
|
}
|
|
|
|
/**
|
|
* 1. Correct font size not being inherited in all browsers.
|
|
* 2. Address margins set differently in IE 6/7, Firefox 3+, Safari 5,
|
|
* and Chrome.
|
|
* 3. Improve appearance and consistency in all browsers.
|
|
*/
|
|
|
|
button,
|
|
input,
|
|
select,
|
|
textarea {
|
|
font-size: 100%; /* 1 */
|
|
margin: 0; /* 2 */
|
|
vertical-align: baseline; /* 3 */
|
|
*vertical-align: middle; /* 3 */
|
|
}
|
|
|
|
/**
|
|
* Address Firefox 3+ setting `line-height` on `input` using `!important` in
|
|
* the UA stylesheet.
|
|
*/
|
|
|
|
button,
|
|
input {
|
|
line-height: normal;
|
|
}
|
|
|
|
/**
|
|
* Address inconsistent `text-transform` inheritance for `button` and `select`.
|
|
* All other form control elements do not inherit `text-transform` values.
|
|
* Correct `button` style inheritance in Chrome, Safari 5+, and IE 6+.
|
|
* Correct `select` style inheritance in Firefox 4+ and Opera.
|
|
*/
|
|
|
|
button,
|
|
select {
|
|
text-transform: none;
|
|
}
|
|
|
|
/**
|
|
* 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
|
|
* and `video` controls.
|
|
* 2. Correct inability to style clickable `input` types in iOS.
|
|
* 3. Improve usability and consistency of cursor style between image-type
|
|
* `input` and others.
|
|
* 4. Remove inner spacing in IE 7 without affecting normal text inputs.
|
|
* Known issue: inner spacing remains in IE 6.
|
|
*/
|
|
|
|
button,
|
|
html input[type="button"], /* 1 */
|
|
input[type="reset"],
|
|
input[type="submit"] {
|
|
-webkit-appearance: button; /* 2 */
|
|
cursor: pointer; /* 3 */
|
|
*overflow: visible; /* 4 */
|
|
}
|
|
|
|
/**
|
|
* Re-set default cursor for disabled elements.
|
|
*/
|
|
|
|
button[disabled],
|
|
html input[disabled] {
|
|
cursor: default;
|
|
}
|
|
|
|
/**
|
|
* 1. Address box sizing set to content-box in IE 8/9.
|
|
* 2. Remove excess padding in IE 8/9.
|
|
* 3. Remove excess padding in IE 7.
|
|
* Known issue: excess padding remains in IE 6.
|
|
*/
|
|
|
|
input[type="checkbox"],
|
|
input[type="radio"] {
|
|
box-sizing: border-box; /* 1 */
|
|
padding: 0; /* 2 */
|
|
*height: 13px; /* 3 */
|
|
*width: 13px; /* 3 */
|
|
}
|
|
|
|
/**
|
|
* 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome.
|
|
* 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome
|
|
* (include `-moz` to future-proof).
|
|
*/
|
|
|
|
input[type="search"] {
|
|
-webkit-appearance: textfield; /* 1 */
|
|
-moz-box-sizing: content-box;
|
|
-webkit-box-sizing: content-box; /* 2 */
|
|
box-sizing: content-box;
|
|
}
|
|
|
|
/**
|
|
* Remove inner padding and search cancel button in Safari 5 and Chrome
|
|
* on OS X.
|
|
*/
|
|
|
|
input[type="search"]::-webkit-search-cancel-button,
|
|
input[type="search"]::-webkit-search-decoration {
|
|
-webkit-appearance: none;
|
|
}
|
|
|
|
/**
|
|
* Remove inner padding and border in Firefox 3+.
|
|
*/
|
|
|
|
button::-moz-focus-inner,
|
|
input::-moz-focus-inner {
|
|
border: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
/**
|
|
* 1. Remove default vertical scrollbar in IE 6/7/8/9.
|
|
* 2. Improve readability and alignment in all browsers.
|
|
*/
|
|
|
|
textarea {
|
|
overflow: auto; /* 1 */
|
|
vertical-align: top; /* 2 */
|
|
}
|
|
|
|
/* ==========================================================================
|
|
Tables
|
|
========================================================================== */
|
|
|
|
/**
|
|
* Remove most spacing between table cells.
|
|
*/
|
|
|
|
table {
|
|
border-collapse: collapse;
|
|
border-spacing: 0;
|
|
}
|
|
/* http://prismjs.com/download.html?themes=prism-coy&languages=markup+css+css-extras+clike+javascript+java&plugins=line-numbers */
|
|
|
|
/*
|
|
|
|
* p5.js highlighting based on the prism.js Coy theme for JavaScript, CoffeeScript, CSS and HTML
|
|
* Based on https://github.com/tshedor/workshop-wp-theme (Example: http://workshop.kansan.com/category/sessions/basics or http://workshop.timshedor.com/category/sessions/basics);
|
|
* @author Tim Shedor
|
|
|
|
*/
|
|
|
|
code[class*="language-"],
|
|
pre[class*="language-"],
|
|
textarea {
|
|
color: #222;
|
|
font-family:
|
|
'Inconsolata',
|
|
Consolas,
|
|
Monaco,
|
|
'Andale Mono',
|
|
monospace;
|
|
direction: ltr;
|
|
text-align: left;
|
|
white-space: pre;
|
|
word-spacing: normal;
|
|
word-break: normal;
|
|
-moz-tab-size: 4;
|
|
-o-tab-size: 4;
|
|
tab-size: 4;
|
|
-webkit-hyphens: none;
|
|
-moz-hyphens: none;
|
|
-ms-hyphens: none;
|
|
hyphens: none;
|
|
font-size: 1em !important;
|
|
}
|
|
|
|
/* Code blocks */
|
|
pre[class*="language-"] {
|
|
position:relative;
|
|
padding: 0.5em 1.0em;
|
|
margin: 0.5em 0 0 -0.5em;
|
|
border-left: 0.5em solid #AFAFAF; /* coy og blue 10px solid 358ccb */
|
|
background-color: #fff; /* coy og white #fdfdfd */
|
|
/* lines */
|
|
background-image: -webkit-linear-gradient(transparent 50%, rgba(69, 142, 209, 0.06) 50%);
|
|
background-image: -moz-linear-gradient(transparent 50%, rgba(69, 142, 209, 0.06) 50%);
|
|
background-image: -ms-linear-gradient(transparent 50%, rgba(69, 142, 209, 0.06) 50%);
|
|
background-image: -o-linear-gradient(transparent 50%, rgba(69, 142, 209, 0.06) 50%);
|
|
background-image: linear-gradient(transparent 50%, rgba(69, 142, 209, 0.06) 50%);
|
|
background-size: 2.9em 2.9em; /* adjusts height of alternating lines */
|
|
background-origin:content-box;
|
|
/* set overflow to just let the code roll */
|
|
overflow:auto;
|
|
/* or uncomment this to let an inner vertical scroll be triggered,
|
|
but be generous as to when
|
|
max-height:36em; */
|
|
}
|
|
|
|
code[class*="language"] {
|
|
}
|
|
|
|
|
|
:not(pre) > code[class*="language-"],
|
|
pre[class*="language-"] {
|
|
margin-bottom: 1em;
|
|
}
|
|
|
|
/* Inline code */
|
|
:not(pre) > code[class*="language-"] {
|
|
position:relative;
|
|
padding: .2em;
|
|
-webkit-border-radius: 0.3em;
|
|
-moz-border-radius: 0.3em;
|
|
-ms-border-radius: 0.3em;
|
|
-o-border-radius: 0.3em;
|
|
border-radius: 0.3em;
|
|
color: #333;
|
|
border: 1px solid rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
|
|
:not(pre) > code[class*="language-"]:after,
|
|
pre[class*="language-"]:after {
|
|
right: 0.75em;
|
|
left: auto;
|
|
}
|
|
|
|
/* code colors */
|
|
.token.comment,
|
|
.token.block-comment,
|
|
.token.prolog,
|
|
.token.doctype,
|
|
.token.cdata {
|
|
color: #A0A0A0; /* light gray */ /* 727272 898189 919191 A0A0A0 AFAFAF BEBEBE coy og: #7D8B99; */
|
|
}
|
|
|
|
.token.punctuation {
|
|
color: #666; /* darker gray */ /* og coy 5F6364 */
|
|
}
|
|
|
|
.token.property,
|
|
.token.tag,
|
|
.token.boolean,
|
|
.token.number,
|
|
.token.function-name,
|
|
.token.constant,
|
|
.token.symbol {
|
|
color: #DC3787; /* not p5 pink, but related */ /* og coy c92c2c a reddish color */
|
|
}
|
|
|
|
.token.selector,
|
|
.token.attr-name,
|
|
.token.string,
|
|
.token.function,
|
|
.token.builtin {
|
|
color: #00A1D3; /* blue */ /* 877923 */ /* og coy 2f9c0a - green */
|
|
}
|
|
|
|
.token.operator,
|
|
.token.entity,
|
|
.token.url,
|
|
.token.variable {
|
|
color: #a67f59; /* og coy a67f59 a light brown */
|
|
background: rgba(255, 255, 255, 0.5);
|
|
}
|
|
|
|
.token.atrule,
|
|
.token.attr-value,
|
|
.token.keyword,
|
|
.token.class-name {
|
|
color: #704F21; /* 9F944F brown */ /* og coy #1990b8 blue */
|
|
}
|
|
|
|
.token.regex,
|
|
.token.important {
|
|
color: #e90; /* og coy e90 orange */
|
|
}
|
|
.language-css .token.string,
|
|
.style .token.string {
|
|
color: #a67f59; /* og coy a67f59 a light brown */
|
|
background: rgba(255, 255, 255, 0.5);
|
|
}
|
|
|
|
.token.important {
|
|
font-weight: normal;
|
|
}
|
|
|
|
.token.entity {
|
|
cursor: help;
|
|
}
|
|
|
|
.namespace {
|
|
opacity: .7;
|
|
}
|
|
|
|
@media screen and (max-width:767px){
|
|
pre[class*="language-"]:before,
|
|
pre[class*="language-"]:after {
|
|
bottom:14px;
|
|
-webkit-box-shadow:none;
|
|
-moz-box-shadow:none;
|
|
box-shadow:none;
|
|
}
|
|
|
|
}
|
|
|
|
/* Plugin styles */
|
|
.token.tab:not(:empty):before,
|
|
.token.cr:before,
|
|
.token.lf:before {
|
|
color: #e0d7d1; /* og coy very light brown */
|
|
}
|
|
|
|
pre.line-numbers {
|
|
position: relative;
|
|
padding-left: 3.8em;
|
|
counter-reset: linenumber;
|
|
}
|
|
|
|
pre.line-numbers > code {
|
|
position: relative;
|
|
}
|
|
|
|
.line-numbers .line-numbers-rows {
|
|
position: absolute;
|
|
pointer-events: none;
|
|
top: 0;
|
|
font-size: 100%;
|
|
left: -3.8em;
|
|
width: 3em; /* works for line-numbers below 1000 lines */
|
|
letter-spacing: -1px;
|
|
border-right: 1px solid #999;
|
|
|
|
-webkit-user-select: none;
|
|
-moz-user-select: none;
|
|
-ms-user-select: none;
|
|
user-select: none;
|
|
|
|
}
|
|
|
|
.line-numbers-rows > span {
|
|
pointer-events: none;
|
|
display: block;
|
|
counter-increment: linenumber;
|
|
}
|
|
|
|
.line-numbers-rows > span:before {
|
|
content: counter(linenumber);
|
|
color: #999;
|
|
display: block;
|
|
padding-right: 0.8em;
|
|
text-align: right;
|
|
}
|
|
/*
|
|
* HTML5 Boilerplate
|
|
*
|
|
* What follows is the result of much research on cross-browser styling.
|
|
* Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
|
|
* Kroc Camen, and the H5BP dev community and team.
|
|
*/
|
|
|
|
/* ==========================================================================
|
|
Base styles: opinionated defaults
|
|
========================================================================== */
|
|
|
|
html,
|
|
button,
|
|
input,
|
|
select {
|
|
color: #222;
|
|
}
|
|
|
|
textarea {
|
|
line-height: 1.45em;
|
|
padding: 0.5em 1em 0.5em 1em;
|
|
border: none;
|
|
}
|
|
|
|
body {
|
|
font-size: 1em;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
/*
|
|
* Remove text-shadow in selection highlight: h5bp.com/i
|
|
* These selection rule sets have to be separate.
|
|
* Customize the background color to match your design.
|
|
*/
|
|
|
|
::-moz-selection {
|
|
background: #b3d4fc;
|
|
text-shadow: none;
|
|
}
|
|
|
|
::selection {
|
|
background: #b3d4fc;
|
|
text-shadow: none;
|
|
}
|
|
|
|
/*
|
|
* A better looking default horizontal rule
|
|
*/
|
|
|
|
hr {
|
|
display: block;
|
|
height: 1px;
|
|
border: 0;
|
|
border-top: 1px solid #ccc;
|
|
margin: 1em 0;
|
|
padding: 0;
|
|
}
|
|
|
|
/*
|
|
* Remove the gap between images and the bottom of their containers: h5bp.com/i/440
|
|
*/
|
|
|
|
img {
|
|
vertical-align: middle;
|
|
}
|
|
|
|
img.med_left {
|
|
width: 300px;
|
|
float: left;
|
|
}
|
|
|
|
img.med_right {
|
|
width: 300px;
|
|
float: right;
|
|
}
|
|
|
|
img.small_left {
|
|
width: 200px;
|
|
float: left;
|
|
}
|
|
|
|
img.smaller_left {
|
|
width: 140px;
|
|
float: left;
|
|
}
|
|
|
|
img.small_right {
|
|
width: 200px;
|
|
float: right;
|
|
}
|
|
|
|
img.smaller_right {
|
|
width: 140px;
|
|
float: right;
|
|
}
|
|
|
|
img.small_center {
|
|
width: 200px;
|
|
margin-left: 250px;
|
|
}
|
|
|
|
img.small {
|
|
width: 160px;
|
|
}
|
|
|
|
img.med {
|
|
width: 400px;
|
|
}
|
|
|
|
img.med_center {
|
|
width: 400px;
|
|
margin-left: 150px;
|
|
}
|
|
|
|
/*
|
|
* Remove default fieldset styles.
|
|
*/
|
|
|
|
fieldset {
|
|
border: 0;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
/*
|
|
* Allow only vertical resizing of textareas.
|
|
*/
|
|
|
|
textarea {
|
|
resize: vertical;
|
|
}
|
|
|
|
/*
|
|
//////////////////////////////////////////////////
|
|
HOMEPAGE
|
|
//////////////////////////////////////////////////
|
|
*/
|
|
.tagline {
|
|
display: none;
|
|
}
|
|
|
|
#home-page .home {
|
|
pointer-events: none;
|
|
}
|
|
|
|
#home-page .home a {
|
|
pointer-events: all;
|
|
}
|
|
|
|
#lockup > a {
|
|
position: relative;
|
|
display: block;
|
|
width: 200px;
|
|
height: 90px;
|
|
}
|
|
|
|
#logo_image {
|
|
position: absolute;
|
|
top: 0;
|
|
}
|
|
|
|
#menu.top_menu,
|
|
#menu {
|
|
list-style: none;
|
|
font-family: 'Montserrat', sans-serif;
|
|
width: 100%;
|
|
margin: 0 0 1em 0;
|
|
padding: 0;
|
|
height: 100%;
|
|
font-size: 1.3em;
|
|
}
|
|
|
|
#menu.top_menu li {
|
|
display: inline;
|
|
}
|
|
|
|
#home-sketch {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: -2;
|
|
}
|
|
|
|
/* <======== Styling for responsive menu bar ========> */
|
|
|
|
@media screen and (max-width: 780px) {
|
|
.sidebar-menu {
|
|
clear: both;
|
|
max-height: 0;
|
|
transition: max-height 0.4s ease-out;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.sidebar-menu-nav-element {
|
|
width: 91vw;
|
|
}
|
|
|
|
.sidebar-menu a {
|
|
display: block;
|
|
text-align: center;
|
|
padding-bottom: 0.11em;
|
|
border-bottom: 0.11em dashed transparent;
|
|
}
|
|
|
|
.sidebar-menu-icon {
|
|
top: 2rem;
|
|
cursor: pointer;
|
|
float: right;
|
|
padding: 28px 20px;
|
|
position: relative;
|
|
user-select: none;
|
|
margin-bottom: 5rem;
|
|
}
|
|
|
|
.sidebar-menu-icon .sidebar-nav-icon {
|
|
background: #ed225d;
|
|
display: block;
|
|
height: 2px;
|
|
position: relative;
|
|
transition: background 0.4s ease-out;
|
|
width: 18px;
|
|
}
|
|
|
|
.sidebar-menu-icon .sidebar-nav-icon:before,
|
|
.sidebar-menu-icon .sidebar-nav-icon:after {
|
|
background: #ed225d;
|
|
content: '';
|
|
display: block;
|
|
height: 100%;
|
|
position: absolute;
|
|
transition: all 0.4s ease-out;
|
|
width: 100%;
|
|
}
|
|
|
|
.sidebar-menu-icon .sidebar-nav-icon:before {
|
|
top: 5px;
|
|
}
|
|
|
|
.sidebar-menu-icon .sidebar-nav-icon:after {
|
|
top: -5px;
|
|
}
|
|
|
|
.sidebar-menu-btn {
|
|
display: none;
|
|
}
|
|
|
|
.sidebar-menu-btn:checked ~ .sidebar-menu {
|
|
max-height: 475px;
|
|
}
|
|
|
|
.sidebar-menu-btn:checked ~ .sidebar-menu-icon .sidebar-nav-icon {
|
|
background: transparent;
|
|
}
|
|
|
|
.sidebar-menu-btn:checked ~ .sidebar-menu-icon .sidebar-nav-icon:before {
|
|
transform: rotate(-45deg);
|
|
top: 0;
|
|
}
|
|
|
|
.sidebar-menu-btn:checked ~ .sidebar-menu-icon .sidebar-nav-icon:after {
|
|
transform: rotate(45deg);
|
|
top: 0;
|
|
}
|
|
}
|
|
|
|
.sidebar-menu-btn {
|
|
display: none;
|
|
}
|
|
|
|
/* <=================================================> */
|
|
|
|
#home-sketch-frame {
|
|
position: fixed;
|
|
width: 100%;
|
|
height: 100%;
|
|
left: 0;
|
|
top: 0;
|
|
z-index: -2;
|
|
overflow: hidden;
|
|
pointer-events: all;
|
|
border: 0;
|
|
}
|
|
|
|
#credits {
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
z-index: 2;
|
|
padding: 1em;
|
|
font-size: 0.7em;
|
|
}
|
|
|
|
#skip-to-content {
|
|
position: absolute;
|
|
left: 0px;
|
|
top: 40px;
|
|
z-index: 5;
|
|
background-color: #ed225d;
|
|
color: white;
|
|
width: auto;
|
|
height: 50px;
|
|
border: none;
|
|
outline-style: none;
|
|
text-align: center;
|
|
font-size: 25px;
|
|
padding: 5px;
|
|
opacity: 0;
|
|
}
|
|
|
|
#skip-to-content:focus {
|
|
opacity: 1;
|
|
}
|
|
|
|
/*
|
|
//////////////////////////////////////////////////
|
|
DOWNLOAD PAGE
|
|
//////////////////////////////////////////////////
|
|
*/
|
|
|
|
.button_box {
|
|
border: 1px solid #ed225d;
|
|
padding: 0.4em 0.6em;
|
|
margin: 0.5em 0;
|
|
color: #333;
|
|
font-family: 'Montserrat', sans-serif;
|
|
display: inline-block;
|
|
}
|
|
|
|
.download_box {
|
|
border: 1px solid #ed225d;
|
|
padding: 0.4em;
|
|
margin: 0 1.75em 0 0;
|
|
width: 18.65em;
|
|
float: left;
|
|
color: #333;
|
|
height: 7.45em;
|
|
position: relative;
|
|
}
|
|
|
|
.download_box:hover,
|
|
.button_box:hover {
|
|
border: 1px solid #ed225d;
|
|
background: #ed225d;
|
|
color: #ffffff;
|
|
}
|
|
|
|
.download_box.half_box {
|
|
width: 10.83em;
|
|
margin-right: 1.75em;
|
|
float: left;
|
|
}
|
|
|
|
.download_box.half_box.last_box {
|
|
margin-right: 0;
|
|
}
|
|
|
|
.download_box .download_name {
|
|
font-size: 1em;
|
|
margin: 0;
|
|
padding-bottom: 0.3em;
|
|
border-bottom: 0.09em dashed;
|
|
border-bottom-color: #ed225d;
|
|
line-height: 1.2;
|
|
font-family: 'Montserrat', sans-serif;
|
|
display: block;
|
|
}
|
|
|
|
.download_box:hover .download_name {
|
|
-webkit-text-stroke-width: 0;
|
|
border-bottom-color: #fff;
|
|
}
|
|
|
|
.download_box p {
|
|
font-size: 0.65em;
|
|
margin: 0;
|
|
position: absolute;
|
|
bottom: 1em;
|
|
}
|
|
|
|
.download_box svg {
|
|
height: 0.65em;
|
|
width: 0.65em;
|
|
position: absolute;
|
|
bottom: 3.5em;
|
|
}
|
|
|
|
.download_box:hover svg {
|
|
fill: white;
|
|
}
|
|
|
|
.download_box h4 + p {
|
|
display: block;
|
|
}
|
|
|
|
#download-page .link_group {
|
|
width: 100%;
|
|
margin-bottom: 3em;
|
|
}
|
|
|
|
.download_box {
|
|
margin-top: 1em;
|
|
}
|
|
|
|
.support div.download_box {
|
|
margin-top: 1em;
|
|
margin-bottom: 1em;
|
|
}
|
|
|
|
#download-page .support p {
|
|
font-size: 0.8em;
|
|
position: static;
|
|
margin-top: 0.3em;
|
|
}
|
|
|
|
#slideshow {
|
|
margin: 1em 0;
|
|
}
|
|
|
|
#slideshow p {
|
|
font-size: 0.8em;
|
|
color: #ababab;
|
|
line-height: 1.2em;
|
|
margin-top: 0.5em;
|
|
}
|
|
|
|
.extra {
|
|
color: white;
|
|
position: absolute;
|
|
bottom: 0.65em;
|
|
right: 0.9em;
|
|
font-weight: bold;
|
|
-ms-transform: rotate(-12deg);
|
|
-webkit-transform: rotate(-12deg);
|
|
transform: rotate(-12deg);
|
|
font-size: 0.8em;
|
|
}
|
|
|
|
/*
|
|
//////////////////////////////////////////////////
|
|
GET STARTED
|
|
//////////////////////////////////////////////////
|
|
*/
|
|
#get-started-page .edit_space {
|
|
position: relative;
|
|
order: 3;
|
|
}
|
|
#get-started-page .edit_space .copy_button{
|
|
color: #2d7bb6;
|
|
border-color: rgba(45, 123, 182, 0.25);
|
|
float: right;
|
|
margin: 0.5em 0 0 0.5em;
|
|
background: rgba(255, 255, 255, 0.7);
|
|
position: absolute;
|
|
z-index: 2;
|
|
left: 31.33em;
|
|
top: -1.5em;
|
|
}
|
|
/* To make get-started-page responsive */
|
|
@media (max-width: 780px) {
|
|
#get-started-page .edit_space .copy_button{
|
|
left: 6.44em;
|
|
}
|
|
}
|
|
@media (max-width: 600px) {
|
|
#get-started-page .edit_space .copy_button{
|
|
left: 5.91em;
|
|
}
|
|
}
|
|
/*
|
|
//////////////////////////////////////////////////
|
|
EXAMPLES
|
|
//////////////////////////////////////////////////
|
|
*/
|
|
|
|
#examples-page .column {
|
|
margin-bottom: 2em;
|
|
}
|
|
|
|
/*
|
|
//////////////////////////////////////////////////
|
|
REFERENCE
|
|
//////////////////////////////////////////////////
|
|
*/
|
|
|
|
#reference-page main h1 {
|
|
float: left;
|
|
}
|
|
|
|
.reference-group h2 {
|
|
font-size: 1.5em;
|
|
}
|
|
|
|
.reference-group h3 {
|
|
font-size: 1em;
|
|
font-family: 'Montserrat', sans-serif;
|
|
margin-top: 0.5em;
|
|
}
|
|
|
|
div.reference-group {
|
|
display: inline-block;
|
|
}
|
|
|
|
div.reference-subgroups {
|
|
margin: 0;
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
}
|
|
div.reference-subgroup {
|
|
width: 11em;
|
|
margin-bottom: 1em;
|
|
}
|
|
|
|
#reference-page .params table p {
|
|
/* Recently-added support for Markdown means that every parameter
|
|
* description is wrapped in a paragraph element. (Previously, they weren't
|
|
* wrapped in any kind of element.)
|
|
*
|
|
* We may eventually want to display paragraphs as blocks, so that we
|
|
* can have lengthy descriptions for parameters, but for now we'll
|
|
* keep our pre-existing behavior and essentially make paragraphs
|
|
* "invisible" by rendering them inline. */
|
|
display: inline;
|
|
font-size: inherit;
|
|
}
|
|
|
|
#reference-page .param-optional {
|
|
color: #afafaf;
|
|
}
|
|
|
|
#item {
|
|
width: 100%;
|
|
}
|
|
|
|
#item h2 {
|
|
margin: 0.777em 0 0 0;
|
|
font-size: 1.444em;
|
|
font-weight: inherit;
|
|
font-family: 'Inconsolata', consolas, monospace;
|
|
color: #00a1d3;
|
|
}
|
|
|
|
#item h3 {
|
|
font-size: 1.33em;
|
|
margin: 1em 0 0 0;
|
|
}
|
|
|
|
#item ul {
|
|
margin-top: 0.5em;
|
|
}
|
|
|
|
#item li {
|
|
margin-bottom: 1em;
|
|
}
|
|
|
|
.description {
|
|
clear: both;
|
|
display: block;
|
|
width: 100%;
|
|
}
|
|
|
|
.syntax pre {
|
|
width: 100%;
|
|
}
|
|
|
|
.item-wrapper,
|
|
.list-wrapper {
|
|
float: left;
|
|
outline: none;
|
|
}
|
|
|
|
.paramname {
|
|
display: inline-block;
|
|
min-width: 25%;
|
|
margin-right: 1%;
|
|
font-size: 1.2em;
|
|
}
|
|
|
|
.paramtype p {
|
|
display: inline;
|
|
font-size: 1em;
|
|
}
|
|
|
|
.paramtype {
|
|
display: inline-block;
|
|
font-size: 1.2em;
|
|
width: 73%;
|
|
vertical-align: top;
|
|
}
|
|
|
|
#library-page .group-name {
|
|
display: inline-block;
|
|
}
|
|
|
|
#library-page .group-name:hover {
|
|
color: #ed225d;
|
|
}
|
|
|
|
/* EXAMPLES IN REF */
|
|
|
|
.example div {
|
|
position: relative;
|
|
}
|
|
|
|
.example-content .example_code {
|
|
position: relative;
|
|
left: 1em;
|
|
padding-top: 0;
|
|
margin-top: 1rem;
|
|
border: none;
|
|
width: 30.5em;
|
|
max-width: 100%;
|
|
}
|
|
|
|
.example-content .example_code.norender {
|
|
left: 0px;
|
|
margin-left: 0;
|
|
}
|
|
|
|
.example-content .edit_space {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
margin-top: -0.5em;
|
|
width: 100%;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.example-content .edit_space * {
|
|
pointer-events: auto;
|
|
}
|
|
|
|
.example-content .edit_space ul {
|
|
display: flex;
|
|
flex-direction: row-reverse;
|
|
position: relative;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.example-content .edit_space ul li button {
|
|
font-family: 'Montserrat', sans-serif;
|
|
font-size: 1em;
|
|
color: #ccc;
|
|
border: 1px solid rgba(200, 200, 200, 0.15);
|
|
background: transparent;
|
|
outline: none;
|
|
margin-top: 0.25em;
|
|
}
|
|
|
|
.example-content .edit_space ul li button:hover,
|
|
.example_container.editing ul li button {
|
|
color: #2d7bb6;
|
|
border-color: rgba(45, 123, 182, 0.25);
|
|
}
|
|
|
|
.example-content .edit_space .edit_area {
|
|
position: absolute;
|
|
top: 0.5em;
|
|
left: 120px;
|
|
width: 30.5em;
|
|
padding-top: 1.5rem;
|
|
display: none;
|
|
}
|
|
|
|
.display_button {
|
|
margin-bottom: 2em;
|
|
font-family: 'Montserrat', sans-serif;
|
|
font-size: 1em;
|
|
color: #2d7bb6;
|
|
border: 1px solid rgba(45, 123, 182, 0.25);
|
|
background: transparent;
|
|
outline: none;
|
|
}
|
|
|
|
.example-content .example_container {
|
|
width: 36em;
|
|
max-width: 100%;
|
|
border-top: 0.09em dashed;
|
|
border-top-color: #333;
|
|
padding-top: 0.5em;
|
|
margin-top: 2em;
|
|
min-height: 120px;
|
|
height: calc(100% * 1.1 + 20px);
|
|
display: flex;
|
|
}
|
|
|
|
.example-content .example_container:first-of-type {
|
|
margin-top: 1em;
|
|
}
|
|
|
|
/*to make ref example responsive*/
|
|
@media (max-width: 600px) {
|
|
.example-content .example_code {
|
|
margin-top: 0.2rem;
|
|
left: 0.5rem;
|
|
}
|
|
|
|
.example-content .example_container {
|
|
width: 100%;
|
|
min-height: 220px;
|
|
height: calc(100% * 1.1 + 120px);
|
|
display: block;
|
|
}
|
|
|
|
.example-content .edit_space .edit_area {
|
|
top: calc(120px + 1em);
|
|
left: 0;
|
|
width: 100%;
|
|
padding: 0.5em;
|
|
}
|
|
|
|
.example_container button {
|
|
top: 124px;
|
|
}
|
|
|
|
.description {
|
|
margin-top: 3rem;
|
|
}
|
|
|
|
.edit_button {
|
|
left: 0;
|
|
}
|
|
|
|
.reset_button {
|
|
left: 2.58em;
|
|
}
|
|
|
|
.copy_button {
|
|
left: 5.91em;
|
|
}
|
|
}
|
|
|
|
form {
|
|
pointer-events: all;
|
|
}
|
|
|
|
#search_button {
|
|
background: url(../img/search.png) 100% no-repeat;
|
|
}
|
|
|
|
#search input[type='text'],
|
|
#search input[type='search'] {
|
|
border: 1px solid rgba(200, 200, 200, 0.5);
|
|
font-family: 'Montserrat', sans-serif;
|
|
font-size: 2.25em;
|
|
width: 9.75em;
|
|
}
|
|
|
|
#search ::-webkit-input-placeholder,
|
|
#search .twitter-typeahead .tt-hint {
|
|
color: #ccc;
|
|
}
|
|
|
|
:-moz-placeholder,
|
|
::-moz-placeholder,
|
|
:-ms-input-placeholder {
|
|
color: #ccc;
|
|
}
|
|
|
|
#search input[type='text']:focus {
|
|
color: #2d7bb6;
|
|
outline-color: #2d7bb6;
|
|
outline-width: 1px;
|
|
outline-style: solid;
|
|
}
|
|
|
|
#search .twitter-typeahead .tt-dropdown-menu {
|
|
background-color: #fff;
|
|
border: 1px solid rgba(0, 0, 0, 0.2);
|
|
overflow-y: auto;
|
|
font-size: 1em;
|
|
line-height: 1.4em;
|
|
}
|
|
|
|
#search .twitter-typeahead .tt-suggestion.tt-cursor {
|
|
color: #333;
|
|
background-color: #eee;
|
|
}
|
|
|
|
#search .twitter-typeahead .tt-suggestion p {
|
|
margin: 0;
|
|
}
|
|
|
|
#search .twitter-typeahead .tt-suggestion p .small {
|
|
font-size: 12px;
|
|
color: #666;
|
|
}
|
|
|
|
#search {
|
|
float: right;
|
|
}
|
|
|
|
#search .twitter-typeahead .tt-dropdown-menu {
|
|
border: 1px solid rgba(0, 0, 0, 0.2);
|
|
padding: 0.5em;
|
|
max-height: 200px;
|
|
overflow-y: auto;
|
|
font-size: 1em;
|
|
line-height: 1.4em;
|
|
}
|
|
|
|
#search .twitter-typeahead .tt-suggestion {
|
|
padding: 3px 20px;
|
|
line-height: 24px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
#search .twitter-typeahead .empty-message {
|
|
padding: 8px 20px 1px 20px;
|
|
font-size: 14px;
|
|
line-height: 24px;
|
|
}
|
|
|
|
#search_button {
|
|
float: right;
|
|
}
|
|
|
|
a.code.core {
|
|
color: #333;
|
|
}
|
|
|
|
a.code.addon {
|
|
color: #704f21;
|
|
}
|
|
|
|
/*
|
|
//////////////////////////////////////////////////
|
|
CONTRIBUTORS FORM
|
|
//////////////////////////////////////////////////
|
|
*/
|
|
|
|
/*
|
|
//////////////////////////////////////////////////
|
|
Contributors
|
|
//////////////////////////////////////////////////
|
|
*/
|
|
|
|
#contribute-item {
|
|
font-size: 0.75em;
|
|
text-align: left;
|
|
display: inline-block;
|
|
width: 320px;
|
|
height: 250px;
|
|
float: left;
|
|
border: 1px solid #ed225d;
|
|
margin: 0 25px 25px 0;
|
|
position: relative;
|
|
}
|
|
|
|
.contribute-item-container {
|
|
position: absolute;
|
|
z-index: 20;
|
|
margin: 0;
|
|
padding: 10px;
|
|
}
|
|
|
|
.container {
|
|
/* width: 100px;*/
|
|
height: 100px;
|
|
position: relative;
|
|
background: white;
|
|
margin-top: 1.5em; /* temp promo */
|
|
}
|
|
|
|
#navi,
|
|
#infoi {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
}
|
|
|
|
#infoi {
|
|
z-index: 10;
|
|
}
|
|
|
|
h3.contribute-title {
|
|
font-size: 1.33em;
|
|
margin: 0 0 27px 0;
|
|
padding-bottom: 0.3em;
|
|
border-bottom: 0.09em dashed;
|
|
border-bottom-color: #ed225d;
|
|
}
|
|
|
|
/*
|
|
//////////////////////////////////////////////////
|
|
LIBRARIES / LEARN
|
|
//////////////////////////////////////////////////
|
|
*/
|
|
|
|
.label {
|
|
position: relative;
|
|
}
|
|
|
|
.label .nounderline img {
|
|
margin: 0.5em 0 0 0;
|
|
}
|
|
|
|
.label h3 {
|
|
color: white;
|
|
position: absolute;
|
|
top: 0;
|
|
margin: 1em;
|
|
}
|
|
|
|
.label:hover h3 {
|
|
color: #ed225d;
|
|
}
|
|
|
|
h3 {
|
|
font-size: 1.33em;
|
|
margin: 1em 0 0 0;
|
|
}
|
|
|
|
.bullet-list {
|
|
padding: 0 0 0 40px;
|
|
list-style: disc;
|
|
}
|
|
|
|
#learn-page .label .nounderline img {
|
|
height: fit-content;
|
|
}
|
|
|
|
#learn-page .info {
|
|
display: inline-block;
|
|
}
|
|
|
|
#exampleDisplay,
|
|
#exampleFrame,
|
|
#exampleEditor {
|
|
width: 36em;
|
|
border: none;
|
|
}
|
|
|
|
#exampleDisplay {
|
|
display: flex;
|
|
flex-flow: column;
|
|
}
|
|
|
|
#popupExampleFrame {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
z-index: 1000;
|
|
border: none;
|
|
}
|
|
|
|
#exampleDisplay button {
|
|
color: #2d7bb6;
|
|
border-color: rgba(45, 123, 182, 0.25);
|
|
float: right;
|
|
margin: 0.5em 0 0 0.5em;
|
|
background: rgba(255, 255, 255, 0.7);
|
|
position: absolute;
|
|
left: 0;
|
|
z-index: 2;
|
|
}
|
|
|
|
#exampleDisplay .edit_button {
|
|
left: 25.42em;
|
|
top: -2.5em;
|
|
}
|
|
|
|
#exampleDisplay .reset_button {
|
|
left: 28em;
|
|
top: -2.5em;
|
|
}
|
|
|
|
#exampleDisplay .copy_button {
|
|
left: 31.33em;
|
|
top: -2.5em;
|
|
}
|
|
|
|
#exampleDisplay button:hover {
|
|
background: #fff;
|
|
}
|
|
|
|
#exampleDisplay .edit_space {
|
|
position: relative;
|
|
order: 3;
|
|
}
|
|
|
|
#exampleDisplay #exampleFrame {
|
|
height: 22em;
|
|
order: 2;
|
|
}
|
|
|
|
#exampleDisplay #exampleEditor {
|
|
height: 500em;
|
|
width: 710px;
|
|
overflow: hidden;
|
|
margin-top: 0.5em;
|
|
color: #222;
|
|
font-family: 'Inconsolata', consolas, monospace;
|
|
font-size: 1em;
|
|
background-color: #fff;
|
|
line-height: 1em;
|
|
order: 4;
|
|
}
|
|
|
|
#exampleDisplay #exampleEditor .ace_gutter-cell {
|
|
background-image: none;
|
|
padding-left: 10px;
|
|
overflow: hidden;
|
|
background-color: #afafaf;
|
|
}
|
|
|
|
#exampleDisplay #exampleEditor .ace_gutter-cell.ace_info {
|
|
background-color: #d7e5f5;
|
|
}
|
|
|
|
#exampleDisplay #exampleEditor .ace_gutter-cell.ace_warning {
|
|
background-color: #ffd700;
|
|
color: #ffffff;
|
|
}
|
|
|
|
#exampleDisplay #exampleEditor .ace_gutter-cell.ace_error {
|
|
background-color: #ff6347;
|
|
color: #ffffff;
|
|
}
|
|
|
|
/* property, tag, boolean,
|
|
number, function-name, constant,
|
|
symbol */
|
|
|
|
#exampleDisplay #exampleEditor .ace_numeric,
|
|
#exampleDisplay #exampleEditor .ace_tag {
|
|
color: #dc3787;
|
|
/* not p5 pink, but related */
|
|
}
|
|
|
|
/* atrule, attr-value, keyword,
|
|
class-name */
|
|
|
|
#exampleDisplay #exampleEditor .ace_type,
|
|
#exampleDisplay #exampleEditor .ace_class,
|
|
#exampleDisplay #exampleEditor .ace_attribute-name {
|
|
color: #704f21;
|
|
/* darker brown */
|
|
}
|
|
|
|
/* selector, attr-name,
|
|
function, builtin */
|
|
|
|
#exampleDisplay #exampleEditor .ace_function,
|
|
#exampleDisplay #exampleEditor .ace_keyword,
|
|
#exampleDisplay #exampleEditor .ace_support {
|
|
color: #00a1d3;
|
|
/* not p5 blue, but related */
|
|
}
|
|
|
|
/* comment, block-comment, prolog,
|
|
doctype, cdata */
|
|
|
|
#exampleDisplay #exampleEditor .ace_comment {
|
|
color: #a0a0a0;
|
|
/* light gray */
|
|
}
|
|
|
|
/* operator, entity, url,
|
|
variable */
|
|
|
|
#exampleDisplay #exampleEditor .ace_string {
|
|
color: #a67f59;
|
|
/* og coy a67f59 a light brown */
|
|
}
|
|
|
|
#exampleDisplay #exampleEditor .ace_operator {
|
|
color: #333;
|
|
}
|
|
|
|
/* regex, important */
|
|
|
|
#exampleDisplay #exampleEditor .ace_regexp {
|
|
color: #e90;
|
|
/* og coy e90 orange */
|
|
}
|
|
|
|
#exampleDisplay #exampleEditor .ace-gutter {
|
|
color: #333;
|
|
}
|
|
|
|
#exampleDisplay #exampleEditor .ace-gutter-layer {
|
|
color: #333;
|
|
}
|
|
|
|
#exampleDisplay #exampleEditor .ace_folding-enabled {
|
|
width: 10px !important;
|
|
color: #333;
|
|
}
|
|
|
|
.attribution {
|
|
background-color: #eee;
|
|
font-size: 15px;
|
|
padding: 10px;
|
|
margin: 30px 0px 30px 0px;
|
|
}
|
|
|
|
/*
|
|
//////////////////////////////////////////////////
|
|
SHOWCASE
|
|
//////////////////////////////////////////////////
|
|
*/
|
|
#featuring {
|
|
margin-bottom: 1em;
|
|
}
|
|
|
|
#showcase-page .showcase-intro h1 {
|
|
font: italic 900 14.5vw 'Montserrat', sans-serif;
|
|
color: #ed225d;
|
|
text-align: left;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
#showcase-page .showcase-intro p {
|
|
font: 400 1.4rem 'Montserrat', sans-serif;
|
|
line-height: 1.5em;
|
|
}
|
|
|
|
#showcase-page .showcase-featured h2,
|
|
#showcase-page .project-page h2 {
|
|
font: italic 900 2rem 'Montserrat', sans-serif;
|
|
color: #ed225d;
|
|
letter-spacing: 0.05rem;
|
|
}
|
|
|
|
#showcase-page ul.left-column,
|
|
#showcase-page ul.right-column,
|
|
#showcase-page ul.project-tags,
|
|
#showcase-page ul.links {
|
|
list-style: none;
|
|
}
|
|
|
|
#showcase-page img[alt] {
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
#showcase-page .showcase-featured {
|
|
margin-top: 15%;
|
|
}
|
|
|
|
#showcase-page .showcase-featured h3.title {
|
|
font: italic 900 1rem 'Montserrat', sans-serif;
|
|
}
|
|
|
|
#showcase-page .showcase-featured p.credit {
|
|
font: 500 1rem 'Montserrat', sans-serif;
|
|
}
|
|
|
|
#showcase-page .showcase-featured p.description {
|
|
font-size: 1em;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
#showcase-page .nominate {
|
|
margin-top: 1.5em;
|
|
display: inline-block;
|
|
}
|
|
|
|
#showcase-page .nominate a,
|
|
#showcase-page .nominate a:visited {
|
|
padding: 0.4em 0.5em;
|
|
position: relative;
|
|
top: 0px;
|
|
left: 0px;
|
|
border: solid #ed225d 2px;
|
|
box-shadow: 4px 4px 0 #ed225d;
|
|
|
|
font: 1.5rem 'Montserrat', sans-serif;
|
|
color: #ed225d;
|
|
letter-spacing: 0.02rem;
|
|
transition: all 0.3s;
|
|
}
|
|
|
|
@media (max-width: 500px) {
|
|
#showcase-page .nominate a,
|
|
#showcase-page .nominate a:visited {
|
|
padding: 0.4em 0.3em;
|
|
font: 1.3rem 'Montserrat', sans-serif;
|
|
}
|
|
}
|
|
|
|
#showcase-page .nominate a:hover {
|
|
top: 4px;
|
|
left: 4px;
|
|
box-shadow: none;
|
|
}
|
|
|
|
#showcase-page .showcase-featured a,
|
|
#showcase-page .showcase-featured a:visited {
|
|
font-size: 1.2rem;
|
|
color: #ed225d;
|
|
letter-spacing: 0.02rem;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
#showcase-page .showcase-featured a::after {
|
|
content: ' →';
|
|
}
|
|
#showcase-page .showcase-featured a.tag::after {
|
|
content: '';
|
|
}
|
|
#showcase-page .showcase-featured .no-arrow-link::after {
|
|
content: ' ';
|
|
}
|
|
|
|
#showcase-page .showcase-featured .no-arrow-link:hover {
|
|
text-decoration: none;
|
|
padding: none;
|
|
border: none;
|
|
}
|
|
|
|
.project-info {
|
|
margin-top: 1em;
|
|
}
|
|
|
|
ul.project-tags a {
|
|
line-height: 0;
|
|
display: -webkit-box;
|
|
display: -webkit-flex;
|
|
display: flex;
|
|
-webkit-flex-wrap: wrap;
|
|
flex-wrap: wrap;
|
|
font-size: 0.5em;
|
|
margin: 0px;
|
|
}
|
|
h3.title {
|
|
margin-top: 3em;
|
|
}
|
|
#showcase-page ul.project-tags li {
|
|
margin: 5px;
|
|
display: inline-block;
|
|
}
|
|
h2.featuring {
|
|
margin-top: 0px;
|
|
}
|
|
#showcase-page a.tag {
|
|
display: inline-block;
|
|
padding: 6px 14px;
|
|
background-color: #ffe8e8;
|
|
border-radius: 27px;
|
|
font: 0.7rem 'Montserrat', sans-serif;
|
|
color: #333;
|
|
}
|
|
#showcase-page ul.project-tags li {
|
|
margin: 0px;
|
|
}
|
|
/*
|
|
//////////////////////////////////////////////////
|
|
SHOWCASE - FEATURED PROJECT PAGE
|
|
//////////////////////////////////////////////////
|
|
*/
|
|
|
|
/* Link style for mobile and tablet screens (no :hover state) */
|
|
/*
|
|
@media (max-width: 991.98px){
|
|
#showcase-page .project-page a, #showcase-page .project-page a:visited {
|
|
color:#ED225D;
|
|
text-decoration: none;
|
|
padding-bottom: 0.11em;
|
|
border-bottom: 0.11em dashed;
|
|
border-bottom-color: #ED225D;
|
|
transition: border-bottom 30ms linear;
|
|
}
|
|
}
|
|
*/
|
|
|
|
#showcase-page{
|
|
margin-top: 3em;
|
|
}
|
|
|
|
#showcase-page .project-page h2 {
|
|
line-height: 1.4;
|
|
}
|
|
|
|
@media (min-width: 720px) {
|
|
/* for desktop/tablet:
|
|
* - two columns, one each for resources & authors
|
|
* - indent answer paragraphs in q & a
|
|
*/
|
|
|
|
#showcase-page .showcase-intro h1 {
|
|
font: italic 900 6.35vw 'Montserrat', sans-serif;
|
|
}
|
|
|
|
#showcase-page .showcase-intro p {
|
|
line-height: 1.75em;
|
|
font-size: 1em;
|
|
}
|
|
|
|
#showcase-page .project-metadata {
|
|
display: flex;
|
|
}
|
|
|
|
#showcase-page .project-resources {
|
|
margin-left: 3rem;
|
|
}
|
|
|
|
#showcase-page .project-a {
|
|
width: 90%;
|
|
float: right;
|
|
display: inline-block;
|
|
clear: both;
|
|
}
|
|
|
|
#showcase-page .half-image {
|
|
width: 48%;
|
|
}
|
|
}
|
|
|
|
#showcase-page .project-metadata {
|
|
margin-top: 3%;
|
|
}
|
|
|
|
#showcase-page .project-metadata section h3 {
|
|
color: #ed225d;
|
|
font: bold italic 1rem 'Montserrat', sans-serif;
|
|
}
|
|
|
|
#showcase-page .project-resources ul.links {
|
|
font: 500 0.7rem 'Montserrat', sans-serif;
|
|
letter-spacing: 0.01rem;
|
|
line-height: 1.5;
|
|
margin: 0.5rem 0;
|
|
}
|
|
|
|
#showcase-page .project-credit {
|
|
font: italic bold 1.25rem 'Montserrat', sans-serif;
|
|
}
|
|
|
|
#showcase-page .project-credit p {
|
|
margin: 0.5rem 0;
|
|
}
|
|
|
|
#showcase-page .note {
|
|
font-size: 0.7rem;
|
|
}
|
|
|
|
#showcase-page .creator-from {
|
|
font-size: 0.7rem;
|
|
}
|
|
|
|
#showcase-page .qa-group{
|
|
margin-bottom: 2em;
|
|
}
|
|
|
|
#showcase-page .project-q {
|
|
margin-left: 0%;
|
|
display: inline-block;
|
|
clear: both;
|
|
/*
|
|
font-size: 1.2rem;
|
|
font-weight: 900;
|
|
*/
|
|
font: 900 1.2rem 'Montserrat', sans-serif;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
#showcase-page code {
|
|
font-size: 1.1rem;
|
|
}
|
|
|
|
|
|
/* ==========================================================================
|
|
Teach Page
|
|
========================================================================== */
|
|
|
|
#teach-page .case-list a:hover {
|
|
border-bottom: none;
|
|
}
|
|
|
|
#teach-page .heading {
|
|
font: 400 1.4rem "Montserrat", sans-serif;
|
|
color: black;
|
|
line-height: 1.2em;
|
|
padding-bottom: .4em;
|
|
border-bottom: 4px dotted #ed225d;
|
|
}
|
|
|
|
#teach-page h3.title{
|
|
margin-top: 3em;
|
|
}
|
|
|
|
/*search-filter label*/
|
|
|
|
#teach-page .search-filter {
|
|
display: inline;
|
|
}
|
|
|
|
#teach-page .search-filter label {
|
|
display: inline-block;
|
|
font: italic 900 1rem "Montserrat", sans-serif;
|
|
padding: 6px 12px;
|
|
text-align: left;
|
|
white-space: nowrap;
|
|
color: #ed225d;
|
|
/*transition: .2s; */
|
|
margin-bottom: .6em;
|
|
margin-top: 1.2em;
|
|
border: 1px solid #ed225d;
|
|
|
|
|
|
}
|
|
|
|
#teach-page .search-filter label {
|
|
cursor: pointer;
|
|
}
|
|
|
|
|
|
#teach-page .search-filter label:hover {
|
|
color: white;
|
|
background-color: #ed225d;
|
|
}
|
|
|
|
|
|
#teach-page .search-filter input[type="checkbox"] {
|
|
display: absolute;
|
|
}
|
|
|
|
|
|
#teach-page .search-filter input[type="checkbox"] {
|
|
position: absolute;
|
|
opacity: 0;
|
|
}
|
|
|
|
|
|
#teach-page ul.filters p.filter-title {
|
|
font: 400 0.83rem "Montserrat", sans-serif;
|
|
color: #ed225d;
|
|
height: 50px;
|
|
padding-top:20px;
|
|
background: none;
|
|
background-color: none;
|
|
box-shadow: none;
|
|
display: inline-block;
|
|
border: none;
|
|
clear: both;
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
#teach-page ul.filters li {
|
|
display: inline;
|
|
list-style: none;
|
|
width: 100%;
|
|
}
|
|
|
|
#teach-page ul.filters li label {
|
|
display: inline-block;
|
|
border-radius: 25px;
|
|
font: 200 0.7rem "Montserrat", sans-serif;
|
|
/*font-style: normal;
|
|
font-variant: normal;
|
|
text-rendering: auto;
|
|
-webkit-font-smoothing: antialiased;*/
|
|
|
|
color: black;
|
|
white-space: nowrap;
|
|
margin: 3px 0px;
|
|
transition: .2s;
|
|
background: #fafafa;
|
|
}
|
|
|
|
#teach-page ul.filters li label {
|
|
padding: 6px 12px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
#teach-page ul.filters li label::before {
|
|
display: inline-block;
|
|
padding: 2px 2px 2px 2px; /*padding among labels*/
|
|
}
|
|
|
|
#teach-page ul.filters li label:hover {
|
|
color: #ed225d;
|
|
background: #ffe8e8;
|
|
/*transform: translateY(2px);*/
|
|
|
|
}
|
|
|
|
#teach-page ul.filters li input[type="checkbox"]:checked + label {
|
|
color: white;
|
|
background: #ed225d;
|
|
|
|
}
|
|
|
|
#teach-page ul.filters li input[type="checkbox"] {
|
|
display: absolute;
|
|
position: absolute;
|
|
opacity: 0;
|
|
}
|
|
|
|
|
|
#teach-page ul.filters li.clear{
|
|
display: block;
|
|
clear: both;
|
|
|
|
}
|
|
|
|
|
|
/*Filter Panel*/
|
|
|
|
#teach-page .filter-panel {
|
|
padding: 0px;
|
|
background-color: white;
|
|
max-height: 0;
|
|
overflow: hidden;
|
|
transition: max-height 0.2s ease-out;
|
|
margin-bottom: 0.8em;
|
|
padding-bottom: .4em;
|
|
|
|
}
|
|
|
|
|
|
|
|
#teach-page .filter-panel p {
|
|
margin: 0;
|
|
color: #333;
|
|
font-size: .83em;
|
|
height: 50px;
|
|
padding-top:20px;
|
|
transition: all 0.5s ease-in-out;
|
|
}
|
|
|
|
|
|
/*p5 workshop and class title*/
|
|
#teach-page .teach-intro p {
|
|
font: 400 1.2rem "Times", sans-serif;
|
|
line-height: 1.5em;
|
|
}
|
|
|
|
|
|
/*modal box*/
|
|
|
|
#teach-page .modal-title{
|
|
|
|
margin-left: 1em;
|
|
margin-right: 1em;
|
|
|
|
font: 400 1rem "Montserrat", sans-serif;
|
|
color: #ed225d;
|
|
line-height: 1.2em;
|
|
|
|
}
|
|
|
|
#teach-page ul.cases li.clear{
|
|
display: block;
|
|
clear: both;
|
|
margin-top: 1em;
|
|
margin-bottom: 1.2em;
|
|
}
|
|
|
|
|
|
#teach-page img{
|
|
margin-bottom: 1.4em;
|
|
}
|
|
|
|
#teach-page img[alt]{
|
|
font: 0.6rem "Montserrat", sans-serif;
|
|
color: #bababa;
|
|
|
|
}
|
|
|
|
#teach-page .close {
|
|
position: relative;
|
|
color: #ffc7c7;
|
|
float: right;
|
|
font-size: 40px;
|
|
font-weight: bold;
|
|
margin-right: .4em;
|
|
margin-top: .4em;
|
|
cursor:pointer;
|
|
}
|
|
|
|
#teach-page .close:hover, .close:focus {
|
|
color: #ed225d;
|
|
text-decoration: none;
|
|
cursor: pointer;
|
|
}
|
|
|
|
#teach-page .case label{
|
|
margin-left: 1em;
|
|
margin-right: 1em;
|
|
margin: 2px 2px;
|
|
padding: 5px 8px;
|
|
display: inline-block;
|
|
border-radius: 25px;
|
|
font: 0.7rem "Montserrat", sans-serif;
|
|
color: #aaaaaa;
|
|
white-space: nowrap;
|
|
color: white;
|
|
background: #ed225d;
|
|
}
|
|
|
|
/*modal scrollbar*/
|
|
|
|
#teach-page .modal-body::-webkit-scrollbar {
|
|
|
|
width: 5px;
|
|
height: 5px;
|
|
border-radius: 10px;
|
|
}
|
|
|
|
#teach-page .modal-body::-webkit-scrollbar-track {
|
|
background: #f1f1f1;
|
|
}
|
|
|
|
#teach-page .modal-body::-webkit-scrollbar-thumb {
|
|
background: #ffe8e8;
|
|
}
|
|
|
|
/*modal contents*/
|
|
|
|
#teach-page .case{
|
|
margin-left: 2em;
|
|
margin-right:2em;
|
|
}
|
|
|
|
#teach-page .case span {
|
|
color: #ed225d;
|
|
font: 900 1.4rem "Montserrat", sans-serif;
|
|
}
|
|
|
|
|
|
#teach-page .case p.lead-name{
|
|
font: 900 Italic 1.2rem "Montserrat", sans-serif;
|
|
color: #ed225d;
|
|
line-height: 1.4em;
|
|
border-bottom: 1.4em;
|
|
}
|
|
|
|
#teach-page .case .speech{
|
|
|
|
position: relative;
|
|
font: 200 Italic .8rem "Montserrat", sans-serif;
|
|
color: black; /*#aaaaaa; */
|
|
background: #ffe8e8;
|
|
padding: 0.5em 1.2em;
|
|
border-radius: .4em;
|
|
border-bottom: none;
|
|
margin-bottom: 2em;
|
|
margin-top: 1em;
|
|
|
|
|
|
}
|
|
|
|
#teach-page .case .speech::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 8%;
|
|
width: 0;
|
|
height: 0;
|
|
border: 10px solid transparent;
|
|
border-bottom-color: #ffe8e8;
|
|
border-top: 0;
|
|
margin-left: -10px;
|
|
margin-top: -10px;
|
|
}
|
|
|
|
#teach-page .case p.subtitle{
|
|
|
|
font: 400 1rem "Montserrat", sans-serif;
|
|
color: #ed225d;
|
|
line-height: 1.4em;
|
|
border-bottom: 0.1em dashed rgba(237, 34, 93, 0.15);
|
|
}
|
|
|
|
#teach-page .case p{
|
|
font: 400 1rem "Times", sans-serif;
|
|
color: black;
|
|
line-height: 1.4em;
|
|
|
|
border-bottom: 0.1em dashed rgba(237, 34, 93, 0.15);
|
|
|
|
}
|
|
|
|
#teach-page .modal-header{
|
|
|
|
margin-bottom: 0.8em;
|
|
}
|
|
|
|
|
|
#teach-page .modal-footer{
|
|
|
|
margin-bottom: 0.8em;
|
|
}
|
|
|
|
/*#teach-page .modal-body p{
|
|
border-bottom: 0.1em dashed rgba(237, 34, 93, 0.15);
|
|
|
|
}*/
|
|
|
|
#teach-page .modal-body:-webkit-scrollbar{
|
|
display: none;
|
|
}
|
|
|
|
|
|
#teach-page .modal {
|
|
display: none; /* Hidden by default */
|
|
position: fixed; /* Stay in place */
|
|
z-index: 100;
|
|
width: 100%;
|
|
height: 100%;
|
|
top:0;
|
|
left:0;
|
|
right:0;
|
|
overflow: auto;
|
|
box-sizing: border-box;
|
|
background-color: rgba(255, 232, 232, 0.5); /* Fallback color */
|
|
|
|
}
|
|
|
|
#teach-page .modal-content{
|
|
position: fixed;
|
|
background: white;
|
|
top: 2%;
|
|
left: 2%;
|
|
right: 2%;
|
|
bottom: 2%;
|
|
margin: auto; /*keep centered*/
|
|
border: 1.2px solid #ffe8e8;
|
|
max-width: 740px;
|
|
box-shadow: 10px 100px 30px -17px rgba(237, 34, 93, 0.5);
|
|
box-shadow: 10px 100px 20px -17px rgba(237, 34, 93, 0.5);
|
|
box-shadow: 10px 20px 10px -17px rgba(237, 34, 93, 0.5);
|
|
}
|
|
|
|
#teach-page .modal-body{
|
|
|
|
margin: auto;
|
|
height: 85%;
|
|
width: 95%;
|
|
overflow-y: auto;
|
|
|
|
}
|
|
|
|
#teach-page .results-wrapper{
|
|
width: 100%;
|
|
outline: none;
|
|
background: white;
|
|
/*background: white;
|
|
background: #fafafa;*/
|
|
/*border: solid white 1px;*/
|
|
/*background: -webkit-linear-gradient(to bottom, white, #fafafa);
|
|
background: linear-gradient(to bottom, white, #fafafa);*/
|
|
/*border: 1px solid #ffe8e8;*/
|
|
/*box-shadow: 10px 100px 30px -17px rgba(237, 34, 93, 0.5);
|
|
box-shadow: 10px 100px 20px -17px rgba(255, 232, 232, 0.5);
|
|
box-shadow: 10px 20px 10px -17px rgba(237, 34, 93, 0.5);*/
|
|
|
|
|
|
}
|
|
|
|
#teach-page .results-wrapper ul li.case-list a.myBtn {
|
|
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
|
|
}
|
|
|
|
#teach-page .case-list{
|
|
|
|
margin-bottom: 0.8em;
|
|
padding-bottom: .4em;
|
|
|
|
font: 400 1.0rem "Times", sans-serif;
|
|
line-height: 1.2em;
|
|
|
|
border-bottom: 0.1em dashed #ffe8e8;
|
|
|
|
}
|
|
|
|
/* ==========================================================================
|
|
Author's custom styles
|
|
========================================================================== */
|
|
|
|
/* apply a natural box layout model to all elements */
|
|
|
|
*,
|
|
*:before,
|
|
*:after {
|
|
-moz-box-sizing: border-box;
|
|
-webkit-box-sizing: border-box;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
html {
|
|
font-size: 1.25em;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
background-color: #fff;
|
|
font-family: 'Times';
|
|
font-weight: 400;
|
|
line-height: 1.45;
|
|
color: #333;
|
|
}
|
|
|
|
p {
|
|
font-size: 1.2em;
|
|
margin: 0.5em 0;
|
|
}
|
|
|
|
.freeze {
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* menu links */
|
|
|
|
#menu li a:link,
|
|
#menu li a:visited,
|
|
#menu li a:focus:active,
|
|
#menu li a:focus:hover {
|
|
color: #ed225d;
|
|
/* gray #333;
|
|
og p5 pink #ED225D;
|
|
blue #2D7BB6 (a lighter Processing blue — it's our take on it) */
|
|
/*outline: none !important; keep on for accessibility */
|
|
background: transparent;
|
|
-webkit-touch-callout: none;
|
|
-webkit-user-select: none;
|
|
-khtml-user-select: none;
|
|
-moz-user-select: none;
|
|
-ms-user-select: none;
|
|
user-select: none;
|
|
}
|
|
|
|
/* body links */
|
|
|
|
a:link,
|
|
a:visited {
|
|
color: #2d7bb6;
|
|
text-decoration: none;
|
|
/*outline: none !important; keep on for accessibility */
|
|
}
|
|
|
|
a:active,
|
|
a:hover,
|
|
#reference a:hover {
|
|
color: #ed225d;
|
|
text-decoration: none;
|
|
padding-bottom: 0.11em;
|
|
border-bottom: 0.11em dashed;
|
|
border-bottom-color: #ed225d;
|
|
transition: border-bottom 30ms linear;
|
|
}
|
|
|
|
a.nounderline:hover {
|
|
border: none;
|
|
}
|
|
|
|
a.here {
|
|
color: #ed225d;
|
|
text-decoration: none;
|
|
padding-bottom: 0.1em;
|
|
border-bottom: transparent;
|
|
border-bottom-color: #ed225d;
|
|
}
|
|
|
|
.highlight {
|
|
background-color: rgba(237, 34, 93, 0.15);
|
|
}
|
|
|
|
.container > div:first-of-type {
|
|
margin-top: 2em;
|
|
}
|
|
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
h5 {
|
|
margin: 1.414em 0 0.5em 0;
|
|
font-weight: inherit;
|
|
line-height: 1.2;
|
|
font-family: 'Montserrat', sans-serif;
|
|
}
|
|
|
|
h1 {
|
|
font-size: 2.25em;
|
|
/* 2.369em */
|
|
margin: 0;
|
|
}
|
|
|
|
h2 {
|
|
font-size: 1.5em;
|
|
/* 1.777em */
|
|
margin: 1em 0 0 0;
|
|
}
|
|
|
|
.code {
|
|
font-family: 'Inconsolata', consolas, monospace;
|
|
}
|
|
|
|
#backlink {
|
|
margin: 1.2em 0.444em 0 0;
|
|
font-family: 'Montserrat', sans-serif;
|
|
float: right;
|
|
}
|
|
|
|
#backlink a {
|
|
color: #afafaf;
|
|
}
|
|
|
|
#backlink a:hover {
|
|
color: #ed225d;
|
|
border-bottom: none;
|
|
}
|
|
|
|
/*
|
|
//////////////////////////////////////////////////
|
|
HEADER
|
|
//////////////////////////////////////////////////
|
|
*/
|
|
|
|
#promo,
|
|
#promo:visited {
|
|
width: 100%;
|
|
background: palegreen;
|
|
padding: 0;
|
|
margin: 0;
|
|
text-align: center;
|
|
padding: 0.4em 0;
|
|
background: rgb(116, 255, 183);
|
|
background: radial-gradient(
|
|
circle,
|
|
rgba(116, 255, 183, 1) 0%,
|
|
rgba(138, 255, 242, 1) 100%
|
|
);
|
|
font-family: 'Montserrat', sans-serif;
|
|
color: #ed225d !important;
|
|
}
|
|
|
|
#promo:hover {
|
|
background: #ed225d;
|
|
color: white !important;
|
|
}
|
|
|
|
#promo-link {
|
|
margin: 0 !important;
|
|
padding: 0;
|
|
}
|
|
|
|
#family a:link,
|
|
#family a:visited {
|
|
margin: 0.4em;
|
|
}
|
|
|
|
#family a:hover,
|
|
#family a:active {
|
|
margin: 0.4em;
|
|
border: none;
|
|
}
|
|
|
|
#family {
|
|
position: absolute;
|
|
z-index: 9999;
|
|
top: 0;
|
|
left: 0;
|
|
/*padding: 0.5em 2em;*/
|
|
width: 100%;
|
|
/* 96, 100% if fixed*/
|
|
border-bottom: 1px solid;
|
|
overflow: none;
|
|
margin: 0;
|
|
border-bottom-color: rgba(51, 51, 51, 0.5);
|
|
-webkit-box-shadow: 0px 0px 10px #333;
|
|
-moz-box-shadow: 0px 0px 10px #333;
|
|
box-shadow: 0px 0px 10px #333;
|
|
background-color: rgba(255, 255, 255, 0.85);
|
|
/* */
|
|
}
|
|
|
|
#processing-sites {
|
|
margin: 0.375em 0;
|
|
}
|
|
|
|
#processing-sites li {
|
|
list-style: none;
|
|
display: inline-block;
|
|
margin: 0;
|
|
}
|
|
|
|
#processing-sites li:first-child {
|
|
margin-left: 2em;
|
|
}
|
|
|
|
#processing-sites li:last-child {
|
|
float: right;
|
|
margin-right: 2em;
|
|
}
|
|
|
|
.code-snippet {
|
|
margin: 0 0 0 1em;
|
|
width: 90%;
|
|
clear: both;
|
|
}
|
|
|
|
.column-span {
|
|
margin: 0 0 0 1em;
|
|
padding: 0;
|
|
float: left;
|
|
max-width: 100%;
|
|
}
|
|
|
|
.method_description p {
|
|
margin-top: 0;
|
|
}
|
|
|
|
main {
|
|
padding: 0;
|
|
}
|
|
|
|
.spacer {
|
|
clear: both;
|
|
}
|
|
|
|
ul {
|
|
margin: 0;
|
|
padding: 0;
|
|
list-style: none;
|
|
}
|
|
|
|
ol {
|
|
font-size: 1.2em;
|
|
}
|
|
|
|
li {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
ul.list_view {
|
|
margin: 0.5em 0 0 1em;
|
|
padding: 0;
|
|
list-style: disc;
|
|
list-style-position: outside;
|
|
font-size: 1.2em;
|
|
}
|
|
|
|
ol ul.list_view {
|
|
font-size: 1em;
|
|
}
|
|
|
|
ul.inside {
|
|
margin: 0 0 0 2em;
|
|
padding: 0;
|
|
list-style: disc;
|
|
list-style-position: inside;
|
|
}
|
|
|
|
.image-row img {
|
|
width: 48%;
|
|
height: 14.3%;
|
|
}
|
|
|
|
.image-row img + img {
|
|
float: right;
|
|
margin-right: 0;
|
|
margin-bottom: 0.25em;
|
|
}
|
|
|
|
img,
|
|
main div img {
|
|
margin: 0.5em 0.5em 0 0;
|
|
width: 100%;
|
|
}
|
|
|
|
p + img {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.video {
|
|
width: 100%;
|
|
}
|
|
|
|
#lockup {
|
|
position: absolute;
|
|
top: -5.75em;
|
|
left: 1.25em;
|
|
height: 0px;
|
|
-webkit-touch-callout: none;
|
|
-webkit-user-select: none;
|
|
-khtml-user-select: none;
|
|
-moz-user-select: none;
|
|
-ms-user-select: none;
|
|
user-select: none;
|
|
}
|
|
|
|
#lockup object {
|
|
margin: 0;
|
|
padding: 0;
|
|
border: none;
|
|
}
|
|
|
|
#lockup a:focus {
|
|
outline: 0;
|
|
}
|
|
|
|
.logo {
|
|
margin: 0;
|
|
padding: 0;
|
|
border: none;
|
|
margin-bottom: 0.4em;
|
|
height: 4.5em;
|
|
width: 9.75em;
|
|
}
|
|
|
|
#lockup p {
|
|
color: #ed225d;
|
|
font-size: 0.7em;
|
|
font-family: 'Montserrat', sans-serif;
|
|
margin: 0.5em 0 0 8.5em;
|
|
}
|
|
|
|
#lockup a:link {
|
|
border: transparent;
|
|
height: 4.5em;
|
|
width: 9.75em;
|
|
}
|
|
|
|
.caption {
|
|
margin-bottom: 2.5em;
|
|
}
|
|
|
|
.caption span,
|
|
.caption p {
|
|
text-align: right;
|
|
font-size: 0.7em;
|
|
font-family: 'Montserrat', sans-serif;
|
|
padding-top: 0.25em;
|
|
}
|
|
|
|
footer {
|
|
clear: both;
|
|
border-top: 0.1em dashed;
|
|
border-top-color: #ed225d;
|
|
margin: 2em 0;
|
|
}
|
|
|
|
.videoWrapper {
|
|
position: relative;
|
|
padding-bottom: 56.25%; /* 16:9 */
|
|
height: 0;
|
|
margin-top: 0.5em;
|
|
}
|
|
.videoWrapper iframe {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
/* ==========================================================================
|
|
Helper classes
|
|
========================================================================== */
|
|
|
|
/*
|
|
* Image replacement
|
|
*/
|
|
|
|
.ir {
|
|
background-color: transparent;
|
|
border: 0;
|
|
overflow: hidden;
|
|
/* IE 6/7 fallback */
|
|
*text-indent: -9999px;
|
|
}
|
|
|
|
.ir:before {
|
|
content: '';
|
|
display: block;
|
|
width: 0;
|
|
height: 150%;
|
|
}
|
|
|
|
/*
|
|
* Hide from both screenreaders and browsers: h5bp.com/u
|
|
*/
|
|
|
|
.hidden {
|
|
display: none !important;
|
|
visibility: hidden;
|
|
}
|
|
|
|
/*
|
|
* Hide only visually, but have it available for screenreaders: h5bp.com/v
|
|
*/
|
|
|
|
.sr-only {
|
|
border: 0;
|
|
clip: rect(0 0 0 0);
|
|
height: 1px;
|
|
margin: -1px;
|
|
overflow: hidden;
|
|
padding: 0;
|
|
position: absolute;
|
|
width: 1px;
|
|
}
|
|
|
|
/*
|
|
* Extends the .visuallyhidden class to allow the element to be focusable
|
|
* when navigated to via the keyboard: h5bp.com/p
|
|
*/
|
|
|
|
.sr-only.focusable:active,
|
|
.sr-only.focusable:focus {
|
|
clip: auto;
|
|
height: auto;
|
|
margin: 0;
|
|
overflow: visible;
|
|
position: static;
|
|
width: auto;
|
|
}
|
|
|
|
/*
|
|
* Hide visually and from screenreaders, but maintain layout
|
|
*/
|
|
|
|
.invisible {
|
|
visibility: hidden;
|
|
}
|
|
|
|
/*
|
|
* Clearfix: contain floats
|
|
*
|
|
* For modern browsers
|
|
* 1. The space content is one way to avoid an Opera bug when the
|
|
* `contenteditable` attribute is included anywhere else in the document.
|
|
* Otherwise it causes space to appear at the top and bottom of elements
|
|
* that receive the `clearfix` class.
|
|
* 2. The use of `table` rather than `block` is only necessary if using
|
|
* `:before` to contain the top-margins of child elements.
|
|
*/
|
|
|
|
.clearfix:before,
|
|
.clearfix:after {
|
|
content: ' ';
|
|
/* 1 */
|
|
display: table;
|
|
/* 2 */
|
|
}
|
|
|
|
.clearfix:after {
|
|
clear: both;
|
|
}
|
|
|
|
/*
|
|
* For IE 6/7 only
|
|
* Include this rule to trigger hasLayout and contain floats.
|
|
*/
|
|
|
|
.clearfix {
|
|
*zoom: 1;
|
|
}
|
|
|
|
/* ==========================================================================
|
|
Responsive design
|
|
========================================================================== */
|
|
|
|
#notMobile-message {
|
|
display: none;
|
|
order: 1;
|
|
}
|
|
|
|
#isMobile-displayButton {
|
|
display: none;
|
|
}
|
|
|
|
#asterisk-design-element,
|
|
.separator-design-element {
|
|
display: none;
|
|
}
|
|
|
|
.pointerevents #asterisk-design-element,
|
|
.pointerevents .separator-design-element {
|
|
pointer-events: none;
|
|
display: inline-block;
|
|
}
|
|
|
|
@media (min-width: 780px) {
|
|
.container {
|
|
width: 49em !important;
|
|
margin: 11.5em auto; /* temp promo, 10.0em */
|
|
}
|
|
main {
|
|
width: 36em;
|
|
padding: 0 !important;
|
|
}
|
|
footer {
|
|
width: 48em;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 780px) {
|
|
.container {
|
|
margin: 11.5em auto; /* temp promo, 10.0em */
|
|
width: 100%;
|
|
padding: 0.8em 0 0 0;
|
|
height: auto;
|
|
min-height: 100%;
|
|
}
|
|
#home-page {
|
|
display: flex;
|
|
flex-wrap: row;
|
|
}
|
|
main {
|
|
padding: 0 1em 0 0;
|
|
}
|
|
small,
|
|
.small,
|
|
footer,
|
|
#family {
|
|
font-size: 0.7em;
|
|
}
|
|
footer {
|
|
clear: both;
|
|
/*margin: 4em 0 2em -.75em;*/
|
|
}
|
|
#i18n-btn {
|
|
position: absolute;
|
|
top: 4.0em; /* temp promo, 2.5em */
|
|
right: 1em;
|
|
}
|
|
#i18n-btn a {
|
|
font-family: 'Montserrat', sans-serif;
|
|
}
|
|
#menu {
|
|
list-style: none;
|
|
font-family: 'Montserrat', sans-serif;
|
|
margin: 0 0.75em 0 -1.85em;
|
|
/* margin-right: 0.75em; */
|
|
width: 7.3em;
|
|
height: 100%;
|
|
/*float:left;*/
|
|
border-top: transparent;
|
|
border-bottom: transparent;
|
|
padding: 0;
|
|
font-size: 0.83em;
|
|
z-index: 100;
|
|
position: relative;
|
|
top: 0;
|
|
}
|
|
#menu li {
|
|
float: none;
|
|
margin: 0 0 1em 0;
|
|
text-align: right;
|
|
}
|
|
/* #menu li:last-child {
|
|
margin: 0;
|
|
} */
|
|
/* #menu .other-link::after {
|
|
content:"\2192";
|
|
margin-right: -0.98em;
|
|
content:" »";
|
|
} */
|
|
#menu li:nth-child(11) {
|
|
margin-top: 3em;
|
|
padding-top: 0.5em;
|
|
/*border-top: 0.06em solid rgba(51,51,51,0.25);*/
|
|
}
|
|
.left-column {
|
|
width: 48%;
|
|
float: left;
|
|
margin-bottom: 40px;
|
|
}
|
|
.right-column {
|
|
width: 48%;
|
|
float: right;
|
|
margin-right: 0;
|
|
margin-bottom: 0.25em;
|
|
}
|
|
.narrow-left-column {
|
|
width: 32%;
|
|
float: left;
|
|
}
|
|
.wide-right-column {
|
|
width: 64%;
|
|
float: right;
|
|
margin-right: 0;
|
|
margin-bottom: 0.25em;
|
|
}
|
|
.book {
|
|
font-size: 0.7em;
|
|
}
|
|
.column_0,
|
|
.column_1,
|
|
.column_2 {
|
|
float: left;
|
|
width: 11.333em;
|
|
}
|
|
.column_0,
|
|
.column_1 {
|
|
margin-right: 1em;
|
|
}
|
|
#collection-list-nav {
|
|
width: 100%;
|
|
clear: both;
|
|
border-bottom: 1px dashed rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
#collection-list-categories {
|
|
font-family: 'Montserrat', sans-serif;
|
|
display: flex;
|
|
flex-direction: row;
|
|
margin: 1em 0 1.5em 0;
|
|
}
|
|
#collection-list-categories ul {
|
|
flex: 1;
|
|
}
|
|
#collection-list {
|
|
margin: 0;
|
|
}
|
|
.group-name.first {
|
|
margin-top: 0 !important;
|
|
}
|
|
.column.group-name {
|
|
margin-bottom: 1em;
|
|
}
|
|
|
|
#library-page .group-name {
|
|
margin: 2em 0 0.5em 0;
|
|
}
|
|
#library-page .column {
|
|
margin-top: 1em;
|
|
}
|
|
#list {
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
margin-bottom: 1em;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 780px) {
|
|
.tagline {
|
|
display: none !important;
|
|
}
|
|
|
|
#family {
|
|
display: none;
|
|
}
|
|
|
|
#i18n-btn {
|
|
position: absolute;
|
|
top: 0.5em;
|
|
right: 0.7em;
|
|
z-index: 10;
|
|
}
|
|
|
|
#search {
|
|
width: 100%;
|
|
float: left;
|
|
margin-bottom: 1em;
|
|
}
|
|
|
|
#search input[type='text'] {
|
|
width: 100%;
|
|
}
|
|
|
|
#search input[type='text'],
|
|
#search input[type='search'] {
|
|
font-size: 1.5em;
|
|
}
|
|
|
|
#lockup {
|
|
position: absolute;
|
|
top: 2em;
|
|
left: 1em;
|
|
}
|
|
.column-span {
|
|
margin:0;
|
|
padding: 0 1em;
|
|
float: left;
|
|
}
|
|
#menu.top_menu,
|
|
#menu {
|
|
margin: 6em 0 0.5em 0;
|
|
font-size: 1.3em;
|
|
}
|
|
#menu li {
|
|
display: inline-block;
|
|
}
|
|
|
|
#menu li:nth-last-child(1) a::after {
|
|
content: '';
|
|
}
|
|
|
|
#menu li a::after {
|
|
content: ',';
|
|
}
|
|
|
|
#contribute-item:first-child {
|
|
margin-left: 0px;
|
|
}
|
|
.download_box {
|
|
width: 96%;
|
|
}
|
|
.download_box.half_box {
|
|
width: 46%;
|
|
margin-right: 4%;
|
|
float: left;
|
|
}
|
|
#etc_list {
|
|
font-size: 1.2em;
|
|
margin-top: 1em;
|
|
}
|
|
#asterisk-design-element,
|
|
.separator-design-element {
|
|
display: none !important;
|
|
pointer-events: none;
|
|
}
|
|
pre[class*='language-'] {
|
|
padding: 0.5em 0.5em;
|
|
width: 100%;
|
|
}
|
|
|
|
code {
|
|
word-wrap: break-word;
|
|
word-break: break-all;
|
|
}
|
|
#credits {
|
|
position: relative !important;
|
|
z-index: 2;
|
|
margin-top: -7em;
|
|
padding: 0 2em 3em 1em;
|
|
font-size: 0.5em;
|
|
float: right;
|
|
width: 100%;
|
|
text-align: right;
|
|
display: none;
|
|
/* HIDDEN SKETCH */
|
|
}
|
|
#home-sketch-frame {
|
|
display: none;
|
|
/* HIDDEN SKETCH */
|
|
}
|
|
#exampleDisplay,
|
|
#exampleFrame,
|
|
#exampleDisplay #exampleEditor {
|
|
width: 100%;
|
|
}
|
|
#exampleDisplay .edit_button {
|
|
left: -0.58em;
|
|
}
|
|
#exampleDisplay .reset_button {
|
|
left: 3em;
|
|
}
|
|
#exampleDisplay .copy_button {
|
|
left: 6.44em;
|
|
}
|
|
#exampleEditor {
|
|
margin-top: 3em;
|
|
}
|
|
small,
|
|
.small,
|
|
footer {
|
|
font-size: 0.5em;
|
|
}
|
|
.paramtype {
|
|
width: 96%;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 400px) {
|
|
#i18n {
|
|
margin-top: 0.75em !important;
|
|
}
|
|
body {
|
|
margin-top: -0.75em !important;
|
|
}
|
|
}
|
|
|
|
iframe {
|
|
border: none;
|
|
width: 100%;
|
|
}
|
|
|
|
.iframe-container {
|
|
overflow: hidden;
|
|
position: relative;
|
|
}
|
|
|
|
.iframe-container iframe {
|
|
border: 0;
|
|
height: 100%;
|
|
left: 0;
|
|
position: absolute;
|
|
top: 0;
|
|
width: 100%;
|
|
}
|
|
|
|
.cnv_div {
|
|
/* This ensures that all canvases and additional html elements (if any) from
|
|
* the example code snippets are only 100px wide rather than covering the
|
|
* entire page, which potentially obscures the example code. */
|
|
display: inline-flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.cnv_div > * {
|
|
width: 100px;
|
|
height: auto;
|
|
}
|
|
|
|
/*
|
|
//////////////////////////////////////////////////
|
|
LANGUAGE BUTTONS
|
|
//////////////////////////////////////////////////
|
|
*/
|
|
|
|
#i18n-buttons {
|
|
margin: 0;
|
|
background: white;
|
|
}
|
|
|
|
#i18n-buttons li {
|
|
list-style: none;
|
|
display: inline-block;
|
|
margin-left: 0.5em;
|
|
}
|
|
|
|
#i18n-btn a {
|
|
border: none;
|
|
outline: none;
|
|
font-size: 0.7em;
|
|
color: #696969;
|
|
z-index: 5;
|
|
}
|
|
|
|
#i18n-btn a:hover {
|
|
color: #ed225d;
|
|
}
|
|
|
|
#i18n-btn a.disabled {
|
|
color: #ed225d;
|
|
cursor: default;
|
|
}
|
|
|
|
/*
|
|
//////////////////////////////////////////////////
|
|
ASTERISKS
|
|
//////////////////////////////////////////////////
|
|
*/
|
|
|
|
/* constants for the asterisk */
|
|
|
|
#asterisk-design-element {
|
|
position: fixed;
|
|
z-index: -1;
|
|
opacity: 0.6;
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* variations for asterisks on pages */
|
|
|
|
.separator-design-element {
|
|
width: 0.33em;
|
|
height: 0.33em;
|
|
margin: 0 0.09em 0.18em 0.09em;
|
|
display: inline-block;
|
|
overflow: hidden;
|
|
text-indent: -100%;
|
|
background: transparent
|
|
url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyOCIgaGVpZ2h0PSIyOCIgdmlld0JveD0iMCAwIDI4IDI4Ij48cGF0aCBkPSJNMTYuOSAxMC4zbDguNS0yLjYgMS43IDUuMiAtOC41IDIuOSA1LjMgNy41IC00LjQgMy4yIC01LjYtNy4zTDguNSAyNi4zbC00LjMtMy4zIDUuMy03LjJMMC45IDEyLjZsMS43LTUuMiA4LjYgMi44VjEuNGg1LjhWMTAuM3oiIHN0eWxlPSJmaWxsOiNFRDIyNUQ7c3Ryb2tlOiNFRDIyNUQiLz48L3N2Zz4=');
|
|
background-size: 0.33em;
|
|
}
|
|
|
|
#home-page #asterisk-design-element {
|
|
bottom: -8%;
|
|
right: 20%;
|
|
height: 12em;
|
|
width: 12em;
|
|
opacity: 1;
|
|
}
|
|
|
|
#learn-page #asterisk-design-element,
|
|
#examples-page #asterisk-design-element,
|
|
#other-content-types-page #asterisk-design-element {
|
|
bottom: -14%;
|
|
left: -20%;
|
|
height: 25em;
|
|
width: 25em;
|
|
-webkit-transform: rotate(-1deg);
|
|
-moz-transform: rotate(-1deg);
|
|
-ms-transform: rotate(-1deg);
|
|
-o-transform: rotate(-1deg);
|
|
transform: rotate(-1deg);
|
|
}
|
|
|
|
#libraries-page #asterisk-design-element,
|
|
#books-page #asterisk-design-element {
|
|
bottom: -19%;
|
|
right: -16%;
|
|
height: 28em;
|
|
width: 28em;
|
|
-webkit-transform: rotate(2deg);
|
|
-moz-transform: rotate(2deg);
|
|
-ms-transform: rotate(2deg);
|
|
-o-transform: rotate(2deg);
|
|
transform: rotate(2deg);
|
|
}
|
|
|
|
#get-started-page #asterisk-design-element,
|
|
#community-page #asterisk-design-element {
|
|
top: 10%;
|
|
right: -20%;
|
|
height: 30em;
|
|
width: 30em;
|
|
-webkit-transform: rotate(2deg);
|
|
-moz-transform: rotate(2deg);
|
|
-ms-transform: rotate(2deg);
|
|
-o-transform: rotate(2deg);
|
|
transform: rotate(2deg);
|
|
}
|
|
|
|
#reference-page #asterisk-design-element,
|
|
#download-page #asterisk-design-element {
|
|
top: 7%;
|
|
left: 1%;
|
|
height: 10em;
|
|
width: 10em;
|
|
-webkit-transform: rotate(-21deg);
|
|
-moz-transform: rotate(-21deg);
|
|
-ms-transform: rotate(-21deg);
|
|
-o-transform: rotate(-21deg);
|
|
transform: rotate(-21deg);
|
|
}
|
|
|
|
.email-octopus-email-address {
|
|
color: #ed225d;
|
|
text-decoration: none;
|
|
padding-bottom: 0.11em;
|
|
outline: none;
|
|
border: none;
|
|
border-bottom: 0.11em dashed;
|
|
border-bottom-color: #ed225d;
|
|
transition: border-bottom 30ms linear;
|
|
width: 13em;
|
|
}
|
|
|
|
.email-octopus-form-row-hp {
|
|
position: absolute;
|
|
left: -5000px;
|
|
}
|
|
|
|
.email-octopus-form-row button {
|
|
border: 1px solid #ed225d;
|
|
color: #ed225d;
|
|
padding: 0.4em 0.6em;
|
|
margin: 1em 0 0 0;
|
|
font-family: 'Montserrat', sans-serif;
|
|
display: block;
|
|
}
|
|
|
|
.email-octopus-form-row button:hover {
|
|
background-color: #ed225d;
|
|
color: white;
|
|
}
|
|
|
|
.email-octopus-email-address::-webkit-input-placeholder {
|
|
color: #ababab;
|
|
}
|
|
.email-octopus-email-address::-moz-placeholder {
|
|
color: #ababab;
|
|
}
|
|
.email-octopus-email-address:-moz-placeholder {
|
|
color: #ababab;
|
|
}
|
|
.email-octopus-email-address:-ms-input-placeholder {
|
|
color: #ababab;
|
|
}
|
|
|
|
@media (min-width: 720px) {
|
|
.email-octopus-email-address {
|
|
width: 16em;
|
|
}
|
|
|
|
.email-octopus-form-row button {
|
|
margin: 0;
|
|
margin-left: 0.5em;
|
|
display: inline;
|
|
}
|
|
}
|