From bc54923f64397d0389bad1a040434e8c6b8c0d57 Mon Sep 17 00:00:00 2001
From: Dominic Masters <dominic@domsplace.com>
Date: Sat, 12 May 2018 15:55:04 +1000
Subject: [PATCH] Refactored more image based code

---
 public/image/Image.jsx                       |   8 ++-
 public/images/test/1280x1280.png             | Bin 0 -> 11336 bytes
 public/images/test/320x320.png               | Bin 0 -> 4101 bytes
 public/images/test/320x320x2.png             | Bin 0 -> 6934 bytes
 public/images/test/640x640.png               | Bin 0 -> 5439 bytes
 public/images/test/img_red.png               | Bin 0 -> 779 bytes
 public/page/home/Homepage.jsx                |  21 ++++++--
 public/section/Section.jsx                   |   4 +-
 public/section/image/ImageSection.jsx        |  50 +++++++++++++++++++
 public/styles/components/_image-section.scss |  22 ++++++++
 public/styles/components/_section.scss       |   2 +-
 public/styles/components/_video-section.scss |   7 +--
 public/styles/elements/button.scss           |   1 +
 public/styles/index.scss                     |   1 +
 public/styles/pages/_home-page.scss          |   4 +-
 public/styles/tools/_absolute-centering.scss |   8 +++
 16 files changed, 114 insertions(+), 14 deletions(-)
 create mode 100644 public/images/test/1280x1280.png
 create mode 100644 public/images/test/320x320.png
 create mode 100644 public/images/test/320x320x2.png
 create mode 100644 public/images/test/640x640.png
 create mode 100644 public/images/test/img_red.png
 create mode 100644 public/section/image/ImageSection.jsx
 create mode 100644 public/styles/components/_image-section.scss

diff --git a/public/image/Image.jsx b/public/image/Image.jsx
index f192464..f74ac72 100644
--- a/public/image/Image.jsx
+++ b/public/image/Image.jsx
@@ -32,6 +32,9 @@ export default class Image extends React.Component {
     let sourceElements = [];
     let sources = {};
 
+    let defaultSrc = this.props.src;
+    let defaultAlt = this.props.alt;
+
     if(this.props.sources) {
       //Iterate over supplied sources
       for(let i = 0; i < this.props.sources.length; i++) {
@@ -39,6 +42,9 @@ export default class Image extends React.Component {
         let w = x.size;
         sources[w] = sources[w] || [];
         sources[w].push(x);
+
+        defaultSrc = defaultSrc || x.src;
+        defaultAlt = defaultAlt || x.alt;
       }
 
       //Now map to components I guess
@@ -55,7 +61,7 @@ export default class Image extends React.Component {
         }
 
         sourceElements.push(
-          <source media={mediaQuery} srcset={ sss.join(", ") } key={i} />
+          <source media={mediaQuery} srcSet={ sss.join(", ") } key={i} />
         );
       }
     }
diff --git a/public/images/test/1280x1280.png b/public/images/test/1280x1280.png
new file mode 100644
index 0000000000000000000000000000000000000000..bb4ca913441fbd26552180737d216365f5042a1e
GIT binary patch
literal 11336
zcmeHtXH-+!yZ#1LL<UiDEVMXd;pZrzBE3XM1q%=h3eo~19TE^ofDnSBW)uY(1QZ1B
zs5BuIAp{5n5P?Aqodgm{La!mTgp!clc>kaOpYE6Y!L!y``<#8wdC$Aw_u0=b>v?wF
z)=FuI>J9*a(v`~>ZvwDYdbt&Bmy;H{Cdy6HLMG&<)t{iKU42@5v&H+o&3OPy6BI@6
z(pTlcb!)pz()w)xC`fGpup5A10XPVN1^~YSa1?;!0B8en1^|5ki~%qQKx#nx%@qJ_
z0Js6bZ2;~9-~xa<0G<H&0uTs5FaTiyL;!#V;2{7{0C)z#O8^o9NCx0702u)M13)$a
z`2Y~49sxiEpb7vA01W^%0niEn6@V@P`T!UJU<iO=0LB5B27n8|A^>~<)&USpz5jXq
zjKKdQ0`Hy$tx7*v2)cYX1c055KTeqzWZr#g<-yQP4xzV@UZH6B2c96v-4_w6gYXPJ
zbXMn-&Y9DThkT`I{!ihRi|6gaUAaRT+}=y#)nOp3dFR|NSl(3RzVlndF73^dlvRi1
z<s)G*bjSTY(Z%WO&UAR&M>!coo}K+|y85Q#uB+gogY5RNd(It70kWlAcKvlU=G;k{
zE%y`-?Yj2!(a&i7#KzC=@RJ;V^5M_X;pc$(|DPUcW~O#Ti`VIF*9th7vuXv8UJ+-Y
zd4rO%VR{{jj#^m};vt&287>AAEufC>=Qe4GHrq&9*dU$&H(w*^YUD*DbSZy!;Kb{x
z-ner3+z6d#A>_<+ozPIxN}Cl<YGhf|N>`p|*KW>ZR-xi0Je(OvUfax-M2AXhok;U6
z+(KW%q=;9axn-eK#P8~Q+rdzDGFx9E2o$_oqO}%5B7q{|I0`>b&>Epk{Ju>-AH!8i
zJAtlS&&AFqhxdw~)6uhCS!@b!d`=~e2^Y~U%Bei~pkG!`O|S$n_{S5PAl6ftpx2;l
zRWU&G4Ugr+K4*n2w@)#nK(F@alPJCr*QJp-HSUr=B*3N#nN@y`?u-ed1k;RHAPQDi
z%FJtuV)4=tYB5bnE?;ilMDf$o;pNI5!sypjJzg~1;`@oiG4kUH7%pbAUjW3X)&tQa
z&1ml5cVVo6RK(h6m(!!^sDY<yWToVGE_s%#Y*e8i(*Y$jbcTY^vr~d))c8|0&ez@=
zb9#WPvWix{Q3jPUJ0b~W8|GGQU0B31o+McW+Eb;L48~bsoH=c(F9R7%-t*%Lt4w6H
zpA+y_L5*yTqWa1uFXw0JQA0XuXC!4~Yq?*NP`itt0?l|hlEh2Xqchs{ECN%hRb{VA
z>u8@o4-*Csir{SDRBJL_hinEXva9ay<dii*6k1ZYk)VPq{1s(}XL?F>iaOKN<Wa2x
zr{O??Yl>COwZo-)Xl8P{_-=cDR~NH`nS2<=Z1EmK?sxq=cNV&*V#~rnZ`4%v`jsjk
z^Vc#9<o@_T;rY;&=U&^4j>gE3ELy(aXBCscxOB}+UK>)bSp71hjLH2LCaD>+7z~UW
z(c*SrD~-57K2T5QzCRk06w$$GAs5Wf{@ap+f50Xtpy&n`i)K!~Mp`mv+i|eMLY-|v
z*umgU!6r;IIuu>Ld(_A4=zVS`cN7wB{5B7_xVB7uTiCkT9#kY@G+M!6&Cfb;qWgqL
zro4s$zh$d0qEmCdkrAva;jnjBbP(qCR63WDnA!-Pr7A~9qR!wJTF|r5<2lE+(VD-K
z>M%<}c1ztrPw{-Yz3pbMOWTP<F?bF>U*mY3jCzzmOIU>S7B6xg<=DQu#ln2-%GZ`g
z<cwA07TbV(!uQyzej+~BMpqZF*l4KZdx6uN@OXST2hL6NFoY6phM>g~OE@u=t|T^Q
ztH-ZoLIa93D|=kk55zx1N_t(*76aBAM{b|o8EgsQI9w6;{glexI2mWcJ!i>GvEXW1
z#Va%YEuvghva`m}F3N$zmo;qH6HrouItIOhx6pV|CT6;l-#`!*Y{XFa_Js)Y#MHdc
zIG@zOdO!Ueht7>{vGCC)h>Q-{BZ_`k{$lLvcJM`6@w?I8YVB44j)51m{}ia|Y+Gn7
zyEY$SacVWZB+XcVOCj=muq0jy^~lU$H|%yxutdDMy83D6yUj$Es0zi4Smg<zDRTWq
z)#jxG;|&9NTbn?i{NUwEoWI<}OV4aJQ$9XW=alk}O01SXW=}nRh_Sk{sO_rE=|eSq
z>|u6wXj$!p*+PZiB@BPLO@#2<*GKhnR~uTm*~w{K#vHp&BJQ?8%`pYt;>?{D7LXwk
ze@!xeA}%CGD~m5!Q6FoOX7=8_0$c6-0Rm*;TaTJ|H|n^(+tR<y^94InZ2>%_j>t<?
z;bpz{Bmr?`Xy~M`knIs$8<Kwd6S=n4z11x&VsA&;>B(oUn_u<s8kjGKYsNZfY$`D%
ztUdLku=I?>g)O5}gkXi7<W_k@zbVt1(Jb!xhYwENWPM5RyP0kaKb=3N|6x}k6F+<)
zwbL|Eikv#wKF!m4>t$4I1op30FO2)gr!lkm)4fBi@2+)@J1ZCd4AO43Fmk%-TgTW_
zkE3Ma;v-6^NDq$CLs&mZn2|875(v6m=r=_xddK)`b$zbGpA|U%MY@iK`yl9FIDe;M
zBgwVheVc>dGdYek4w4)Ku{VF{P|J++W?t=Q((QU);lyvuVzk9?-haMqHn42MlK9^{
z9ygq9VqBiT1c$t3N?dSLgFYFG(yTZua<s4}ygjmORzi*Vctp8<b+jodu{l{anlL1{
zn%`Je!@tx&5I;9}GKPMlE4R*~)JWFZPUXSqbhRpnI+SODfItW@C7rJCI-IDA&g~2%
zwJi(!=xY3YJEvl9kF3LPa<}W$#<BE)*S(h!mCtfg&UwN1=E<LK4+)xn-NRfM-XFd}
z&g{o+akzG2)Fnb+;WQ@nTCs#N`V4y~RDi#-d8AsD`_cGlOmUUBm6ahK@huV<ju6Rd
z6%c|7U1`2qCpG!%5T2W?f>l`&J@V2nb`I58TSEz1j8Io0R(DUmW61$A(RKw_xXMsW
z_mlB4qRrlY$Icw`w$okcd2v*Bty<{21{zA+w!3M6sMvqU!e3WcyHCKI9ge41zzkR#
zxBTATFLBsdSuFKdgyBWvvBgoX52_OWkk2mz(d@V_3!Xv^1Bm^6?8thE(~K87=!6sW
zxEJotFJ87<0`*`8=~(D&352Ud;hZkRsFT(?d|kJa!NvEr4?@p=<6qbH&Wf1B)UeYd
z_Kl?9$x>TZG7d&{N!{U06}!fcygeKg-zS=I(+$l!;qYd;FpQI(RN0>eG}ELGXT_^&
zKkCJDzPNMs71r`<&xkBD`yFd<CdCxI?p>N*qbyt7e5bab%=FvuawLY>d;01P=mW3m
zwNh$@^0p?$WsJT;c&q%AuI-$Es$KxWL)MfnNpsfmKyY80w}yHrG9xv!qoAkYj-F>M
z{^lP!a#+mLnB_=!QT4y2vi!VnQ!>-y753M=@-D>M+Mq&cLuL8dAzm>_q%@H9{~W}r
zho3dd4}1Q^aH!Dz-gpk~#x-_}zV#fjp!MH;LVZ|JW6HtLsJ=^<F+`Qf^4OZ<TPHO<
z9RhiWIn~;(CX40DD!QY)eGL>i|KuO96nt6V?1_$jc{ENu^<}R4rHYCWBfK6Mt#rTg
zk50qh+PvIIL*{LC_VOe(%Qw~K{uYN)jleNPu}+o?+{rWY6E09!T|>Jz!Ic0Z?XPqe
zyC_qSz5oRmKlJc6s;<W|yEooU4GF%uU9KwshtzzrFF$hW{<7Pc*s!*WYr|oN?N@M1
z_Q77M{-b6^a7kag6OSRDsR@-G`P!M-b|eNrvBxq-pK;KJ&sXY>gB9>cUkG2|v}JWE
zLleCp-1RXA7G8DpZ%7n>OY;2hGIJeP36vL(TU=HD?MwU>tB}om;cQk>*#4ZTJdwPs
z{z8a?%v{$&o+C@F{_iu@lLSjIe*D3>0wQ+G=*@9;^|ywq@q*+&YMFft<H`Q*ZrFn#
z<dpsXGO1I{$<hxm?AR+nXFHlrx!s%k*K?25+9IG4rhIspG*qG3Q&G3@?+Vkd<L_%*
z^s>Eo;7vzo4sD)@^;qdZhxF^zoCC832VQ=iY4g#wW~vVgf|o`%5Y)Xo;-oTN8MCwd
zmEEvq2`Fv)%fXSLj~2M(oa)4Mth3-E`^M*r%@SMt1A@wJ$)@jAI*SG=j%NzkG6|4}
z)3d#8_!PmFPKru3L_#!*AtdHzbQV9B!X!?<1oGu<wCQKn_>(qk$_8zPIZb{ygBP_E
zHc}}D+6Mi<7;RrFasn{owN;1=?Rir;frO*RDUR}y478%abS?YIVuMfAqK5fEs?=O$
z<ontnSAAzS$kpq|9is{uj5DO_VS+~nL$PPW$8S@ihVhF-`mo<jU~1Dt)U^0;y%TrY
zuq6WP9<@$AVTc)Oc^n77#l6hHDIQk*(Ra_rNUSxzg8W+YYpMf&&9yjD8I^a%Mzdmn
zd(D);E_RE3+z!*D1Q#+I_^Yv-jS6{ouA0vTZIN2cVp1}}CG;T~o${lD`2hbrIFGig
zN?b47FpFEt-wE@tg$EGR5d#f!As<Y~8@%cb3i^>|Xw13yE;YzYuI&=*yxeW6nUB@1
zkwvs9e;-m5k_mZ3UN9c8-Yv~(1E3WO!`VYY50Jsb#0o^=#M}n`tckPxM~111D4P|y
z9Doc9q%Z?RE|bIAKu2VqM=))(N)cpSDtJtLzOgi83E8x*9ai6eOp4w|GKI7NozPy#
z=I%^VgWd2SuuUdzy<C{~hr0GYW!A?0+4HqKm?V(tXU{uW|BXA*@z@1@Sdjmv@5qQC
zcBNw_|BHs?)4PNp8Qof<YIu4iFR}BhsW4?n^Gs(UWioJmh&pqKu(-XfJA8@s$!WZ4
zS1O9X^l)pLAEf>32pYNQ(=m1#Y7nWfaNP#J(+zhZa@3`->KEB?ADzARkvrBVzV7~5
zcDOt&>_P90k`4x>=Fa^Qqvk$~PP2mS+y)~fb|O-FhO&j(Z}Z2WYgqZ1#}r(N*}++Y
zzn2d(E}6Rml&MeJm8av9le7%&|7#z+A`kJ<zV1rhR@Y3q!g@q6y5!)3FC>xsdFz55
zIl6ea8^ISQ4&K}s9`Trld}yBp%H#{<SL$sc3T<1Zgj97I2$%DFFnWHw$KDmxW4llh
zzg8kj4Og$x;RRam5qj;{$<bLr?1~9Gru>j=`fifFXZm86qYF2c6^0LiZ*?8irBZ$X
z>`;upjFEZ8CvH$2vf+kDPG9u2Sf5K&Ua+f;3nvLZG`K2)?VL7BY=l=)5wy#o^xT<F
zEtxw)FdOr(DfZ~hZ})@%t|0B1LirL)gnf=2Y5lL3kCBJ~K63>d)8@UmowC2@*(YQf
zb6@=}uAX4K+opf};3EMxCTwl^wfH}+pOT2mK~<yN_kkJrVbXXDc5--ONaN)ct1wyi
z$g+33FdI@1N3N%(NE;^_d)taucuTVw70DEaXt3TIhlVZhPPkH=v}s$l8QDg+%TU*7
zY#NtxSQ!#zt)^EE;L8lOR*&^L1QH$0R{v_bEa}#gN5@iQwA#!5U|5U~$`rP|_eO3Q
z9$U@fKS`&+BT22bkrPP#1*DO5<#ZOaZ6PZ<$sj9*s?nbGhgw0?pvG#)iiTMalI-e#
zM9YhHJp88c_42lor=PJGI-XK$$TgH6(&CEgv<1sG>hVX-0|&FL8?vPi-8xaleKORm
za){)`cK2wh^~cuG)30A~erGmEO475L!Y^r<(km(j#*@FeDTVJBQ}`XVYt2WbZ_%T2
z<Lg*<Et)zztN({)Hf0@hw^NKI?~nv%olLiGTrowbWIc4@BPACR*;KYKANI~;M^GIQ
z-<)k%oZYK`t#ZZgYGCAaPXXCnv$DtZ+mA)zS<Kdw_(5_-d1E%aLfhgkTT3MT55d;K
zA(HoR8ZT`y_@)ycmf^8Gyck#%pvRm|{>o0NNo~Jei1*l7x&dEu74hsa9ZW@M9Z3=1
zD+|yJN0&10z?dU}PHdCGmS<${dY<WAYw$hD8U45qonc(Pc9nYeMo?(P-$k~qu4(%T
za<v;rd|rB|PFxb=sN)_-`hQTUxvT@(ZbC~4<7+vlvVeylD>_&2mY*EI*VKCF&aDCa
z&>qFUSwZnqa4)|^@6%eHnLte^R#2jEsr@!PA(#|=drf&5xn6l*a8ybxQkck}nlJ!G
zy{MEYH`;nl@he9svL9N%e0I#BP2`gBkuWFv&%(Ognw176$e&v~Wx#*?CA(sk&t;s{
z6V5ODN8-&DR{f+DYK#U2er-sn=)yZ8`%@12<=t5pgk7Y5Iq!)5{lTZdiR9dqkR$q?
zMQr03Nr8DH55YwA+^RZzd|>~>g1_~zyS}+j@YG@gxRNyT#LO<&{(C{atnM96`HbzA
z3vPGnV48Ci1;p+rXiMH|tICHA#@|amC8iOJ4qqOk){A7KT(tnDmjAUuOm}hER>V(l
zfCj_w-!(c?n&Ob-wYAbnYE}xIY+pP&6FX4kY$BTWtkY6I8Qyy^e;F3qcXj&f!e>bJ
z1I$7l+Ts|+h2jAuGydjQhWk1;P58ITp}uh)V;F_r_7Cglz3Q4(|2^@$G<;Dqg@OA_
z37-VU>+82)Iet5!^Pkl}+I913gtdu6C!1TE${T(m3riJWx{FxaF}gG0jlZdS<!v}M
ziYe4t9zLw2|91vFf~S&|1K_)Vc({Y(hFr9b{ZI|h%-Av)^2*<;x;OS%nc;IRD=?&?
zjCR}h@U7*CraNCS`b;;EN{YN?(U^^ULP7v_ObIR1SCln?eHyDKk*>0=rIZ>W>p()9
zvTSICxw$lNUIW9S*fK4oY`rg*dSc^Ep^_Q1IG&5TY)1}H1>zq0DyCoyp_ec>DDpDD
zRdc78;cJ9eb{6W9PG0(-$;IS$HyazSD8-Z?-v8b54TDut@$sfgR7h@4uf{^NnDWV+
zdB)I4EhzWaKTM*jbndNmn^g47kY8-Hdf}rab9Pdl*1h)qfdIPMszwIzU!@Hu%Llzm
z%pmpNhIo0^G{+K?O#*@<w>zjkH*^$P3F|on)oD3S7JpUw(&u;8H;f)5BR(Hg@6pF%
zpd^&5M6BnnK$A^2<=9`6wieOxMpMnqu{0`WsFU;fb?fTZe5~4sbF{m6de~gz_tMjg
zcW%s(p2tqjb?2j|1whb9K;2b==fl!0^dnK?vP^@_LB-AYl1>MUz%<1l6zLD-@k1Gt
z&JP*CpCM)nt>6_kCTYY^yIEuXrStC$pN8sRR~@vY8?An$WkizYO9U$!lUGJfX1yNJ
zN}7X5FCb<P+vl`L<`;Xl$(hW-q&~*W6#m2LA_}@~x2;msL+<0~rF=D+{QEZQY76C>
zp=xYypOFvuO|PmscOg2F`z=tWaQp>#_1lH83*w212bS5`QR>B6_gDG)*^Vy<urcis
z($Q`}J0^B@z{Mgbx{+hoy?A||6#3|0h)F;RhW9P}zgF^ScMK4({5#qhYKgxfI3(CB
zq9Q3Y@YU3Etpd;O)Fv(bhF3`^rHYv?cG4J9%MDrR3&8$~mu^A*GjKcxM^F3O-jSpq
zOX#tJ6k+Fa@{_+>fB&vDL8oc;i&fuQmMx;L5sM>3<?ibFGY#b`6jSAl98};YbhoSK
z>1R|~VuJ&Al&W=Qm&qfV%FDEEy$Swy5%a}QLw42ES@u~t@jz~tMfgH%OYV%Z7^Z2q
zwo=vs$-G;~b;e;{M%Wjz`rptTG3W~AI~aCm^bOp?N@BZ2Epu|IIkwL$RV!;JoE<(H
zXOiN1_TnevFqO$|QHDz9#@J&?0%UiQY0-DB7RiwUT#_!`DnIO2?bNsA0yY1M*t_+k
zo!G8pD`Ii!&Kx5HzHMZz{O*K!1hz-~92af+=7m`#Q?uUwGJvCFPdC3O-kRJ7GYu$P
zjB4b#3VNw%HjbCk@Yj+9j@P0eOQxyVvum)+0;k3en~#MkdBn%yU5j1r-*FYGq`QiD
z%>zFVHNWR_E@r6ES(IflVYp<We<fX2sX`;OQrtd-;q7E^jP=`^YDgDnl!=+ShuXAl
zp0l-%6~Q~N3?;W$8ke0S8?fGfE-i5u=4w^Q(m6pZ4GlHS&%>X-y506Epz3<flo#pi
z6@1h6yN!MNE64t-boYZCkD^WT(S(U-RQZ~U@)2m6M~XI@wQ5Ma?*GwbF<vcpS24^u
zzS(2>DSV3anm{;~xiNHRR~Gg}3{+mx>ek7a8b{f+G&T0Cc1Mh@|7LT@z}IIWA=UDg
zsm|E|#-Nh3x4tz6=4^fq<;iWRA?A~gHh$Wf@_>|PB5<qxTMvbG|7W9Vt=9G_f*U;t
z#q5^uYGj=K+{7?<7&1o~hV7k1eyA#V5V&aGBf*{(YQbKp&8l~)B`M0_Xy;JcyjVTg
zRHd@2idUsgV;`#E9b&sGQjI-kA!W<qYslZ4q_YP45berGFKz2(c8D6H9CmOWRec|#
zTiY~{k59^|WU)_0xw&s0`|kD`S=n;GvNgDs0q16gSSwmXkF7>Uj;#x5cz&j>#Heai
zfnyJo<{HYXsgC3GpG-p9v9#pG*)s3<X4R&)&17YC_(?81l^sxczRu9Rhrc;vixC)g
zQUoQGdC_@c+evb%I9I%o<<FJ7z|C@}GDDnNvT&y}yU3BaTs>kY_NKQ-M%DUaZ^c2K
zbnuy!3N^2hwDbM#<BKT4o9(&mKn+nC4l5a`CB;J*zYz@)ETO1n{UxF!Q?xeKs;j6r
zEEe-yVNkQ^4N1qHDkvplfkibe(sZdpZE}Thof^4s{XNp%{@Lb5E!SGqCKQ78<h4n5
z|5Pjd)NcHgtNax2{M0M`RB!#%vi%>F?_HOOg%XfcaEN{L#Xk2Rg2^kFY%do5>GtTq
E0lUX@FaQ7m

literal 0
HcmV?d00001

diff --git a/public/images/test/320x320.png b/public/images/test/320x320.png
new file mode 100644
index 0000000000000000000000000000000000000000..cc69ba75f2f7bf0b60e8ebe08509306b2ca6ab6f
GIT binary patch
literal 4101
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
Oj-j5JZkdil_`d;6qZ!};

literal 0
HcmV?d00001

diff --git a/public/images/test/320x320x2.png b/public/images/test/320x320x2.png
new file mode 100644
index 0000000000000000000000000000000000000000..b15d2e752aa0083806ac1072164faece8a3e4779
GIT binary patch
literal 6934
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

literal 0
HcmV?d00001

diff --git a/public/images/test/640x640.png b/public/images/test/640x640.png
new file mode 100644
index 0000000000000000000000000000000000000000..345f3805ffdfe4d068ec6f70b65b9d9455bb828b
GIT binary patch
literal 5439
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

literal 0
HcmV?d00001

diff --git a/public/images/test/img_red.png b/public/images/test/img_red.png
new file mode 100644
index 0000000000000000000000000000000000000000..bd50e546297c5e896901876b84778dbf14d2cb68
GIT binary patch
literal 779
zcmeAS@N?(olHy`uVBq!ia0y~yU<5K58911L)MWvCLlCbx$lZxy-8q?;Kn_c~qpu?a
z!^VE@KZ&eBK4*bPWHAE+-(e7DJf6QI1t=(4;u=vBoS#-wo>-L1P>`6JSE84fTB2a0
zXP{?f_)#HqDgy&kwWo_?NJZS+<A%Hp1_I0*pZo8+>-<os^5fp-b+$|1D5mmjR(srZ
tJ|!3QZNjGZDWgK8AwiWiAyD+4G17<c6Qh=V5iqSXc)I$ztaD0e0szoQO<@24

literal 0
HcmV?d00001

diff --git a/public/page/home/Homepage.jsx b/public/page/home/Homepage.jsx
index 5084f73..fac00ea 100644
--- a/public/page/home/Homepage.jsx
+++ b/public/page/home/Homepage.jsx
@@ -23,23 +23,34 @@
 
 import React from 'react';
 import Page, { PageBoundary } from './../Page';
-import Section, { VideoSection } from './../../section/Section';
+import Section, { ImageSection } from './../../section/Section';
 import FloatingContentBox from './../../content/FloatingContentBox';
 import { Button } from './../../input/Inputs';
+import Image from './../../image/Image';
 import { Title, Subtitle } from './../../typography/Typography';
 
 export default function() {
   return (
     <Page style="home-page" className="p-home-page">
-      <VideoSection full mp4={require('./../../videos/about/programming/programming.mp4')} >
-        <PageBoundary>
-          <FloatingContentBox position="middle right" size="medium" className="u-text-center p-home-page__video-content">
+      <ImageSection
+        full
+        src={ require('./../../images/test/img_red.png') }
+        sources={[
+          { src: require('./../../images/test/320x320.png'), size: 320 },
+          { src: require('./../../images/test/320x320x2.png'), size: 320, scale: 2 },
+          { src: require('./../../images/test/640x640.png'), size: 640 },
+          { src: require('./../../images/test/1280x1280.png'), size: 640, scale: 2 },
+          { src: require('./../../images/test/1280x1280.png'), size: 1280 }
+        ]}
+      >
+        <PageBoundary fill>
+          <FloatingContentBox position="middle right" size="small" className="u-text-center p-home-page__video-content">
             <Title>My Cool Page</Title>
             <Subtitle>Lorem ipsum dolor</Subtitle>
             <Button>Hello</Button>
           </FloatingContentBox>
         </PageBoundary>
-      </VideoSection>
+      </ImageSection>
 
       <Section full>
         Lorem
diff --git a/public/section/Section.jsx b/public/section/Section.jsx
index 5ebf9de..3df6efe 100644
--- a/public/section/Section.jsx
+++ b/public/section/Section.jsx
@@ -32,7 +32,7 @@ export default class Section extends React.Component {
     return (
       <section className={
           "c-section" +
-          (this.props.full?" c-section--full":"") +
+          (this.props.full?" is-full":"") +
           (this.props.className ? " "+this.props.className : "")
       }>
         { this.props.children }
@@ -41,8 +41,10 @@ export default class Section extends React.Component {
   }
 }
 
+import ImageSection from './image/ImageSection';
 import VideoSection from './video/VideoSection';
 
 export {
+  ImageSection,
   VideoSection
 }
diff --git a/public/section/image/ImageSection.jsx b/public/section/image/ImageSection.jsx
new file mode 100644
index 0000000..77d8186
--- /dev/null
+++ b/public/section/image/ImageSection.jsx
@@ -0,0 +1,50 @@
+// Copyright (c) 2018 Dominic Masters
+//
+// MIT License
+//
+// Permission is hereby granted, free of charge, to any person obtaining
+// a copy of this software and associated documentation files (the
+// "Software"), to deal in the Software without restriction, including
+// without limitation the rights to use, copy, modify, merge, publish,
+// distribute, sublicense, and/or sell copies of the Software, and to
+// permit persons to whom the Software is furnished to do so, subject to
+// the following conditions:
+//
+// The above copyright notice and this permission notice shall be
+// included in all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+// EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+// MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+// NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+// LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+// OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+// WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+import React from 'react';
+import Section from './../Section';
+import Image from './../../image/Image';
+
+export default function(props) {
+  let image;
+  if(props.image) {
+    image = props.image;
+  } else {
+    image = <Image
+      src={ props.src }
+      alt={ props.alt }
+      sources={ props.sources }
+      className="c-image-section__image"
+    />;
+  }
+
+  return (
+    <Section
+      full={props.full}
+      className={"c-image-section" + (props.className ? " " + props.className : "" ) }
+    >
+      { image }
+      {props.children}
+    </Section>
+  );
+}
diff --git a/public/styles/components/_image-section.scss b/public/styles/components/_image-section.scss
new file mode 100644
index 0000000..519b825
--- /dev/null
+++ b/public/styles/components/_image-section.scss
@@ -0,0 +1,22 @@
+/*
+ *  Image Section
+ *    Styles for Image Sections, usually contains videos (hmmmm).
+ *
+ *  Dependencies:
+ *
+ *  Version:
+ *    1.0.0 - 2018/05/11
+ */
+.c-image-section {
+  position: relative;
+
+  &__image {
+    width: 100%;
+  }
+
+  &.is-full {
+    .c-image-section__image {
+      @include t-absolute-fill();
+    }
+  }
+}
diff --git a/public/styles/components/_section.scss b/public/styles/components/_section.scss
index 6bcead5..a3499f6 100644
--- a/public/styles/components/_section.scss
+++ b/public/styles/components/_section.scss
@@ -11,7 +11,7 @@
   //border: 1px solid red;
   width: 100%;
 
-  &--full {
+  &.is-full {
     height: 100vh;
   }
 }
diff --git a/public/styles/components/_video-section.scss b/public/styles/components/_video-section.scss
index 47a7fdb..01f2671 100644
--- a/public/styles/components/_video-section.scss
+++ b/public/styles/components/_video-section.scss
@@ -3,6 +3,7 @@
  *    Styles for Video Sections, usually contains videos.
  *
  *  Dependencies:
+ *    styles/tools/_absolute-centering.scss
  *
  *  Version:
  *    1.0.0 - 2018/05/03
@@ -11,11 +12,7 @@
   position: relative;
 
   &__video {
-    position: absolute;
-    left: 0;
-    top: 0;
-    height: 100%;
-    width: 100%;
+    @include t-absolute-fill();
     object-fit: cover;
     object-position: center;
   }
diff --git a/public/styles/elements/button.scss b/public/styles/elements/button.scss
index 19a1c96..8390e2b 100644
--- a/public/styles/elements/button.scss
+++ b/public/styles/elements/button.scss
@@ -10,4 +10,5 @@ button {
   font-size: inherit;
   font-weight: inherit;
   font-family: inherit;
+  color: inherit;
 }
diff --git a/public/styles/index.scss b/public/styles/index.scss
index 081b05b..987a931 100644
--- a/public/styles/index.scss
+++ b/public/styles/index.scss
@@ -64,6 +64,7 @@
 @import './objects/_video.scss';
 
 //Components
+@import './components/_image-section.scss';
 @import './components/_page.scss';
 @import './components/_section.scss';
 @import './components/_video-section.scss';
diff --git a/public/styles/pages/_home-page.scss b/public/styles/pages/_home-page.scss
index 99748fc..47459aa 100644
--- a/public/styles/pages/_home-page.scss
+++ b/public/styles/pages/_home-page.scss
@@ -12,6 +12,8 @@
 .p-home-page {
 
   &__video-content {
-    background: white;
+    padding: 1em 4em;
+    background: rgba(0, 0, 0, 0.75);
+    color: white;
   }
 }
diff --git a/public/styles/tools/_absolute-centering.scss b/public/styles/tools/_absolute-centering.scss
index f92f684..bfddbfd 100644
--- a/public/styles/tools/_absolute-centering.scss
+++ b/public/styles/tools/_absolute-centering.scss
@@ -28,6 +28,14 @@
   @include t-translate-y(-50%);
 }
 
+@mixin t-absolute-fill() {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+}
+
 @mixin t-absolute-position-options($inset: 0) {
   position: absolute;