@charset "utf-8";
@font-face {
font-family: Rubik;
src: url('fonts/Rubik-Regular.ttf');
}
@font-face {
font-family: 'Source Code Pro';
src: url('fonts/SourceCodeVariable-Roman.otf');
}
body {
color: #eee;
background-color: #000;
text-align: center;
margin: auto;
font-family: 'Source Code Pro', 'Ubuntu Mono', 'Andalé Mono', 'Consolas', monospace;
font-size: 12.5pt;
}
.content {
width: 80%;
margin: 0 auto;
text-align: left;
}
h1 {
margin: 0 auto;
font-size: 6em;
font-family: 'Rubik', monospace;
}
h1 span { margin: 0; }
h1 span.t1 { color: coral; }
h1 span.t2 { color: cadetblue; }
h1 span.t3 { color: deepskyblue; }
h2 {
color: white;
font-size: 3em;
font-weight: lighter;
text-align: left;
width: 80%;
margin: 0 auto;
padding: 1em;
}
.bg-7 { margin: 0; padding: 0 0 2em 0; background-color: #2b2b2b; }
.bg-6 { margin: 0; padding: 0 0 2em 0; background-color: #262626; }
.bg-5 { margin: 0; padding: 0 0 2em 0; background-color: #222; }
.bg-4 { margin: 0; padding: 0 0 2em 0; background-color: #1b1b1b; }
.bg-3 { margin: 0; padding: 0 0 2em 0; background-color: #161616; }
.bg-2 { margin: 0; padding: 0 0 2em 0; background-color: #111; }
.bg-1 { margin: 0; padding: 0 0 2em 0; background-color: #0b0b0b; }
.bg-0 { margin: 0; padding: 0 0 2em 0; background-color: #060606; }
.skills {
display: flex;
flex-wrap: wrap;
width: 80%;
margin: 0 auto 3em;
border: 1px solid #ddd;
border-width: 1px 1px 1px 0;
}
.skills header {
background-color: #ddd;
color: #111;
padding: 1em;
font-weight: bold;
}
.skills article {
display: flex;
flex-direction: column;
border: 1px solid #ddd;
border-width: 0 0 0 1px;
flex: 1;
flex-basis: 350px;
}
.skills summary {
margin: auto 0;
}
.skills ul {
margin: .75em;
padding: 0;
text-align: center;
}
.skills li {
margin: .1em;
}
.spaced {
display: flex;
justify-content: space-between;
align-items: baseline;
}
.spaced span {
vertical-align: middle;
}
.cards {
display: flex;
flex-wrap: wrap;
width: 80%;
margin: 0 auto 3em;
border: solid #ddd;
border-width: 1px 0 0 1px;
}
.cards article {
display: flex;
flex-direction: column;
justify-content: space-between;
text-align: left;
border: solid #ddd;
border-width: 0 1px 1px 0;
flex: 1;
flex-basis: 350px;
}
.cards header {
padding: 1em;
}
.cards summary {
padding: 0 1em 1em 1em;
}
.cards header {
font-weight: bold;
}
.cards ul {
margin: 0;
padding: 0;
}
.cards .date {
padding: .2em .5em;
border-radius: .3em;
font-weight: bold;
}
.visits {
margin-top: 1em;
}
.visits a {
display: block;
text-align: center;
border-top: 1px solid #ddd;
color: #ddd;
text-decoration: none;
background: black;
padding: .75em;
background-color: black;
background-image: url('data:image/svg+xml;utf8,');
background-position: right .75em center;
background-repeat: no-repeat;
}
.visits a:hover, .cards .visit:active {
background-color: #222;
}
.i::before {
vertical-align: middle;
position: relative;
top: .2em;
margin-right: .5em;
}
.i-globe::before {
content: url('data:image/svg+xml;utf8,');
}
.i-code::before {
content: url('data:image/svg+xml;utf8,');
}
.i-box::before {
content: url('data:image/svg+xml;utf8,');
}
.i-monitor::before {
content: url('data:image/svg+xml;utf8,');
}
.i-book::before {
content: url('data:image/svg+xml;utf8,');
}
.i-phone::before {
content: url('data:image/svg+xml;utf8,');
}
.date-alive { border: .2em solid green; }
.date-warn { border: .2em solid darkorange; }
.date-dead { border: .2em solid red; }
.tags * {
display: inline-block;
margin: 0 0 0 .75em;
padding: .2em .5em;
border-radius: .25em;
}
.tag-other { border: 1px solid white; }
.tag-doc { background: #6d7005; }
.tag-wip { background: darkred; }
.tag-fav { background: chocolate; }
.tag-theme { background: darkorchid; }
.tag-asm { background: #6e4c13; }
.tag-c { background: #555555; }
.tag-cpp { background: #f34b7d; }
.tag-cs { background: #178600; }
.tag-d { background: #ba595e; }
.tag-web { background: #e34c26; }
.tag-html { background: #e34c26; }
.tag-css { background: #563d7c; }
.tag-js { background: yellow; color: #111; }
.tag-gdscript { background: #355570; }
.tag-pascal { background: #E3F171; color: #111; }
.tag-php { background: #4F5D95; }
.tag-sql { background: #e38c00; color: #111; }
ul.links {
list-style: none;
padding: 0;
}
ul.links li {
display: inline-block;
margin: 1em 0;
}
ul.links a {
text-decoration: none;
padding: 1em;
border: 1px solid white;
color: white;
background: black;
}
ul.links a:hover {
background: #111;
}
ul.links a::after {
content: url('data:image/svg+xml;utf8,');
vertical-align: top;
}
footer {
background-color: black;
padding: 3em;
font-size: 0.8em;
}
footer a {
color: coral;
}