Craig Erskine
142 lines
7.4 KiB
CSS
Executable File
142 lines
7.4 KiB
CSS
Executable File
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
|
|
html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}
|
|
|
|
/* variables */
|
|
:root {
|
|
--color-black: #141923;
|
|
--color-white: #fff;
|
|
--color-gray-100: #f7fafc;
|
|
--color-gray-200: #edf2f7;
|
|
--color-gray-300: #e2e8f0;
|
|
--color-gray-400: #cbd5e0;
|
|
--color-gray-500: #a0aec0;
|
|
--color-gray-600: #718096;
|
|
--color-gray-700: #4a5568;
|
|
--color-gray-800: #2d3748;
|
|
--color-gray-900: #1a202c;
|
|
--color-red-100: #fff5f5;
|
|
--color-red-200: #fed7d7;
|
|
--color-red-300: #feb2b2;
|
|
--color-red-400: #fc8181;
|
|
--color-red-500: #f56565;
|
|
--color-red-600: #e53e3e;
|
|
--color-red-700: #c53030;
|
|
--color-red-800: #9b2c2c;
|
|
--color-red-900: #742a2a;
|
|
--color-yellow-100: #fffff0;
|
|
--color-yellow-200: #fefcbf;
|
|
--color-yellow-300: #faf089;
|
|
--color-yellow-400: #f6e05e;
|
|
--color-yellow-500: #ecc94b;
|
|
--color-yellow-600: #d69e2e;
|
|
--color-yellow-700: #b7791f;
|
|
--color-yellow-800: #975a16;
|
|
--color-yellow-900: #744210;
|
|
--color-green-100: #f0fff4;
|
|
--color-green-200: #c6f6d5;
|
|
--color-green-300: #9ae6b4;
|
|
--color-green-400: #68d391;
|
|
--color-green-500: #48bb78;
|
|
--color-green-600: #38a169;
|
|
--color-green-700: #2f855a;
|
|
--color-green-800: #276749;
|
|
--color-green-900: #22543d;
|
|
--color-blue-100: #ebf8ff;
|
|
--color-blue-200: #bee3f8;
|
|
--color-blue-300: #90cdf4;
|
|
--color-blue-400: #63b3ed;
|
|
--color-blue-500: #4299e1;
|
|
--color-blue-600: #3182ce;
|
|
--color-blue-700: #2b6cb0;
|
|
--color-blue-800: #2c5282;
|
|
--color-blue-900: #2a4365;
|
|
--color-purple-100: #faf5ff;
|
|
--color-purple-200: #e9d8fd;
|
|
--color-purple-300: #d6bcfa;
|
|
--color-purple-400: #b794f4;
|
|
--color-purple-500: #9f7aea;
|
|
--color-purple-600: #805ad5;
|
|
--color-purple-700: #6b46c1;
|
|
--color-purple-800: #553c9a;
|
|
--color-purple-900: #44337a;
|
|
--color-pink-100: #fff5f7;
|
|
--color-pink-200: #fed7e2;
|
|
--color-pink-300: #fbb6ce;
|
|
--color-pink-400: #f687b3;
|
|
--color-pink-500: #ed64a6;
|
|
--color-pink-600: #d53f8c;
|
|
--color-pink-700: #b83280;
|
|
--color-pink-800: #97266d;
|
|
--color-pink-900: #702459;
|
|
}
|
|
|
|
/* elements */
|
|
body { padding: 1rem 1rem 0; background: var(--color-black); color: var(--color-gray-400); font: 1rem/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; }
|
|
h1,h2,h3,h4,h5,h6 { margin: 0 0 1rem; }
|
|
p,ul,ol { margin: 0 0 1rem; }
|
|
ul ul,ul ol,ol ol,ol ul { margin-bottom: 0; }
|
|
img,svg { max-width: 100%; height: auto; vertical-align: middle; }
|
|
|
|
a { color: var(--color-blue-500); font-weight: bold; }
|
|
a:hover,a:focus { color: var(--color-blue-700); }
|
|
|
|
/* classes */
|
|
.block { display: block }
|
|
.inline-block { display: inline-block }
|
|
.inline { display: inline }
|
|
.flex { display: flex }
|
|
.flex-col { flex-direction: column; }
|
|
.flex-1 { flex: 1 1 0%; }
|
|
|
|
.btn { padding: .1rem 1rem; background: transparent; font-weight: bold; font-size: .875rem; line-height: normal; text-decoration: none; display: inline-block; border-radius: 100rem; }
|
|
.btn-red { background: var(--color-red-600); color: #FFF; }
|
|
.btn-red:hover,.btn-red:focus { background: var(--color-red-800); color: #FFF; }
|
|
|
|
header { margin-bottom: 1rem; padding-bottom: 1rem; border-bottom: 2px solid var(--color-gray-800); text-align: center; display: flex; align-items: center; justify-content: center; }
|
|
header .oe-logo { margin-right: 1rem; max-width: 4rem; }
|
|
header p { margin: 0; }
|
|
header p small { padding: .3rem 0; display: block; }
|
|
|
|
section { padding: 0 0 2.5rem; position: relative; }
|
|
section h4 { margin-bottom: 2rem; padding-left: 2.5rem; font-size: 1rem; line-height: 1.5rem; display: flex; flex-wrap: wrap; align-items: center; }
|
|
section h4 b { margin-left: .5rem; font-size: .875rem; opacity: .5; }
|
|
section h4 small { padding: .2rem 0; width: 100%; color: var(--color-red-600); font-size: .875rem; display: block; }
|
|
section ul { margin: 0 0 2rem; padding: 0; list-style: none; }
|
|
section li { margin-bottom: 1rem; padding: 0 0 0 2.5rem; font-size: .875rem; line-height: 1.2rem; position: relative; }
|
|
section li:before { margin: -3px 0 0 -3px; width: 6px; height: 6px; background: currentColor; display: block; content: ""; position: absolute; top: .6rem; left: .75rem; border-radius: 6px; }
|
|
section h5 { margin-bottom: 2rem; padding-left: 2.5rem; color: var(--color-yellow-500); }
|
|
|
|
/* timeline ui */
|
|
section:before { width: 1.5rem; height: 1.5rem; display: block; content: ""; opacity: .33; position: absolute; top: 0; left: 0; border-radius: 1.5rem; box-shadow: inset 0 0 0 2px currentColor; }
|
|
section:first-child:before { background: currentColor; }
|
|
section:after { margin-left: -1px; width: 2px; background: currentColor; opacity: .1; content: ""; position: absolute; top: 1.5rem; bottom: 0; left: .75rem; }
|
|
section:last-child:after { bottom: 2.5rem; }
|
|
section:last-child > ul:last-child:before { margin-bottom: -2px; width: 1.5rem; height: 2px; background: currentColor; display: block; opacity: .1; content: ""; position: absolute; bottom: 2.5rem; left: 0; }
|
|
|
|
/* breakpoints */
|
|
@media (min-width: 640px) {}
|
|
|
|
@media (min-width: 768px) {
|
|
.ui { margin: 0 auto; max-width: 1140px; display: flex; }
|
|
|
|
header { margin: 0; padding: 0; border: 0 none; display: block; }
|
|
header .oe-logo { margin: 0; max-width: none; }
|
|
|
|
main { margin-left: 2rem; flex: 1 1 0%; }
|
|
|
|
section h4 { font-size: 1.5rem; }
|
|
section h4 b { font-size: 1rem; }
|
|
section h4 small { font-size: 1rem; }
|
|
section li { font-size: 1rem; }
|
|
section h5 + ul li { font-size: .875rem; }
|
|
section h5 { font-size: 1rem; }
|
|
}
|
|
|
|
@media (min-width: 1024px) {}
|
|
|
|
/* prefers light mode */
|
|
@media (prefers-color-scheme: light) {
|
|
body { background: var(--color-gray-100); color: var(--color-gray-800); }
|
|
header { border-color: var(--color-gray-400); }
|
|
section h5 { color: var(--color-yellow-600); }
|
|
} |