Skip to content

Commit 3cd4a0b

Browse files
Wandering-MagiWandering-Magi
committed
Alter title construction
1 parent 610a38d commit 3cd4a0b

File tree

2 files changed

+157
-15
lines changed

2 files changed

+157
-15
lines changed

‎index.html

+126-2
Original file line numberDiff line numberDiff line change
@@ -21,8 +21,112 @@
2121
<div class="title-hexagon"></div>
2222
<div class="title-hexagon"></div>
2323
<div class="title-hexagon"></div>
24+
<div class="title-hexagon"></div>
25+
<div class="title-hexagon"></div>
26+
<div class="title-hexagon"></div>
27+
<div class="title-hexagon"></div>
28+
<div class="title-hexagon"></div>
29+
<div class="title-hexagon"></div>
30+
<div class="title-hexagon"></div>
31+
<div class="title-hexagon"></div>
32+
<div class="title-hexagon"></div>
33+
<div class="title-hexagon"></div>
34+
<div class="title-hexagon"></div>
35+
<div class="title-hexagon"></div>
36+
<div class="title-hexagon"></div>
37+
<div class="title-hexagon"></div>
38+
<div class="title-hexagon"></div>
39+
<div class="title-hexagon"></div>
40+
<div class="title-hexagon"></div>
41+
<div class="title-hexagon"></div>
42+
<div class="title-hexagon"></div>
43+
<div class="title-hexagon"></div>
44+
</div>
45+
<div class="row2 evenrow">
46+
<div class="title-hexagon"></div>
47+
<div class="title-hexagon"></div>
48+
<div class="title-hexagon"></div>
49+
<div class="title-hexagon"></div>
50+
<div class="title-hexagon"></div>
51+
<div class="title-hexagon"></div>
52+
<div class="title-hexagon"></div>
53+
<div class="title-hexagon"></div>
54+
<div class="title-hexagon"></div>
55+
<div class="title-hexagon"></div>
56+
<div class="title-hexagon"></div>
57+
<div class="title-hexagon"></div>
58+
<div class="title-hexagon"></div>
59+
<div class="title-hexagon"></div>
60+
<div class="title-hexagon"></div>
61+
<div class="title-hexagon"></div>
62+
<div class="title-hexagon"></div>
63+
<div class="title-hexagon"></div>
64+
<div class="title-hexagon"></div>
65+
<div class="title-hexagon"></div>
66+
<div class="title-hexagon"></div>
67+
<div class="title-hexagon"></div>
68+
<div class="title-hexagon"></div>
69+
<div class="title-hexagon"></div>
70+
<div class="title-hexagon"></div>
71+
<div class="title-hexagon"></div>
72+
<div class="title-hexagon"></div>
73+
<div class="title-hexagon"></div>
74+
<div class="title-hexagon"></div>
75+
<div class="title-hexagon"></div>
76+
</div>
77+
<div class="row3 oddrow">
78+
<div class="title-hexagon"></div>
79+
<div class="title-hexagon"></div>
80+
<div class="title-hexagon"></div>
81+
<div class="title-hexagon"></div>
82+
<div class="title-hexagon"></div>
83+
<div class="title-hexagon"></div>
84+
<div class="title-hexagon"></div>
85+
<div class="title-hexagon"></div>
86+
<div class="title-hexagon"></div>
87+
<div class="title-hexagon"></div>
88+
<div class="title-hexagon"></div>
89+
<div class="title-hexagon"></div>
90+
<div class="title-hexagon"></div>
91+
<div class="title-hexagon"></div>
92+
<div class="title-hexagon"></div>
93+
<div class="title-hexagon"></div>
94+
<div class="title-hexagon"></div>
95+
<div class="title-hexagon"></div>
96+
<div class="title-hexagon"></div>
97+
<div class="title-hexagon"></div>
98+
<div class="title-hexagon"></div>
99+
<div class="title-hexagon"></div>
100+
<div class="title-hexagon"></div>
101+
<div class="title-hexagon"></div>
102+
<div class="title-hexagon"></div>
103+
<div class="title-hexagon"></div>
104+
<div class="title-hexagon"></div>
105+
<div class="title-hexagon"></div>
106+
<div class="title-hexagon"></div>
107+
<div class="title-hexagon"></div>
24108
</div>
25-
<div class="row2">
109+
<div class="row4 evenrow">
110+
<div class="title-hexagon"></div>
111+
<div class="title-hexagon"></div>
112+
<div class="title-hexagon"></div>
113+
<div class="title-hexagon"></div>
114+
<div class="title-hexagon"></div>
115+
<div class="title-hexagon"></div>
116+
<div class="title-hexagon"></div>
117+
<div class="title-hexagon"></div>
118+
<div class="title-hexagon"></div>
119+
<div class="title-hexagon"></div>
120+
<div class="title-hexagon"></div>
121+
<div class="title-hexagon"></div>
122+
<div class="title-hexagon"></div>
123+
<div class="title-hexagon"></div>
124+
<div class="title-hexagon"></div>
125+
<div class="title-hexagon"></div>
126+
<div class="title-hexagon"></div>
127+
<div class="title-hexagon"></div>
128+
<div class="title-hexagon"></div>
129+
<div class="title-hexagon"></div>
26130
<div class="title-hexagon"></div>
27131
<div class="title-hexagon"></div>
28132
<div class="title-hexagon"></div>
@@ -34,7 +138,27 @@
34138
<div class="title-hexagon"></div>
35139
<div class="title-hexagon"></div>
36140
</div>
37-
<div class="row3">
141+
<div class="row5 oddrow">
142+
<div class="title-hexagon"></div>
143+
<div class="title-hexagon"></div>
144+
<div class="title-hexagon"></div>
145+
<div class="title-hexagon"></div>
146+
<div class="title-hexagon"></div>
147+
<div class="title-hexagon"></div>
148+
<div class="title-hexagon"></div>
149+
<div class="title-hexagon"></div>
150+
<div class="title-hexagon"></div>
151+
<div class="title-hexagon"></div>
152+
<div class="title-hexagon"></div>
153+
<div class="title-hexagon"></div>
154+
<div class="title-hexagon"></div>
155+
<div class="title-hexagon"></div>
156+
<div class="title-hexagon"></div>
157+
<div class="title-hexagon"></div>
158+
<div class="title-hexagon"></div>
159+
<div class="title-hexagon"></div>
160+
<div class="title-hexagon"></div>
161+
<div class="title-hexagon"></div>
38162
<div class="title-hexagon"></div>
39163
<div class="title-hexagon"></div>
40164
<div class="title-hexagon"></div>

‎styles.css

+31-13
Original file line numberDiff line numberDiff line change
@@ -17,11 +17,11 @@
1717
--cyan: #2aa198;
1818
--green: #859900;
1919

20-
--title-card-height: 200px;
21-
--title-hex-width: 100px;
20+
--title-card-height: 100px;
21+
--title-hex-width: 50px;
2222
--title-hex-height: calc(var(--title-hex-width) * 1.1547);
2323
--title-hex-margin: 1px;
24-
--title-hex-margin-bottom: calc(
24+
--title-hex-margin-top: calc(
2525
var(--title-hex-margin) - var(--title-hex-width) * 0.2886
2626
);
2727
}
@@ -36,7 +36,7 @@ body {
3636
.title-card {
3737
background: linear-gradient(45deg, var(--violet), var(--base0));
3838
height: var(--title-card-height);
39-
width: 817px;
39+
width: 100%;
4040
margin: 0 auto;
4141

4242
display: grid;
@@ -48,26 +48,44 @@ body {
4848
height: var(--title-card-height);
4949
font-size: 0;
5050
}
51-
5251
.row1 {
5352
display: inline-flex;
54-
margin-left: -50px;
55-
margin-top: -50px;
56-
margin-bottom: var(--title-hex-margin-bottom);
53+
/* margin-left: calc(var(--title-hex-height)); */
54+
/* margin-top: calc(var(--title-hex-width) / -2); */
55+
margin-top: calc(var(--title-hex-margin) - var(--title-hex-height) * 0.2886);
56+
margin-bottom: var(--title-hex-margin-top);
57+
overflow: hidden;
58+
}
59+
.oddrow {
60+
display: inline-flex;
61+
margin-top: calc(var(--title-hex-margin-top));
5762
overflow: hidden;
5863
}
59-
.row3 {
64+
.evenrow {
6065
display: inline-flex;
6166
overflow: hidden;
62-
margin-top: var(--title-hex-margin-bottom);
67+
margin-top: var(--title-hex-margin-top);
68+
/* margin-left: calc(
69+
1.732 * var(--title-hex-width) + 4 * var(--title-hex-margin)
70+
); */
71+
margin-left: calc(
72+
((var(--title-hex-width) / 2) + var(--title-hex-margin)) * -1
73+
);
74+
/*calc(1.732 * var(--title-hex-width) + 4 * var(--title-hex-margin))*/
75+
}
76+
77+
/* .row3 {
78+
display: inline-flex;
79+
overflow: hidden;
80+
margin-top: var(--title-hex-margin-top);
6381
margin-left: -50px;
6482
}
6583
.row2 {
6684
display: inline-flex;
6785
overflow: hidden;
68-
margin-top: var(--title-hex-margin-bottom);
86+
margin-top: var(--title-hex-margin-top);
6987
margin-left: var(--title-hex-margin);
70-
}
88+
} */
7189
.title-hexagon {
7290
background: var(--base03);
7391
background-attachment: fixed;
@@ -98,7 +116,7 @@ body {
98116
position: absolute;
99117

100118
height: var(--title-card-height);
101-
width: 817px;
119+
width: 100%;
102120
font-size: 75px;
103121

104122
text-align: center;

0 commit comments

Comments
 (0)