From e7627c3594d7165daca74bf7af943bb8804985f8 Mon Sep 17 00:00:00 2001 From: "Huanzhi (Hans) Mao" Date: Thu, 18 Apr 2024 12:35:13 -0700 Subject: [PATCH] Gorilla Website Landing Page Overhaul Part 2 (#368) This PR is the continuation of #359. It addresses some minor issues that are not covered in that PR. This PR **does not** change any BFCL leaderboard values. --- assets/css/cards.css | 4 +- assets/css/main_page.css | 97 +++++---------- assets/img/{mag-16.png => book-16.png} | Bin 3712 -> 3387 bytes .../img/{steam-16.png => fire_engine-16.png} | Bin 3741 -> 3490 bytes index.html | 114 +++++------------- indexPage.js | 65 ++++++++++ 6 files changed, 128 insertions(+), 152 deletions(-) rename assets/img/{mag-16.png => book-16.png} (73%) rename assets/img/{steam-16.png => fire_engine-16.png} (72%) create mode 100644 indexPage.js diff --git a/assets/css/cards.css b/assets/css/cards.css index a60aea98f..40ccfa6f2 100644 --- a/assets/css/cards.css +++ b/assets/css/cards.css @@ -18,9 +18,9 @@ overflow: hidden; } -.card-shorter { +/* .card-shorter { height: 35vh; -} +} */ @media (max-width: 768px) { .card-container { diff --git a/assets/css/main_page.css b/assets/css/main_page.css index ed82a6855..6a22c5c9f 100644 --- a/assets/css/main_page.css +++ b/assets/css/main_page.css @@ -64,12 +64,6 @@ h6 { border-color: white; } -/* Footer Gradient Background */ -.container:last-child { - background: white; - color: white; -} - img { max-width: 100%; max-height: 100%; @@ -83,36 +77,32 @@ em { color: black; } + .api-appstore { margin-bottom: 20px; } .spinner { position: relative; - /* Change to relative for responsiveness */ overflow: hidden; } .spinner__text { position: relative; display: inline-block; - width: 50px; - /* Adjust the width as needed */ text-align: center; } .spinner__text--top, .spinner__text--bottom { display: inline-block; - animation: 1s ease 1.05s infinite running none; + animation: 1s ease 1s infinite; } .spinner__text--top { animation-name: spinTop; } -/* Bottom text spinner has to be configured so that it is positioned -right at the same position as the top one */ .spinner__text--bottom { position: absolute; top: 0; @@ -121,6 +111,7 @@ right at the same position as the top one */ animation-name: spinBottom; } + @keyframes spinTop { from { transform: translateY(0%); @@ -144,65 +135,17 @@ right at the same position as the top one */ } @media screen and (max-width: 768px) { - .spinner { - position: relative; - /* Change to relative for responsiveness */ - overflow: hidden; - } - - .spinner__text { - position: relative; - display: inline-block; - width: 50px; - /* Adjust the width as needed */ - text-align: center; - } - - .spinner__text--top, - .spinner__text--bottom { - display: inline-block; - animation: 1.5s ease 2s infinite running none; - } - - .spinner__text--top { - animation-name: spinTop; - } - - /* Bottom text spinner has to be configured so that it is positioned -right at the same position as the top one */ - .spinner__text--bottom { - position: absolute; - top: 0; - left: 0; - opacity: 0; - animation-name: spinBottom; - } - - @keyframes spinTop { - from { - transform: translateY(0%); - } - - to { - transform: translateY(-100%); - } + .spinner-all-text-style { + font-size: 26px; } - - @keyframes spinBottom { - from { - opacity: 1; - transform: translateY(100%); - } - - to { - opacity: 1; - transform: translateY(0%); - } + .spinner-container { + /* still keep as row */ + flex-direction: row; } + } - pre { -webkit-overflow-scrolling: touch; background-color: #f5f5f5; @@ -226,4 +169,24 @@ pre { -moz-osx-font-smoothing: auto; -webkit-font-smoothing: auto; font-family: monospace; -} \ No newline at end of file +} + +.video-container { + min-height: 55vh; + +} + +.video-section-container { + position: relative; + padding-bottom: 56.25%; /* 16:9 Aspect Ratio */ + height: 0; + overflow: hidden; +} + +.video-section-container iframe { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; +} diff --git a/assets/img/mag-16.png b/assets/img/book-16.png similarity index 73% rename from assets/img/mag-16.png rename to assets/img/book-16.png index 55d7b9a7197b5ea73bc74559591fba98552bc6a4..9bfc30528933f39ea90e2e597399155516d66fce 100644 GIT binary patch delta 638 zcmV-^0)hR29lIK^$qIi0TuDShR5*>T)6a?=RTRhZ@4a=ax~glYd%8zk$wWtzDCi=h zB%r>7!=kVjG z7$a91eWmpO0T_TE9{--cl1*o&=0=v!H%cXUlSIGoy?aqr)xCf9YV}!OtKZ@+cx<|+SN)>ONiq9_m%?*DwBJ9pmW&?b;J-65vDLP%M0qJrXFfk2yuT8Or8(}-hs%3bB=KwK?P(I zLI^l(shdk?vz*mxjn#tl;~to%iFrBacymOE8LQQXlamF`J7Uz7<(&2L0=P+tisSX1 zCe!G|>`%yzip}$e!YD6C6bWK@&!ufl-=L z`m*xc7fxGx&iQ@4SfD1(1Pd0{fLoJyk3@o#hw^`|g4-&I8CP-1xU0y;y%nUIW%JOH(f)&tj$kt-%|Y$%1YKJb;FRu(U>)rBh+u* z*}mxk^;kBiL$^s#KmG)^502k65D~uoapcdoj;|=Syf8>aSBdC45nUsq>zR=9f&j37Z|um;o~!3i96dB7DUNtrTUChwP6R;^OuOBly7JQx zEt)CG2VdBmmrZ3f)2@IEfU~X+!asj|U)@$y21#)&B$G*1H#tnsK}0YN(_$Egyrp65 zM9@EtnVHaTn<9gf8aRN}?=C@rp4eDi!yKKErrZn6f5qBA&Rt?S<_7?0AdXH!`zdA!6I6?g+YvjA}CZ9uG%EzR4V|$OeY{X zY=So&jmiKx=bZodhX|aTP!u)e568;A-U&1}KYK+0;B@4n(3y`SrvpO6leKN5Lmtd8 zt<*Z5&J=$G%MlT0Aj9c&CIL83ojUD)yk@g6V+yx=Z}g(~Mn5ihbt5nvf~DiL&*!pQ z!gc2C*~;qVi`LH+xi*ZB zjg7U=1p^2N{n)m>5nWy1w^~jD5c~TfM#IP+*bgcwfIb%h6Ge!k2-Q)D>6rjHH+?%A zca9DZ54Q&VJ`8#KaPay47Z~AxjQTnx&V4?C#gYO@@dT_k8(bSJFy#;7*MR}lR6mAj oG}ie3d+)U8=c(fZp25Ta0wkx)tv;H_5dZ)H07*qoM6N<$f;+*?fdBvi diff --git a/assets/img/steam-16.png b/assets/img/fire_engine-16.png similarity index 72% rename from assets/img/steam-16.png rename to assets/img/fire_engine-16.png index f70b95a69dc787102937299363a40dee42bceb2e..796ae4991fa151f4d2b23ae3e48ced15d86e25d2 100644 GIT binary patch delta 742 zcmVLliyEMcNmAC@9AlwEm(?6D_A^=Lk%k0C=wHc z)*Fo&HHcZze_+W%%$8*?+okc+xw+dJZ~PH8a-*mh)fz8chA5615EWF$sI*c}PoamN zp7!g-QSTNnd~e>X_sQpd-n>Fe$>)^vS<`?DFen57Hc$c++&Bf4=SG5C0( zS<{M&UG#fB9>X-vN>wQKBA-vr897r(De1Gpt-|ve<8;t8dqhouX>TPBH~ZT1KmR0; zOic9K!CFcJ#Cv~dvMlkMrn5qa%jVh0i=J~MlRfLT2!ZJggXt_yzwvvCSu4bKO(K7hR0rclGtM92E`j#(84~J`7aEhwp333Jv!Re8r#`r z3&HAeh>MB%2vSPcx3mCkjYgwycJ10N{eJ(+kJel+VnWb~^Kij%_{zS0`{goC`v+L@ Y4w45R2(jzLH~;_u07*qoM6N<$g1moohyVZp delta 995 zcmV<9104LK8=W1n$qIi1zDYzuR5*=I!Fy~IbpQwO?_IC==(X#6?XfYob*~OO!f-EL zwz&kSf+S0ZgqRQv{vjFBKm3nB^beItOpGxY-)Qg=g8?=8Afg${hFf*$Cb$agULA9= zc3s!&^?JX1_^+Q2H8;P2|FcY!voTD90yNz)J{EZHyi!!3BpQE7n1*o%HX8~}4Jf-h zhVbw)Q0v(Z&@=@?bQEMcl9vnTRJGJ9iVn~eg`%p$G)xGh(zk6Uv>0e%E zwZ=wE7X;9T3ChqZ!m<_;w8h_eb{N&uf4$Pv z-gVT-6FZ&Xq*T)=X*L}!$GfQ5?uP)%2Dj6W#NU79)Av%&p1!^14$;20d}|zL-i|~5 z;PB&a?sSeN5O{#m?Xa>0GbQy5-PTcq-o7SCTb(e>!ZPcS(BETj#-u6w#_i%)4?eUW-ff|QAy=tQL2Tlz9xc&*`%Kk@_9|9mdj?d zaN23XT~--V84m)H+Mu{ @@ -83,20 +86,20 @@
sgp@berkeley.edu, tianjunz@berkeley.edu

-
+