cbillowes/curious-programmer-helium

@import "../../layout/variables.scss";

$accent: #ffffffdd;
$hover: $primary;

.posts {
    @include gutter;

    section {
        &:first-child {
            h1 {
                margin-top: 0;
                color: $accent;
                font-size: $font-size-lg-h1 + 0.35;

                a {
                    color: $accent;

                    &:hover {
                        color: $hover;
                    }
                }

                @include medium-media {
                    font-size: $font-size-md-h1 + 0.175;
                }


                @include small-media {
                    font-size: $font-size-sm-h1;
                }
            }

            p {
                color: $accent;
                font-size: $font-size-base + 0.3;

                @include medium-media {
                    font-size: $font-size-medium + 0.175;
                }


                @include small-media {
                    font-size: $font-size-small + 0.175;
                }
            }
        }

        h1 {
            text-align: center;
            margin: 2em 1em 0.25em 1em;

            a {
                color: $foreground;

                &:hover {
                    color: $hover;
                }
            }
        }

        p {
            padding-top: 1em;
            max-width: $container-width;
            margin: 0 auto;
            line-height: 2em;
        }

        .post-metadata p {
            font-size: $font-size-base - 0.35;
            color: darken($accent, 50%);
            margin-bottom: 0.5em;
        }

        @include small-media {
            .post-metadata p {
                font-size: $font-size-small - 0.25;
            }
        }
    }
}