/
SocialCard.cshtml
226 lines (208 loc) · 12.3 KB
/
SocialCard.cshtml
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
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
@page
@model Thirty25.Statiq.SocialCardModel
@{
Layout = null;
}
<html lang="en">
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" integrity="sha512-NhSC1YmyruXifcj/KFRWoC561YpHpc5Jtzgvbuzx5VozKpWvQ+4nXhPdFgmx8xqexRcpAglTj9sIBWINXa8x5w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;800&display=swap" rel="stylesheet">
<style>
html {
font-family: Montserrat;
font-size: calc(100vw / 100);
}
#container {
color: rgba(255,255,255,.95);
background-color: #0F172A;
background-image:
radial-gradient(rgba(0,0,0,.1), rgba(0,0,0,.5)),
linear-gradient(rgba(255,255,255,.05) 2px, transparent 2px),
linear-gradient(90deg, rgba(255,255,255,.05) 2px, transparent 2px),
linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px)
;
background-size: 100% 100%, 100px 100px, 100px 100px, 20px 20px, 20px 20px;
background-position:0 0,-2px -2px, -2px -2px, -1px -1px, -1px -1px;
height: calc(100vw / 1.91);
width: 100vw;
display: grid;
grid-template-columns: 75% 25%;
grid-template-rows: auto;
grid-template-areas:
"title image"
"desc desc";
}
heading{
grid-area: title;
margin: 4rem 0 0 4rem
}
footer{
margin: 0 0 4rem 4rem;
grid-area: desc;
display: flex;
}
footer ul {
align-self: flex-end;
list-style: none;
padding: 0;
margin: 0;
}
footer ul li {
display: inline-block;
font-size: 2rem;
padding:.5rem 1rem;
margin-right: 1rem;
font-weight:300;
border: .2rem solid rgba(255,255,255,.3);
border-radius: 1rem;
background-color: rgba(128,128,255,.15);
}
heading h1 {
font-size: 6rem;
line-height: 1;
margin:0;
}
heading #desc {
margin:2rem 0 0 0;
font-size:4rem;
font-weight:300;
}
#image{
grid-area: image;
position: relative;
}
svg {
height:50%;
position: absolute;
top: 1rem;
right: 4rem;
}
</style>
</head>
<body>
<div id="container">
<heading>
<h1>@Model.Title</h1>
<p id="desc">@Model.Description</p>
</heading>
<footer>
<ul>
@{ var tags = Model.Tags?.Split(";") ?? Array.Empty<string>(); }
@foreach (var tag in tags)
{
<li>@tag</li>
}
</ul>
</footer>
<div id="image">
<svg viewBox="0 0 264 280" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<path d="M12 160c0 66.274 53.726 120 120 120s120-53.726 120-120h12V0H0v160h12z" id="c" />
<path d="M124 144.611V163h4c39.765 0 72 32.235 72 72v9H0v-9c0-39.765 32.235-72 72-72h4v-18.389c-17.237-8.189-29.628-24.924-31.695-44.73C38.48 99.058 34 94.052 34 88V74c0-5.946 4.325-10.882 10-11.834V56c0-30.928 25.072-56 56-56s56 25.072 56 56v6.166c5.675.952 10 5.888 10 11.834v14c0 6.052-4.48 11.058-10.305 11.881-2.067 19.806-14.458 36.541-31.695 44.73z" id="e" />
<circle id="a" cx="120" cy="120" r="120" />
</defs>
<g fill="none" fill-rule="evenodd">
<g transform="translate(12 40)">
<mask id="b" fill="#fff">
<use xlink:href="#a" />
</mask>
<use fill="#E6E6E6" xlink:href="#a" />
<g mask="url(#b)" fill="#65C9FF">
<path d="M0 0h240v240H0z" />
</g>
</g>
<mask id="d" fill="#fff">
<use xlink:href="#c" />
</mask>
<g mask="url(#d)">
<g transform="translate(32 36)">
<mask id="f" fill="#fff">
<use xlink:href="#e" />
</mask>
<use fill="#D0C6AC" xlink:href="#e" />
<g mask="url(#f)" fill="#EDB98A">
<path d="M-32 0h264v244H-32z" />
</g>
<path d="M156 79v23c0 30.928-25.072 56-56 56s-56-25.072-56-56V79v15c0 30.928 25.072 56 56 56s56-25.072 56-56V79z" fill-opacity=".1" fill="#000" mask="url(#f)" />
</g>
<g transform="translate(0 170)">
<defs>
<path d="M108 13.07c-17.919 2.006-31.72 7.482-31.996 21.575C50.146 45.568 32 71.165 32 100.999V110h200v-9c0-29.835-18.146-55.432-44.004-66.355-.276-14.093-14.077-19.57-31.996-21.574V32c0 13.255-10.745 24-24 24s-24-10.745-24-24V13.07z" id="g" />
</defs>
<mask id="h" fill="#fff">
<use xlink:href="#g" />
</mask>
<use fill="#B7C1DB" xlink:href="#g" />
<g mask="url(#h)" fill="#3C4F5C">
<path d="M0 0h264v110H0z" />
</g>
<path d="M102 61.74V110h-7V58.15a64.54 64.54 0 007 3.59zm67-3.59V98.5a3.5 3.5 0 11-7 0V61.74a64.54 64.54 0 007-3.59z" fill="#F4F4F4" mask="url(#h)" />
<path d="M90.96 12.724C75.91 15.571 65.5 21.243 65.5 32.308 65.5 52.02 98.538 68 132 68s66.5-15.98 66.5-35.692c0-11.065-10.41-16.737-25.46-19.584 9.085 3.35 14.96 8.982 14.96 18.353C188 51.469 160.179 68 132 68S76 51.469 76 31.077c0-9.37 5.875-15.003 14.96-18.353z" fill-opacity=".16" fill="#000" mask="url(#h)" />
</g>
<g fill="#000">
<path d="M118 149c0 7.732 6.268 14 14 14s14-6.268 14-14" fill-opacity=".7" />
<path d="M120 130c0 4.418 5.373 8 12 8s12-3.582 12-8" fill-opacity=".16" />
<g transform="translate(76 90)" fill-opacity=".6">
<circle cx="30" cy="22" r="6" />
<circle cx="82" cy="22" r="6" />
</g>
<g fill-opacity=".6">
<path d="M114.66 93.09c-4.998.362-9.923.086-14.918-.122-3.83-.158-7.717-.681-11.374 1.012-.7.324-4.53 2.28-4.44 3.349.07.855 3.935 2.191 4.63 2.436 3.67 1.29 7.181.896 10.954.67 4.628-.278 9.236-.074 13.861-.214 3.116-.093 7.917-.62 9.457-4.398.464-1.137.105-3.413-.36-4.657-.185-.496-.72-.683-1.125-.397-1.45 1.023-4.261 2.146-6.685 2.321M149.34 93.09c4.998.362 9.923.086 14.918-.122 3.83-.158 7.717-.681 11.374 1.012.7.324 4.53 2.28 4.44 3.349-.07.855-3.935 2.191-4.63 2.436-3.67 1.29-7.181.896-10.954.67-4.628-.278-9.236-.074-13.861-.214-3.116-.093-7.917-.62-9.457-4.398-.464-1.137-.105-3.413.36-4.657.185-.496.72-.683 1.125-.397 1.45 1.023 4.261 2.146 6.685 2.321" />
</g>
</g>
<defs>
<path id="i" d="M0 0h264v280H0z" />
<path d="M180.15 39.92c-2.76-2.82-5.964-5.213-9.08-7.613-.688-.53-1.387-1.046-2.06-1.595-.152-.125-1.718-1.246-1.905-1.659-.451-.993-.19-.22-.128-1.404.079-1.498 3.134-5.73.854-6.7-1.003-.427-2.791.709-3.753 1.084a59.489 59.489 0 01-5.731 1.9c.932-1.857 2.708-5.574-.631-4.579-2.602.775-5.026 2.768-7.64 3.705.865-1.417 4.324-5.811 1.198-6.057-.972-.076-3.803 1.748-4.85 2.138-3.137 1.165-6.34 1.92-9.634 2.513-11.198 2.018-24.293 1.442-34.653 6.54-7.988 3.93-15.874 10.029-20.489 17.795-4.447 7.485-6.11 15.676-7.041 24.253-.683 6.295-.739 12.802-.42 19.119.105 2.07.338 11.61 3.345 8.721 1.498-1.44 1.487-7.253 1.864-9.22.751-3.916 1.474-7.848 2.726-11.638 2.206-6.68 4.809-13.793 10.305-18.393 3.527-2.952 6.004-6.941 9.379-9.919 1.516-1.337.36-1.198 2.797-1.022 1.638.117 3.282.162 4.923.205 3.796.099 7.598.074 11.395.087 7.647.028 15.258.136 22.898-.265 3.395-.177 6.799-.274 10.185-.588 1.891-.175 5.247-1.387 6.804-.461 1.425.847 2.905 3.615 3.928 4.748 2.418 2.679 5.3 4.724 8.126 6.92 5.895 4.58 8.87 10.332 10.66 17.488 1.784 7.13 1.284 13.745 3.491 20.762.389 1.233 1.416 3.36 2.682 1.454.235-.354.175-2.3.175-3.42 0-4.52 1.144-7.91 1.13-12.46-.056-13.832-.504-31.868-10.85-42.439z" id="m" />
</defs>
<mask id="j" fill="#fff">
<use xlink:href="#i" />
</mask>
<g mask="url(#j)">
<g transform="translate(-1)">
<g transform="translate(49 72)">
<defs>
<path d="M101.428 98.169c-2.513 2.294-5.19 3.325-8.575 2.604-.582-.124-2.957-4.538-8.853-4.538-5.897 0-8.27 4.414-8.853 4.538-3.385.721-6.062-.31-8.576-2.604-4.725-4.313-8.654-10.26-6.293-16.75 1.23-3.382 3.232-7.095 6.873-8.173 3.887-1.15 9.346-.002 13.264-.788 1.27-.254 2.656-.707 3.585-1.458.929.75 2.316 1.204 3.585 1.458 3.918.786 9.376-.362 13.264.788 3.64 1.078 5.642 4.79 6.873 8.173 2.361 6.49-1.568 12.437-6.294 16.75M140.081 26c-3.41 8.4-2.093 18.858-2.724 27.676-.513 7.167-2.02 17.91-8.384 22.539-3.255 2.367-9.179 6.345-13.431 5.235-2.927-.764-3.24-9.16-7.087-12.303-4.363-3.565-9.812-5.131-15.306-4.89-2.37.105-7.165.08-9.15 1.903-1.983-1.823-6.777-1.798-9.148-1.902-5.494-.242-10.943 1.324-15.306 4.889-3.847 3.143-4.16 11.54-7.087 12.303-4.252 1.11-10.176-2.868-13.431-5.235-6.365-4.63-7.87-15.372-8.384-22.54-.63-8.817.686-19.275-2.724-27.675-1.66 0-.565 16.129-.565 16.129v20.356c.032 15.288 9.581 38.17 30.754 46.908C63.286 111.53 75.015 115 84 115s20.714-3.14 25.892-5.277c21.173-8.737 30.722-31.95 30.754-47.238V42.13S141.74 26 140.081 26" id="k" />
</defs>
<mask id="l" fill="#fff">
<use xlink:href="#k" />
</mask>
<use fill="#331B0C" xlink:href="#k" />
<g mask="url(#l)" fill="#4A312C">
<path d="M-32 0h264v244H-32z" />
</g>
</g>
<mask id="n" fill="#fff">
<use xlink:href="#m" />
</mask>
<use fill="#1F3140" xlink:href="#m" />
<g mask="url(#n)" fill="#4A312C">
<path d="M0 0h264v280H0z" />
</g>
<g transform="translate(62 85)">
<defs>
<filter x="-.8%" y="-2.4%" width="101.5%" height="109.8%" filterUnits="objectBoundingBox" id="o">
<feOffset dy="2" in="SourceAlpha" result="shadowOffsetOuter1" />
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0" in="shadowOffsetOuter1" result="shadowMatrixOuter1" />
<feMerge>
<feMergeNode in="shadowMatrixOuter1" />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
</defs>
<g filter="url(#o)" transform="translate(6 7)" fill="#252C2F" fill-rule="nonzero">
<path d="M34 41h-2.758C17.315 41 9 33.336 9 20.5 9 10.127 10.817 0 32.53 0h2.94C57.183 0 59 10.127 59 20.5 59 32.569 48.721 41 34 41zM32.385 6C13 6 13 12.841 13 21.502 13 28.572 16.116 37 30.97 37H34c12.365 0 21-6.373 21-15.498C55 12.84 55 6 35.615 6h-3.23zM96 41h-2.758C79.315 41 71 33.336 71 20.5 71 10.127 72.817 0 94.53 0h2.94C119.183 0 121 10.127 121 20.5 121 32.569 110.721 41 96 41zM94.385 6C75 6 75 12.841 75 21.502 75 28.572 78.12 37 92.97 37H96c12.365 0 21-6.373 21-15.498C117 12.84 117 6 97.615 6h-3.23z" />
<path d="M2.955 5.772C3.645 5.096 11.21 0 32.5 0c17.851 0 21.63 1.853 27.35 4.652l.419.207c.398.14 2.431.83 4.81.907a16.998 16.998 0 004.563-.869C76.17 1.722 82.562 0 97.5 0c21.29 0 28.854 5.096 29.545 5.772 1.634 0 2.955 1.29 2.955 2.885v2.886c0 1.596-1.32 2.886-2.955 2.886 0 0-6.901 0-6.901 2.886 0 2.885-1.962-4.176-1.962-5.772v-2.81c-3.603-1.38-10.054-3.947-20.682-3.947-11.842 0-17.739 2.1-22.798 4.185l.057.137-.003 1.986-2.217 5.35L69.8 15.36c-.244-.097-.772-.27-1.504-.451-2.04-.503-4.137-.656-5.992-.276-.68.14-1.312.35-1.891.633l-2.643 1.29-2.643-5.16.117-2.295.08-.195c-4.362-2.033-8.385-4.12-22.824-4.12-10.628 0-17.078 2.565-20.682 3.944v2.812c0 1.596-2.954 8.657-2.954 5.772 0-2.886-5.91-2.886-5.91-2.886-1.63 0-2.954-1.29-2.954-2.886V8.657c0-1.595 1.324-2.885 2.955-2.885z" />
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
</div>
</div>
</body>
</html>