185 lines
2.8 KiB
SCSS
185 lines
2.8 KiB
SCSS
/*
|
|
jet black (tiefschwarz) - RAL 9005: #0e0e10, rgba(14, 14, 16, 1.0);
|
|
mango: #ff8040, rgba(255, 130, 67, 1.0);
|
|
gray: #a1a1a1, rgba(161, 161, 161, 1.0)
|
|
*/
|
|
|
|
/*
|
|
@media (prefers-color-scheme: light) {}
|
|
@media (prefers-color-scheme: dark) {}
|
|
*/
|
|
|
|
/* debug */
|
|
* {
|
|
border: 0 solid gray;
|
|
}
|
|
|
|
// customize some Bootstrap variables
|
|
|
|
|
|
$primary: #FF8040;
|
|
$body-bg: #0E0E10;
|
|
$body-color: darken(white, 20);
|
|
|
|
// the ~ allows you to reference things in node_modules
|
|
@import "~bootstrap/scss/bootstrap";
|
|
|
|
body {
|
|
padding-top: 95px;
|
|
padding-bottom: 155px;
|
|
}
|
|
|
|
.row.content {
|
|
height: 350px;
|
|
}
|
|
|
|
.col-center {
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.sidenav-left {
|
|
padding-top: 20px;
|
|
background-color: #f1f1f1;
|
|
height: 100%;
|
|
margin-left: 3em;
|
|
}
|
|
|
|
.sidenav-right {
|
|
padding-top: 20px;
|
|
background-color: #f1f1f1;
|
|
height: 100%;
|
|
}
|
|
|
|
@media screen and (max-width: 767px) {
|
|
.sidenav {
|
|
height: auto;
|
|
padding: 15px;
|
|
}
|
|
.row.content {height:auto;}
|
|
}
|
|
|
|
|
|
.navbar-top {
|
|
border-bottom-width: 1px;
|
|
border-bottom-color: #FF8040;
|
|
padding-top: 0;
|
|
padding-bottom: 0;
|
|
opacity: 0.9;
|
|
}
|
|
|
|
.navbar-bottom {
|
|
border-top-width: 1px;
|
|
border-top-color: #FF8040;
|
|
padding-top: 0;
|
|
padding-bottom: 0;
|
|
height: 125px;
|
|
opacity: 0.9;
|
|
|
|
}
|
|
|
|
.navbar-nav > li > .dropdown-menu {
|
|
background-color: #A1A1A1;
|
|
}
|
|
|
|
|
|
@include media-breakpoint-down(sm) {
|
|
.dropdown-toggle:after {
|
|
content: none;
|
|
}
|
|
#dropdown-menu {
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
@include media-breakpoint-up(md) {
|
|
.navbar {
|
|
padding-left: 100px;
|
|
padding-right: 100px;
|
|
}
|
|
}
|
|
|
|
|
|
.button-login {
|
|
margin-top: 25px;
|
|
}
|
|
|
|
.box {
|
|
border-width: 1px;
|
|
border-style: solid;
|
|
border-color: #ff8040;
|
|
border-radius: 10px;
|
|
padding: 15px;
|
|
background-image: url('../images/bg.jpeg');
|
|
background-position: center;
|
|
align-content: center;
|
|
}
|
|
|
|
/* BlogPosts */
|
|
|
|
.main-article {
|
|
border: 2px solid #efefee;
|
|
Background: #fff;
|
|
border-top-left-radius: 6px;
|
|
border-top-right-radius: 6px;
|
|
}
|
|
|
|
.main-article img {
|
|
width: 100%;
|
|
height: 250px;
|
|
border-top-right-radius: 5px;
|
|
border-top-left-radius: 5px;
|
|
border-top: 5px solid lightblue;
|
|
}
|
|
|
|
.blog-container {
|
|
border: 1px solid #FF8040;
|
|
border-radius: 5px;
|
|
background: #0E0E10;
|
|
margin-bottom: 25px;
|
|
background-image: url('../images/bg.jpeg');
|
|
background-position: center;
|
|
}
|
|
|
|
.main-article-link, .article-container a {
|
|
text-decoration: none;
|
|
color: #000;
|
|
}
|
|
|
|
.main-article-link:hover {
|
|
text-decoration: none;
|
|
color: #000;
|
|
}
|
|
|
|
.article-title {
|
|
min-width: 300px;
|
|
|
|
}
|
|
|
|
@media (max-width: 440px) {
|
|
.article-title {
|
|
min-width: 100px;
|
|
max-width: 245px;
|
|
}
|
|
}
|
|
|
|
.blog-img {
|
|
height: 100px;
|
|
width: 100px;
|
|
border-radius: 5px;
|
|
margin: 7px;
|
|
}
|
|
|
|
.article-author-img {
|
|
height: 25px;
|
|
border: 1px solid darkgray;
|
|
margin-left: 25px;
|
|
}
|
|
|
|
.blog-details {
|
|
font-size: .8em;
|
|
margin-right: 15px;
|
|
}
|
|
|
|
.blog-teaser {
|
|
margin-left: 15px;
|
|
} |