a fun bot for the hc slack
dunkirk.sh
1body {
2 background-color: #f5f5f5;
3 font-family:
4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial,
5 sans-serif;
6 line-height: 1.6;
7 color: #333;
8 margin: 0;
9 padding: 20px;
10 min-height: 100vh;
11}
12
13.container {
14 max-width: 1200px;
15 margin: 0 auto;
16 padding: 2rem;
17 /* Add these properties for vertical centering when there are no takes */
18 min-height: calc(100vh - 40px); /* 40px accounts for the body padding */
19 display: flex;
20 flex-direction: column;
21}
22
23.no-takes-message {
24 text-align: center;
25 font-size: 1.5rem;
26 padding: 2rem;
27 margin: auto; /* This will center vertically when parent is flex */
28 max-width: 600px;
29}
30
31.title {
32 font-size: 2.5rem;
33 margin-bottom: 2rem;
34 text-align: center;
35}
36
37.takes-grid {
38 display: flex;
39 margin-left: -2rem; /* Compensate for column gap */
40 width: auto;
41}
42
43.takes-grid-column {
44 padding-left: 2rem; /* Column gap */
45 background-clip: padding-box;
46}
47
48.take-card {
49 background: white;
50 border-radius: 12px;
51 padding: 1.5rem;
52 box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
53 margin-bottom: 2rem;
54}
55
56.take-header {
57 display: flex;
58 justify-content: space-between;
59 align-items: center;
60 margin-bottom: 1rem;
61}
62
63.take-title {
64 font-size: 1.25rem;
65 margin: 0;
66}
67
68.profile-image {
69 width: 1.5rem;
70 border-radius: 50%;
71 margin-right: 0.5rem;
72 object-fit: cover;
73}
74
75.user-pill {
76 display: flex;
77 align-items: center;
78 padding: 0rem 0rem 0rem 0.3rem;
79 border-radius: 999px;
80 background: #f8f9fa;
81 gap: 0.75rem;
82}
83
84.user-info {
85 display: flex;
86 align-items: center;
87}
88
89.take-meta {
90 margin-bottom: 1rem;
91}
92
93.meta-item {
94 display: flex;
95 margin-bottom: 0.5rem;
96}
97
98.meta-label {
99 font-weight: 500;
100 margin-right: 0.5rem;
101 min-width: 80px;
102}
103.video-container,
104.image-container {
105 margin-top: 1rem;
106 border-radius: 8px;
107 overflow: hidden;
108}
109
110.take-video,
111.take-image {
112 width: 100%;
113 height: auto;
114 display: block;
115 border-radius: 8px;
116 max-height: 40rem;
117}
118
119.projects-grid {
120 display: grid;
121 grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
122 gap: 2rem;
123}
124
125.project-card {
126 background: white;
127 border-radius: 12px;
128 padding: 1.5rem;
129 box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
130 text-decoration: none;
131 color: inherit;
132 transition:
133 transform 0.2s,
134 box-shadow 0.2s;
135}
136
137.project-card:hover {
138 transform: translateY(-2px);
139 box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
140}
141
142.project-title {
143 font-size: 1.5rem;
144 margin: 0 0 1rem 0;
145}
146
147.project-meta {
148 color: #666;
149}
150
151.project-banner {
152 width: 100%;
153 height: 200px;
154 object-fit: cover;
155 border-radius: 8px;
156 margin-bottom: 1rem;
157}
158
159.project-banner-container {
160 width: 100%;
161 margin-bottom: 2rem;
162 border-radius: 12px;
163 overflow: hidden;
164 box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
165}