aesthetic.computer
Monorepo for Aesthetic.Computer
aesthetic.computer
1<!DOCTYPE html>
2<html lang="en">
3<head>
4<meta charset="UTF-8">
5<style>
6 @font-face {
7 font-family: 'YWFTProcessing-Regular';
8 src: url('../system/public/type/webfonts/ywft-processing-regular.woff2') format('woff2');
9 font-weight: normal; font-style: normal;
10 }
11 @font-face {
12 font-family: 'YWFTProcessing-Bold';
13 src: url('../system/public/type/webfonts/ywft-processing-bold.woff2') format('woff2');
14 font-weight: normal; font-style: normal;
15 }
16 @font-face {
17 font-family: 'YWFTProcessing-Light';
18 src: url('../system/public/type/webfonts/ywft-processing-light.woff2') format('woff2');
19 font-weight: normal; font-style: normal;
20 }
21 @font-face {
22 font-family: 'Berkeley Mono Variable';
23 src: url('../system/public/type/webfonts/BerkeleyMonoVariable-Regular.woff2') format('woff2');
24 font-weight: normal; font-style: normal;
25 }
26
27 * { margin: 0; padding: 0; box-sizing: border-box; }
28
29 body {
30 width: 1794px;
31 height: 2994px;
32 overflow: hidden;
33 background: #ffffff;
34 display: flex;
35 align-items: center;
36 justify-content: center;
37 }
38
39 .card {
40 width: 1794px;
41 height: 2994px;
42 background: #ffffff;
43 display: flex;
44 flex-direction: column;
45 align-items: center;
46 justify-content: center;
47 padding: 144px;
48 position: relative;
49 }
50
51 .score-text {
52 font-family: 'Berkeley Mono Variable', monospace;
53 font-size: 72px;
54 line-height: 1.8;
55 color: #000000;
56 text-align: left;
57 letter-spacing: -0.01em;
58 max-width: 1200px;
59 }
60
61 .score-line {
62 margin-bottom: 0.4em;
63 }
64
65 .score-line:last-child {
66 margin-bottom: 0;
67 }
68
69 .prompt-cursor {
70 display: inline-block;
71 width: 36px;
72 height: 72px;
73 background: #000000;
74 vertical-align: middle;
75 margin-left: 8px;
76 animation: blink 1s step-end infinite;
77 }
78
79 .title {
80 font-family: 'YWFTProcessing-Light', monospace;
81 font-size: 48px;
82 letter-spacing: 0.15em;
83 text-transform: uppercase;
84 color: #000000;
85 position: absolute;
86 bottom: 200px;
87 text-align: center;
88 }
89</style>
90</head>
91<body>
92<div class="card">
93 <div class="score-text">
94 <div class="score-line">Type a word into a computer.</div>
95 <div class="score-line">Press enter.</div>
96 <div class="score-line">Show someone what appears.</div>
97 </div>
98</div>
99</body>
100</html>