Skip to content

Commit c345e98

Browse files
zesamerizesameri
committed
revert to old site layout
1 parent 4e8e475 commit c345e98

File tree

6 files changed

+151
-582
lines changed

6 files changed

+151
-582
lines changed

‎css/crumple.css‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -359,7 +359,13 @@
359359
.footer > a:nth-child(2n):hover~.crumple {
360360
background: #66CDAA; /* fallback for old browsers */
361361
background: -webkit-linear-gradient(45deg, #66CDAA, #20B2AA); /* Chrome 10-25, Safari 5.1-6 */
362-
background: linear-gradient(45deg, #66CDAA, #20B2AA);
362+
background: linear-gradient(45deg, #19e6a1, #00d1c7);
363+
background-size: 400% 400%;
364+
}
365+
.footer > a:nth-child(3n):hover~.crumple {
366+
background: #66CDAA; /* fallback for old browsers */
367+
background: -webkit-linear-gradient(45deg, #66CDAA, #20B2AA); /* Chrome 10-25, Safari 5.1-6 */
368+
background: linear-gradient(45deg, #ff6347, #ff4747);
363369
background-size: 400% 400%;
364370
}
365371
.footer > a:hover~.crumple {

‎css/main.css‎

Lines changed: 102 additions & 215 deletions
Original file line numberDiff line numberDiff line change
@@ -5,236 +5,123 @@
55
grey: #a6a9ac, #dcdcde
66
light: #f8f8f6, #efeff2
77
*/
8-
9-
*,
10-
*::after,
11-
*::before {
12-
box-sizing: border-box;
13-
}
14-
158
body {
16-
font-family: 'Varela Round', sans-serif;
17-
color: #f8f8f6;
18-
background: #222;
19-
background-size: 70%;
20-
-webkit-font-smoothing: antialiased;
21-
-moz-osx-font-smoothing: grayscale;
9+
margin: 0;
10+
background-color: #222;
11+
-webkit-font-smoothing: antialiased;
12+
-moz-osx-font-smoothing: grayscale;
13+
display: block;
14+
}
15+
section {
16+
z-index: 1;
17+
position: relative;
18+
display: flex;
19+
flex-direction: column;
20+
justify-content: space-between;
21+
min-height: 100vh;
22+
}
23+
.hero {
24+
width: calc(100vw - 20em);
25+
padding-top: 5vh;
26+
padding-left: 6vw;
27+
}
28+
.bio {
29+
padding-bottom: 10vh;
30+
max-width: 70vw;
31+
}
32+
33+
.menu {
34+
display: flex;
35+
flex-wrap: wrap;
36+
flex-direction: row;
37+
height: calc(100vh - 2.1em);
38+
max-height: calc(100vh - 2.1em);
39+
min-height: calc(100vh - 2.1em);
40+
}
41+
.menu > div {
42+
display: flex;
43+
flex-basis: calc(50% - 40px);
44+
justify-content: center;
45+
flex-direction: row;
46+
margin: 20px;
47+
background: #282C34;
48+
}
49+
.menu > div:nth-child(1) {
50+
background:tomato;
51+
}
52+
.menu > div:nth-child(2) {
53+
background: lightsalmon;
54+
}
55+
.menu > div:nth-child(3) {
56+
background: plum;
57+
}
58+
.menu > div:nth-child(4) {
59+
background: mediumslateblue;
60+
}
61+
62+
.menu > div > div {
63+
display: flex;
64+
flex-direction: column;
65+
justify-content: center;
66+
}
67+
68+
.footer {
69+
position: fixed;
70+
right: 5em;
71+
bottom: 5em;
72+
display: flex;
73+
flex-direction: column;
74+
justify-content: flex-end;
75+
align-items: flex-end;
76+
77+
}
78+
.footer > a {
79+
padding-top: 0.7em;
2280
}
23-
2481
a {
25-
text-decoration: none;
26-
color: #dcdcde;
27-
outline: none;
28-
}
29-
30-
a:hover,
31-
a:focus {
32-
color: #f8f8f6;
33-
}
34-
35-
.hidden {
36-
position: absolute;
37-
overflow: hidden;
38-
width: 0;
39-
height: 0;
40-
pointer-events: none;
41-
}
42-
43-
/* .js .loading::before {
44-
content: '';
45-
position: fixed;
46-
z-index: 1000;
47-
top: 0;
48-
left: 0;
49-
width: 100%;
50-
height: 100%;
51-
background: #222;
52-
}
53-
54-
.js .loading::after {
55-
content: '';
56-
font-size: .62em;
57-
font-weight: 500;
58-
line-height: 3.8em;
59-
letter-spacing: .62em;
60-
margin: 0;
61-
padding: 0.5em 0;
62-
text-transform: uppercase;
63-
text-align: center;
64-
65-
position: fixed;
66-
z-index: 1001;
67-
top: 50%;
68-
left: 50%;
69-
width: 100px;
70-
height: 100px;
71-
margin: -50px 0 0 -50px;
72-
border-radius: 50%;
73-
pointer-events: none;
74-
} */
75-
76-
77-
/* main {
78-
overflow: hidden;
79-
} */
80-
81-
/* Content */
82-
.content {
83-
padding: 3em 0;
84-
}
85-
86-
.content--grid {
87-
display: flex;
88-
flex-flow: wrap;
89-
90-
padding: 10vh 8vw;
91-
92-
grid-template-columns: 50% 50%;
93-
}
94-
95-
/* Header */
96-
.header {
97-
position: relative;
98-
display: flex;
99-
flex-direction: column;
100-
flex-wrap: wrap;
101-
width: 100%;
102-
padding: 5vw;
103-
}
104-
105-
.header__title {
106-
font-size: 1.625em;
107-
font-weight: 500;
108-
line-height: 1.5;
109-
margin: 0;
110-
padding: 0.5em 0;
111-
letter-spacing: 0.5em;
112-
text-transform: uppercase;
113-
}
114-
115-
116-
/* items */
117-
.item {
118-
position: relative;
119-
width: 500px;
120-
max-width: 100%;
121-
margin: 0 0 0 auto;
122-
cursor: pointer;
123-
-webkit-user-select: none;
124-
-moz-user-select: none;
125-
-ms-user-select: none;
126-
user-select: none;
127-
grid-column: span 2;
128-
-webkit-tap-highlight-color: rgba(0,0,0,0);
82+
position: relative;
12983
}
13084

131-
.item:nth-of-type(even) {
132-
margin: 0 auto 0 0;
85+
.hero-footer > a {
86+
position: relative;
87+
padding-top: 0.7em;
13388
}
13489

135-
.item:first-of-type {
136-
grid-column: span 1;
90+
.hero-footer {
91+
position: fixed;
92+
right: 5em;
93+
bottom: 5em;
94+
display: flex;
95+
flex-direction: column;
96+
justify-content: flex-end;
97+
align-items: flex-end;
13798
}
13899

139-
.item__svg {
140-
position: relative;
141-
display: block;
142-
width: 80%;
143-
height: auto;
144-
min-height: 500px;
145-
margin: 0 auto;
100+
.menu-footer {
101+
position: static;
102+
display: flex;
103+
flex-direction: row;
104+
justify-content: space-evenly;
105+
padding-bottom: 0.7em;
146106
}
147107

148-
.item__clippath,
149-
.item__deco,
150-
.item__img {
151-
transform-origin: 50% 50%;
108+
.menu-footer > a {
109+
padding: 0.7em;
152110
}
153111

154-
.item__meta {
155-
position: absolute;
156-
top: 0;
157-
display: flex;
158-
flex-wrap: wrap;
159-
justify-content: center;
160-
align-content: center;
161-
align-items: center;
162-
width: 100%;
163-
height: 100%;
112+
.footer__link--home:hover~.crumple:after {
113+
-webkit-animation: a 1s .25s linear forwards;
114+
animation: a 1s .25s linear forwards
164115
}
165116

166-
.item__number {
167-
position: absolute;
168-
top: 0;
169-
width: 100%;
170-
padding: 12.5% 0 0 3em;
171-
letter-spacing: 0.5em;
172-
text-transform: uppercase;
117+
.list {
118+
margin: 0;
173119
}
174-
175-
.item__specimen {
176-
font-size: 5em;
177-
font-weight: 500;
178-
line-height: 0.9;
179-
vertical-align: text-bottom;
180-
letter-spacing: -0.025em;
181-
}
182-
183-
.item__reference {
184-
font-size: 1.25em;
185-
-webkit-writing-mode: vertical-rl;
186-
writing-mode: vertical-rl;
187-
}
188-
189-
.item__title {
190-
font-size: 1.165em;
191-
font-weight: 600;
192-
width: 100%;
193-
margin: 1em 0 0 0;
194-
text-align: center;
195-
letter-spacing: 0.125em;
196-
color: #fff;
120+
.list__item {
121+
margin: 0;
122+
margin-bottom: 2em;
197123
}
198-
199-
.item__subtitle {
200-
font-size: 1em;
201-
font-weight: 500;
202-
margin: 0.5em 0 0;
203-
text-align: center;
204-
letter-spacing: 0.15em;
205-
opacity: 0;
206-
}
207-
208-
/* Blob Theme */
209-
.item__deco {
210-
fill: #3F51B5;
211-
}
212-
213-
.item__title {
214-
color: #f8f8f6;
215-
}
216-
217-
218-
@media screen and (max-width: 60em) {
219-
.item:first-of-type {
220-
grid-column: span 2;
221-
}
222-
.content--grid {
223-
grid-row-gap: 25vh;
224-
}
225-
}
226-
227-
@media screen and (max-width: 40em) {
228-
.header__title {
229-
font-size: 1em;
230-
}
231-
.content--grid {
232-
padding: 2vh 8vw;
233-
}
234-
.item__number {
235-
font-size: 0.75em;
236-
}
237-
.item__svg {
238-
min-height: 360px;
239-
}
124+
.list__item > p {
125+
margin: 1em 0;
126+
font-size: 1.25em;
240127
}

0 commit comments

Comments
 (0)