# Custom sytling stuff
$spacing-unit: 30px; $jumbotron-padding: 6rem;
$server-splash-color: #222; $server-splash-bg: eeeeeedd;
$social-color: (
discord: #7289da, github: #24292e, qq: #169ada, rss: #ed8232
);
$minecraft-color: ( //code: (foreground, background)
0: (#000000, #000000), 1: (#0000aa, #00002a), 2: (#00aa00, #002A00), 3: (#00aaaa, #002a2a), 4: (#aa0000, #2a0000), 5: (#aa00aa, #2a002a), 6: (#ffaa00, #2a2a00), 7: (#aaaaaa, #2a2a2a), 8: (#555555, #151515), 9: (#5555ff, #15153f), a: (#55ff55, #153f15), b: (#55ffff, #153f3f), c: (#ff5555, #3f1515), d: (#ff55ff, #3f153f), e: (#ffff55, #3f3f15), f: (#ffffff, #3f3f3f)
);
@import “bootswatch/yeti/variables”; @import “bootstrap”; @import “bootswatch/yeti/bootswatch”;
/**
* Set `margin-bottom` to maintain vertical rhythm */ h1, h2, h3, h4, h5, h6, p, blockquote, pre, ul, ol, dl, figure, %vertical-rhythm { margin-bottom: $spacing-unit / 2; } /** * Basically a jumbotron */
.home-splash {
color: white; background-image: url(/assets/jumbotron.jpg); background-size: cover; background-position: center center; text-shadow: 0.1em 0.1em 0.1em #000000bb; padding: $jumbotron-padding ($jumbotron-padding / 8); margin-top: 50px; margin-bottom: $jumbotron-padding / 2; background-color: $jumbotron-bg; @include border-radius($border-radius-lg); @include media-breakpoint-up(sm) { padding: ($jumbotron-padding * 2) $jumbotron-padding / 4; }
}
.pagetop {
padding-top: 5rem; padding-bottom: 50px; margin-bottom: 5rem; margin-top: 3rem; background-image: url(/assets/pagetop.jpg); background-size: cover; background-position: center center;
}
.post-list-item {
border-bottom: 1px solid #ddd; padding-bottom: 1rem; margin-bottom: 2rem;
}
.post-header {
margin-bottom: 2rem;
}
.footer-main {
margin-top: 6rem; padding: 3rem 0; background: #f5f5f5;
}
.footer-copyright {
padding: 1rem 0; color: white; background: #999;
}
@each $social, $color in $social-color {
.fa-#{$social} { color: $color } .fa-#{$social}:hover { color: lighten($color, 15%); text-decoration: none; }
}
@each $code, $colors in $minecraft-color {
$foreground-color: nth($colors, 1); $background-color: nth($colors, 2); .minecraft-text-#{$code} { color: $foreground-color; text-shadow: 0.05rem 0.05rem 0.05rem $background-color; }
}
.minecraft-text-r {
color: inherit !important; text-shadow: inherit !important;
}
.minecraft-text {
@extend .text-monospace; @extend .minecraft-text-f;
}
.footer-social > .list-inline-item:not(:last-child) {
margin-right: 1rem;
}
.server-splash {
height: 100%; background: $server-splash-bg;
}
/*
* Reference: list-group-item-action */
.server-splash-action {
color: $server-splash-color; // Hover state @include hover-focus { color: $server-splash-color; filter: brightness(97%) } &:active { color: $server-splash-color; filter: brightness(92%) }
}
.server-splash-hover {
text-decoration: none;
}
.server-splash .list-inline-item:not(:last-child) {
margin-right: 0.25rem;
}
.side-panel-tags .list-inline-item:not(:last-child) {
margin-right: 0.25rem;
}
.post-content {
margin-bottom: 5rem
}
.section-nav {
@extend .list-unstyled;
}
.section-nav ul {
@extend .list-unstyled;
}
.toc-entry {
@extend .ml-4;
}
.toc-h1 {
margin-left: 0 !important;
}
.carousel-item{
height: 32rem;
} .carousel-item img{
height: 32rem; object-fit: cover; object-position: center center;
}
.nav-pills .active {
border: none;
}
.carousel-caption {
text-shadow: 0.1em 0.1em 0.1em #000000bb;
}
.kramdown table {
@extend .table; @extend .table-striped; @extend .table-hover;
}
.kramdown h1, h2 {
@extend .mt-5;
}
.kramdown h3 {
@extend .mt-3; font-size: 1.5rem;
}
.kramdown h4 {
font-size: 1.2rem;
}
.kramdown ol {
padding-left: 1.2rem;
}
.kramdown ul {
padding-left: 1.2rem;
}