-
Notifications
You must be signed in to change notification settings - Fork 0
/
tats
144 lines (144 loc) · 4.59 KB
/
tats
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
[1mdiff --git a/src/components/backgrounds/dudeinthecoat.less b/src/components/backgrounds/dudeinthecoat.less[m
[1mindex 0d6f1cd..7ab4559 100644[m
[1m--- a/src/components/backgrounds/dudeinthecoat.less[m
[1m+++ b/src/components/backgrounds/dudeinthecoat.less[m
[36m@@ -1,6 +1,6 @@[m
@import '../../variables';[m
@max-width: 54%;[m
[31m-@max-width-square: 60%;[m
[32m+[m[32m@max-width-square: 55%;[m
@max-width-mobile: 100%;[m
[m
.image-overrides() {[m
[1mdiff --git a/src/components/description.less b/src/components/description.less[m
[1mindex 926ceeb..e1cf601 100644[m
[1m--- a/src/components/description.less[m
[1m+++ b/src/components/description.less[m
[36m@@ -12,12 +12,21 @@[m
perspective-origin: 0 50%;[m
}[m
[m
[32m+[m[32m @media (max-aspect-ratio: @responsive-aspect-step1) {[m
[32m+[m[32m left: 38%;[m
[32m+[m[32m }[m
[32m+[m
@media (max-aspect-ratio: @responsive-aspect-step3) {[m
left: 3rem;[m
right: 3rem;[m
top: auto;[m
[31m- bottom: 34rem;[m
[32m+[m[32m bottom: 32rem;[m
display: flex;[m
justify-content: center;[m
[32m+[m
[32m+[m[32m & .marquee-line {[m
[32m+[m[32m display: flex;[m
[32m+[m[32m justify-content: center;[m
[32m+[m[32m }[m
}[m
}[m
[1mdiff --git a/src/components/icons.less b/src/components/icons.less[m
[1mindex 29d4110..95c1a79 100644[m
[1m--- a/src/components/icons.less[m
[1m+++ b/src/components/icons.less[m
[36m@@ -1,3 +1,5 @@[m
[32m+[m[32m@import "../variables.less";[m
[32m+[m
.icons {[m
font-size: 4rem;[m
position: absolute;[m
[36m@@ -11,6 +13,12 @@[m
z-index: 3;[m
transform: translateZ(1.3rem);[m
[m
[32m+[m[32m @media (max-aspect-ratio: @responsive-aspect-step3) {[m
[32m+[m[32m top: auto;[m
[32m+[m[32m margin-left: 7rem;[m
[32m+[m[32m bottom: 7rem;[m
[32m+[m[32m }[m
[32m+[m
& > a {[m
display: inline-flex;[m
color: #fff;[m
[1mdiff --git a/src/components/layout.less b/src/components/layout.less[m
[1mindex 2eac1dd..1c559ea 100644[m
[1m--- a/src/components/layout.less[m
[1m+++ b/src/components/layout.less[m
[36m@@ -12,7 +12,7 @@[m [mhtml {[m
font-size: 1.4vh;[m
transition: font-size 0.5s ease;[m
[m
[31m- @media (max-aspect-ratio: @responsive-aspect-step3) {[m
[32m+[m[32m @media (max-aspect-ratio: @responsive-aspect-step4) {[m
font-size: 1.4vw;[m
}[m
}[m
[36m@@ -24,8 +24,11 @@[m [mhtml, body {[m
.space {[m
perspective: 100rem;[m
transform-style: preserve-3d;[m
[31m- position: relative;[m
[31m- min-height: 100vh;[m
[32m+[m[32m position: absolute;[m
[32m+[m[32m top: 0;[m
[32m+[m[32m left: 0;[m
[32m+[m[32m right: 0;[m
[32m+[m[32m bottom: 0;[m
overflow: hidden;[m
transition: all 1s ease-out;[m
}[m
[1mdiff --git a/src/components/qr.js b/src/components/qr.js[m
[1mindex e07db7a..12333f9 100644[m
[1m--- a/src/components/qr.js[m
[1m+++ b/src/components/qr.js[m
[36m@@ -1,13 +1,13 @@[m
[31m-import React, { useEffect, useRef } from "react";[m
[32m+[m[32mimport React from "react";[m
import InlineSVG from "svg-inline-react";[m
import QRCode from "qrcode-svg";[m
[m
[31m-import vcard from 'raw-loader!../../static/vcard.vcf';[m
[32m+[m[32mimport content from 'raw-loader!../../static/vcard.vcf';[m
[m
import "./qr.less";[m
[m
const SvgQr = new QRCode({[m
[31m- content: vcard,[m
[32m+[m[32m content,[m
padding: 1,[m
background: '#fff',[m
color: '#1d1d1d',[m
[1mdiff --git a/src/components/qr.less b/src/components/qr.less[m
[1mindex 73152cf..000b13e 100644[m
[1m--- a/src/components/qr.less[m
[1m+++ b/src/components/qr.less[m
[36m@@ -1,3 +1,5 @@[m
[32m+[m[32m@import "../variables.less";[m
[32m+[m
.qr {[m
position: absolute;[m
top: 36rem;[m
[36m@@ -6,6 +8,12 @@[m
z-index: 2;[m
transform: translateZ(1.7rem);[m
[m
[32m+[m[32m @media (max-aspect-ratio: @responsive-aspect-step3) {[m
[32m+[m[32m top: auto;[m
[32m+[m[32m margin-left: -17rem;[m
[32m+[m[32m bottom: 7rem;[m
[32m+[m[32m }[m
[32m+[m
svg {[m
height: 20rem;[m
width: 20rem;[m
[1mdiff --git a/src/variables.less b/src/variables.less[m
[1mindex 9b82440..fbb4f92 100644[m
[1m--- a/src/variables.less[m
[1m+++ b/src/variables.less[m
[36m@@ -1,2 +1,3 @@[m
@responsive-aspect-step1: ~'16/9';[m
[31m-@responsive-aspect-step3: ~'4/3';[m
\ No newline at end of file[m
[32m+[m[32m@responsive-aspect-step3: ~'4/3';[m
[32m+[m[32m@responsive-aspect-step4: ~'1/1';[m
\ No newline at end of file[m