beardtechguy-main.css

@import url('https://gist.github.com/kylereddoch/6849d3aa5f2f9cefbb17b29f219b239c/raw/037f7dd3209247302e6d6b69334138d9b4a06eec/dracula-adapted-beardedtechguy.css');

:root {
    --foreground: #d8dee9;
    --background: #2E3440;
    --link: #5e81ac;
    --accent: #868e96;
}

@font-face {
    font-family: 'omg.lol';
    src: url('data:font/woff2;charset=utf-8;base64,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') format('woff2');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

.logotype {
    color: #f783ac;
    font-family: 'omg.lol';
}

/* Color for profile items list */
.fa-li,
.fas,
.omg-icon {
    color: #bf616a;
}

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
    .latest-status {
        /* display: inline-block;
         */
        padding: 0 1em 1em;
        border: 1px solid var(--accent);
        width: 100%;
        margin: 1.25em auto;
        text-align: center;
        border-radius: 5px;
        /* justify-content: center;
         */
        /* flex-wrap: nowrap;
         */
        /* align-items: center;
         */
    }

    .weather-icon {
        width: 40x;
        /* Adjust the width as needed */
        height: 40px;
        /* Adjust the height as needed */
        vertical-align: middle;
        /*margin-bottom: 5px;
        */
    }

    .current-weather,
    .current-song {
        text-align: center;
        margin-bottom: 20px;
    }

    footer {
        max-width: 60em;
        margin: 1em auto;
        padding: 0 1em;
    }

    .recent-posts {
        display: inline-grid;
        padding: 1em;
        border: 1px solid var(--accent);
        width: 100%;
        margin: 0 0 1rem 0;
        border-radius: 5px;
    }

    .show-more {
        display: block;
        padding: .5em;
        border: 1px solid var(--link);
        width: 135px;
        margin: 1rem auto;
        border-radius: 5px;
        text-align: center;
    }
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
    .latest-status {
        /* display: inline-block;
         */
        padding: 0 1em 1em;
        border: 1px solid var(--accent);
        width: 450px;
        margin: 1.25em auto;
        text-align: center;
        border-radius: 5px;
        /* justify-content: center;
         */
        /* flex-wrap: nowrap;
         */
        /* align-items: center;
         */
    }

    .weather-icon {
        width: 40x;
        /* Adjust the width as needed */
        height: 40px;
        /* Adjust the height as needed */
        vertical-align: middle;
        margin-bottom: 10px;
    }

    .recent-posts {
        display: inline-grid;
        padding: 1em;
        border: 1px solid var(--accent);
        width: 45%;
        margin: .5em;
        border-radius: 5px;
    }

    .show-more {
        display: block;
        padding: .5em;
        border: 1px solid var(--link);
        width: 135px;
        margin: 1rem auto;
        border-radius: 5px;
        text-align: center;
    }
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
    .latest-status {
        /* display: inline-block;
         */
        padding: 0 1em 1em;
        border: 1px solid var(--accent);
        width: 450px;
        margin: 1.25em auto;
        text-align: center;
        border-radius: 5px;
        /* justify-content: center;
         */
        /* flex-wrap: nowrap;
         */
        /* align-items: center;
         */
    }

    .weather-icon {
        width: 40x;
        /* Adjust the width as needed */
        height: 40px;
        /* Adjust the height as needed */
        vertical-align: middle;
        margin-bottom: 10px;
    }

    .recent-posts {
        display: inline-grid;
        padding: 1em;
        border: 1px solid var(--accent);
        width: 45%;
        margin: .5em;
        border-radius: 5px;
    }

    .show-more {
        display: block;
        padding: .5em;
        border: 1px solid var(--link);
        width: 135px;
        margin: 1rem auto;
        border-radius: 5px;
        text-align: center;
    }
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
    .latest-status {
        /* display: inline-block;
         */
        padding: 0 1em 1em;
        border: 1px solid var(--accent);
        width: 450px;
        margin: 1.25em auto;
        text-align: center;
        border-radius: 5px;
        /* justify-content: center;
         */
        /* flex-wrap: nowrap;
         */
        /* align-items: center;
         */
    }

    .weather-icon {
        width: 40x;
        /* Adjust the width as needed */
        height: 40px;
        /* Adjust the height as needed */
        vertical-align: middle;
        margin-bottom: 10px;
    }

    .recent-posts {
        display: inline-grid;
        padding: 1em;
        border: 1px solid var(--accent);
        width: 30%;
        margin: .5em;
        border-radius: 5px;
    }
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
    .latest-status {
        /* display: inline-block;
         */
        padding: 0 1em 1em;
        border: 1px solid var(--accent);
        width: 450px;
        margin: 1.25em auto;
        text-align: center;
        border-radius: 5px;
        /* justify-content: center;
         */
        /* flex-wrap: nowrap;
         */
        /* align-items: center;
         */
    }

    .weather-icon {
        width: 40x;
        /* Adjust the width as needed */
        height: 40px;
        /* Adjust the height as needed */
        vertical-align: middle;
        margin-bottom: 10px;
    }

    .recent-posts {
        display: inline-grid;
        padding: 1em;
        border: 1px solid var(--accent);
        width: 30%;
        margin: .5em;
        border-radius: 5px;
    }
}

* {
    box-sizing: border-box;
}

body {
    font-family: 'Mint Grotesk', sans-serif;
    font-size: 120%;
    color: var(--foreground);
    background: var(--background);
}

header nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

header nav li {
    display: inline-block;
}

header nav li a {
    display: block;
    text-decoration: none;
    margin-right: 1em;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Mint Grotesk', sans-serif;
    margin: 1rem 0;
}

p,
li {
    line-height: 160%;
}

.profile-picture {
    border-radius: 100%;
    height: 8.7em;
}

header {
    max-width: 60em;
    margin: 2em auto;
    padding: 0 1em;
}

footer {
    max-width: 100%;
}

footer ul {
    list-style: none;
    margin: 0;
}

footer li {
    display: inline;
}

.center {
    text-align: center;
}

footer p {
    font-size: 90%;
    text-align: center;
}

header {
    margin-top: 4em;
    text-align: center;
}

a:link {
    color: var(--link);
}

a:visited {
    color: var(--link);
}

a:hover {
    color: var(--link);
}

a:active {
    color: var(--link);
}

.post-info,
.post-tags {
    font-size: 85%;
    color: var(--accent);
    text-align: left;
}

.post-info i:nth-child(2) {
    margin-left: .75em;
}

.tag {
    background: var(--accent);
    color: var(--background) !important;
    padding: .3em .4em;
    margin: .8em 0 0 .4em;
    border-radius: .5em;
    text-decoration: none;
    display: inline-block;
}

hr {
    height: 1px;
    border-width: 0;
    color: var(--accent);
    background-color: var(--accent);
    margin: 2em 0;
}

code {
    padding: .2em .3em;
    border: 1px solid var(--accent);
    white-space: pre-wrap;
    word-wrap: break-word;
}

pre,
code {
    font-family: 'MD IO 0.4';
    font-size: 90%;
}

pre code {
    background: #000;
    color: #eee;
    display: inline-block;
    padding: 1em;
    white-space: pre-wrap;
    word-wrap: break-word;
}

img {
    max-width: 100%;
}

table {
    border-collapse: collapse;
}

td,
th {
    padding: .75em;
    text-align: left;
    border: 1px solid var(--accent);
}

.weblog-title a {
    text-decoration: none !important;
    color: var(--foreground);
}

.current-weather,
.current-song {
    text-align: center;
}

.omglol-status-header {
    margin-top: 1.6em;
    margin-bottom: .5em;
    text-align: center;
}

.previous-page+.next-page::before {
    content: "\2022";
    color: #ccc;
    margin: 0 0.75em;
}

.divider::after {
    content: "\2022 \2022 \2022";
    color: #ccc;
}