animations/main.css at main · cunnellp5/animations · GitHub

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
html {
  --s: 194px; /* control the size */
  --c1: #f6edb3;
  --c2: #acc4a3;

  --_l: #0000 calc(25% / 3), var(--c1) 0 25%, #0000 0;
  --_g: conic-gradient(from 120deg at 50% 87.5%, var(--c1) 120deg, #0000 0);
  background: var(--_g), var(--_g) 0 calc(var(--s) / 2),
    conic-gradient(from 180deg at 75%, var(--c2) 60deg, #0000 0),
    conic-gradient(from 60deg at 75% 75%, var(--c1) 0 60deg, #0000 0),
    linear-gradient(150deg, var(--_l)) 0 calc(var(--s) / 2),
    conic-gradient(
      at 25% 25%,
      #0000 50%,
      var(--c2) 0 240deg,
      var(--c1) 0 300deg,
      var(--c2) 0
    ),
    linear-gradient(-150deg, var(--_l)) #55897c /* third color here */;
  background-size: calc(0.866 * var(--s)) var(--s);
  height: 100vh;
}

body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  height: 100%;
}

footer {
  font-size: 1.1rem;
  margin: 4rem auto;
  text-decoration: none;
  color: rgb(22, 22, 121);
  background-color: rgba(255, 255, 255, 0.7);
  padding: 8px 16px;
  border-radius: 2px;
  font-family: "Ubuntu", monospace;
}

a {
  text-decoration: none;
  color: rgb(22, 22, 121);
}

a:hover {
  display: inline-block;
  transform: scale(1.1);
  text-decoration: line-through;
}
a:hover::after {
  content: " 👈"; /* Add your emoji here */
  display: inline-block;
}
a:hover::before {
  content: "👉 "; /* Add your emoji here */
  display: inline-block;
}

.paper-title {
  font-family: "Handlee", monospace;
  font-size: 2rem;
}
.paper {
  position: relative;
  width: 90%;
  max-width: 800px;
  min-width: 300px;
  height: 480px;
  margin: 8rem auto;
  background: #fafafa;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  overflow: hidden;
}
.paper:before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 60px;
  background: radial-gradient(#575450 6px, transparent 7px) repeat-y;
  background-size: 30px 30px;
  border-right: 3px solid #d44147;
  box-sizing: border-box;
}

.paper-content {
  position: absolute;
  top: 30px;
  right: 0;
  bottom: 30px;
  left: 60px;
  background: linear-gradient(transparent, transparent 28px, #91d1d3 28px);
  background-size: 30px 30px;
}

.paper-content .textarea {
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  line-height: 30px;
  padding: 0 10px;
  border: 0;
  outline: 0;
  background: transparent;
  color: rgb(22, 22, 121);
  font-family: "Handlee", monospace;
  font-weight: bold;
  font-size: 18px;
  box-sizing: border-box;
  z-index: 1;
}

#paper-airplane {
  position: absolute;
  opacity: 0.6;
  top: 300px;
  right: 100px;
}