# 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;

}