/*
Theme Name: Thoughts
Author: Felix Buhler
Author URI: https://felix-buhler.de
Description: Where is my mind
Version: 1.0
Requires at least: 5.0
Tested up to: 5.4
Requires PHP: 7.0
Text Domain: thoughts
*/

/* 
============================================================

Reset

============================================================ 
*/

@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


@font-face {
    font-family: "Instrument";
    src: url("css/fonts/InstrumentSerif-Regular.ttf") format("truetype");
}

@font-face {
    font-family: "Instrument";
    src: url("css/fonts/InstrumentSerif-Italic.ttf") format("truetype");
    font-style: italic;
}

@font-face {
    font-family: "Inter";
    src: url("css/fonts/Inter-Regular.ttf") format("truetype");
}

/* 
============================================================

Variables 

============================================================ 
*/

:root {
    /* Colors */
    --color-black: #1f1f1f;
    --color-white: #fff;

    --post-yellow: #fffc4b;
    --post-green: #94ffa8;
    --post-orange: #ffc04a;
    --post-purple: #f699ff;
    --post-red: #ffb2ca;

    /* Fonts */
    --font-sans: "Inter", sans-serif;
    --font-serif: "Instrument", serif;

    --font-size-default: 13px;
    --font-size-small: 20px;
    --font-size-large: 35px;

    /* Dimensions */
    --padding: 10px;
    --padding-post: 30px;
    --post-gap: 50px;
    --border-radius: 20px;
    --border-radius-inner: 5px;
}

/* 
============================================================

HTML

============================================================ 
*/

body,
html {
    width: 100%;
    height: 100%;
    font-size: var(--font-size-default);
    font-family: var(--font-sans);
    background: #fbfbfb;
}

/* 
============================================================

Typography

============================================================ 
*/

h1,
h2,
h3,
h4,
h5,
h6 {
    font-size: inherit;
    font-weight: inherit;
}

/* 
============================================================

Links

============================================================ 
*/

a {
    color: currentColor;
    text-decoration: none;
    cursor: pointer;
}

/* 
============================================================

Posts

============================================================ 
*/

main {
    display: flex;
    padding: var(--post-gap) var(--padding);
    gap: var(--post-gap);
    flex-direction: column;
    align-items: center;
}

.post {
    border-radius: var(--border-radius);
    max-width: 600px;
    width: 100%;
    overflow: hidden;
}


.post.text {
    --post-color: var(--post-yellow);
    background: var(--post-color);
}

.post.text_image {
    --post-color: var(--post-purple);
    background: var(--post-color);
}

.post.spotify {
    --post-color: var(--post-green);
    background: var(--post-color);
}

/* Post Date */

.post .date {
    display: flex;
    justify-content: end;
    align-items: center;
    gap: 5px;
    margin-bottom: 20px;
}

.post .date>* {
    padding: 2px 5px;
    background: var(--color-black);
    color: var(--post-color);
    border-radius: 4px;
}

.post .date a {
    transition: 0.2s all ease-in-out;
}

.post .date a:hover {
    opacity: 0.8;
}

/* Images */

.post img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: var(--border-radius-inner);
}

/* Posts with Padding */

.post.text,
.post.text_image,
.post.spotify {
    padding: var(--padding-post);
}

/* Transparent Posts */

.post.youtube,
.post.image {
    background: transparent;
    border-radius: 0;
    --post-color: var(--color-white);
}

/* Content */

.post .content-text {
    font-family: var(--font-serif);
    font-size: var(--font-size-large);
}

.post .content-text.small {
    font-size: var(--font-size-small);
}

.post .content-text a {
    border-bottom: 1px solid currentColor;
}

/* Image Post */

.post.image img {
    border-radius: var(--border-radius);
}

/* Image & Text Post */

.post.text_image .content-text {
    margin-bottom: var(--padding);
}

/* YouTube */

.post.youtube iframe {
    width: 100%;
    border-radius: var(--border-radius);
    overflow: hidden !important;
}

/* Spotify */
.spotify-content {
    margin-top: var(--padding);
}

.spotify-content a:before {
    content: "Audio";
    font-family: var(--font-serif);
}

.spotify-content i {
    font-style: italic;
    font-family: var(--font-serif);
}

.spotify .spotify-content {
    font-size: var(--font-size-large);
}