From 758fc906343f44abeed66e7fe5c0daf01d445ff0 Mon Sep 17 00:00:00 2001 From: Jonny Barnes Date: Sun, 24 Mar 2019 18:16:06 +0000 Subject: [PATCH] Making improvements to the layout on mobile --- public/assets/css/app.css | 2 +- public/assets/css/app.css.br | Bin 688 -> 721 bytes public/assets/css/app.css.gz | Bin 844 -> 877 bytes public/assets/css/app.css.map | 2 +- resources/sass/_bio.scss | 6 ++++++ resources/sass/_footer.scss | 16 ++++++++++++++++ resources/sass/_pagination.scss | 6 ++++++ 7 files changed, 30 insertions(+), 2 deletions(-) diff --git a/public/assets/css/app.css b/public/assets/css/app.css index 2a0f4c41..bc1f6563 100644 --- a/public/assets/css/app.css +++ b/public/assets/css/app.css @@ -1,2 +1,2 @@ -html{font-family:montserrat, sans-serif;font-weight:300;font-style:normal;font-size:20px}h1{font-family:bebas-neue, sans-serif;font-weight:400;font-style:normal}code{font-family:"Operator Mono", monospace}#topheader{display:flex;width:100vw;flex-direction:column;align-items:center;background-color:var(--black)}#topheader a{color:var(--white);text-decoration:none}#topheader h1{margin-top:0;padding-top:1rem;font-size:3rem}#topheader nav{padding-bottom:1rem;font-size:1.5rem}main{display:flex;flex-direction:column;align-items:center;background-color:var(--white);color:var(--black)}main a{color:var(--blue);text-decoration:none}main .h-entry{margin:3rem 0}.pagination{display:flex;flex-direction:row;align-items:center;justify-content:space-around;list-style-type:none;width:40rem}.personal-bio{width:40rem}article.h-entry{width:40rem}.h-entry .note{width:40rem}@media screen and (max-width: 40rem){.h-entry .note{width:95vw}.h-entry .note .e-content img{width:100%}}footer{display:flex;flex-direction:column;align-items:center;background-color:var(--white);color:var(--black)}footer a{color:var(--blue);text-decoration:none}footer form:first-child{margin-bottom:1rem}footer p{margin-bottom:0}.map{height:200px}.note-metadata{display:flex;flex-direction:row;justify-content:space-between}.note-metadata .social-links{flex-direction:row}.note-metadata .social-links svg{height:1em;width:auto}span[role=img][aria-label]{position:relative}span[role=img][aria-label]:focus::after,span[role=img][aria-label]:hover::after{position:absolute;display:block;z-index:1;bottom:1.5em;left:0;padding:0.5em 0.75em;border:0.05em solid #fff;border-radius:0.2em;box-shadow:0.15em 0.15em 0.5em #000;content:attr(aria-label);background-color:rgba(0,0,0,0.85);color:#fff;font-size:80%;-webkit-animation:TOOLTIP 0.1s ease-out 1;animation:TOOLTIP 0.1s ease-out 1}@-webkit-keyframes TOOLTIP{from{bottom:0.5em;background-color:rgba(0,0,0,0);border:0.05em solid rgba(255,255,255,0);color:rgba(255,255,255,0);box-shadow:0 0 0 #000}to{bottom:1.5em;background-color:rgba(0,0,0,0.85);border:0.05em solid #fff;color:#fff;box-shadow:0.15em 0.15em 0.5em #000}}@keyframes TOOLTIP{from{bottom:0.5em;background-color:rgba(0,0,0,0);border:0.05em solid rgba(255,255,255,0);color:rgba(255,255,255,0);box-shadow:0 0 0 #000}to{bottom:1.5em;background-color:rgba(0,0,0,0.85);border:0.05em solid #fff;color:#fff;box-shadow:0.15em 0.15em 0.5em #000}}@media print{span[role=img][aria-label]::after{content:" (" attr(aria-label) ") "}} +html{font-family:montserrat, sans-serif;font-weight:300;font-style:normal;font-size:20px}h1{font-family:bebas-neue, sans-serif;font-weight:400;font-style:normal}code{font-family:"Operator Mono", monospace}#topheader{display:flex;width:100vw;flex-direction:column;align-items:center;background-color:var(--black)}#topheader a{color:var(--white);text-decoration:none}#topheader h1{margin-top:0;padding-top:1rem;font-size:3rem}#topheader nav{padding-bottom:1rem;font-size:1.5rem}main{display:flex;flex-direction:column;align-items:center;background-color:var(--white);color:var(--black)}main a{color:var(--blue);text-decoration:none}main .h-entry{margin:3rem 0}.pagination{display:flex;flex-direction:row;align-items:center;justify-content:space-around;list-style-type:none;width:40rem}@media screen and (max-width: 40rem){.pagination{width:95vw}}.personal-bio{width:40rem}@media screen and (max-width: 40rem){.personal-bio{width:95vw}}article.h-entry{width:40rem}.h-entry .note{width:40rem}@media screen and (max-width: 40rem){.h-entry .note{width:95vw}.h-entry .note .e-content img{width:100%}}footer{display:flex;flex-direction:column;align-items:center;background-color:var(--white);color:var(--black)}footer a{color:var(--blue);text-decoration:none}footer form:first-child{margin-bottom:1rem}footer p{margin-bottom:0}@media screen and (max-width: 40rem){footer img{width:95%}footer form{width:95vw}footer select{width:90vw}}.map{height:200px}.note-metadata{display:flex;flex-direction:row;justify-content:space-between}.note-metadata .social-links{flex-direction:row}.note-metadata .social-links svg{height:1em;width:auto}span[role=img][aria-label]{position:relative}span[role=img][aria-label]:focus::after,span[role=img][aria-label]:hover::after{position:absolute;display:block;z-index:1;bottom:1.5em;left:0;padding:0.5em 0.75em;border:0.05em solid #fff;border-radius:0.2em;box-shadow:0.15em 0.15em 0.5em #000;content:attr(aria-label);background-color:rgba(0,0,0,0.85);color:#fff;font-size:80%;-webkit-animation:TOOLTIP 0.1s ease-out 1;animation:TOOLTIP 0.1s ease-out 1}@-webkit-keyframes TOOLTIP{from{bottom:0.5em;background-color:rgba(0,0,0,0);border:0.05em solid rgba(255,255,255,0);color:rgba(255,255,255,0);box-shadow:0 0 0 #000}to{bottom:1.5em;background-color:rgba(0,0,0,0.85);border:0.05em solid #fff;color:#fff;box-shadow:0.15em 0.15em 0.5em #000}}@keyframes TOOLTIP{from{bottom:0.5em;background-color:rgba(0,0,0,0);border:0.05em solid rgba(255,255,255,0);color:rgba(255,255,255,0);box-shadow:0 0 0 #000}to{bottom:1.5em;background-color:rgba(0,0,0,0.85);border:0.05em solid #fff;color:#fff;box-shadow:0.15em 0.15em 0.5em #000}}@media print{span[role=img][aria-label]::after{content:" (" attr(aria-label) ") "}} /*# sourceMappingURL=app.css.map */ \ No newline at end of file diff --git a/public/assets/css/app.css.br b/public/assets/css/app.css.br index 6843be37272b3be0c847f6bd413d9026061cdb44..5100369c617c6b15cb0d8929dfa4ad73c1810422 100644 GIT binary patch literal 721 zcmX@85yp_Pq~!aO(sNgAPnYC9{g7Dhad}?POe_6|QgZbxUpSrmFO~h$M04)7m6=a- zZ`4=M@URQ?H&<~|7hikD;pB=FYUM9YwjOk~TpWDpCcm}(^O?TElg}%j7f8GnB^aw7 z^nLXaXSp2*9_BsW?DMPL)yzop*tQLKd$P~E^7`stkbUyy-tPX|a=vrN_dN^0bNX+r zfbWXE-m;Tlv!~`vnYz!2Q`C>iHEI{kqfho z(8ixS%>7;-pNk@vU30YB7X337!Rj|9y$yw5?Fj(>KEW5c&KkC$^_@r}V~b*E@wthY z4yf^zvbP*971DbrBA2`E$QzY^O*<5iTf7x$zwHoY)_)<(`HRyP4_5#3<u!sd1D)?Is9?VW(>@A$tjweDB!+Hv{&^VO=U9M1C=^*X#V)}8q4)a^yQ+H-cQ zI)BJXoU@>)T|0>TK zVDr42Q&ob4(tmzg=I%1fSy=7-<-%MepOQy~Rb6LhJUgCzq|UhVPxOYn_V+G3Y~Q)= z!V&T1EI05{OBD`oMn5Pf@8GUKc~onyt{85~_Jl`S@IVIQ!fGkIT<_E-8NEwe^J^tLB2+@0YJyabs2F z)hEy2>b?BU?Bu?yVa+a0v8-DQ%#5p~E?KTVx00WiW9~6|`?oc7(#?E*?b=Na&&aHH z{UUu#E@Wam?+%87?d_X;eoc2ZGm<>EZNqBG>oS|9?-?`)ao?Krz z{WrUEmfl`(+2GfWMrNnI{?BM)N@q}=wVQS0^;0fxnQprRXO;AD#Jy74X=d<-ec@WG ziwy0oIkw)*0wpt}`c7T3@;Dy0vh<+((Pb%FZd_Y6k3Qq@5#neB(7oI%JqIr{+Vvtq4ADmQN`wIYRyL_T;+^iWH#+k zyWz8Nv0OsQ$2VS1ON`{|!uh%tS}gx4rMXko=-s}urxw1&r>{=$XCuVV{exLEn{+Vqy1=rRe`n^!UXu_@QSry#{uhV8r zHQF<$-CiwetA2Fi`!|!-e_6%mnSCyw%q4!-R3@}7{6L}3lX;yI>NOiD8u47O(EP#A zn|NV@?g6Wqbvm0=)_4iXy*;#p`_cx6yW69;%=p&!c8Ot+T+P3~Kc!7l8V=oQdC3F- D_h&{= diff --git a/public/assets/css/app.css.gz b/public/assets/css/app.css.gz index b7d2cda481144007fbff1e6115fa8e3dbd6990b8..e4774ebe083ddd53f3244cb287d0a71c3f99a84f 100644 GIT binary patch literal 877 zcmb2|=3oE;Cg!&xM{m706S(_bvqbXg>OTP+yiXgI2g}`l9MOAV{*nvt&%ck0+$h!d z=oQ=AnZ_kc7T@x`7#3w2)%YZ7rq}Zz$NzL` zjSbZgN`jTAWZar`+wFkSS{A)cmin=C`y^(c-F(l%J8wfl%<3%{lC(nEn)*eb@-6k{ z4&n2i=4>b_Z5yikRU!A1K%MmAOj?yV%J0zdH zoS1MdCNSSS@|r_rktyHmiH9T@bQP= zesXNJ5xza|rJ)j&)ykFnY15bm6a5bDTEe)W>%ru+(zf5tg#8yQ9R9>}5)5PFIPj~zc4({Kz z?vh->zvYX~LU#Yy;99e^*GD^V&0^QHu99E3D=y^7EvtEBq!oU#ajwVX#b;khKXKda z+SuC7C+0V?W!c*B@JFJr*IzndKlQ}|7WQ=4!U#soU6zY(dAbR$=H_eSTBo+{?)fqy z|2H`@(XtC=rmzGrw~i0_o3Z7FO^U2R=&9V^}^_Z<(3z z!lI10c?YgmwWS?ctL>1tb%xa$rSzQ_j;icl95Z!?hkN9mKTpI`)ixBpUTu-OcjAU8 zYwu0Z4qo)p?3#3KSllG`&`@5!tOZYkU;hnf+_PX?ThRHvi6WbL>J^_dABzwxXP;y2 ze|@se?d#2w&p%Ar%k%!p+uJKT18QrZ?>{S-TGIEk#hR<@^i+m@zdxNmzwh^t)%*6T za)_;*XJvHioYF4-wbS=&|RO|`8_3hN6}l(oqSHcN;~}L-BaJ~rSSdl v^4Iq&zW!m{Se3=~M`qSB?a#mS?W)h)tF~_ao9a1l|1ahq*Wg3PxEL4!)`$yH%c{Zx9UeU|G=Uh@0oFuXN#e@QB*}v5peNzg{ ze`&pA(7VOzVZJ0ZJkog&lkQcm%MZ7^KW~UL;y?CT;e=NI1lCi#7QQj^%}@2$Zk@T& zuUX3E6WiwQEwSIurfBChvR333w7DOSljXWSJ?uf)lHc>Uzi3#KJU=S={r(iInxA4` zZ{#QBO0zVs6TY;aD=czp!A$)n3)E&Wd08`Yy=aU_yQ*jQrc0}4nptW@O6zfMJ?~}G zqNl%L&b4#rdLA&Q#G0{xpYqv>_3!515T0GWzZY=^&U@P8{fNo?wZb#QYY&zMFK};O zz4W2u^re;DP9DMTnU4bUFH}k%@eODGoYx{g?Zm6te$S%4-!3YgH507g{Bz^ZTDzom zzG{n7%X&IG{G{Y2?Y!#X@@DeV+DlFolzyaqJg3JO`tS9b$!o$EzEO}m^(d{NWA78M zUx|Ay)<*Rl<+)urwe5?drByz!Mx4j(+^7Q+bwvAI^KZJTdiSW_G1|L6&?8}ANk?0w z;G30gs{30vbW~oG{ZjwBYTu2{GeR=IlY*|_eP8`|#d~dOhIjT--zU7~=dU>ue(mL& zN#}(1rB@y?_;uD)ZsFTLU7fbJZP|J6yShtikGllzaARU*N#FkTLzajKx65YX9@Tr( zghawG`P6Qgf2%U@XQk~lD@WTk5@$|)Q(XD;US#Y07S4Y^Y%Mrr92;L9U$-^xUYk3s z%JT}QIicI;{M2dgy0F)#G5d|o-G<$#8Cthzxy|UGBYJAu#^=-kbRR<5qa#(&oSSNVU`<=8vnV`sIiPRrm zit{}RWdEv!PhPPVjrRE0W)>g5fH#a|VJ#zHx z*V7;8_Vvnc$}u{1$hhdn$!)uYkC$4k zc&xbN{JeYVyVV=-@~_`l|Mu!<_JvDkYJUvQh|YYKzyH^hxgWGO_xhV`dGmAieTL&p LcYeRm$-n>r$0VoB diff --git a/public/assets/css/app.css.map b/public/assets/css/app.css.map index 97f202f1..d004c31e 100644 --- a/public/assets/css/app.css.map +++ b/public/assets/css/app.css.map @@ -1 +1 @@ -{"version":3,"sources":["../../../resources/sass/_base.scss","../../../resources/sass/_site-header.scss","../../../resources/sass/_main.scss","../../../resources/sass/_pagination.scss","../../../resources/sass/_bio.scss","../../../resources/sass/_articles.scss","../../../resources/sass/_notes.scss","../../../resources/sass/_footer.scss","../../../resources/sass/_mapbox.scss","../../../resources/sass/_syndication.scss","../../../resources/sass/_emoji.scss"],"names":[],"mappings":"AAGA,KACI,kCAAmC,CACnC,eAAgB,CAChB,iBAAkB,CAClB,cAAe,CAClB,GAGG,kCAAmC,CACnC,eAAgB,CAChB,iBAAkB,CACrB,KAGG,sCAAuC,CAC1C,WCfG,YAAa,CACb,WAAY,CACZ,qBAAsB,CACtB,kBAAmB,CACnB,6BAA8B,CALlC,aAQQ,kBAAmB,CACnB,oBAAqB,CAT7B,cAaQ,YAAa,CACb,gBAAiB,CACjB,cAAe,CAfvB,eAmBQ,mBAAoB,CACpB,gBAAiB,CACpB,KCpBD,YAAa,CACb,qBAAsB,CACtB,kBAAmB,CACnB,6BAA8B,CAC9B,kBAAmB,CALvB,OAQQ,iBAAkB,CAClB,oBAAqB,CAT7B,cAaQ,aAAc,CACjB,YCbD,YAAa,CACb,kBAAmB,CACnB,kBAAmB,CACnB,4BAA6B,CAC7B,oBAAqB,CACrB,WHaa,CGZhB,cCNG,WJkBa,CIjBhB,gBCDG,WLkBa,CKjBhB,eCDG,WNkBa,CMjBhB,qCAGG,eACI,UAAW,CADf,8BAKY,UAAW,CACd,CCXb,OACI,YAAa,CACb,qBAAsB,CACtB,kBAAmB,CACnB,6BAA8B,CAC9B,kBAAmB,CALvB,SAQQ,iBAAkB,CAClB,oBAAqB,CAT7B,wBAaQ,kBAAmB,CAb3B,SAiBQ,eAAgB,CACnB,KCjBD,YAAa,CAChB,eCDG,YAAa,CACb,kBAAmB,CACnB,6BAA8B,CAHlC,6BAMQ,kBAAmB,CAN3B,iCASY,UAAW,CACX,UAAW,CACd,2BCRL,iBAAkB,CACrB,gFAIG,iBAAkB,CAClB,aAAc,CACd,SAAU,CACV,YAAa,CACb,MAAO,CACP,oBAAqB,CACrB,wBAA2C,CAC3C,mBAAoB,CACpB,mCAAgD,CAChD,wBAAyB,CACzB,iCAAqC,CACrC,UAA6B,CAC7B,aAAc,CACd,yCAAW,CAAX,iCAAkC,CACrC,2BAGG,KACI,YAAa,CACb,8BAAkC,CAClC,uCAA2C,CAC3C,yBAA6B,CAC7B,qBAAkC,CAGtC,GACI,YAAa,CACb,iCAAqC,CACrC,wBAA2C,CAC3C,UAA6B,CAC7B,mCAAgD,CAAA,CAhBvD,mBAGG,KACI,YAAa,CACb,8BAAkC,CAClC,uCAA2C,CAC3C,yBAA6B,CAC7B,qBAAkC,CAGtC,GACI,YAAa,CACb,iCAAqC,CACrC,wBAA2C,CAC3C,UAA6B,CAC7B,mCAAgD,CAAA,CAIxD,aACI,kCACI,kCAAmC,CACtC","file":"app.css"} \ No newline at end of file +{"version":3,"sources":["../../../resources/sass/_base.scss","../../../resources/sass/_site-header.scss","../../../resources/sass/_main.scss","../../../resources/sass/_pagination.scss","../../../resources/sass/_bio.scss","../../../resources/sass/_articles.scss","../../../resources/sass/_notes.scss","../../../resources/sass/_footer.scss","../../../resources/sass/_mapbox.scss","../../../resources/sass/_syndication.scss","../../../resources/sass/_emoji.scss"],"names":[],"mappings":"AAGA,KACI,kCAAmC,CACnC,eAAgB,CAChB,iBAAkB,CAClB,cAAe,CAClB,GAGG,kCAAmC,CACnC,eAAgB,CAChB,iBAAkB,CACrB,KAGG,sCAAuC,CAC1C,WCfG,YAAa,CACb,WAAY,CACZ,qBAAsB,CACtB,kBAAmB,CACnB,6BAA8B,CALlC,aAQQ,kBAAmB,CACnB,oBAAqB,CAT7B,cAaQ,YAAa,CACb,gBAAiB,CACjB,cAAe,CAfvB,eAmBQ,mBAAoB,CACpB,gBAAiB,CACpB,KCpBD,YAAa,CACb,qBAAsB,CACtB,kBAAmB,CACnB,6BAA8B,CAC9B,kBAAmB,CALvB,OAQQ,iBAAkB,CAClB,oBAAqB,CAT7B,cAaQ,aAAc,CACjB,YCbD,YAAa,CACb,kBAAmB,CACnB,kBAAmB,CACnB,4BAA6B,CAC7B,oBAAqB,CACrB,WHaa,CGZhB,qCAGG,YACI,UAAW,CACd,CCZL,cACI,WJkBa,CIjBhB,qCAGG,cACI,UAAW,CACd,CCPL,gBACI,WLkBa,CKjBhB,eCDG,WNkBa,CMjBhB,qCAGG,eACI,UAAW,CADf,8BAKY,UAAW,CACd,CCXb,OACI,YAAa,CACb,qBAAsB,CACtB,kBAAmB,CACnB,6BAA8B,CAC9B,kBAAmB,CALvB,SAQQ,iBAAkB,CAClB,oBAAqB,CAT7B,wBAaQ,kBAAmB,CAb3B,SAiBQ,eAAgB,CACnB,qCAID,WAEQ,SAAU,CAFlB,YAMQ,UAAW,CANnB,cAUQ,UAAW,CACd,CCjCT,KACI,YAAa,CAChB,eCDG,YAAa,CACb,kBAAmB,CACnB,6BAA8B,CAHlC,6BAMQ,kBAAmB,CAN3B,iCASY,UAAW,CACX,UAAW,CACd,2BCRL,iBAAkB,CACrB,gFAIG,iBAAkB,CAClB,aAAc,CACd,SAAU,CACV,YAAa,CACb,MAAO,CACP,oBAAqB,CACrB,wBAA2C,CAC3C,mBAAoB,CACpB,mCAAgD,CAChD,wBAAyB,CACzB,iCAAqC,CACrC,UAA6B,CAC7B,aAAc,CACd,yCAAW,CAAX,iCAAkC,CACrC,2BAGG,KACI,YAAa,CACb,8BAAkC,CAClC,uCAA2C,CAC3C,yBAA6B,CAC7B,qBAAkC,CAGtC,GACI,YAAa,CACb,iCAAqC,CACrC,wBAA2C,CAC3C,UAA6B,CAC7B,mCAAgD,CAAA,CAhBvD,mBAGG,KACI,YAAa,CACb,8BAAkC,CAClC,uCAA2C,CAC3C,yBAA6B,CAC7B,qBAAkC,CAGtC,GACI,YAAa,CACb,iCAAqC,CACrC,wBAA2C,CAC3C,UAA6B,CAC7B,mCAAgD,CAAA,CAIxD,aACI,kCACI,kCAAmC,CACtC","file":"app.css"} \ No newline at end of file diff --git a/resources/sass/_bio.scss b/resources/sass/_bio.scss index be6ee095..74464f45 100644 --- a/resources/sass/_bio.scss +++ b/resources/sass/_bio.scss @@ -3,3 +3,9 @@ .personal-bio { width: $mainWidth; } + +@media screen and (max-width: $mainWidth) { + .personal-bio { + width: 95vw; + } +} diff --git a/resources/sass/_footer.scss b/resources/sass/_footer.scss index e3a78419..522c4356 100644 --- a/resources/sass/_footer.scss +++ b/resources/sass/_footer.scss @@ -20,3 +20,19 @@ footer { margin-bottom: 0; } } + +@media screen and (max-width: $mainWidth) { + footer { + img { + width: 95%; + } + + form { + width: 95vw; + } + + select { + width: 90vw; + } + } +} diff --git a/resources/sass/_pagination.scss b/resources/sass/_pagination.scss index f4edc216..dde7876d 100644 --- a/resources/sass/_pagination.scss +++ b/resources/sass/_pagination.scss @@ -8,3 +8,9 @@ list-style-type: none; width: $mainWidth; } + +@media screen and (max-width: $mainWidth) { + .pagination { + width: 95vw; + } +}