main.scss

---
---

@charset "utf-8";

// Example Defaults
// $base-font-family: Helvetica, Arial, sans-serif;
// $base-font-size:   16px;
// $small-font-size:  $base-font-size * 0.875;
// $base-line-height: 1.5;

// $spacing-unit:     30px;

// $text-color:       #111;
// $background-color: #fdfdfd;
// $brand-color:      #2a7ae2;

// $grey-color:       #828282;
// $grey-color-light: lighten($grey-color, 40%);
// $grey-color-dark:  darken($grey-color, 25%);

// // Width of the content area
// $content-width:    800px;

// $on-palm:          600px;
// $on-laptop:        800px;

// Using media queries with like this:
// @include media-query($on-palm) {
//     .wrapper {
//         padding-right: $spacing-unit / 2;
//         padding-left: $spacing-unit / 2;
//     }
// }

// variables.less
// $theme-primary: #F05F40;
// $theme-dark: #222;

// // Import partials from `sass_dir` (defaults to `_sass`)
// @import
//         "mixins",
//         "base"
// ;

.sim-bg .btn {
        border-radius: 300px;
}

.sim-bg .btn-lg {
        padding: 10px 30px;
}

html, body {
        height: 100%;
}

.sim-bg header {
        background: url(/img/bg.png);
        background-position: center 250px;
        background-size: cover;
        background-repeat: no-repeat;
}

.sim-bg section {
        overflow-x: hidden;
}

header {
        min-height: calc(100% - 77px);
        position: relative;
}

.header-content {
        position: absolute;
        top: 15%;
        text-align: center;
        width: 100%;
}

section {
        padding: 100px 0px;
        background: white;
}

.service-box .bi {
        font-size: 5rem;
}

.contact-box .bi {
        font-size: 3rem;
}

.aside-box .bi {
        font-size: 3rem;
}

.site-tag {
        display: inline-block;
        background-color: #fafafa;
        padding: 5px;
        margin: 2px;
}

hr {
        margin: 10px 0px;
        border: none;
        border-top: 2px solid #0d6efd;
        max-width: 75px;
        opacity: 1.0;
}

hr.post-end {
        margin-top: 50px;
        border: none;
        border-top: 1px solid #eee;
        max-width: 100%;
}

.post-list-item .card-img-top {
        object-fit: contain;
        height: 100%;
        width: 100%;
        object-position: 50% 50%;
}

.post-list-item {
        border: none;
        border-bottom: 1px solid #eee;
        margin-bottom: 20px;
        padding-bottom: 20px;
}

article .comment-divider {
        border-top: 1px solid #000;
        opacity: 0.1;
        max-width: 100%;
}

article .comment-message {
    white-space: pre-wrap;
}

blockquote {
        margin: 1em;
        padding: 0.5em 0.5em 0.5em 1em;
        border-left: 2px solid #0d6efd;
        background-color: #f9f9f9;
        font-style: italic;
        font-size: 0.9em;
}

blockquote p {
        margin: 0;
}

blockquote code {
        font-style: normal;
}

figure {
        width: 100%;
}

figure img {
        margin: auto;
        display: block;
}

section#download .highlight {
        background-color: #111;
        border-radius: 5px;
}

section#download .highlight pre {
        padding: 1em;
        margin: 0;
}

// inline code style
code.highlighter-rouge {
        // background-color: #122b3b;
        // color: #b2fd6d;
        background-color: #EEE;
        color: #d63384;
        border-radius: 5px;
        padding: 0px 5px;
        display: inline-block;
}

.page h2,
.page h3,
.page h4,
.page h5,
.page h6,
.blog h2,
.blog h3,
.blog h4,
.blog h5,
.blog h6 {
        margin-top: 1em;;
}

// links next to section headers
.linked-heading {
        position: relative;
    
        .heading-anchor-wrapper {
            display: flex;
            justify-content: center;
            align-items: center;
            position: absolute;
            width: 1em;
            top: 0;
            left: 0;
            bottom: 0;
            transform: translateX(-100%);
    
            &:hover {
                .heading-anchor {
                    visibility: visible;
                    opacity: 1;
                }
            }
        }
    
        &:hover {
            .heading-anchor {
                visibility: visible;
                opacity: 1;
            }
        }
    
        .heading-anchor {
            visibility: hidden;
            opacity: 0;
            display: flex;
            margin-left: 4px;
            transition: visibility 0.2s ease, opacity 0.2s ease;
            text-decoration: none;
        }
    }