styles.scss

/*
 * Sidebar
 */

.sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    font-size: ($font-size-base * 0.9);
    z-index: 100; /* Behind the navbar */
    padding: 60px 0 0; /* Height of navbar 48px */
    box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1);

    .nav-link {
	font-weight: 500;
	color: #333;
    }

    .nav-link .feather {
	margin-right: 4px;
	color: #999;
    }

    .nav-link.active {
	color: #007bff;
    }

    .nav-link:hover .feather,
    .nav-link.active .feather {
	color: inherit;
    }
}

.sidebar-sticky {
    position: relative;
    top: 0;
    height: calc(100vh - 48px);
    padding-top: .5rem;
    overflow-x: hidden;
    overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
}

@supports ((position: -webkit-sticky) or (position: sticky)) {
    .sidebar-sticky {
	position: -webkit-sticky;
	position: sticky;
    }
}

.sidebar-heading {
    font-size: .75rem;
    text-transform: uppercase;
}

#TableOfContents{
    ul {
	padding-left: 10%;
    }
}

/*
 * Content
 */

[role="main"] {
    padding-top: 48px; /* Space for fixed navbar */
}

/*
 * Navbar
 */

.navbar-brand {
    padding-top: .75rem;
    padding-bottom: .75rem;
    font-size: 1rem;
    background-color: rgba(0, 0, 0, .25);
    box-shadow: inset -1px 0 0 rgba(0, 0, 0, .25);

    .form-control {
	padding: .75rem 1rem;
	border-width: 0;
	border-radius: 0;
    }
}

.form-control-dark {
    color: #fff;
    background-color: rgba(255, 255, 255, .1);
    border-color: rgba(255, 255, 255, .1);
}

.form-control-dark:focus {
    border-color: transparent;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, .25);
}

/*
 * Author box
 */
.author-footer {
    border-top: 1px solid #eee;
    margin: 2em auto;
    padding-top: 2em;

    img {
	border: 1px solid #eee;
	padding: 2px;
    }    
}



/*
 * Highlighting fence code
 */
.highlight pre {
    padding: 15px
}

.homepage_branding {
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
    margin: 2em auto;
    padding-top: 2em;
    font-size: large;

}


/*
 * Footer
 */
.site-footer {
    border-top: 2px solid $gray-300;
    margin-top: 5em;

    .footer-nav {
	list-style-type: none;
    }

    .footer-nav li .fa {
	padding-right: 5px;
    }
}

/*
 * Shell console
 */
.shell {

    background-color: $kbd-bg;
    padding: 0.5rem 1rem;
    border-radius: 0.2rem;
    box-shadow: inset 0 -0.1rem 0 rgba(0, 0, 0, 0.25);
    color: $kbd-color;
    
    .shell-prompt {
	color: #0c0;
	font-weight: bold;
    }

    .shell-comment {
	color: grey;
    }

    .shell kbd {
	box-shadow: none;
	font-weight: bold;
    }
}

.error-container {
  max-width: 42em;
}

/*
 * Error page
 */
.error {
    padding: 0 1.5rem;
    margin-top: 35%;
    .btn-lg {
	padding: .75rem 1.25rem;
	font-weight: 700;
    }
}

/*
 * Quotes
 */
blockquote{
    font-size: ($font-size-base *1.2); //1.4em;
    width:70%;
    margin:50px auto;
    font-family:Open Sans;
    font-style:italic;
    color: $gray-700;
    padding:1.2em 30px 1.2em 75px;
    border-left:8px solid $dark;
    line-height:1.6;
    position: relative;
    background-color: $gray-200;

    &:before{
	font-family: Arial;
	content: "\201C";
	color: $dark;
	font-size: 4em;
	position: absolute;
	left: 10px;
	top:-10px;
    }

    &:after{
	content: '';
    }

    cite{
	display:block;
	color:$dark;
	font-style: normal;
	font-weight: bold;
	margin-top:1em;
    }
}


.a-social {
    padding-right: 5px;
}

/*
  Fix Problem:  
 <a href="">//someurl.com/a-really-really-really-really-really-really-really-really-really-long-url</a>
*/
a {
    word-wrap: break-word;
}