website/src/styles/components.scss

$news-bg: #fffbeb;
$news-accent-bg: #f8e8b1;

@import './mixins.scss';

//
// Components - for complex parts of the UI like search bars or compound buttons
//

.material-symbols-outlined {
    display: inline-grid;
    place-content: center;

    font-size: 24px;
    font-variation-settings:
        'FILL' 0,
        'wght' 300,
        'GRAD' 0,
        'opsz' 24;
}

.search {
    width: 100%;
    height: 2.5rem;

    @include neo-brutalist-card;

    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;

    cursor: pointer;

    background: #fff;

    &:hover,
    &:hover input[type='text'] {
        background: #f8f8f8;
    }

    input[type='text'] {
        border: none;
        box-shadow: none;
        outline: none;
        height: 100%;

        padding: 0;
        padding-left: 0.35rem;
    }

    .material-symbols-outlined {
        padding: 0 0.5rem;
    }
}

.flex-column {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.flex-row {
    display: flex;
    flex-direction: row;
    gap: 1rem;
}

// just to know for reference
.fake-masonry {
    display: grid;
    grid-template-columns: repeat(var(--columns), 1fr);
    grid-auto-flow: dense;

    & > * {
        grid-row: span var(--masonry-height);
    }
}

.search-results {
    width: 100%;

    display: flex;
    flex-direction: column;
    gap: 1rem;

    .search-result {
        width: 100%;

        display: grid;
        grid-template-columns: auto auto 1fr auto;
        grid-template-areas: 'icon text . right';

        align-items: center;

        gap: 0.5rem;

        padding: 0.5rem;

        background: #fff;

        @include neo-brutalist-card;

        a {
            display: contents;
        }

        & > .icon {
            grid-area: icon;
            display: grid;
        }

        & > .text {
            grid-area: text;
            display: grid;
        }

        & > .right {
            grid-area: right;
            display: grid;
        }
    }
}

.news-item {
    background: $news-bg;

    @include neo-brutalist-card($size: 3px, $offset: 9px);

    display: flex;
    flex-direction: column;

    width: 22rem;
    max-height: 27rem;

    ::-webkit-scrollbar {
        width: 10px;
    }

    ::-webkit-scrollbar-thumb {
        background-color: #c67e14;
        border: 2px solid #222;

        &:hover {
            background-color: #e69419;
        }
    }

    a {
        font-weight: 600;
        text-decoration: none;
        color: #c67e14;

        &:hover {
            text-decoration: underline solid 2px;
        }
    }

    & > .title {
        // border-bottom: 2px solid #222;

        border-top-left-radius: 9px;
        border-top-right-radius: 9px;

        padding: 1rem;
        background: $news-accent-bg;

        font-family: 'Source Sans Pro', sans-serif;
        font-weight: 700;
        font-size: 32px;
    }
    & > .abstract {
        flex-grow: 1;

        padding: 1rem;

        overflow-y: auto;

        @extend .text;
    }
    & > .continue {
        padding: 1rem;

        display: grid;
        align-items: end;
        justify-content: end;
    }
}

.appunti-scrollable {
    display: flex;
    overflow-x: auto;

    .appunti-list {
        padding: 2px;
        padding-bottom: 1rem;
    }
}

.appunti-list {
    display: grid;
    grid-auto-flow: column;

    gap: 3rem;

    overflow-x: auto;

    max-width: 100%;
}

.appunti-item {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;

    color: #444;

    & > .thumbnail {
        width: 10rem;
        aspect-ratio: 10 / 14;
        background: #e0e0e0;

        @include neo-brutalist-card($hoverable: true);
    }

    & > .thumbnail + * {
        font-weight: 700;
        padding-top: 0.25rem;
    }

    & > .title,
    & > .course,
    & > .author,
    & > .course-year {
        padding-left: 0.5rem;
        font-size: 16px;
    }
}