cssuob.github.io/css/merch-listing.scss at 3c108d9f40ee9187597cef9cb084d2c6fc625a9e · CSSUoB/cssuob.github.io · GitHub

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
---
---

@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css");

.merch-container {
  max-width: 1000px;
  margin: 0 auto;
}

.merch-preview {
  display: flex;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 20px;
  text-decoration: none;
  height: 120px;

  .merch-thumbnail {
    flex: 0 0 auto;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    border: 2px white solid;
    box-sizing: border-box;

    width: 120px;
    height: 120px;
    object-fit: cover;
  }

  .merch-details {
    flex: 1 1 auto;
    padding-left: 1em;
    width: calc(100vw - 150px - 5% - 1em);
    background: white;

    .merch-title {
      color: black;
    }

    .merch-excerpt {
      * {
        color: black;
      }
    }

    .merch-price {
      font-family: "JetBrains Mono", "Inconsolata", monospace;
      font-weight: bold;
      font-style: italic;
      font-size: smaller;
      color: black;
    }
  }
}

@media only screen and (min-width: 600px) {
  .merch-preview {
    .merch-details {
      .merch-title {
        margin-top: 0.5em;
        margin-bottom: 0.3em;
      }
      .merch-date {
        margin-top: 0.3em;
        margin-bottom: 0.5em;
      }
      .merch-excerpt p {
        margin-top: 0.5em;
      }
    }
  }
}

@media only screen and (max-width: 600px) {
  .merch-preview {
    .merch-details {
      .merch-title {
        font-size: min(6vw, 27px);
        margin-top: 0.2em;
        margin-bottom: 0.2em;
      }
      .merch-date {
        font-size: min(5vw, 27px);
        margin-top: 0.2em;
        margin-bottom: 0.2em;
      }
      .merch-excerpt p {
        margin-top: 0.5em;
      }
    }
  }
}