From 74b1a28e1cc77326409035aa8771f2966cbf25bf Mon Sep 17 00:00:00 2001 From: Tressley Cahill Date: Mon, 24 Oct 2022 11:29:34 -0400 Subject: [PATCH] Small tweaks - Replaced traichu SVG with an animated PNG - Added Konami code easter egg - Fixed Cube Cobra typo --- css/animations.css | 10 ++++++++++ css/styles.css | 9 +++++---- img/traichu-run.png | Bin 0 -> 2293 bytes index.html | 4 ++-- js/main.js | 36 +++++++++++++++++++++++++++++++++++- 5 files changed, 52 insertions(+), 7 deletions(-) create mode 100644 img/traichu-run.png diff --git a/css/animations.css b/css/animations.css index 5d31228..a3ae86c 100644 --- a/css/animations.css +++ b/css/animations.css @@ -36,6 +36,16 @@ 100% { -webkit-filter: contrast(100%); filter: contrast(100%); -webkit-filter: grayscale(0%); filter: grayscale(0%); } } +@-webkit-keyframes slide { + 0% { -webkit-transform: translateX(0); transform: translateX(0); } + 100% { -webkit-transform: translateX(-1200px); transform: translateX(-1200px); } +} + + @keyframes slide { + 0% { -webkit-transform: translateX(0); transform: translateX(0); } + 100% { -webkit-transform: translateX(-1200px); transform: translateX(-1200px); } + } + @-webkit-keyframes slime { 0% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 30% { -webkit-transform: scale3d(1.25, 0.75, 1); transform: scale3d(1.25, 0.75, 1); } diff --git a/css/styles.css b/css/styles.css index a5b68fc..49b5df7 100644 --- a/css/styles.css +++ b/css/styles.css @@ -24,12 +24,11 @@ main { } header { - animation: flicker 2s linear infinite both; display: flex; justify-content: center; } -header svg { width: 6rem; } +header img { width: 6rem; } #dock ul { display: flex; @@ -53,7 +52,7 @@ header svg { width: 6rem; } #dock a:hover { animation: slime 0.75s cubic-bezier(0.455, 0.030, 0.515, 0.955) both; fill: var(--primary-link-hover-color); - margin-top: -0.25rem; + margin-top: -0.5rem; outline: none; } @@ -170,7 +169,7 @@ header svg { width: 6rem; } width: 40rem; } - header svg { width: 8rem; } + header img { width: 8rem; } #dock ul { column-gap: 0; @@ -180,3 +179,5 @@ header svg { width: 6rem; } #bookmarks { flex-direction: row; } } + +.slide { animation: slide 4250ms ease-in; } diff --git a/img/traichu-run.png b/img/traichu-run.png new file mode 100644 index 0000000000000000000000000000000000000000..17b1c97e66efa7ad2d313533c3ca7fcddf36c86c GIT binary patch literal 2293 zcmXw)3p|tiAIG1~HoG93S(CZUT@4T2bdbzsF1a7ANMp5B6e)C>D70xVHDw1KDWUU6 z$eGLEZ5K)DGMs;;I;Z85;y9^vapeE3%lGwse&6r!`}#f4>-W4q@7M1q2nz7l#;(8u z0HE!|WQ0I@7*aJt0~!-(ZYEHIC53p?VIzIClh6c{z}%Ju060ChU_fyx8ET@VIbr@# zMnD2i+~Yokl5voKn3sAE0B3wqaiGm)F0hye%r$SGnVFeVc0&E;0Wlp)*uxU3`sQ8ZQCBAl$|V+FG9v!y_!UbmsB%#M7V_k{$jJc87FT zJw5z3c3XyiWBkMGbOJd>Cpvbv!^DSPlTQGWo9)Ei{OVq@-UO0{xT1=jA3F-emA9k{j&00%x@=GtCQ-JhBZHn8=Ryl8 zoE-46AsUXm_Oc+rcF(9W;SI4z;OI=s#3dBZuLt3a>79y8RD6ea!zVa5?y8tI;jyUwhPjHeiAd;O(+p#QjEe~CU`q?+9gR2i8 zPE1}7pGMEaQV?43`vjONWbqH{VNk86u>z7h5WrXKSC<9iAnT{NyF9|6E?jN@;<;0x zE;1p4iIWtNVlzmwQc|4sz=M?6ZH5?=(}sUdJX`1$Di-_tQT!Lp(5B;89)4I3FUA5-JHwZGN4eeqM?2rU8Sh-N(^Lt=S@6 z%jevkrPuD@_orVgym@dL=0KUaS!WR6uudGz8eo3Om7EEg8xCFPcS&?Z_$JoAVUxe9 z?Muf5-#(>fzr)fUL=08@Z)wc)*sz*C zw{rCT-ng{Y%(!L!7wtCB-xPbFvX?1jj`8`8UIhysW9ybMSuC5%>%rY|XQ>f7F}=}m z4RLGodJl_Q&Y6)i?cz1xC;t-3H_F{c4NRT>k4jO@Hl{sC={A50hv(c$FB)1Dab>4M z(jvHoU$r3+@8ZCv*hE(?MFvb$#5?kC`kCjjz*a-A>ASAa8oYn){Y}>eYj|~wLCk2q ziO>h;Ijmpy05bar8tUUo0qHU%ElB8ZXzXLG+zFwf`i=$yLSyu4gBlHX#AT$Kj!ifT z8`rd{`BBGfM|XQF4#9JtL~15>^)c9j7vrki|Kv@E))mCkPV%fW4{%JMulzG!%c6Ar zVDsOhTdu$(Z(xNF4zJJ<>;#xKg*`Lwnt!Jd_7Gaed>R5crb=|IvJQF&Xfp8h1M_^* z?IqObaBzfLA*wxBa-QO?a-|c#obE%VoBO;oS0NL~O}2g*kAcm#i$wo`tpt1e-718x z8})bRsOG|=8-1^13HLIe@NcEiFTUdrC3EPXcG;#gR-c1!P{m_oKE(xRE4Xm}4G+J& z%kOe5iUkDzo51yg#Z2u_CXxP`nWB1KUWG?HT2QNa5se>kO|?J!$CQ@$-CfaBDNr=?DGgnK zMW+V~2mTjEus179AardSb6;hQD2PQh6~Ha2&Vsk-ZBNdJU=@}(!=E&`5gqN@5f^+R?|(3XgzA1s)n9pl zhHp&B3YugP6Z7AhK&g)l@aCF>6kk+2u0QGWF5$0YE;m36xpgl?`^jj%G`iDmwNuVq| zeYr6b++2z2PZAc^J|lqvnb!J$jKU|@5K@56{PG75m%E9pc_yc30LqHtm(E~{Q_jO4 zA50ljQ>ojpJnuM-mymD&@Fs6o=z=D_yxi0xoJ7*a5Q*p})3 z`?7pV*DGlvJBK_4+!?;cuchBIR__^akI3XvB~;&8zI}f0fzEgRtetWD z6t_8B@4Frs*Q6)XSAg-3PA$Q<*{Z#0v9&=fGYbLzP!_RKga-p19dB#wxb}$GO{9i> w%$B74Ozg2{ya~)(G!lRA$Lse7Q~cBJ?K~BvzaWS`lcC1J$18wQM`xe
- _traichuMade with Pixels to Svg https://codepen.io/shshaw/pen/XbxvNj + traichu running