Skip to content

Commit 63ac8d5

Browse files
fonspfonsp
authored
Merge pull request #113 from mitmath/fancy-homepage
2 parents 6884529 + b2a303d commit 63ac8d5

File tree

7 files changed

+609
-176
lines changed

7 files changed

+609
-176
lines changed

‎website/homepage/bg.afdesign

22.3 KB
Binary file not shown.

‎website/homepage/bg.svg

Lines changed: 1 addition & 0 deletions
Loading

‎website/homepage/index.css

Lines changed: 304 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,304 @@
1+
@import url("https://fonts.googleapis.com/css2?family=Alegreya:ital,wght@0,500;0,700;1,500;1,700&display=swap");
2+
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap");
3+
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap");
4+
@import url("https://fonts.googleapis.com/css2?family=Vollkorn:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
5+
6+
html {
7+
font-size: 17px;
8+
color: #3c3c3c;
9+
}
10+
body {
11+
/* background: #f1e7e7; */
12+
margin: 0px;
13+
padding: 0px;
14+
font-family: "Open Sans", sans-serif;
15+
min-height: 100vh;
16+
overflow-x: hidden;
17+
background: url("bg.svg");
18+
background-color: hsl(231deg 14% 57%);
19+
background-size: cover;
20+
overflow-wrap: break-word;
21+
}
22+
main h1 {
23+
font-family: "Vollkorn", serif;
24+
font-weight: 800;
25+
font-style: italic;
26+
margin-block-end: 0.5em;
27+
font-size: 3rem;
28+
margin-block-start: 0;
29+
border-bottom: 5px solid #74747414;
30+
letter-spacing: -0.2px;
31+
color: #424250;
32+
padding: 0px 10px;
33+
text-shadow: 7px 5px 0px #e5dbb8;
34+
}
35+
36+
a {
37+
text-decoration: none;
38+
/* background: #f3f3ff; */
39+
/* border: 3px solid; */
40+
color: black;
41+
/* border-bottom: 0.2em solid rgba(0, 0, 0, 0.3); */
42+
background-position: 0 0.83em;
43+
background-repeat: repeat-x;
44+
background-size: 2px 8px;
45+
background-image: linear-gradient(to bottom, rgba(165, 213, 235, 0.3) 33%, rgba(165, 213, 235, 0.3));
46+
/* text-shadow: 2px 2px white, 2px -2px white, -2px 2px white, -2px -2px white; */
47+
transition: background-position 50ms linear, background-size 50ms linear;
48+
}
49+
50+
a:hover {
51+
background-position: 0 0em;
52+
background-size: 2px auto;
53+
}
54+
55+
div.banner {
56+
min-height: 20rem;
57+
display: grid;
58+
place-items: center;
59+
}
60+
61+
div.banner h1 {
62+
transform: perspective(187px) rotate3d(0, 2, 0, 0deg);
63+
font-family: "Alegreya", sans-serif;
64+
background: #000000ad;
65+
padding: 0.2em 0.5em;
66+
margin: 0px 10px;
67+
border-radius: 0.4em;
68+
transition: transform 200ms ease-in-out;
69+
color: #ffffffc7;
70+
font-style: normal;
71+
border: none;
72+
/* flex: 1 1 auto; */
73+
/* display: block; */
74+
}
75+
div.banner h1 strong {
76+
color: white;
77+
}
78+
79+
div.banner:hover h1 {
80+
/* transform: perspective(187px) rotate3d(0, 2, 0, 3deg) scale(1.05); */
81+
}
82+
83+
#title {
84+
background-image: url("swoosh.png");
85+
86+
background-size: cover;
87+
image-rendering: pixelated;
88+
}
89+
90+
img.logo {
91+
position: absolute;
92+
top: 5px;
93+
left: 5px;
94+
z-index: 10;
95+
height: 2rem;
96+
background: #ffffff96;
97+
padding: 3px;
98+
}
99+
100+
.twocols {
101+
column-count: 2;
102+
color: #fffffff7;
103+
background: linear-gradient(155deg, #7c7e87, #5a594a);
104+
}
105+
106+
main {
107+
/* background: white; */
108+
padding: 1em;
109+
max-width: 86rem;
110+
z-index: -1;
111+
margin: 3em auto 0 auto;
112+
}
113+
main > div {
114+
z-index: 4;
115+
background: white;
116+
padding: 2rem;
117+
margin-block-end: 15rem;
118+
border-radius: 1rem;
119+
box-shadow: 0px 6px 7px #1c12120d;
120+
121+
max-width: 700px;
122+
margin-left: auto;
123+
margin-right: auto;
124+
}
125+
126+
main > div.wide {
127+
max-width: unset;
128+
}
129+
130+
main > div:last-of-type {
131+
margin-block-end: 0px;
132+
}
133+
main > div > *:last-child,
134+
main > div > .contain > *:last-child {
135+
margin-block-end: 0px;
136+
margin-bottom: 0em;
137+
}
138+
main thingy {
139+
background: #ff00005e;
140+
width: 300vw;
141+
border-radius: 50%;
142+
height: 60vh;
143+
display: block;
144+
/* position: unset; */
145+
z-index: -4;
146+
/* transform: translate(10px, -64px); */
147+
/* transform: rotate(11deg); */
148+
}
149+
.asdf {
150+
position: absolute;
151+
transform: translate(-);
152+
overflow: hidden;
153+
max-width: 100vw;
154+
}
155+
.contain {
156+
max-width: 700px;
157+
margin-left: auto;
158+
margin-right: auto;
159+
}
160+
161+
blockquote {
162+
border-left: 0.6em solid #b97777;
163+
padding: 0.5em 1em;
164+
max-width: 30em;
165+
font-style: italic;
166+
background: #f9f9f9;
167+
font-size: 1.2rem;
168+
margin: 0 auto;
169+
}
170+
171+
blockquote.banner {
172+
margin-top: -46px;
173+
font-style: unset;
174+
}
175+
176+
.pillars {
177+
display: flex;
178+
flex-direction: row;
179+
justify-content: space-between;
180+
overflow-x: auto;
181+
}
182+
183+
.pillars > div {
184+
color: white;
185+
padding: 1em;
186+
background: #434366;
187+
min-height: 300px;
188+
flex: 1 1 33%;
189+
margin: 0px 10px;
190+
}
191+
192+
.scrolly {
193+
/* max-height: 20em; */
194+
/* overflow-y: auto; */
195+
}
196+
.pillars > div ul {
197+
padding-left: 0.6rem;
198+
}
199+
.pillars > div li {
200+
list-style: "- ";
201+
margin-bottom: 0.3rem;
202+
margin-right: 0.5rem;
203+
}
204+
.pillars > div li::marker {
205+
color: rgba(255, 255, 255, 0.4);
206+
}
207+
208+
.subjects {
209+
display: grid;
210+
grid-template-columns: repeat(3, auto);
211+
grid-gap: 1rem;
212+
/* display: flex; */
213+
/* flex-wrap: wrap; */
214+
}
215+
216+
@media (max-width: 1100px) {
217+
.subjects {
218+
grid-template-columns: repeat(2, auto);
219+
}
220+
}
221+
@media (max-width: 600px) {
222+
.subjects {
223+
grid-template-columns: repeat(1, auto);
224+
}
225+
}
226+
227+
@media (min-width: 1000px) {
228+
.subjectscontainer {
229+
display: flex;
230+
flex-direction: row;
231+
margin-block-start: 15rem;
232+
}
233+
234+
.subjectscontainer h1 {
235+
position: sticky;
236+
top: 100px;
237+
align-self: flex-start;
238+
margin-block-start: 0px;
239+
/* padding-right: 0; */
240+
margin-right: 1em;
241+
}
242+
}
243+
244+
.subjects > div {
245+
display: block;
246+
border: 7px solid #c19d1c1f;
247+
min-height: 200px;
248+
min-width: min(90vw, 188px);
249+
padding: 1em;
250+
border-radius: 1em;
251+
transition: transform 100ms ease-in-out;
252+
/* width: 27%; */
253+
box-shadow: 0px 6px 7px #1c12120d;
254+
}
255+
256+
.subjects > div:hover {
257+
transform: scale(1.05);
258+
}
259+
260+
.subjects > div img {
261+
max-width: 100%;
262+
width: 100%;
263+
}
264+
section {
265+
display: flex;
266+
flex-direction: row;
267+
background: linear-gradient(145deg, #a6b8ef, #daeaff);
268+
padding: 1em;
269+
background-repeat: repeat-x;
270+
border-radius: 1em;
271+
margin-bottom: 2em;
272+
}
273+
274+
.shadow,
275+
section {
276+
box-shadow: 0px 6px 9px #0606060f;
277+
padding: 1rem;
278+
border-radius: 1rem;
279+
}
280+
281+
@media (max-width: 500px) {
282+
section {
283+
flex-direction: column;
284+
}
285+
}
286+
287+
section > div {
288+
flex: 1 1 60%;
289+
}
290+
291+
section > div.content {
292+
margin-right: 1em;
293+
}
294+
section > div.preview {
295+
flex: 0 1 40%;
296+
}
297+
298+
section > div.preview > img {
299+
width: 100%;
300+
}
301+
302+
.github-logo {
303+
width: 1em;
304+
}

0 commit comments

Comments
 (0)