From 8701d73f9a86509a4524324dbffe3d8f1f73acc7 Mon Sep 17 00:00:00 2001 From: Camerin Date: Thu, 21 Oct 2021 15:30:19 -0400 Subject: [PATCH] Made changes that fix mobile styling. --- public/img/udemy.webp | Bin 0 -> 2154 bytes src/components/About.js | 5 ++++- src/components/App.js | 12 +++++++----- src/components/css/App.css | 7 +++++++ src/components/css/Card.css | 7 ++++--- src/components/css/Github.css | 2 +- src/components/css/Intro.css | 6 +++--- src/components/css/Navigation.css | 3 ++- src/components/css/Theater.css | 5 +++++ 9 files changed, 33 insertions(+), 14 deletions(-) create mode 100644 public/img/udemy.webp diff --git a/public/img/udemy.webp b/public/img/udemy.webp new file mode 100644 index 0000000000000000000000000000000000000000..5f399aea09b3f5f2845b51b41d43bce19014ef9e GIT binary patch literal 2154 zcmZ9Kc{me}AICQ&niL+<=9Xg;IWosKau18hq$G38EoS75wA|O+$9#=1kuz6^o0@CL zSJQWnl{2}PJMydk`+fg=Jl4QEk+XUlTKcijQb2vy@t7do6c{<{THp4(?b-c=HFzeGwp?<7FNGD zaF`JuENgJog4w6)PE&r1VUgPvP}in!T_Q$Km8nv=^6RZI_Br|)Iy?N3bng-{)JacU z&FeD4`|i`&G)^9gOZpethmGbXo=?w5lb3^S3C$*+)E_JP4QN3pE-Xx5jPIyY%avE} zrkdP-Z;n^x=;xN$i_(coaaVJA5;kCx&BR8WCskZjp7c?Fy|R=G`&;T4?D>8De;B(x z293ls0PMPH9x}2k6$FE!KTcQUTk2rC!iC`|q$$O3mF2v$vaUak^><3~Qt7x{QY_z} zHXIxNGGT84J!y0}m(H})?2P3~OfA3x4t`~h?($QIl(;4$RipXsvAnxw%1nDx3O=}9 zXErY4AHT)4yRAEnss+|VuqEpEhcX6ZuNHbYwNxp#4e3&6PJR|;gCEk(FM-4YxuZul z4rZyL6w8?$tUFXNyS@A@y0S^FeB$GPQpQl=XX67UZyAVh|4 ztLr$^^D_c`(3Ccq^!$I(2mtu`bEy@;`kn;gjfQV(6c4vPeNFJN(p8V|6v|f7&)H3k zEAg;*{jyM_&4v)swh-NLT&|N%4txu4-`_!GC)3)eUZ}~_#&t36`AzzE-+lM0(7bzh zg^f?rrCh=(@ll|pbuKH1)y(i1|IYFNP#eok*ZBw2+sYz6Y!D-~EC#R^2vX(AfEp<# z$YlDD8x==%wy{>YNXE3m<=KBUDc$%mvB9F|Ueqs8DeH9qRpQPp5H$tv%Ft&yu!CtT zmuTE1KFCeR94%(vvR=%4MBygB#GjgI?-f61<-xfcxrg4H> z%TgxF*mgI(1#7u|Avfw*G%`yKmppMkvyNSJJt-R5Jr0cOnu_e`$V;7NG z$=&)Yo+0dBDNttux0=}Dt)NG;x9Enqk*<-Yi)1TUmXzN1l9kaHJ&_JQ^30AJM0C{6e3(Q{|V;FHlgSpt#3WUEa%}tI2FB zhw$P4%T5B|h3K2#qk4$X2@4`gK9l9gma-xh+t(@_l^$Bsg8j@`92{V=&7L;*-F`f9 z^ot@Q@ts~n-0vK>a)p_2+}THwXzj4^rrg)72k`gMB_UD7db3FGfXIZ*0BZE~6}@#X z#mSU$!ftlq3HZWxqx8Vv4(P2RmiAAYm*dG_hqS8AQvV4dDNtEwQ`D+H=D7z?B%fJH z#}2@y`IMl27YkceR-ajysY2^Cpw7$syCL1D>U1251Gc4FkspYmaxGt=1i?)O&N}>* zc_;;;&)bKWM30)<2<$i3T1~RxKn1boq0DyLP-6Vvdx=FW(sLWagv&kImIj$SxS9ez z4VC4Q;CgSX9E_SVzv{6+2M66zlAUJqV!m|~Hu7oio0m5SAfda^r8bzT4IgU=x3hfW z!xa~bnhd-0oL}f%CkUI=Up7FouJzTx2@Xq*soeQstrOQ3PG-Bn>n+r4r+8y<5>+pE zQ1N-;B-e!KAQb=r41Vv}j%cZt?idVXH7qyu$EOXRG}oeotnYTW)L%V-960h& zlMWJBqP;SC`=AVgpW$XqEjv(04;unem^RhNjT!G=>fEY|S_^>gJ+6H=ponQ4GOI&r zP|YK_3-Es3NZhi)n*v2-J<$NuiHJ!jt!3dkca6YHaYc`ncJ}ibgd-^s{Ar!XxKuGF zjT0H4BA9$VIr?AhmQTdqS+w}^TA|OiQd{2uDwRofl!uLkz3%S*b#3 z<6{bzho*8D{w>m}^wqWrPmMP?KO!P0rrLO_qCM`-x$ zIz5fjL|>CzJL=g%sPQroRV5$B5QYq?&4#om1f5*Trm!IZEYx%PSi!$cxChZGHuBVJ z?qTHpt-OIwp<)Zcg;aj>Zn$Qz-B#`^rDxjl!};`9ahw+Rn-}xRcnFXlm;N#$p<3g4 cxGY`fN{Wkm31n#>H1|%0^Z - linked in + LinkedIn @@ -56,6 +56,9 @@ class About extends React.Component { Hack The Box + + Udemy + diff --git a/src/components/App.js b/src/components/App.js index 1adc721..20d9821 100644 --- a/src/components/App.js +++ b/src/components/App.js @@ -11,11 +11,13 @@ const App = (props) => {
- - - } /> - - +
+ + + } /> + + +
); diff --git a/src/components/css/App.css b/src/components/css/App.css index c48ce48..91b8dcc 100644 --- a/src/components/css/App.css +++ b/src/components/css/App.css @@ -26,8 +26,15 @@ html, body { flex-direction:column; } +.App .app-content { + height:100%; +} + @media only screen and (max-width: 600px) { .App { flex-direction: column-reverse; } + .App .app-content { + margin-bottom: 5.5rem; + } } \ No newline at end of file diff --git a/src/components/css/Card.css b/src/components/css/Card.css index 10962eb..b097ea8 100644 --- a/src/components/css/Card.css +++ b/src/components/css/Card.css @@ -13,9 +13,10 @@ } .card .content { - font-size:xx-large; - margin-right: 2rem; - margin-top: 2rem; + text-align:left; + font-size:xx-large; + margin-right: 2rem; + margin-top: 2rem; } .card img { diff --git a/src/components/css/Github.css b/src/components/css/Github.css index 9ddd34a..3738b7c 100644 --- a/src/components/css/Github.css +++ b/src/components/css/Github.css @@ -24,7 +24,7 @@ .repo .title { color: #BF8D8C !important; - font-size: 48px; + font-size: 28px; margin-top: 10px; font-weight:bold; width:fit-content; diff --git a/src/components/css/Intro.css b/src/components/css/Intro.css index 11d1c56..8ad1497 100644 --- a/src/components/css/Intro.css +++ b/src/components/css/Intro.css @@ -2,7 +2,7 @@ opacity: 0; transition: opacity 1s ease-in-out; width:100vw; - height:100vh; + height:100%; display:flex; flex-direction: column; } @@ -29,7 +29,7 @@ .intro .current { z-index: 10; opacity: 1; - height:100vh; + height:100%; width:100vw; display: flex; position:fixed; @@ -47,7 +47,7 @@ display: flex; position:fixed; transition: opacity 500ms ease-out, height 500ms ease-out, top 500ms ease-out; - top:100vh; + top:100%; left:0; justify-content: center; align-items: center; diff --git a/src/components/css/Navigation.css b/src/components/css/Navigation.css index 9b93651..6a1b74b 100644 --- a/src/components/css/Navigation.css +++ b/src/components/css/Navigation.css @@ -55,11 +55,12 @@ @media only screen and (max-width: 600px) { .Navigation { - position: fixed; + position:fixed; bottom:0; left:0; height: 5.5rem; justify-content: space-around; + width:100vw; } .Navigation a, .Navigation button { diff --git a/src/components/css/Theater.css b/src/components/css/Theater.css index 1b49cce..0940f71 100644 --- a/src/components/css/Theater.css +++ b/src/components/css/Theater.css @@ -55,6 +55,11 @@ color: #CFCFBA !important; } +.theater-content h1 { + width:100%; + text-align:center; +} + @media only screen and (max-width: 600px) { .theater-content .description { width: 80vw;