├── screenshot.png
├── README.md
├── package.json
├── LICENSE
├── .gitignore
├── related-shapes.html
├── index.html
└── style.scss


/screenshot.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lucaschen/iron-man/HEAD/screenshot.png


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Iron Man
2 | 
3 | ![Screenshot](screenshot.png?raw=true "Iron Man in the Google Chrome browser")
4 | 
5 | Iron Man, built using only HTML and CSS. Immeasurably overkill, completely impractical.
6 | 
7 | [View online demo](https://iron-man.surge.sh)


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "iron-man",
 3 |   "author": "Lucas Chen",
 4 |   "license": "MIT",
 5 |   "private": true,
 6 |   "devDependencies": {
 7 |     "parcel": "~1.12.3",
 8 |     "sass": "~1.19.0"
 9 |   },
10 |   "scripts": {
11 |     "build": "parcel build index.html",
12 |     "watch": "parcel index.html"
13 |   }
14 | }
15 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | Copyright 2019 Lucas Chen
2 | 
3 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
4 | 
5 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
6 | 
7 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | dist/
 2 | 
 3 | # Logs
 4 | logs
 5 | *.log
 6 | npm-debug.log*
 7 | yarn-debug.log*
 8 | yarn-error.log*
 9 | lerna-debug.log*
10 | 
11 | # Diagnostic reports (https://nodejs.org/api/report.html)
12 | report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
13 | 
14 | # Runtime data
15 | pids
16 | *.pid
17 | *.seed
18 | *.pid.lock
19 | 
20 | # Directory for instrumented libs generated by jscoverage/JSCover
21 | lib-cov
22 | 
23 | # Coverage directory used by tools like istanbul
24 | coverage
25 | 
26 | # nyc test coverage
27 | .nyc_output
28 | 
29 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
30 | .grunt
31 | 
32 | # Bower dependency directory (https://bower.io/)
33 | bower_components
34 | 
35 | # node-waf configuration
36 | .lock-wscript
37 | 
38 | # Compiled binary addons (https://nodejs.org/api/addons.html)
39 | build/Release
40 | 
41 | # Dependency directories
42 | node_modules/
43 | jspm_packages/
44 | 
45 | # TypeScript v1 declaration files
46 | typings/
47 | 
48 | # Optional npm cache directory
49 | .npm
50 | 
51 | # Optional eslint cache
52 | .eslintcache
53 | 
54 | # Optional REPL history
55 | .node_repl_history
56 | 
57 | # Output of 'npm pack'
58 | *.tgz
59 | 
60 | # Yarn Integrity file
61 | .yarn-integrity
62 | 
63 | # dotenv environment variables file
64 | .env
65 | .env.test
66 | 
67 | # parcel-bundler cache (https://parceljs.org/)
68 | .cache
69 | 
70 | # next.js build output
71 | .next
72 | 
73 | # nuxt.js build output
74 | .nuxt
75 | 
76 | # vuepress build output
77 | .vuepress/dist
78 | 
79 | # Serverless directories
80 | .serverless/
81 | 
82 | # FuseBox cache
83 | .fusebox/
84 | 
85 | # DynamoDB Local files
86 | .dynamodb/


--------------------------------------------------------------------------------
/related-shapes.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <title>Shapes</title>
 5 |     <meta charset="UTF-8" />
 6 |     <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet" />
 7 |     <style type="text/css">
 8 |       body {
 9 |         font-family: "Open Sans", sans-serif;
10 |       }
11 | 
12 |       main {
13 |         align-items: center;
14 |         display: flex;
15 |         flex-flow: column nowrap;
16 |       }
17 | 
18 |       .shape {
19 |         margin: 10px 0;
20 |       }
21 | 
22 |       .square {
23 |         background-color: red;
24 |         height: 100px;
25 |         width: 100px;
26 |       }
27 | 
28 |       .circle {
29 |         background-color: orange;
30 |         border-radius: 50%;
31 |         height: 100px;
32 |         width: 100px;
33 |       }
34 | 
35 |       .eye {
36 |         background-color: blue;
37 |         border-radius: 100% 0;
38 |         height: 100px;
39 |         width: 100px;
40 |       }
41 | 
42 |       .triangle {
43 |         border-bottom: 100px solid green;
44 |         border-left: 50px solid transparent;
45 |         border-right: 50px solid transparent;
46 |         height: 0;
47 |         width: 0;
48 |       }
49 | 
50 |       .trapezium {
51 |         border-bottom: 50px solid purple;
52 |         border-left: 50px solid transparent;
53 |         border-right: 50px solid transparent;
54 |         height: 0;
55 |         width: 100px;
56 |       }
57 |     </style>
58 |   </head>
59 |   <body>
60 |     <main>
61 |       <h1>Shapes</h1>
62 |       <div class="shape square"></div>
63 |       <div class="shape circle"></div>
64 |       <div class="shape eye"></div>
65 |       <div class="shape triangle"></div>
66 |       <div class="shape trapezium"></div>
67 |     </main>
68 |   </body>
69 | </html>
70 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <title>Iron Man</title>
 5 |     <meta charset="UTF-8" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <link href="style.scss" rel="stylesheet" type="text/css" />
 8 |   </head>
 9 |   <body>
10 |     <div class="bg-red-stripe"></div>
11 |     <main>
12 |       <div class="iron-man">
13 |         <div class="iron-man__head--part1"></div>
14 |         <div class="iron-man__head--part2"></div>
15 |         <div class="iron-man__head--part3"></div>
16 |         <div class="iron-man__head--part4"></div>
17 |         <div class="iron-man__forehead-back"></div>
18 |         <div class="iron-man__forehead-curve--bg"></div>
19 |         <div class="iron-man__forehead-curve--shadow"></div>
20 |         <div class="iron-man__forehead-curve--left"></div>
21 |         <div class="iron-man__forehead-curve--right"></div>
22 |         <div class="iron-man__forehead-bottom"></div>
23 |         <div class="iron-man__forehead-front--left--part1"></div>
24 |         <div class="iron-man__forehead-front--right--part1"></div>
25 |         <div class="iron-man__forehead-front--left--part2"></div>
26 |         <div class="iron-man__forehead-front--right--part2"></div>
27 |         <div class="iron-man__cheek-bg--left"></div>
28 |         <div class="iron-man__cheek-bg--right"></div>
29 |         <div class="iron-man__cheek--part1"></div>
30 |         <div class="iron-man__cheek--part2"></div>
31 |         <div class="iron-man__cheek--part3"></div>
32 |         <div class="iron-man__eye--furrow"></div>
33 |         <div class="iron-man__eye--left--bg--part1"></div>
34 |         <div class="iron-man__eye--left--bg--part2"></div>
35 |         <div class="iron-man__eye--left--part1"></div>
36 |         <div class="iron-man__eye--left--part2"></div>
37 |         <div class="iron-man__eye--right--bg--part1"></div>
38 |         <div class="iron-man__eye--right--bg--part2"></div>
39 |         <div class="iron-man__eye--right--part1"></div>
40 |         <div class="iron-man__eye--right--part2"></div>
41 |         <div class="iron-man__chin--left--part1"></div>
42 |         <div class="iron-man__chin--left--part2"></div>
43 |         <div class="iron-man__chin--right--part1"></div>
44 |         <div class="iron-man__chin--right--part2"></div>
45 |         <div class="iron-man__chin--middle"></div>
46 |         <div class="iron-man__mouth--middle"></div>
47 |         <div class="iron-man__mouth--left"></div>
48 |         <div class="iron-man__mouth--right"></div>
49 |       </div>
50 |     </main>
51 |   </body>
52 | </html>
53 | 


--------------------------------------------------------------------------------
/style.scss:
--------------------------------------------------------------------------------
  1 | $cream-can: #ebc13b;
  2 | $cream-white: #fdfffe;
  3 | $falu-red: #5c0b11;
  4 | $gunmetal: #000b13;
  5 | $la-rioja: #bda441;
  6 | $shadow: rgba(0, 0, 0, 0.5);
  7 | $upsdell-red: #ae1927;
  8 | 
  9 | html,
 10 | body {
 11 |   height: 100%;
 12 |   margin: 0;
 13 |   padding: 0;
 14 |   width: 100%;
 15 | }
 16 | 
 17 | body {
 18 |   background-color: $cream-can;
 19 |   overflow: hidden;
 20 | }
 21 | 
 22 | main {
 23 |   left: 50%;
 24 |   position: absolute;
 25 |   top: 50%;
 26 |   transform: translate(-50%, -50%);
 27 | }
 28 | 
 29 | .bg-red-stripe {
 30 |   background-color: $falu-red;
 31 |   height: 300vh;
 32 |   left: 51%;
 33 |   position: absolute;
 34 |   top: -100vh;
 35 |   transform: rotate(35.35deg);
 36 |   transform-origin: left center;
 37 |   width: 100vw;
 38 | }
 39 | 
 40 | // original was 207x345 (3:5)
 41 | .iron-man {
 42 |   font-size: 5rem;
 43 |   height: 5em;
 44 |   position: relative;
 45 |   width: 3em;
 46 | 
 47 |   &:before {
 48 |     border-left: 1em solid transparent;
 49 |     border-right: 1em solid transparent;
 50 |     border-top: 3.7em solid rgba(0, 0, 0, 0.5);
 51 |     content: "";
 52 |     height: 0;
 53 |     left: 1.36em;
 54 |     position: absolute;
 55 |     top: 0.1em;
 56 |     transform: rotate(55deg);
 57 |     transform-origin: left center;
 58 |     width: 100vw;
 59 |   }
 60 | 
 61 |   &__head {
 62 |     &--part1 {
 63 |       background-color: $upsdell-red;
 64 |       border-radius: 50%;
 65 |       height: 3em;
 66 |       left: 0.025em;
 67 |       position: absolute;
 68 |       top: 0;
 69 |       width: 2.95em;
 70 |     }
 71 | 
 72 |     &--part2 {
 73 |       background-color: $upsdell-red;
 74 |       border-radius: 50%;
 75 |       height: 2.92em;
 76 |       left: 0.04em;
 77 |       position: absolute;
 78 |       top: 0.45em;
 79 |       width: 2.92em;
 80 |     }
 81 | 
 82 |     &--part3 {
 83 |       border-left: 0.3em solid transparent;
 84 |       border-right: 0.3em solid transparent;
 85 |       border-top: 1.6em solid $upsdell-red;
 86 |       height: 0;
 87 |       left: 0.05em;
 88 |       position: absolute;
 89 |       top: 2.15em;
 90 |       width: 2.3em;
 91 |     }
 92 | 
 93 |     &--part4 {
 94 |       border-left: 0.7em solid transparent;
 95 |       border-right: 0.7em solid transparent;
 96 |       border-top: 1em solid $upsdell-red;
 97 |       height: 0;
 98 |       left: 0.35em;
 99 |       position: absolute;
100 |       top: 3.75em;
101 |       width: 0.9em;
102 |     }
103 |   }
104 | 
105 |   &__forehead-back {
106 |     background-color: $cream-can;
107 |     height: 1.62em;
108 |     left: 50%;
109 |     position: absolute;
110 |     top: 0.5em;
111 |     transform: translateX(-50%);
112 |     width: 2.3em;
113 | 
114 |     &::before {
115 |       background-color: $cream-can;
116 |       border-radius: 100% 0;
117 |       content: "";
118 |       height: 1.1em;
119 |       left: -0.575em;
120 |       position: absolute;
121 |       top: 0.225em;
122 |       transform: rotate(-42.5deg);
123 |       width: 1.1em;
124 |     }
125 | 
126 |     &::after {
127 |       background-color: $cream-can;
128 |       border-radius: 0 100%;
129 |       content: "";
130 |       height: 1.1em;
131 |       position: absolute;
132 |       right: -0.575em;
133 |       top: 0.225em;
134 |       transform: rotate(42.5deg);
135 |       width: 1.1em;
136 |     }
137 |   }
138 | 
139 |   &__forehead-curve {
140 |     &--bg {
141 |       background-color: $upsdell-red;
142 |       height: 1em;
143 |       left: 0.375em;
144 |       position: absolute;
145 |       top: 0.5em;
146 |       width: 2.25em;
147 |     }
148 | 
149 |     &--shadow {
150 |       background-color: $shadow;
151 |       height: 1em;
152 |       left: 0.75em;
153 |       position: absolute;
154 |       top: 0.9em;
155 |       transform: rotate(45deg);
156 |       width: 1em;
157 |     }
158 | 
159 |     &--left {
160 |       background-color: $cream-can;
161 |       border-radius: 0 100% 0 100%;
162 |       height: 0.7em;
163 |       left: 0.43em;
164 |       position: absolute;
165 |       top: 0.25em;
166 |       transform: rotate(-12deg) scale(1, 0.5);
167 |       width: 0.8em;
168 |     }
169 | 
170 |     &--right {
171 |       background-color: $cream-can;
172 |       border-radius: 100% 0 100% 0;
173 |       height: 0.7em;
174 |       position: absolute;
175 |       right: 0.43em;
176 |       top: 0.25em;
177 |       transform: rotate(12deg) scale(1, 0.5);
178 |       width: 0.8em;
179 |     }
180 |   }
181 | 
182 |   &__forehead-front {
183 |     &--left {
184 |       &--part1 {
185 |         background-color: $cream-can;
186 |         height: 1em;
187 |         left: 0.24em;
188 |         position: absolute;
189 |         top: 0.58em;
190 |         transform: rotate(12deg);
191 |         width: 0.92em;
192 |       }
193 | 
194 |       &--part2 {
195 |         background-color: $cream-can;
196 |         height: 0.9em;
197 |         left: 1em;
198 |         position: absolute;
199 |         top: 0.68em;
200 |         transform: rotate(3deg);
201 |         transform-origin: top right;
202 |         width: 0.25em;
203 |       }
204 |     }
205 | 
206 |     &--right {
207 |       &--part1 {
208 |         background-color: $cream-can;
209 |         height: 1em;
210 |         position: absolute;
211 |         right: 0.24em;
212 |         top: 0.58em;
213 |         transform: rotate(-12deg);
214 |         width: 0.92em;
215 |       }
216 | 
217 |       &--part2 {
218 |         background-color: $cream-can;
219 |         height: 0.9em;
220 |         position: absolute;
221 |         right: 1em;
222 |         top: 0.68em;
223 |         transform: rotate(-3deg);
224 |         transform-origin: top left;
225 |         width: 0.25em;
226 |       }
227 |     }
228 |   }
229 | 
230 |   &__forehead-bottom {
231 |     border-left: 0.0375em solid transparent;
232 |     border-right: 0.0375em solid transparent;
233 |     border-top: 0.5em solid $cream-can;
234 |     height: 0;
235 |     left: 0.0125em;
236 |     position: absolute;
237 |     position: absolute;
238 |     top: 1.5em;
239 |     width: 2.9em;
240 |   }
241 | 
242 |   &__cheek-bg {
243 |     &--left,
244 |     &--right {
245 |       background-color: $gunmetal;
246 |       border-radius: 50%;
247 |       height: 2em;
248 |       position: absolute;
249 |       top: 2em;
250 |       width: 2em;
251 |     }
252 | 
253 |     &--left {
254 |       left: 0.4em;
255 |     }
256 | 
257 |     &--right {
258 |       right: 0.4em;
259 |     }
260 |   }
261 | 
262 |   &__cheek {
263 |     &--part1 {
264 |       border-left: 0.15em solid transparent;
265 |       border-right: 0.15em solid transparent;
266 |       border-top: 0.6em solid $cream-can;
267 |       height: 0;
268 |       left: 0.05em;
269 |       position: absolute;
270 |       top: 2em;
271 |       width: 2.6em;
272 |     }
273 | 
274 |     &--part2 {
275 |       border-left: 0.5em solid transparent;
276 |       border-right: 0.5em solid transparent;
277 |       border-top: 1em solid $cream-can;
278 |       height: 0;
279 |       left: 0.2em;
280 |       position: absolute;
281 |       top: 2.6em;
282 |       width: 1.6em;
283 |     }
284 | 
285 |     &--part3 {
286 |       border-bottom: 0.5em solid $cream-can;
287 |       border-left: 0.05em solid transparent;
288 |       border-right: 0.05em solid transparent;
289 |       height: 0;
290 |       left: 0.65em;
291 |       position: absolute;
292 |       top: 3.6em;
293 |       width: 1.6em;
294 |     }
295 |   }
296 | 
297 |   &__eye {
298 |     $eye-part2-width: 0.5em;
299 |     $eye-width: 0.8em;
300 | 
301 |     &--furrow {
302 |       border-left: 0.5em solid transparent;
303 |       border-right: 0.5em solid transparent;
304 |       border-top: 0.075em solid $shadow;
305 |       height: 0;
306 |       left: 1em;
307 |       position: absolute;
308 |       top: 2.5em;
309 |       width: 0;
310 | 
311 |       &:before {
312 |         border-left: 0.5em solid transparent;
313 |         border-right: 0.5em solid transparent;
314 |         border-top: 0.075em solid $cream-can;
315 |         content: "";
316 |         height: 0;
317 |         left: -0.5em;
318 |         position: absolute;
319 |         top: -0.09em;
320 |         width: 0;
321 |       }
322 |     }
323 | 
324 |     &--left {
325 |       &--bg {
326 |         &--part1 {
327 |           left: 0.4em;
328 |           position: absolute;
329 |           top: 2.51em;
330 | 
331 |           &::before {
332 |             border-bottom: 0.15em solid $la-rioja;
333 |             border-left: 0;
334 |             border-right: $eye-width solid transparent;
335 |             bottom: 0;
336 |             content: "";
337 |             left: 0;
338 |             position: absolute;
339 |           }
340 | 
341 |           &::after {
342 |             border-left: $eye-width solid transparent;
343 |             border-right: 0;
344 |             border-top: 0.15em solid $la-rioja;
345 |             content: "";
346 |             left: 0;
347 |             position: absolute;
348 |             top: 0;
349 |           }
350 |         }
351 | 
352 |         &--part2 {
353 |           background-color: $la-rioja;
354 |           height: 0.15em;
355 |           left: 0.4em + $eye-width - $eye-part2-width;
356 |           position: absolute;
357 |           top: 2.55em;
358 |           width: $eye-part2-width;
359 | 
360 |           &::before {
361 |             border-left: ($eye-width - $eye-part2-width) solid transparent;
362 |             border-right: 0;
363 |             border-top: 0.15em solid $la-rioja;
364 |             bottom: 0;
365 |             content: "";
366 |             position: absolute;
367 |             right: 100%;
368 |           }
369 |         }
370 |       }
371 | 
372 |       &--part1 {
373 |         left: 0.35em;
374 |         position: absolute;
375 |         top: 2.5em;
376 | 
377 |         &::before {
378 |           border-bottom: 0.15em solid $cream-white;
379 |           border-left: 0;
380 |           border-right: $eye-width solid transparent;
381 |           bottom: 0;
382 |           content: "";
383 |           left: 0;
384 |           position: absolute;
385 |         }
386 | 
387 |         &::after {
388 |           border-left: $eye-width solid transparent;
389 |           border-right: 0;
390 |           border-top: 0.15em solid $cream-white;
391 |           content: "";
392 |           left: 0;
393 |           position: absolute;
394 |           top: 0;
395 |         }
396 |       }
397 | 
398 |       &--part2 {
399 |         background-color: $cream-white;
400 |         height: 0.15em;
401 |         left: 0.35em + $eye-width - $eye-part2-width;
402 |         position: absolute;
403 |         top: 2.5em;
404 |         width: $eye-part2-width;
405 | 
406 |         &::before {
407 |           border-left: ($eye-width - $eye-part2-width) solid transparent;
408 |           border-right: 0;
409 |           border-top: 0.15em solid $cream-white;
410 |           bottom: 0;
411 |           content: "";
412 |           position: absolute;
413 |           right: 100%;
414 |         }
415 |       }
416 |     }
417 | 
418 |     &--right {
419 |       &--bg {
420 |         &--part1 {
421 |           position: absolute;
422 |           right: 0.4em;
423 |           top: 2.51em;
424 | 
425 |           &::before {
426 |             border-bottom: 0.15em solid $la-rioja;
427 |             border-left: $eye-width solid transparent;
428 |             border-right: 0;
429 |             bottom: 0;
430 |             content: "";
431 |             position: absolute;
432 |             right: 0;
433 |           }
434 | 
435 |           &::after {
436 |             border-left: 0;
437 |             border-right: $eye-width solid transparent;
438 |             border-top: 0.15em solid $la-rioja;
439 |             content: "";
440 |             position: absolute;
441 |             right: 0;
442 |             top: 0;
443 |           }
444 |         }
445 | 
446 |         &--part2 {
447 |           background-color: $la-rioja;
448 |           height: 0.15em;
449 |           position: absolute;
450 |           right: 0.4em + $eye-width - $eye-part2-width;
451 |           top: 2.55em;
452 |           width: $eye-part2-width;
453 | 
454 |           &::before {
455 |             border-left: 0;
456 |             border-right: ($eye-width - $eye-part2-width) solid transparent;
457 |             border-top: 0.15em solid $la-rioja;
458 |             bottom: 0;
459 |             content: "";
460 |             left: 100%;
461 |             position: absolute;
462 |           }
463 |         }
464 |       }
465 | 
466 |       &--part1 {
467 |         position: absolute;
468 |         right: 0.35em;
469 |         top: 2.5em;
470 | 
471 |         &::before {
472 |           border-bottom: 0.15em solid $cream-white;
473 |           border-left: $eye-width solid transparent;
474 |           border-right: 0;
475 |           bottom: 0;
476 |           content: "";
477 |           position: absolute;
478 |           right: 0;
479 |         }
480 | 
481 |         &::after {
482 |           border-left: 0;
483 |           border-right: $eye-width solid transparent;
484 |           border-top: 0.15em solid $cream-white;
485 |           content: "";
486 |           position: absolute;
487 |           right: 0;
488 |           top: 0;
489 |         }
490 |       }
491 | 
492 |       &--part2 {
493 |         background-color: $cream-white;
494 |         height: 0.15em;
495 |         position: absolute;
496 |         right: 0.35em + $eye-width - $eye-part2-width;
497 |         top: 2.5em;
498 |         width: $eye-part2-width;
499 | 
500 |         &::before {
501 |           border-left: 0;
502 |           border-right: ($eye-width - $eye-part2-width) solid transparent;
503 |           border-top: 0.15em solid $cream-white;
504 |           bottom: 0;
505 |           content: "";
506 |           left: 100%;
507 |           position: absolute;
508 |         }
509 |       }
510 |     }
511 |   }
512 | 
513 |   &__chin {
514 |     &--left {
515 |       &--part1 {
516 |         border-left: 0.25em solid transparent;
517 |         border-right: 0.25em solid transparent;
518 |         border-top: 0.35em solid $cream-can;
519 |         height: 0;
520 |         left: 0.65em;
521 |         position: absolute;
522 |         top: 4.1em;
523 |         width: 0;
524 |       }
525 | 
526 |       &--part2 {
527 |         border-left: 0.125em solid transparent;
528 |         border-right: 0.125em solid transparent;
529 |         border-top: 0.1em solid $cream-can;
530 |         height: 0;
531 |         left: 0.85em;
532 |         position: absolute;
533 |         top: 4.225em;
534 |         width: 0.25em;
535 |       }
536 |     }
537 | 
538 |     &--right {
539 |       &--part1 {
540 |         border-left: 0.25em solid transparent;
541 |         border-right: 0.25em solid transparent;
542 |         border-top: 0.35em solid $cream-can;
543 |         height: 0;
544 |         position: absolute;
545 |         right: 0.65em;
546 |         top: 4.1em;
547 |         width: 0;
548 |       }
549 | 
550 |       &--part2 {
551 |         border-left: 0.125em solid transparent;
552 |         border-right: 0.125em solid transparent;
553 |         border-top: 0.1em solid $cream-can;
554 |         height: 0;
555 |         position: absolute;
556 |         right: 0.85em;
557 |         top: 4.225em;
558 |         width: 0.25em;
559 |       }
560 |     }
561 | 
562 |     &--middle {
563 |       background-color: $cream-can;
564 |       height: 0.125em;
565 |       left: 50%;
566 |       position: absolute;
567 |       top: 4.1em;
568 |       transform: translateX(-50%);
569 |       width: 1em;
570 |     }
571 |   }
572 | 
573 |   &__mouth {
574 |     &--middle {
575 |       left: 50%;
576 |       position: absolute;
577 |       top: 4em;
578 |       transform: translateX(-50%) scale(1, 0.25);
579 | 
580 |       &:before {
581 |         background-color: $gunmetal;
582 |         border-radius: 100% 0;
583 |         content: "";
584 |         height: 1em;
585 |         left: -0.5em;
586 |         position: absolute;
587 |         top: -0.5em;
588 |         transform: rotate(45deg) translate(-50%, -50%);
589 |         width: 1em;
590 |       }
591 | 
592 |       &:after {
593 |         background-color: $cream-can;
594 |         border-radius: 100% 0;
595 |         content: "";
596 |         height: 1em;
597 |         left: -0.5em;
598 |         position: absolute;
599 |         top: -0.65em;
600 |         transform: rotate(45deg) translate(-50%, -50%);
601 |         width: 1em;
602 |       }
603 |     }
604 | 
605 |     &--left {
606 |       border-left: 0.1em solid transparent;
607 |       border-right: 0.1em solid transparent;
608 |       border-top: 0.125em solid $gunmetal;
609 |       height: 0;
610 |       left: 0.7em;
611 |       position: absolute;
612 |       top: 3.825em;
613 |       transform: rotate(-10deg);
614 |       width: 0;
615 | 
616 |       &::before {
617 |         border-left: 0.1em solid transparent;
618 |         border-right: 0.1em solid transparent;
619 |         border-top: 0.115em solid $cream-can;
620 |         content: "";
621 |         left: -0.1em;
622 |         position: absolute;
623 |         top: -0.15em;
624 |       }
625 |     }
626 | 
627 |     &--right {
628 |       border-left: 0.1em solid transparent;
629 |       border-right: 0.1em solid transparent;
630 |       border-top: 0.125em solid $gunmetal;
631 |       height: 0;
632 |       position: absolute;
633 |       right: 0.7em;
634 |       top: 3.825em;
635 |       transform: rotate(10deg);
636 |       width: 0;
637 | 
638 |       &::before {
639 |         border-left: 0.1em solid transparent;
640 |         border-right: 0.1em solid transparent;
641 |         border-top: 0.115em solid $cream-can;
642 |         content: "";
643 |         left: -0.1em;
644 |         position: absolute;
645 |         top: -0.15em;
646 |       }
647 |     }
648 |   }
649 | }
650 | 
651 | @media only screen and (max-width: 768px) {
652 |   // this causes scrolling which messes up viewport
653 |   .bg-red-stripe {
654 |     display: none;
655 |   }
656 | 
657 |   .iron-man:before {
658 |     content: none;
659 |   }
660 | }
661 | 


--------------------------------------------------------------------------------