summaryrefslogtreecommitdiff
path: root/assets/css/components/_taxonomy.scss
blob: c295b07e93afeb33f261efb7584f87d7537e1416 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
.taxonomy {
    margin: 2rem auto;
    .taxonomy-categories {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: masonry;
        gap: 1rem;
        .taxonomy-categories-item {
            ul.category-articles {
                padding-inline-start: 1.5rem;
                list-style-type: square;
            }
            a.category-link {
                @include small-button;
                font-size: 0.9rem
            }
            h3.category-title {
                margin: 0.25rem 0;
               a:hover {
                   text-decoration: none;
               }
               span {
                   display: inline-block;
               }
               &:hover span {
                   animation: bounce 1s ease-in-out;
               }
               @keyframes bounce {
                   0%, 20%, 50%, 80%, 100% {
                       transform: translateY(0);
                   }
                   40% {
                       transform: translateY(-7px)
                        rotate(5deg)
                        scale(1.1);
                   }
                   60% {
                       transform: translateY(-5px) rotate(-3deg);
                   }
               }
            }
            .category-description {
                margin-top: 0;
            }
        }
    }

    .taxonomy-tags {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;

        .taxonomy-tags-item {
            display: inline-flex;
            align-items: center;
            gap: 0.3rem;

            padding: 0.25rem 0.75rem;
            background-color: var(--block-background-color);
            transition:
                color,
                background 0.3s;
            border-radius: 0.3rem;

            &:hover {
                text-decoration: none;
                background-color: var(--text-color);
                color: var(--block-background-color);
            }

            .tag-count {
                font-size: 0.8rem;
                color: var(--secondary-text-color);
            }
        }
    }

    .uncategorized-link {
        @include small-button;
        &::after {
            content: " →";
            color: var(--secondary-text-color)
        }
    }
}