Startet to add some content
This commit is contained in:
Sebastian
commit
285d5e2147
160 changed files with 4419 additions and 0 deletions
359
sass/css/style.scss
Normal file
359
sass/css/style.scss
Normal file
|
|
@ -0,0 +1,359 @@
|
|||
$narrow-header-breakpoint: 500px;
|
||||
$medium-header-breakpoint: 800px;
|
||||
$margin-breakpoint: 960px;
|
||||
$menu-breakpoint: 720px;
|
||||
$wide-width: 960px;
|
||||
$narrow-margin: 5px;
|
||||
$background-color: #ffffff;
|
||||
$code-background-color: scale-color($background-color, $lightness: 10%);
|
||||
$text-color: #000000;
|
||||
$menu-background-color: #000000;
|
||||
$menu-text-color: #ffffff;
|
||||
$menu-active-color: scale-color($menu-background-color, $lightness: 20%);
|
||||
$link-color: #669df2;
|
||||
$link-color-visited: #829bc2;
|
||||
|
||||
body {
|
||||
font-family: 'RedHatText';
|
||||
background-color: $background-color;
|
||||
color: $text-color;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
font-size: 13pt;
|
||||
}
|
||||
|
||||
header {
|
||||
background: {
|
||||
image: linear-gradient(rgba($background-color, 0.0), rgba($background-color, 1)), url("/images/header.jpg");
|
||||
size: cover;
|
||||
}
|
||||
height: 300px;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: row;
|
||||
|
||||
.logo {
|
||||
align-self: center;
|
||||
margin-right: 50px;
|
||||
}
|
||||
|
||||
.text {
|
||||
align-self: center;
|
||||
|
||||
.heading {
|
||||
font-family: 'Source Code Pro';
|
||||
font-weight: bold;
|
||||
font-size: 50px;
|
||||
}
|
||||
|
||||
.subtext {
|
||||
font-family: 'Source Sans Pro';
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: $medium-header-breakpoint) {
|
||||
height: 150px;
|
||||
|
||||
.text {
|
||||
.heading {
|
||||
font-size: 25px;
|
||||
}
|
||||
|
||||
.subtext {
|
||||
font-size: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.logo {
|
||||
width: 100px;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: $narrow-header-breakpoint) {
|
||||
height: 75px;
|
||||
|
||||
.logo {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.text {
|
||||
.heading {
|
||||
font-size: 25px;
|
||||
}
|
||||
|
||||
.subtext {
|
||||
font-size: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
main {
|
||||
width: $wide-width;
|
||||
|
||||
@media screen and (max-width: $margin-breakpoint) {
|
||||
margin: {
|
||||
left: $narrow-margin;
|
||||
right: $narrow-margin;
|
||||
}
|
||||
align-self: stretch;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
hr {
|
||||
color: $menu-background-color;
|
||||
margin: {
|
||||
top: 10px;
|
||||
bottom: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-family: 'Source Sans Pro';
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-family: 'Source Sans Pro';
|
||||
}
|
||||
|
||||
img {
|
||||
@media screen and (min-width: $wide-width) {
|
||||
max-width: $wide-width;
|
||||
}
|
||||
max-width: 100%;
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
video {
|
||||
max-width: $wide-width;
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
a {
|
||||
color: $link-color;
|
||||
font-family: 'Source Sans Pro';
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:visited {
|
||||
color: $link-color-visited;
|
||||
}
|
||||
|
||||
.gallery {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
|
||||
a {
|
||||
margin: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.lightbox {
|
||||
padding: 0.2em;
|
||||
}
|
||||
|
||||
code {
|
||||
font-family: 'Source Code Pro';
|
||||
font-size: 14pt;
|
||||
background-color: $code-background-color;
|
||||
padding: {
|
||||
left: 0.2em;
|
||||
right: 0.2em;
|
||||
}
|
||||
}
|
||||
|
||||
blockquote {
|
||||
border-left: $menu-background-color 5px solid;
|
||||
margin: {
|
||||
left: 0.5em;
|
||||
right: 0;
|
||||
}
|
||||
padding: {
|
||||
left: 1.0em;
|
||||
right: 1.5em;
|
||||
}
|
||||
}
|
||||
|
||||
button {
|
||||
border: none;
|
||||
padding: {
|
||||
top: 3px;
|
||||
bottom: 3px;
|
||||
left: 10px;
|
||||
right: 10px;
|
||||
};
|
||||
background-color: $menu-active-color;
|
||||
color: $text-color;
|
||||
font-family: 'Source Sans Pro';
|
||||
}
|
||||
|
||||
.mastodon-comment {
|
||||
margin: 0.5rem 0;
|
||||
display: flex;
|
||||
padding: 0.5rem 1rem;
|
||||
background-color: $code-background-color;
|
||||
|
||||
.avatar img {
|
||||
margin-right: 1rem;
|
||||
min-width: 60px;
|
||||
}
|
||||
|
||||
.content {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.date {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.ellipsis::after {
|
||||
content: "\2026";
|
||||
}
|
||||
|
||||
.invisible {
|
||||
font-size: 0;
|
||||
line-height: 0;
|
||||
display: inline-block;
|
||||
width: 0;
|
||||
height: 0;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
nav {
|
||||
width: $wide-width;
|
||||
@media screen and (max-width: $margin-breakpoint) {
|
||||
margin: {
|
||||
left: $narrow-margin;
|
||||
right: $narrow-margin;
|
||||
}
|
||||
align-self: stretch;
|
||||
width: auto;
|
||||
}
|
||||
overflow: hidden;
|
||||
|
||||
background-color: $menu-background-color;
|
||||
color: $menu-text-color;
|
||||
font-weight: bold;
|
||||
|
||||
a {
|
||||
float: left;
|
||||
display: block;
|
||||
border-left: $background-color 2px solid;
|
||||
text-align: center;
|
||||
padding: 14px 16px;
|
||||
text-decoration: none;
|
||||
font-size: 17px;
|
||||
color: $menu-text-color;
|
||||
}
|
||||
|
||||
|
||||
.active {
|
||||
background-color: $menu-active-color;
|
||||
}
|
||||
|
||||
.icon {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.dropdown {
|
||||
float: left;
|
||||
overflow: hidden;
|
||||
|
||||
.dropbtn {
|
||||
border: none;
|
||||
border-left: $background-color 2px solid;
|
||||
font-size: 17px;
|
||||
outline: none;
|
||||
padding: 14px 16px;
|
||||
margin: 0;
|
||||
background-color: $menu-background-color;
|
||||
color: $menu-text-color;
|
||||
}
|
||||
|
||||
.dropdown-content {
|
||||
display: none;
|
||||
position: absolute;
|
||||
min-width: 160px;
|
||||
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
|
||||
z-index: 1;
|
||||
|
||||
a {
|
||||
float: none;
|
||||
padding: 12px 16px;
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
text-align: left;
|
||||
border-top: $background-color 2px solid;
|
||||
color: $menu-text-color;
|
||||
background-color: $menu-background-color;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
background-color: $menu-active-color;
|
||||
color: $menu-text-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown:hover .dropbtn,
|
||||
a:hover {
|
||||
background-color: $menu-active-color;
|
||||
}
|
||||
|
||||
.dropdown:hover .dropdown-content {
|
||||
display: block;
|
||||
}
|
||||
@media screen and (max-width: $menu-breakpoint) {
|
||||
.dropdown .dropbtn,
|
||||
a {
|
||||
display: none;
|
||||
}
|
||||
|
||||
a.icon {
|
||||
float: right;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: $menu-breakpoint) {
|
||||
nav.responsive {
|
||||
position: relative;
|
||||
|
||||
.icon {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
border-top: $background-color 2px solid;
|
||||
float: none;
|
||||
display: block;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.dropdown {
|
||||
float: none;
|
||||
|
||||
.dropbtn {
|
||||
border-top: $background-color 2px solid;
|
||||
display: block;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-content {
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue