409 lines
9.6 KiB
CSS
409 lines
9.6 KiB
CSS
/*
|
|
https://github.com/murtaugh/HTML5-Reset/
|
|
*/
|
|
|
|
html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, menu, nav, section, time, mark, audio, video, details, summary {margin: 0; padding: 0; border: 0; font-size: 100%; font-weight: normal; vertical-align: baseline; background: transparent;}
|
|
|
|
main, article, aside, figure, footer, header, nav, section, details, summary {display: block;}
|
|
|
|
html {box-sizing: border-box;}
|
|
|
|
*, *:before, *:after {box-sizing: inherit;}
|
|
|
|
img {max-width: 100%;}
|
|
|
|
ul {list-style: none;} /* we'll restore bullets as needed for content */
|
|
|
|
blockquote, q {quotes: none;}
|
|
|
|
blockquote:before, blockquote:after, q:before, q:after {content: ''; content: none;}
|
|
|
|
a {margin: 0; padding: 0; font-size: 100%; vertical-align: baseline; background: transparent;}
|
|
|
|
del {text-decoration: line-through;}
|
|
|
|
abbr[title], dfn[title] {border-bottom: 1px dotted #000; cursor: help;}
|
|
|
|
table {border-collapse: separate; border-spacing: 0; text-align: left;}
|
|
th {font-weight: bold; vertical-align: bottom;}
|
|
td {font-weight: normal; vertical-align: top;}
|
|
td img {vertical-align: top;}
|
|
|
|
hr {display: block; height: 1px; border: 0; border-top: 1px solid #999; margin: 1rem 0; padding: 0;}
|
|
|
|
input, select {vertical-align: middle;}
|
|
|
|
pre {white-space: pre-line;}
|
|
|
|
input[type="radio"] {vertical-align: text-bottom;}
|
|
input[type="checkbox"] {vertical-align: bottom;}
|
|
|
|
small {font-size: .8rem;}
|
|
|
|
strong {font-weight: bold;}
|
|
|
|
sub, sup {font-size: .8rem; line-height: 0; position: relative;}
|
|
sup {top: -0.5rem;}
|
|
sub {bottom: -0.25rem;}
|
|
|
|
pre, code, kbd, samp {font-family: monospace, sans-serif;}
|
|
|
|
label, input[type=button], input[type=submit], input[type=file], button {cursor: pointer;}
|
|
|
|
button, input, select, textarea {margin: 0;}
|
|
|
|
ins {background-color: var(--highlight-color); color: #000; text-decoration: none;}
|
|
mark {background-color: var(--highlight-color); color: #000; font-style: italic; font-weight: bold;}
|
|
|
|
blockquote {padding: 2rem; border-left: 1px solid #333;}
|
|
|
|
.clearfix:after {content: ""; display: table; clear: both;} /* https://css-tricks.com/snippets/css/clear-fix/ */
|
|
|
|
h1, h2, h3, h4, h5, h6 {text-wrap: balance}
|
|
|
|
p {text-wrap: pretty;}
|
|
|
|
@media (prefers-reduced-motion: no-preference) {
|
|
:has(:target) {
|
|
scroll-behavior: smooth;
|
|
}
|
|
}
|
|
|
|
/* ———— END THE GENERIC RESETS ———— */
|
|
|
|
@font-face {
|
|
font-family: 'Source Sans Pro';
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
src: local('Source Sans Pro'), url('fonts/SourceSansPro-Regular.woff') format('woff');
|
|
}
|
|
@font-face {
|
|
font-family: 'Source Sans Pro';
|
|
font-style: italic;
|
|
font-weight: 400;
|
|
src: local('Source Sans Pro'), url('fonts/SourceSansPro-It.woff') format('woff');
|
|
}
|
|
@font-face {
|
|
font-family: 'Source Sans Pro';
|
|
font-style: normal;
|
|
font-weight: 200;
|
|
src: local('Source Sans Pro'), url('fonts/SourceSansPro-ExtraLight.woff') format('woff');
|
|
}
|
|
@font-face {
|
|
font-family: 'Source Sans Pro';
|
|
font-style: italic;
|
|
font-weight: 200;
|
|
src: local('Source Sans Pro'), url('fonts/SourceSansPro-ExtraLightIt.woff') format('woff');
|
|
}
|
|
@font-face {
|
|
font-family: 'Source Sans Pro';
|
|
font-style: normal;
|
|
font-weight: 300;
|
|
src: local('Source Sans Pro'), url('fonts/SourceSansPro-Light.woff') format('woff');
|
|
}
|
|
@font-face {
|
|
font-family: 'Source Sans Pro';
|
|
font-style: italic;
|
|
font-weight: 300;
|
|
src: local('Source Sans Pro'), url('fonts/SourceSansPro-LightIt.woff') format('woff');
|
|
}
|
|
@font-face {
|
|
font-family: 'Source Sans Pro';
|
|
font-style: normal;
|
|
font-weight: 600;
|
|
src: local('Source Sans Pro'), url('fonts/SourceSansPro-Semibold.woff') format('woff');
|
|
}
|
|
@font-face {
|
|
font-family: 'Source Sans Pro';
|
|
font-style: italic;
|
|
font-weight: 600;
|
|
src: local('Source Sans Pro'), url('fonts/SourceSansPro-SemiboldIt.woff') format('woff');
|
|
}
|
|
@font-face {
|
|
font-family: 'Source Sans Pro';
|
|
font-style: normal;
|
|
font-weight: 700;
|
|
src: local('Source Sans Pro'), url('fonts/SourceSansPro-Bold.woff') format('woff');
|
|
}
|
|
@font-face {
|
|
font-family: 'Source Sans Pro';
|
|
font-style: italic;
|
|
font-weight: 700;
|
|
src: local('Source Sans Pro'), url('fonts/SourceSansPro-BoldIt.woff') format('woff');
|
|
}
|
|
@font-face {
|
|
font-family: 'Source Sans Pro';
|
|
font-style: normal;
|
|
font-weight: 900;
|
|
src: local('Source Sans Pro'), url('fonts/SourceSansPro-Black.woff') format('woff');
|
|
}
|
|
@font-face {
|
|
font-family: 'Source Sans Pro';
|
|
font-style: italic;
|
|
font-weight: 900;
|
|
src: local('Source Sans Pro'), url('fonts/SourceSansPro-BlackIt.woff') format('woff');
|
|
}
|
|
|
|
:root {
|
|
/* Using local fonts? Check out Font Squirrel's webfont generator: http://www.fontsquirrel.com/tools/webfont-generator */
|
|
--font-system: 'Source Sans Pro', system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; /* https://css-tricks.com/snippets/css/system-font-stack */
|
|
--text-color: #333;
|
|
--link-color: #03f;
|
|
--link-color-hover: #69f;
|
|
--highlight-color: #fcd700;
|
|
--placeholder-color: #a9a9a9;
|
|
}
|
|
|
|
html {
|
|
font-size: 120%;
|
|
}
|
|
|
|
body {font-size: 1rem; font-family: var(--font-system);}
|
|
|
|
a {color: var(--link-color);}
|
|
a:hover {color: var(--link-color-hover);}
|
|
|
|
body, select, input, textarea {color: var(--text-color);}
|
|
|
|
/* Custom text-selection colors (remove any text shadows: http://twitter.com/miketaylr/status/12228805301) */
|
|
::-moz-selection{background: var(--highlight-color); color: var(--text-color); text-shadow: none;}
|
|
::selection {background: var(--highlight-color); color: var(--text-color); text-shadow: none;}
|
|
|
|
/* j.mp/webkit-tap-highlight-color */
|
|
a:link {-webkit-tap-highlight-color: var(--highlight-color);}
|
|
|
|
ins {background-color: var(--highlight-color); color: var(--text-color); text-decoration: none;}
|
|
mark {background-color: var(--highlight-color); color: var(--text-color); font-style: italic; font-weight: bold;}
|
|
|
|
/* Mozilla dosen't style place holders by default */
|
|
input:-moz-placeholder { color: var(--placeholder-color); }
|
|
textarea:-moz-placeholder { color: var(--placeholder-color); }
|
|
|
|
body {
|
|
background-color: black;
|
|
background-image: url('img/bg.jpg');
|
|
background-repeat: no-repeat;
|
|
background-position: top left;
|
|
background-attachment: fixed;
|
|
color: black;
|
|
}
|
|
|
|
a {
|
|
text-decoration: none;
|
|
transition: all 0.2s ease-in-out;
|
|
}
|
|
|
|
.headlineshadow {
|
|
text-shadow: 0 2px 1px rgba(0,0,0,1);
|
|
}
|
|
|
|
#base {
|
|
width: 400px;
|
|
position: fixed;
|
|
color: white;
|
|
}
|
|
|
|
#base a {
|
|
color: white;
|
|
}
|
|
|
|
#maincontent {
|
|
position: relative;
|
|
padding: 4.5rem 0 0 21rem;
|
|
}
|
|
|
|
.column {
|
|
float: left;
|
|
width: 550px;
|
|
}
|
|
|
|
section.box {
|
|
width: 480px;
|
|
margin: 0 0 4.5rem 0;
|
|
position: relative;
|
|
}
|
|
section.box header {
|
|
height: 60px;
|
|
padding: 0 0 0 1.25rem;
|
|
position: relative;
|
|
}
|
|
section.box header h1 {
|
|
color: white;
|
|
font-size: 2.125rem;
|
|
font-weight: 300;
|
|
text-shadow: 0 2px 1px rgba(0,100,125,1);
|
|
}
|
|
section.invertedbox header h1 {
|
|
color: #4e8595;
|
|
text-shadow: none;
|
|
}
|
|
section.box header h1 em, section.invertedbox h2 em {
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
}
|
|
|
|
section.box div.opaque {
|
|
padding: 1.25rem;
|
|
}
|
|
section.box div.opaque h2 {
|
|
font-size: 1.6rem;
|
|
font-weight: 300;
|
|
margin-bottom: 1rem;
|
|
}
|
|
section.box div.opaque h2 span.halfbubble {
|
|
height: 22px;
|
|
width: 11px;
|
|
border-bottom-right-radius: 11px;
|
|
border-top-right-radius: 11px;
|
|
display: inline-block;
|
|
margin: 0 0.7rem -0.125rem -1.25rem;
|
|
}
|
|
|
|
section.box header .icon {
|
|
float: right;
|
|
margin-right: 1.25rem;
|
|
margin-top: -1rem;
|
|
}
|
|
|
|
section.box#experiment header .icon {
|
|
margin-top: -2.5rem;
|
|
}
|
|
|
|
/* icosahedron */
|
|
|
|
#icosahedron-container {
|
|
width: 95px;
|
|
height: 95px;
|
|
position: relative;
|
|
}
|
|
#icosahedron-container canvas {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
/* backgrounds */
|
|
|
|
.whitebg {
|
|
background-color: white;
|
|
}
|
|
|
|
.blurgreen {
|
|
background-color: #437888;
|
|
background-image: url('img/bg_blur.jpg');
|
|
background-repeat: no-repeat;
|
|
background-attachment: fixed;
|
|
color: white;
|
|
}
|
|
|
|
/* text styling, sizes and spacing */
|
|
|
|
#base {
|
|
font-size: 1.125rem;
|
|
font-style: italic;
|
|
font-weight: 300;
|
|
}
|
|
#greeting {
|
|
font-size: 1.75rem;
|
|
margin-top: 4rem;
|
|
}
|
|
#greeting .avatar{
|
|
margin-left: 4rem;
|
|
margin-bottom: 1.2rem;
|
|
}
|
|
#greeting span {
|
|
display: block;
|
|
line-height: 1em;
|
|
}
|
|
#greeting .line1 {
|
|
margin-left: 4.375rem;
|
|
}
|
|
#greeting .line2 {
|
|
font-weight: 400;
|
|
line-height: 0.8em;
|
|
margin-left: 5rem;
|
|
}
|
|
#greeting .line3 {
|
|
font-weight: 600;
|
|
line-height: 1.2em;
|
|
margin-left: 3rem;
|
|
}
|
|
|
|
#base a {
|
|
font-size: 1.5rem;
|
|
display: block;
|
|
line-height: 1em;
|
|
}
|
|
#base a:hover {
|
|
text-shadow: 0 0 7px rgba(255,255,255,0.6);
|
|
}
|
|
#base em {
|
|
font-weight: 600;
|
|
}
|
|
#base .icon {
|
|
background-repeat: no-repeat;
|
|
}
|
|
|
|
|
|
#base section.findme {
|
|
margin-top: 4.375rem;
|
|
line-height: 1.1em;
|
|
}
|
|
#base section.findme .line1 {
|
|
margin-left: 5rem;
|
|
}
|
|
#base section.findme .line2 {
|
|
margin-left: 3rem;
|
|
}
|
|
#base section.findme .line3 {
|
|
margin-left: 4.7rem;
|
|
}
|
|
#base section.findme span.line4 a {
|
|
margin-left: 6.375rem;
|
|
font-size: 1.125rem;
|
|
}
|
|
|
|
#base section.iam {
|
|
margin-top: 2.8rem;
|
|
line-height: 1.1em;
|
|
}
|
|
#base section.iam .line1 {
|
|
margin-left: 5.7rem;
|
|
line-height: 0.9em;
|
|
}
|
|
#base section.iam .line2 {
|
|
margin-left: 3.3rem;
|
|
line-height: 1em;
|
|
}
|
|
#base section.iam .line3 {
|
|
margin-left: 4rem;
|
|
line-height: 1.1em;
|
|
}
|
|
#base section.iam .line4 {
|
|
margin-left: 3.4rem;
|
|
}
|
|
|
|
#base section.iam span {
|
|
display: block;
|
|
}
|
|
|
|
|
|
/* Print styles
|
|
-------------------------------------------------------------------------------*/
|
|
@media print {
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
/* Media queries
|
|
-------------------------------------------------------------------------------*/
|
|
|
|
@media screen and (max-width: 576px) {
|
|
|
|
}
|
|
|
|
@media print {
|
|
|
|
}
|