511 lines
11 KiB
CSS
511 lines
11 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: #000;
|
|
--link-color: #03f;
|
|
--link-color-hover: #69f;
|
|
--button-color: #63a8b8;
|
|
--button-color-hover: #333;
|
|
--highlight-color: #a3d5d5;
|
|
--placeholder-color: #a9a9a9;
|
|
}
|
|
|
|
html {
|
|
font-size: 18px;
|
|
}
|
|
|
|
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); text-shadow: none;}
|
|
::selection {background: var(--highlight-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;
|
|
}
|
|
|
|
.headlineshadow {
|
|
text-shadow: 0 2px 1px rgba(0,0,0,1);
|
|
}
|
|
|
|
a {
|
|
text-decoration: none;
|
|
transition: all 0.2s ease-in-out;
|
|
}
|
|
|
|
#background_wrap {
|
|
z-index: -1;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
height: 100%;
|
|
width: 100%;
|
|
background-image: url('img/bg.jpg');
|
|
background-repeat: no-repeat;
|
|
background-position: top left;
|
|
background-attachment: fixed;
|
|
}
|
|
|
|
#wrapper {
|
|
display: flex;
|
|
flex-direction: row;
|
|
gap: 5rem;
|
|
margin-left: 3rem;
|
|
margin-top: 4rem;
|
|
}
|
|
|
|
.column {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
/* sidebar */
|
|
|
|
.column-sidebar {
|
|
width: 235px;
|
|
color: white;
|
|
font-size: 1.125rem;
|
|
font-style: italic;
|
|
font-weight: 300;
|
|
}
|
|
|
|
.column-sidebar a {
|
|
color: white;
|
|
display: block;
|
|
}
|
|
|
|
.column-sidebar a, .column-sidebar .bigline {
|
|
font-size: 1.5rem;
|
|
line-height: 1em;
|
|
}
|
|
.column-sidebar a:hover {
|
|
text-shadow: 0 0 7px rgba(255,255,255,0.6);
|
|
}
|
|
.column-sidebar em {
|
|
font-weight: 600;
|
|
}
|
|
|
|
|
|
.column-sidebar #greeting {
|
|
font-size: 1.75rem;
|
|
}
|
|
.column-sidebar #greeting #icosahedron-container {
|
|
margin-left: 1rem;
|
|
margin-bottom: 1.2rem;
|
|
width: 95px;
|
|
height: 95px;
|
|
position: relative;
|
|
}
|
|
.column-sidebar #greeting #icosahedron-container canvas {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.column-sidebar #greeting span {
|
|
display: block;
|
|
line-height: 1em;
|
|
}
|
|
.column-sidebar #greeting .line1 {
|
|
margin-left: 1.375rem;
|
|
}
|
|
.column-sidebar #greeting .line2 {
|
|
font-weight: 400;
|
|
line-height: 0.8em;
|
|
margin-left: 2rem;
|
|
}
|
|
.column-sidebar #greeting .line3 {
|
|
font-weight: 600;
|
|
line-height: 1.2em;
|
|
margin-left: 0rem;
|
|
}
|
|
|
|
|
|
.column-sidebar section#iam {
|
|
margin-top: 2.8rem;
|
|
line-height: 1.1em;
|
|
}
|
|
.column-sidebar section#iam .line1 {
|
|
margin-left: 2.7rem;
|
|
line-height: 0.9em;
|
|
}
|
|
.column-sidebar section#iam .line2 {
|
|
margin-left: 0.3rem;
|
|
line-height: 1em;
|
|
}
|
|
.column-sidebar section#iam .line3 {
|
|
margin-left: 1rem;
|
|
line-height: 1.1em;
|
|
}
|
|
.column-sidebar section#iam .line4 {
|
|
margin-left: 0.4rem;
|
|
}
|
|
|
|
.column-sidebar section#iam span {
|
|
display: block;
|
|
}
|
|
|
|
|
|
.column-sidebar section#findme {
|
|
margin-top: 2.8rem;
|
|
line-height: 1.1em;
|
|
}
|
|
.column-sidebar section#findme .line1 {
|
|
margin-left: 2rem;
|
|
}
|
|
.column-sidebar section#findme .line2 {
|
|
margin-left: 0rem;
|
|
}
|
|
.column-sidebar section#findme .line3 {
|
|
margin-left: 1.7rem;
|
|
}
|
|
.column-sidebar section#findme span.line4 a {
|
|
margin-left: 3.375rem;
|
|
font-size: 1.125rem;
|
|
}
|
|
|
|
/* content */
|
|
|
|
.column-content {
|
|
width: 495px;
|
|
color: white;
|
|
font-size: 1.125rem;
|
|
font-style: italic;
|
|
font-weight: 300;
|
|
}
|
|
|
|
.column-content section {
|
|
width: 100%;
|
|
margin: 0 0 4.5rem 0;
|
|
}
|
|
.column-content section header {
|
|
height: 60px;
|
|
padding: 0 0 0 1.25rem;
|
|
position: relative;
|
|
}
|
|
.column-content section header h1 {
|
|
color: white;
|
|
font-size: 2.125rem;
|
|
font-weight: 300;
|
|
text-shadow: 0 2px 1px rgba(0,100,125,1);
|
|
}
|
|
.column-content section.invertedbox header h1 {
|
|
color: #4e8595;
|
|
text-shadow: none;
|
|
}
|
|
.column-content section header h1 em, section.invertedbox h2 em {
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
}
|
|
|
|
.column-content section div.opaque {
|
|
padding: 1.25rem;
|
|
}
|
|
.column-content section div.opaque h2 {
|
|
font-size: 1.6rem;
|
|
font-weight: 300;
|
|
margin-bottom: 1rem;
|
|
}
|
|
.column-content section 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;
|
|
}
|
|
|
|
.column-content section header .icon {
|
|
float: right;
|
|
margin-right: 1.25rem;
|
|
margin-top: -1rem;
|
|
}
|
|
|
|
.column-content section#experiment header .icon {
|
|
margin-top: -2.5rem;
|
|
}
|
|
|
|
/* music */
|
|
|
|
article.album {
|
|
height: auto;
|
|
margin-top: 0.5rem;
|
|
}
|
|
article.album a {
|
|
display: block;
|
|
width: 100%;
|
|
height: 120px;
|
|
color: var(--text-color);
|
|
}
|
|
article.album h2 {
|
|
display: inline-block;
|
|
margin-top: 1rem;
|
|
font-size: 1.1rem;
|
|
}
|
|
article.album h2 em {
|
|
display: block;
|
|
font-style: normal;
|
|
font-weight: 600;
|
|
font-size: 1.2em;
|
|
}
|
|
article.album .listenbuy {
|
|
color: transparent;
|
|
font-size: 1.1em;
|
|
font-weight: 400;
|
|
display: inline-block;
|
|
margin-top: 0.75em;
|
|
margin-left: -0.3em;
|
|
padding: 0.25em 1em;
|
|
background-color: transparent;
|
|
border-radius: 2em;
|
|
transition: background-color 0.25s, color 0.25s, margin 0.25s;
|
|
}
|
|
article.album .listenbuy em {
|
|
font-style: normal;
|
|
font-weight: 600;
|
|
}
|
|
article.album a:hover .listenbuy {
|
|
color: white;
|
|
margin-top: 1em;
|
|
background-color: var(--button-color);
|
|
}
|
|
article.album a .listenbuy:hover {
|
|
background-color: var(--button-color-hover);
|
|
}
|
|
img.albumcover {
|
|
width: auto;
|
|
height: 100%;
|
|
float: left;
|
|
margin-right: 1.4rem;
|
|
}
|
|
article.album a:hover {
|
|
height: 160px;
|
|
}
|
|
|
|
/* 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;
|
|
}
|
|
|
|
|
|
/* Print styles
|
|
-------------------------------------------------------------------------------*/
|
|
@media print {
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
/* Media queries
|
|
-------------------------------------------------------------------------------*/
|
|
|
|
@media screen and (max-width: 915px) {
|
|
#background_wrap {
|
|
background-size: 100%;
|
|
}
|
|
#wrapper {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0;
|
|
margin: 1.5rem;
|
|
}
|
|
.column {
|
|
flex-direction: unset;
|
|
display: contents;
|
|
}
|
|
|
|
#greeting {
|
|
order: 1;
|
|
}
|
|
|
|
#music {
|
|
order: 2;
|
|
}
|
|
|
|
#iam {
|
|
order: 3;
|
|
}
|
|
|
|
#findme {
|
|
order: 4;
|
|
}
|
|
}
|
|
|
|
@media print {
|
|
|
|
}
|