Skip to content

Commit e18d389

Browse files
Wandering-MagiWandering-Magi
committed
Added a title card and removed joke page
1 parent bde8489 commit e18d389

File tree

4 files changed

+265
-22
lines changed

4 files changed

+265
-22
lines changed

‎hailey.html

-20
This file was deleted.

‎index.html

+45-2
Original file line numberDiff line numberDiff line change
@@ -8,10 +8,53 @@
88
</head>
99
<body>
1010
<main>
11+
<div class="title-card">
12+
<div class="title-hex-container">
13+
<div class="row1">
14+
<div class="title-hexagon"></div>
15+
<div class="title-hexagon"></div>
16+
<div class="title-hexagon"></div>
17+
<div class="title-hexagon"></div>
18+
<div class="title-hexagon"></div>
19+
<div class="title-hexagon"></div>
20+
<div class="title-hexagon"></div>
21+
<div class="title-hexagon"></div>
22+
<div class="title-hexagon"></div>
23+
<div class="title-hexagon"></div>
24+
</div>
25+
<div class="row2">
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>
37+
<div class="row3">
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 class="title-hexagon"></div>
45+
<div class="title-hexagon"></div>
46+
<div class="title-hexagon"></div>
47+
<div class="title-hexagon"></div>
48+
</div>
49+
</div>
50+
51+
<div class="title-name">
52+
<span>Wandering Magi</span>
53+
</div>
54+
</div>
55+
1156
<div>
12-
<p>Hello World</p>
1357
<p>An eventual portfolio repository for my various projects.</p>
14-
<a href="./hailey.html">Hailey</a>
1558
</div>
1659
</main>
1760
</body>

‎styles.css

+90
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
:root {
2+
/* Solarized Color Scheme */
23
--base03: #002b36; /**/
34
--base02: #073642; /**/
45
--base01: #586e75; /**/
@@ -15,9 +16,98 @@
1516
--blue: #268bd2;
1617
--cyan: #2aa198;
1718
--green: #859900;
19+
20+
--title-card-height: 200px;
21+
--title-hex-width: 100px;
22+
--title-hex-height: calc(var(--title-hex-width) * 1.1547);
23+
--title-hex-margin: 1px;
24+
--title-hex-margin-bottom: calc(
25+
var(--title-hex-margin) - var(--title-hex-width) * 0.2886
26+
);
1827
}
1928

2029
body {
2130
background-color: var(--base03);
2231
color: var(--base0);
32+
margin: 0;
33+
padding: 0;
34+
}
35+
36+
.title-card {
37+
background: linear-gradient(45deg, var(--violet), var(--base0));
38+
height: var(--title-card-height);
39+
width: 817px;
40+
margin: 0 auto;
41+
42+
display: grid;
43+
}
44+
45+
.title-hex-container {
46+
position: relative;
47+
overflow: hidden;
48+
height: var(--title-card-height);
49+
font-size: 0;
50+
}
51+
52+
.row1 {
53+
display: inline-flex;
54+
margin-left: -50px;
55+
margin-top: -50px;
56+
margin-bottom: var(--title-hex-margin-bottom);
57+
overflow: hidden;
58+
}
59+
.row3 {
60+
display: inline-flex;
61+
overflow: hidden;
62+
margin-top: var(--title-hex-margin-bottom);
63+
margin-left: -50px;
64+
}
65+
.row2 {
66+
display: inline-flex;
67+
overflow: hidden;
68+
margin-top: var(--title-hex-margin-bottom);
69+
margin-left: var(--title-hex-margin);
70+
}
71+
.title-hexagon {
72+
background: var(--base03);
73+
background-attachment: fixed;
74+
position: relative;
75+
height: var(--title-hex-height);
76+
width: var(--title-hex-width);
77+
margin: var(--title-hex-margin);
78+
font-size: initial;
79+
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
80+
transition: 1s;
81+
}
82+
.title-hexagon::before {
83+
position: absolute;
84+
top: 0;
85+
left: 0;
86+
width: 50%;
87+
height: 100%;
88+
background: var(--base02);
89+
}
90+
.title-hexagon:hover {
91+
background: var(--yellow);
92+
transition: 0s;
93+
}
94+
95+
.title-name {
96+
pointer-events: none;
97+
display: inline;
98+
position: absolute;
99+
100+
height: var(--title-card-height);
101+
width: 817px;
102+
font-size: 75px;
103+
104+
text-align: center;
105+
vertical-align: middle;
106+
line-height: var(--title-card-height);
107+
108+
font-family: sans-serif;
109+
font-weight: bold;
110+
text-transform: uppercase;
111+
color: var(--yellow);
112+
-webkit-text-stroke: 1px var(--base1);
23113
}

‎styles_old.css

+130
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,130 @@
1+
:root {
2+
/* Solarized Color Scheme */
3+
--base03: #002b36; /**/
4+
--base02: #073642; /**/
5+
--base01: #586e75; /**/
6+
--base00: #657b83;
7+
--base0: #839496; /**/
8+
--base1: #93a1a1; /**/
9+
--base2: #eee8d5;
10+
--base3: #fdf6e3;
11+
--yellow: #b58900;
12+
--orange: #cb4b16;
13+
--red: #dc322f;
14+
--magenta: #d33682;
15+
--violet: #6c71c4;
16+
--blue: #268bd2;
17+
--cyan: #2aa198;
18+
--green: #859900;
19+
}
20+
21+
body {
22+
background-color: var(--base03);
23+
color: var(--base0);
24+
}
25+
26+
.title-card {
27+
display: grid;
28+
grid-template-columns: repeat(auto-fit, calc(var(--s) + 2 * var(--mh)));
29+
justify-content: center;
30+
--s: 80px; /* size */
31+
--r: 1.15; /* ratio */
32+
/* clip-path */
33+
--h: 0.5;
34+
--v: 0.25;
35+
--hc: calc(clamp(0, var(--h), 0.5) * var(--s));
36+
--vc: calc(clamp(0, var(--v), 0.5) * var(--s) * var(--r));
37+
38+
/*margin */
39+
--mv: 2px; /* vertical */
40+
--mh: calc(var(--mv) + (var(--s) - 2 * var(--hc)) / 2); /* horizontal */
41+
/* for the float*/
42+
--f: calc(2 * var(--s) * var(--r) + 4 * var(--mv) - 2 * var(--vc) - 2px);
43+
}
44+
45+
.hex-container {
46+
background: linear-gradient(45deg, var(--base0), var(--violet));
47+
}
48+
.hexagon {
49+
clip: rect(0 auto auto 0);
50+
}
51+
52+
.hex-container {
53+
grid-column: 1/-1;
54+
max-width: 790px;
55+
margin: 0 auto;
56+
font-size: 0; /*disable white space between inline block element */
57+
position: relative;
58+
padding-bottom: 50px;
59+
filter: drop-shadow(2px 2px 1px #333);
60+
}
61+
62+
.hex-container div {
63+
width: var(--s);
64+
margin: var(--mv) var(--mh);
65+
height: calc(var(--s) * var(--r));
66+
display: inline-block;
67+
font-size: initial;
68+
clip-path: polygon(
69+
var(--hc) 0,
70+
calc(100% - var(--hc)) 0,
71+
100% var(--vc),
72+
100% calc(100% - var(--vc)),
73+
calc(100% - var(--hc)) 100%,
74+
var(--hc) 100%,
75+
0 calc(100% - var(--vc)),
76+
0 var(--vc)
77+
);
78+
margin-bottom: calc(var(--mv) - var(--vc));
79+
}
80+
81+
.hex-container::before {
82+
content: "";
83+
width: calc(var(--s) / 2 + var(--mh));
84+
float: left;
85+
height: 120%;
86+
shape-outside: repeating-linear-gradient(
87+
transparent 0 calc(var(--f) - 2px),
88+
#fff 0 var(--f)
89+
);
90+
}
91+
92+
/*
93+
.hex-container div::before {
94+
padding-top: 25px;
95+
padding-right: 30px;
96+
content: "Wandering \A Magi";
97+
text-transform: uppercase;
98+
white-space: pre;
99+
font-size: 75px;
100+
font-family: sans-serif;
101+
font-weight: bold;
102+
position: absolute;
103+
color: var(--yellow);
104+
background: linear-gradient(45deg, var(--base0), var(--violet));
105+
}*/
106+
107+
.hexagon {
108+
transition: 2s;
109+
}
110+
.hexagon:hover {
111+
transition: 0s;
112+
background-color: #b58900;
113+
}
114+
/*
115+
.hex-container div {
116+
animation: show 3s infinite;
117+
opacity: 0;
118+
}
119+
@for $i from 1 through 43 {
120+
.hex-container div:nth-child(#{$i}) {
121+
animation-delay: (2 * random()) * 1s;
122+
}
123+
}
124+
125+
@keyframes show {
126+
60% {
127+
opacity: 1;
128+
}
129+
}
130+
*/

0 commit comments

Comments
 (0)