sophie-lewis-hugo/themes/sophie-lewis/assets/scss/main.scss

$section-padding: 1rem 0rem;
$section-padding-desktop: $section-padding;
$section-padding-large: $section-padding;

$gray: #adadad;
$text-colour: #1F1F1F;



@import "./bulma/bulma.sass";
@import "./font.scss";

body {
    color: $text-colour;
    font-family: $serif_font;

    h1{
      font-family: $mono_font;
      font-size: 21px;
    }
}

red-text{
  color: #eb2b2b;
}

$hr-width: 0.15rem;
$hr-color: $gray;
hr {
    background-color: $hr-color;
    height: $hr-width;
}

.nav-tabs.tabs {
    li:first-of-type a {
        justify-content: left !important;
    }
    li:last-of-type a {
        justify-content: right !important;
    }
    a {
        padding: 0.5rem 0;
        font-size: 1rem;
        text-decoration: underline;
        @media (max-width: 480px) { font-size: 1.1rem; }
        color: $text-colour;
        border-bottom-color: $hr-color;
        border-bottom-width: $hr-width;
        :hover {
            border-bottom-color: $hr-color;
        }
    }
    padding: 0.8rem 0;
    .is-active a {
        font-weight: bold;
        color: $text-colour;
        border-bottom-color: $hr-color;
    }
}

// adding styles to make navigation fit on mobile
@media (max-width: 480px) {
    nav {
        .tabs {
            display: initial;
            ul {
                border-bottom: none;
                flex-wrap: wrap;
                gap: 1rem;
                li a { border-bottom: none;}
            }
        }
    }
}

.is-size-0 {
    font-size: 5rem;
}

.is-size-0-1 {
    font-size: 57px;
}

.is-size-4-1 {
    font-size: 16px;
}

.header .hero-body {
    padding-left: 0px !important;
    padding-top: 8em;
}

.button-book {
  background-color: #eb2b2b;
  color: white;
  float: right;
  font-family: $mono_font;
}

#content {
    font-size: 1.1rem;
    strong,i,b,em {
        font-family: $sans_font
    }
    em {
        font-style: italic;
        font-weight: lighter !important;

    }
    table {
        table-layout: fixed;
        width: 100%;
        p {
            padding-bottom: 0 !important;
        }
    }
    td {
        padding: 0.5rem 0;
    }
    hr {
        margin-top: 0.5rem;
        margin-bottom: 2rem;
    }
    iframe {
        padding-bottom: 1rem;
    }
    &.videos {
        em {
            margin-bottom: 1rem;
        }
    }
    &.about {
        hr ~ p {
            padding-bottom: 0 !important;
        }
    }
    &.about,&.index {
        strong,i,b,em {
            font-family: $serif_font
        }
    }
    &:not(.videos) p {
        padding-bottom: 1rem;
    }
    &.index {
        p {
            padding-bottom: 2rem;
        }
    }
    &.getintouch p {
        padding-bottom: 0;
    }
    .contact {
        p {
            font-family: $sans_font;
        }
        .contact_text {
            font-weight: 200;
        }
        padding-bottom: 1rem;
    }
    &.writing {
        img {
            margin-bottom: 0.25em;
        }

        .book-cell {
            padding-right: 2em;
            justify-content: right;
        }

        .book-cover {
            float: left;
            width: 100%;
            text-align: center;
            img {
                height: 184px;
            }
            a {
                color: $text-colour;
            }
            p {
                color: $text-colour;
                text-decoration: underline;
                font-weight: 200;
                font-family: $sans_font;
            }
            div.placeholder {
                height: 184px;
                width: 122px;
                background-color: #adadad;
            }
        }

        .book-stats {
            text-align: center;
        }

        .flex-row-books {
            display: flex;
            .thead {
                justify-content: left;
            }
        }


        .writing-section {
            .thead {
                padding-bottom: 0.5em;
            }
        }

    }
}

.small-cover {
    // float: left;
    margin-right: 1rem;
    width: 25%;
}

.clearfix {
    clear: both;
}

.headshot {
    padding-top: 1rem;
    img {
        border-radius: 100%;
        border-width: 0.15rem;
        border-color: $gray;
        border-style: solid;
    }
}

#content-column {
    @media all and (max-width: 1216px) {
        padding: 0 2rem;
    }
    @media all and (min-width: 1408px) {
        padding-right: 6.5rem !important;
    }
}

.title {
    font-family: $serif_font;
    font-style: italic;
    font-weight: 200;
}

.subtitle {
    font-family: $sans_font;
    font-weight: 200;
}

p {
    font-family: $serif_font;
    b {
        font-weight: normal;
    }
}

h1 {
  font-family: $mono_font;
  font-size: 21px;
}

nav,footer {
    font-family: $sans_font;
    //font-style: italic;
}

.cv-entry {
    padding: 1rem 0;
    font-family: $sans_font;
    .job-title {
        font-weight: 400;
    }
    .job-date {
        font-weight: 200;
    }
}

footer {
    hr {
        margin-top: 0;
        margin-bottom: 0.8rem;
    }
    .social-circles {
        img {
            height: 32px;
            border-radius: 100%;
        }
    }
}

@media (max-width: 480px) {
    .thead {
        display: none;
    }
}

/* EVENTS PAGE STYLES
====================== */

#events-listing {
    h1 {
        margin-bottom: 1em;
        font-weight: 600;
        font-size: 21px;
    }

    .events-list {

        li {
            margin-bottom: 1rem;
            &.past-event { opacity: 0.5; }

            .event-title {
                padding-bottom: 0;
                font-weight: bold;
            }

            small { font-weight: normal;}
        }
    }
}

/* ABOLISH THE FAMILY STYLES
============================= */

#abolish-the-family {
    padding-top: 1rem;
    @media (max-width: 480px) { padding-top: 2rem; }
    @media (max-width: 480px) { border-top: 1px solid; }

    .book-cell {
        .book-cover { margin-top: 2em; }

        .order-link {
            text-decoration: underline;
            font-size: 1.2rem;
            color: #851c22;
            display: inline-block;
            @media (max-width: 480px) { padding-top: 1em; }
        }

        margin-bottom: 1.5em;
    }

    #reviews {
        margin-bottom: 2rem;
        h2 {
            font-family: 'IBM Plex Serif', sans-serif;
            font-size: 2rem;
            font-weight: 300;
            font-style: italic;
        }

        ol {
            padding-left: 1.5rem;
            li::marker { font-family: 'IBM Plex Serif', sans-serif; }
        }
    }

    .testimonial-card {
        border: 1px solid;
        padding: 1em;
        margin-bottom: 2rem;
        .testimonial-author {
            font-style: italic;
        }
    }
}

/* AUDIO PAGE STYLES
============================= */
#audio-listing {
    @media (max-width: 480px) { padding-top: 3rem; }
    @media (max-width: 480px) { border-top: 1px solid; }

    h1 {
        margin-bottom: 1em;
        font-family: 'IBM Plex Serif', sans-serif;
        font-weight: 200;
        font-size: 2.25rem;
        font-style: italic;
    }

    .audio-list {
        display: flex;
        flex-direction: column-reverse;
        li {
            margin-bottom: 2rem;

            p {
                padding-bottom: 0;
                font-weight: bold;
            }

            small { font-weight: normal;}
        }
    }
}