first commit
This commit is contained in:
s.golasch
121
css/cnt/cnt-home.css
Normal file
121
css/cnt/cnt-home.css
Normal file
@@ -0,0 +1,121 @@
|
||||
/** Background image **/
|
||||
.cnt-home {background-image: url('/img/bg/background.svg')}
|
||||
|
||||
main > section {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
flex-direction: row;
|
||||
max-width: 900px}
|
||||
|
||||
main > section > article {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
align-self: flex-start;
|
||||
flex-wrap: wrap;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
width: 450px;
|
||||
max-width: 450px}
|
||||
|
||||
main > section > article > a {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: flex-start;
|
||||
align-self: flex-start;
|
||||
text-decoration: none;
|
||||
color: #000;
|
||||
flex-wrap: wrap;
|
||||
width: 450px;
|
||||
max-width: 450px}
|
||||
|
||||
main > section > article > a > h2 {
|
||||
background: black;
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
width: 375px;
|
||||
height: 35px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
max-height: 35px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
padding-top: 7px;
|
||||
margin-left: 73px;
|
||||
margin-top: 10px;
|
||||
margin-bottom: 2px;
|
||||
color: white;
|
||||
font-size: 25px;
|
||||
font-family: 'silkscreen'}
|
||||
|
||||
main > section > article > a > svg {
|
||||
display: flex;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
margin-left: 3px;
|
||||
margin-top: -78px}
|
||||
|
||||
main > section > article > a > svg > g > image {filter: url(#pixelate)}
|
||||
main > section > article > a:hover > svg > g > image {filter: none}
|
||||
|
||||
main > section > article > a > p {
|
||||
display: flex;
|
||||
box-sizing: border-box;
|
||||
margin-left: 10px;
|
||||
margin-top: 50px;
|
||||
max-width: 230px;
|
||||
font-family: 'Menlo', Monaco, monospace;
|
||||
text-align: right}
|
||||
|
||||
main > section > article > a > i {
|
||||
font-family: 'silkscreen';
|
||||
color: #ccc;
|
||||
box-sizing: border-box;
|
||||
align-self: flex-end;
|
||||
margin-left: 270px;
|
||||
max-width: 100px;
|
||||
display: flex}
|
||||
|
||||
main > section > article > a > time {
|
||||
font-family: 'silkscreen';
|
||||
color: #ccc;
|
||||
box-sizing: border-box;
|
||||
align-self: flex-end;
|
||||
margin-left: 365px;
|
||||
margin-top: -30px;
|
||||
max-width: 100px;
|
||||
display: flex}
|
||||
|
||||
main > section > article > a > ul {
|
||||
box-sizing: border-box;
|
||||
list-style-type: none;
|
||||
font-family: 'silkscreen';
|
||||
align-self: flex-start;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
margin-left: 215px;
|
||||
margin-top: -60px;
|
||||
max-width: 375px;
|
||||
align-items: flex-end;
|
||||
justify-content: flex-end;
|
||||
text-align: right;
|
||||
flex-wrap: wrap;
|
||||
display: flex}
|
||||
|
||||
main > section > article > a > ul > li {
|
||||
display: flex;
|
||||
background-color: #000;
|
||||
max-width: 375px;
|
||||
margin-left: 20px;
|
||||
margin-bottom: 3px;
|
||||
text-align: right}
|
||||
|
||||
main > section > article > a > ul > li:nth-child(1) {color: #5BC0EB}
|
||||
main > section > article > a > ul > li:nth-child(2) {color: #FDE74C}
|
||||
main > section > article > a > ul > li:nth-child(3) {color: #9BC53D}
|
||||
main > section > article > a > ul > li:nth-child(4) {color: #E55934}
|
||||
main > section > article > a > ul > li:nth-child(5) {color: #FA7921}
|
||||
87
css/components/aside.css
Normal file
87
css/components/aside.css
Normal file
@@ -0,0 +1,87 @@
|
||||
@keyframes blinker {
|
||||
to {opacity: 0}
|
||||
}
|
||||
|
||||
aside {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 200px;
|
||||
max-width: 200px;
|
||||
max-height: 900px;
|
||||
margin-bottom: 50px}
|
||||
|
||||
aside > section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 200px;
|
||||
max-height: 300px}
|
||||
|
||||
aside > section > ol:empty::after {
|
||||
display: flex;
|
||||
align-self: center;
|
||||
margin-top: 5%;
|
||||
font-family: 'silkscreen';
|
||||
content: 'Loading...';
|
||||
animation: blinker .75s cubic-bezier(.5, 0, 1, 1) infinite alternate}
|
||||
|
||||
aside > section > h2 {
|
||||
width: 250px;
|
||||
max-height: 36px;
|
||||
margin: 15px 0 0 25px;
|
||||
padding: 0;
|
||||
background: black;
|
||||
color: white;
|
||||
font-size: 30px;
|
||||
font-family: 'silkscreen';
|
||||
text-align: right}
|
||||
|
||||
aside > section:first-child > h2 {margin: 10px 0 0 25px}
|
||||
|
||||
aside > section > ol {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 250px;
|
||||
padding: 0;
|
||||
margin: 0 0 0 25px;
|
||||
list-style-type: none}
|
||||
|
||||
aside > section > ol > li {
|
||||
display: flex;
|
||||
max-height: 132px;
|
||||
width: 250px;
|
||||
padding: 0;
|
||||
margin: 0}
|
||||
|
||||
aside > section > ol > li > a {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
flex-wrap: wrap;
|
||||
width: 250px;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
color: #212121;
|
||||
font-family: 'Menlo', Monaco, monospace;
|
||||
font-size: 12px;
|
||||
text-decoration: none}
|
||||
|
||||
aside > section > ol > li > a > p {
|
||||
display: flex;
|
||||
align-self: flex-start;
|
||||
width: 250px}
|
||||
|
||||
aside > section > ol > li > a > time {
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
align-self: flex-end;
|
||||
width: 250px;
|
||||
border-bottom: 1px solid #212121;
|
||||
color: #aaa}
|
||||
|
||||
aside > section > ol > li:last-child > a > time {border: none}
|
||||
#tweets > ol > li:nth-child(2) > a > p {margin-top: 20px}
|
||||
#confs > ol > li > a > time {align-self: flex-start}
|
||||
#confs > ol > li > a {
|
||||
flex-grow: unset;
|
||||
max-height: 40px}
|
||||
70
css/components/base.css
Normal file
70
css/components/base.css
Normal file
@@ -0,0 +1,70 @@
|
||||
/**
|
||||
* Fonts
|
||||
*
|
||||
*/
|
||||
|
||||
@font-face {
|
||||
font-family: 'silkscreen';
|
||||
src: url('/font/slkscr-webfont.woff2') format('woff2'), url('/font/slkscr-webfont.woff') format('woff');
|
||||
font-weight: normal;
|
||||
font-style: normal}
|
||||
|
||||
.type-content {font-family: Georgia, Cambria, 'Times New Roman', Times, serif}
|
||||
.type-monospace {font-family: 'Menlo', Monaco, monospace}
|
||||
.type-pixel {font-family: 'silkscreen', 'Menlo', Monaco, monospace}
|
||||
|
||||
/**
|
||||
* Colors
|
||||
*
|
||||
*/
|
||||
|
||||
.color-white {color: #ddd}
|
||||
.color-lightblack {color: #212121}
|
||||
.color-blue {color: #5BC0EB}
|
||||
.color-yellow {color: #FDE74C}
|
||||
.color-green {color: #9BC53D}
|
||||
.color-red {color: #E55934}
|
||||
.color-orange {color: #FA7921}
|
||||
|
||||
.bg-color-white {background-color: #ddd}
|
||||
.bg-color-lightblack {background-color: #212121}
|
||||
.bg-color-blue {background-color: #5BC0EB}
|
||||
.bg-color-yellow {background-color: #FDE74C}
|
||||
.bg-color-green {background-color: #9BC53D}
|
||||
.bg-color-red {background-color: #E55934}
|
||||
.bg-color-orange {background-color: #FA7921}
|
||||
|
||||
/**
|
||||
* Helper classes
|
||||
*
|
||||
*/
|
||||
|
||||
.no-space {
|
||||
margin: 0;
|
||||
padding: 0}
|
||||
|
||||
.zero-height {height: 0}
|
||||
|
||||
/**
|
||||
* Element defaults
|
||||
*
|
||||
*/
|
||||
|
||||
body {
|
||||
background: fixed #fff no-repeat;
|
||||
overflow-x: hidden}
|
||||
|
||||
a {text-decoration: none}
|
||||
|
||||
main {
|
||||
display: flex;
|
||||
max-width: 1100px;
|
||||
margin: 0 auto}
|
||||
|
||||
/** Headlines **/
|
||||
h1 {
|
||||
max-width: 1000px;
|
||||
margin: 0 auto;
|
||||
padding: 30px 0 30px 0}
|
||||
|
||||
template {display: none !important}
|
||||
13
css/components/footer.css
Normal file
13
css/components/footer.css
Normal file
@@ -0,0 +1,13 @@
|
||||
footer {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
background-color: #212121;
|
||||
color: #fff;
|
||||
font-size: 12px}
|
||||
|
||||
footer > a {
|
||||
padding: 0 7px 0 7px;
|
||||
color: #fff;
|
||||
font-size: 12px}
|
||||
|
||||
footer > a:last-child {padding-right: 0}
|
||||
148
css/components/menu.css
Normal file
148
css/components/menu.css
Normal file
@@ -0,0 +1,148 @@
|
||||
nav {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
min-width: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background-color: #212121;
|
||||
box-shadow: 0px 3px 5px rgba(100, 100, 100, 0.49);
|
||||
line-height: 2em}
|
||||
|
||||
nav > a::before {
|
||||
display: flex;
|
||||
max-height: 45px;
|
||||
margin: 0 auto;
|
||||
font-weight: normal;
|
||||
font-size: 6px;
|
||||
white-space: pre;
|
||||
line-height: 1em;
|
||||
text-decoration: none;
|
||||
content: " __ \a __ __ /\\ \\ __ \a __ ____ ___ /\\_\\/\\_\\ \\_\\ \\/\\_\\ ____ ___ ___ \a /'__`\\ /',__\\ /'___\\/\\ \\/\\ \\ /'_` \\/\\ \\ /',__\\ /'___\\ / __`\\ \a /\\ \\L\\.\\_/\\__, `\\/\\ \\__/\\ \\ \\ \\ \\/\\ \\L\\ \\ \\ \\/\\__, `\\/\\ \\__//\\ \\L\\ \\ \a \\ \\__/.\\_\\/\\____/\\ \\____\\\\ \\_\\ \\_\\ \\___,_\\ \\_\\/\\____/\\ \\____\\ \\____/ \a \\/__/\\/_/\\/___/ \\/____/ \\/_/\\/_/\\/__,_ /\\/_/\\/___/ \\/____/\\/___/ "}
|
||||
|
||||
nav > a {
|
||||
display: flex;
|
||||
max-height: 45px;
|
||||
width: 300px;
|
||||
margin: 0 auto;
|
||||
color: transparent;
|
||||
text-decoration: none;
|
||||
line-height: 0;
|
||||
font-size: 0}
|
||||
|
||||
nav > ul {
|
||||
display: flex;
|
||||
min-height: 45px;
|
||||
max-height: 45px;
|
||||
width: 35rem;
|
||||
margin: 0 auto;
|
||||
padding: 0;
|
||||
overflow-y: hidden;
|
||||
list-style-type: none}
|
||||
|
||||
nav > ul > li {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-width: 110px;
|
||||
padding: 0;
|
||||
background-repeat: no-repeat;
|
||||
background-position-y: -50px;
|
||||
background-size: 250px}
|
||||
|
||||
nav > ul > li:nth-child(1) {background-image: url('/img/menu/invader_1.svg')}
|
||||
nav > ul > li:nth-child(2) {background-image: url('/img/menu/invader_2.svg')}
|
||||
nav > ul > li:nth-child(3) {background-image: url('/img/menu/invader_3.svg')}
|
||||
nav > ul > li:nth-child(4) {background-image: url('/img/menu/invader_4.svg')}
|
||||
nav > ul > li:nth-child(5) {background-image: url('/img/menu/invader_5.svg')}
|
||||
|
||||
nav > input, nav > label {display: none}
|
||||
|
||||
nav > ul > li > a {
|
||||
display: flex;
|
||||
padding: 1rem;
|
||||
font-size: 1rem;
|
||||
line-height: 1rem;
|
||||
text-decoration: none;
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
background-color: transparent;
|
||||
background-repeat: no-repeat;
|
||||
transition: padding-top .75s}
|
||||
|
||||
@media (max-width: 860px){
|
||||
nav {
|
||||
display: block;
|
||||
height: 80px}
|
||||
|
||||
nav > a::before {
|
||||
width: 80vw;
|
||||
max-height: 80px;
|
||||
margin-left: 3vw;
|
||||
margin-top: 1vh;
|
||||
font-size: 1.6vw}
|
||||
|
||||
nav > a {
|
||||
width: 40vw;
|
||||
max-height: 80px;
|
||||
margin: 0;
|
||||
font-size: 0}
|
||||
|
||||
nav > ul {
|
||||
position: fixed;
|
||||
box-sizing: border-box;
|
||||
display: block;
|
||||
width: 100%;
|
||||
max-height: 0px;
|
||||
min-height: 0px;
|
||||
padding: 0;
|
||||
text-align: center;
|
||||
list-style-type: none;
|
||||
transition: height .5s linear}
|
||||
|
||||
nav > ul > li {
|
||||
border-bottom: 2px solid #212121;
|
||||
display: block;
|
||||
font-size: 2vh;
|
||||
padding: 2em 0}
|
||||
|
||||
nav > ul > li > a {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
font-size: 5vh}
|
||||
|
||||
nav > input:checked ~ ul {max-height: 100vh}
|
||||
nav > input:checked ~ label {text-decoration: line-through}
|
||||
|
||||
nav > label {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
position: fixed;
|
||||
top: 2vh;
|
||||
right: .5rem;
|
||||
width: 7vw;
|
||||
min-width: 45px;
|
||||
max-width: 60px;
|
||||
max-height: 60px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-size: 1rem;
|
||||
line-height: 6rem;
|
||||
text-align: center;
|
||||
background: linear-gradient(to bottom, #fff 0%, #fff 10%, transparent 10%, transparent 20%, #fff 20%, #fff 30%, transparent 30%, transparent 40%, #fff 40%, #fff 50%, transparent 50%);
|
||||
cursor: pointer}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 861px) {
|
||||
nav > ul > li {transition: background-position-y .75s}
|
||||
nav > ul > li:nth-child(1) {background-position-x: 19px}
|
||||
nav > ul > li:nth-child(2) {background-position-x: -47px}
|
||||
nav > ul > li:nth-child(3) {background-position-x: -110px}
|
||||
nav > ul > li:nth-child(4) {background-position-x: -165px}
|
||||
nav > ul > li:nth-child(5) {
|
||||
background-position-y: -80px;
|
||||
background-position-x: 3px}
|
||||
|
||||
nav > ul > li:hover {background-position-y: -5px}
|
||||
nav > ul > li:nth-child(5):hover {background-position-y: -7px}
|
||||
nav > ul > li:hover > a {padding-top: 125px}
|
||||
}
|
||||
48
css/components/terminal.css
Normal file
48
css/components/terminal.css
Normal file
@@ -0,0 +1,48 @@
|
||||
@keyframes blink-animation {
|
||||
to { opacity: 0 }
|
||||
}
|
||||
|
||||
header {margin-top: 10vh}
|
||||
|
||||
header > pre {
|
||||
padding: 0.25rem 1rem;
|
||||
font-size: 1rem;
|
||||
font-weight: normal;
|
||||
line-height: 1.2rem;
|
||||
cursor: text;
|
||||
box-shadow: 0 10px 60px rgba(200, 200, 200, 0.2)}
|
||||
|
||||
.terminal {
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
padding: 3rem 0 0.7rem 0}
|
||||
|
||||
.terminal:before {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 1.8rem;
|
||||
background: #ccc;
|
||||
background-image: linear-gradient(top, #ddd, #aaa);
|
||||
color: #3a3a53;
|
||||
font-family: 'Lucida Grande', sans-serif;
|
||||
font-size: 0.75rem;
|
||||
line-height: 1.8rem;
|
||||
text-align: center;
|
||||
text-shadow: 0 1px 0 hsla(0, 0%, 100%, 0.4);
|
||||
border: 1px solid hsla(0, 0%, 43%, 0.3);
|
||||
content: '01100001 01110011 01100011 01101001 01101001 01100100 01101001 01110011 01100011 01101111'}
|
||||
|
||||
.terminal-wrapper {max-width: 100%}
|
||||
|
||||
.active-prompt {
|
||||
display: inline-block;
|
||||
width: 0.8em;
|
||||
height: 1.3em;
|
||||
margin: 0.3em 0.3em -0.2em;
|
||||
animation: blink-animation .8s steps(8, start) infinite}
|
||||
|
||||
4
css/core.css
Normal file
4
css/core.css
Normal file
@@ -0,0 +1,4 @@
|
||||
@import url('components/base.css');
|
||||
@import url('components/menu.css');
|
||||
@import url('components/aside.css');
|
||||
@import url('components/footer.css');
|
||||
2
css/home.css
Normal file
2
css/home.css
Normal file
@@ -0,0 +1,2 @@
|
||||
@import url('components/terminal.css');
|
||||
@import url('cnt/cnt-home.css');
|
||||
Reference in New Issue
Block a user