cs184-su25-art-competition/main.css at main · minjunekim72/cs184-su25-art-competition · 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
html{
  font-size:16px;
  font-family:lato,Helvetica,Arial,sans-serif;
  line-height:1.25;
  /* cursor: url(https://cdn.custom-cursor.com/packs/4937/minimal-ow-pack.png) , default!important; */
  cursor:url(https://cdn.custom-cursor.com/db/10572/32/minimal-ow-cursor.png) , default!important;
}
body{
  box-sizing:border-box;
  max-width:960px;
  margin:0 auto;
  padding:5em 2em;
  color:#171106;
  text-align:center
  }
h1{
  font-size:2.25em;
  margin:1rem 0;
  font-family:rancho,Helvetica,Arial,sans-serif
}
h2{
  font-size:1.75em;
  margin:1rem 0;
  font-family:rancho,Helvetica,Arial,sans-serif
}
p{
  font-size:1em;
  margin:1em 0
}

.textgray{
  opacity:.5
  }
.highlight{
  position:relative
}

.highlight::before{
  top:50%;
  left:50%;
  position:absolute;
  content:"";
  display:block;
  width:100%;
  height:100%;
  padding:.125em .25em;
  transform:translate(-50%,-50%) rotate(-1deg);
  transform-origin:center;
  z-index:-1
}
.highlight::before{
  background-color:rgba(103,58,183,.4)
}
.artworks{margin:6em 0}
.artwork{display:flex;flex-wrap:wrap;margin:0 0 4em;border-top:2px solid #c8c8c8}

.artwork .artwork-image-container{
  flex:0 1 auto;
  width:384px;
  margin:0;
  position:relative
}

.artwork-letter{position:absolute;background-color:#fff;border-radius:50%;width:2em;height:2em;line-height:2em;text-align:center;transform:translate(-50%,-50%);background-color:#171106;color:#fff;box-shadow:0 0 3px rgba(0,0,0,.1);font-family:rancho,Helvetica,Arial,sans-serif}

.artwork img{display:block;box-sizing:border-box;max-width:100%;height:auto;border:2px solid #c8c8c8;border-top:none}

.artwork-caption{margin:0;padding:.5em 1.5em;width:384px;flex:1 1 auto;text-align:left;overflow-wrap:break-word}

.artwork h3{font-size:1em;font-weight:700;margin:1rem 0;color:#888}

.artwork hr{margin-right:-1.5em;border:none;border-top:1px solid #c8c8c8}

.iframe-voting{margin-top:3em;width:100%}