fdgl-homepage/static/css/style.css

* {
  box-sizing:border-box;
}

html, body {
  margin: 0;
  padding: 0;
}

html {
  font-family: -apple-system, BlinkMacSystemFont, "Roboto", "Oxygen", "Ubuntu", "Droid Sans", "Helvetica Neue", Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.5;
}

/*
    On modern smartphones with high dpi screens, we have to enlarge the font in portrait mode
 */
@media only screen and (-moz-min-device-pixel-ratio: 2) and (orientation: portrait),
       only screen and (-o-min-device-pixel-ratio: 2/1) and (orientation: portrait),
       only screen and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait),
       only screen and (min-device-pixel-ratio: 2) and (orientation: portrait) {

    html {
        font-size: 2.5rem;
    }
}

body {
    text-size-adjust:100%;
    background-attachment: fixed;
    background-color: #000000;
    color: rgba(255, 255, 255, 0.75);
    display: flex;
    flex-direction: column;
    min-height:100vh
}

main {
  display: block
}

a {
    color: #c11012;
    text-decoration:none
}

a:hover, a:focus {
    text-decoration:underline
}

a strong {
    color:inherit
}

h1, h2, h3, h4, h5, h6, .site-title {
    color: #313131;
    font-weight: 600;
    line-height: 1.25;
    margin-bottom: .5rem;
    text-rendering:optimizeLegibility
}

.site-title, .site-subtitle {
    text-align: center;
}


h1 {
    font-size:2rem
}

h2 {
    font-size: 1.5rem;
    margin-top:1rem
}

hr  {
    border: 1px solid #c11012;
    border-radius: 2px;
}

#sidebar {
    flex: 0 0 auto;
    padding:2rem
}

#sidebar .site-title {
    font-family: 'Abril Fatface', serif;
    font-size: 1.25rem;
    font-weight: normal;
    margin-bottom: .5rem;
    margin-top:0
}

#sidebar nav {
  display: flex;
}

#sidebar-nav-links {
  flex-flow: column nowrap;
}

.content {
    background: #fff;
    color: #515151;
    padding:2rem
}

.container {
    display: flex;
    flex: 1 1 auto;
    flex-direction:column
}

.container > .content {
    flex-grow: 1;
    padding-bottom:4rem
}

.container > header {
    background: transparent;
    color: #fff;
    margin:-1.5rem 2rem 2rem
}

.container > header h1, .container > header h2 {
    color:inherit
}

.home #sidebar {
    text-align:center
}

.home #sidebar .site-title {
    font-size:3.25rem
}

.home #sidebar header ~ nav {
    display:flex
}

.home #sidebar > * :last-child {
    margin-bottom:0.5rem
}

/*
   Styling for images meant to be embedded within blog post. Use it
   by append #illustration to image url in markdown like:
   ![Kitten](static/img/kitten.jpg#illustration)
 */
img[src $= "#illustration"] {
    display: block;
    margin-top: 8px;
    margin-left: auto;
    margin-right: auto;
    border-radius: 8px;
    width: 60%;
}

/*
    Display an external icon after each link that leads away from our site.
 */
.content a[href^="http://"]:not([href*="fdgl.rocks"]):not([href*="youtu.be"]):not([href*="youtube.com"]):not([href*="#hideextern"]):after,
.content a[href^="https://"]:not([href*="fdgl.rocks"]):not([href*="youtu.be"]):not([href*="youtube.com"]):not([href*="#hideextern"]):after {

    font-family: 'Font Awesome 5 Free';
    content: "\f35d";
    display: inline-block;
    font: normal 16px/1 'Font Awesome 5 Free';
    margin-left: 4px;
}
/*
    Display an Youtube icon left of every youtube link.
 */
.content a[href^="http://youtu.be"]:before,
.content a[href^="https://youtu.be"]:before,
.content a[href^="http://youtube.com"]:before,
.content a[href^="https://youtube.com"]:before {

    font-family: "Font Awesome 5 Brands";
    content: "\f167";
    display: inline-block;
    font: normal 16px/1 'Font Awesome 5 Brands';
    margin-right: 4px;
}


/*
    Landscape mode: Navbar to the left.
 */
@media (min-width: 49rem) and (orientation: landscape) {
    body {
        flex-direction: row;
        min-height: 100vh;
        -webkit-overflow-scrolling: touch;
        overflow-y:auto
    }

    body > * {
        -webkit-overflow-scrolling: touch;
        overflow-y:auto
    }

    #sidebar, .home #sidebar {
        text-align: left;
        width:18rem
    }

    #sidebar > * :last-child, .home #sidebar > * :last-child {
        margin-bottom:0
    }

    #sidebar {
        position: fixed;
        left:0
    }

    #sidebar .site-title {
        font-size:3.25rem;
    }


    #sidebar .site-title .back-arrow {
        display:none
    }

    #sidebar p.lead, #sidebar header ~ * {
        display:block
    }

    #sidebar header ~ nav {
        display:flex
    }

    .index #sidebar {
        margin-bottom:0
    }

    .container {
        background: #fff;
        color: #515151;
        min-height: 100vh;
        padding: 4rem 4rem 0;
        margin-left:18rem
    }

    .container > header {
        color: #313131;
        margin:0
    }

    .container > header h1, .container > header h2 {
        color:inherit
    }

    .container > header h1:last-child, .container > header h2:last-child {
        margin-bottom:.5rem
    }

    .container > * {
        max-width: 38rem;
        padding:0
    }
}

#sidebar a {
    color:#fff
}

#sidebar a:hover, #sidebar a:focus {
    text-decoration:underline
}

/*
    Portrait with navigation on top. Mostly for smartphones.
 */
@media screen and (max-width: 783px), (orientation: portrait) {
    .container > .content {
        padding:1.5rem
    }

    #sidebar #sidebar-nav-links {
        flex-direction: row;
        justify-content:space-evenly;
        flex-wrap: wrap;
    }

    #sidebar #sidebar-nav-links a {
        display: inline-block;
        margin:0 .5em
    }

    .home.index #sidebar {
        padding: 1rem
    }
}

.btn {
    background-color: #c11012;
    color: white;
    padding: 2px 8px;
    font-size: 48px;
    border: none;
}