pydis_site/static/css/events/base.css


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
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101

.breadcrumb-section {
    padding: 1rem;
}

pre {
    /*
     * Style it the same as the <code> tag, since highlight.js does not style
     * backgrounds of <pre> tags but bulma does, resulting in a weird off-white
     * border.
     */
    background-color: #282c34;
}

.panel .panel-heading {
    /*
     * Remove whitespace between the panel heading and the first item in a panel,
     * since it makes the first panel item taller than the others.
     */
    margin-bottom: 0 !important
}


.event-gallery .box {
    padding: 0;
}

.event-gallery .box-content {
    padding: 1.25rem;
}

.event-gallery img {
    object-fit: cover;
    /* Same as that of box */
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
}

/* CSS-only Masonry layout:
 * https://tobiasahlin.com/blog/masonry-with-css/
 *
 * Adapted for responsiveness:
 * - Mobile   (<=700px)   No columns at all
 * - Tablets  (700~900px) Two columns Masonry
 * - Desktop+ (>=900px)   Three columns Masonry
 */
@media (min-width: 700px) {
    .event-gallery {
        display: flex;
        flex-flow: column wrap;
        align-content: space-between;
    }

    @media (min-width: 900px) {
        /* 3 columns */
        .event-gallery {
            /* Required. Must be only slightly taller than the tallest column */
            height: 60rem;
        }

        .event-gallery .box {
            width: calc(33% - 1rem);
            margin-bottom: 1rem;
        }

        /* Reorder vertically */
        .event-gallery .box:nth-child(3n+1) { order: 1; }
        .event-gallery .box:nth-child(3n+2) { order: 2; }
        .event-gallery .box:nth-child(3n)   { order: 3; }

        /* 2 line breaks to force new columns, for each gap between the three columns. */
        .event-gallery::before, .event-gallery::after {
            content: "";
            flex-basis: 100%;
            width: 0;
            order: 2;
        }
    }

    @media (max-width: 900px) {
        /* 2 columns */
        .event-gallery {
            height: 80rem;
        }

        .event-gallery .box {
            width: calc(50% - 1rem);
            margin-bottom: 1rem;
        }

        .event-gallery .box:nth-child(2n+1) { order: 1; }
        .event-gallery .box:nth-child(2n)   { order: 2; }

        /* 1 line break to force a new column, for the gap between the two columns. */
        .event-gallery::before {
            content: "";
            flex-basis: 100%;
            width: 0;
            order: 1;
        }
    }
}