Skip to content

Commit 1cfb957

Browse files
fonspfonsp
committed
😎
1 parent 6884529 commit 1cfb957

File tree

6 files changed

+513
-0
lines changed

6 files changed

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

0 commit comments

Comments
 (0)