From 096215814bdf84189066e5cb0d0578e370f1c728 Mon Sep 17 00:00:00 2001 From: Ian Weller Date: Thu, 31 Mar 2016 11:44:41 -0400 Subject: [PATCH] I finally have the last of the blocks working --- assets/deals-block.jpg | Bin 0 -> 1761 bytes assets/events-block.jpg | Bin 0 -> 1761 bytes css/app.css | 96 ++++++++++++++++-------- css/app.css.map | 2 +- front-page.php | 14 ++-- scss/_main.scss | 157 +++++++++++++++++++++++++--------------- 6 files changed, 173 insertions(+), 96 deletions(-) create mode 100644 assets/deals-block.jpg create mode 100644 assets/events-block.jpg diff --git a/assets/deals-block.jpg b/assets/deals-block.jpg new file mode 100644 index 0000000000000000000000000000000000000000..9d4cef22defe5178e7fdc9fc0ec1e99da4884659 GIT binary patch literal 1761 zcmeHG&2G~`5MIZL8YG19jpNF_03u%7i4(<&8zpffB4Jd8N=2M-?QLVF_FDFaI63no z+z_w8fgX4Weonn3cm%U{^HYVUH*Wn7tJ&H4zL}k!O~0j=;88#EP5~GWpMo;jApHdd zbLvdyfCEM5egi;y$)ho)p^i`xOSVf+u;dUQC3c7uNk*X6PD0z6U#u%*gk-*L{I$C$JB<2e;&koVu-o8&g{&MM3{%r zi6M5ftnjsU2zw;LP?PEvN3J(uqbVs`qfu)-gQ~1(NUox)Tv4lfP1b8FTtZ~oBKK4u znS*66wll=#rDn64G^X86uiuMVa zQbS~wUR}Wt*RnVE>RO;>-5%=uSp#y}n2zwK-W!GEqj`wY2*+d^Ihcj-XXH@tMcAe! zIwItJ)y2axp(GxY5cYa`*Wlx0FL22$ev)%6OCJU?wF3taO+#cVlIOX4w`wY?scC~o zO;wb>*6sAPey6Vv>H|gY%Ka7BB+k^w0bOz34Y$6Nn~j4Xvdkuqym#0gM8t>rwRLZI zE!CZRORl@SmfB7(V#T2Baj!l0%EcxqGuNZbHtXTX0h{=UjduDQJje$YxEJgTap_O+ z9&l?Em{lmSl`U7`3p@i`iW&G)j=c=!H8MJjF7bS6uT(5uJ6VU^Zlo7LD1#4Ni{}JT z5IA1o(y!nJD{S-obL$?RzIEk&As>F@RU{sY#MQpBpZLHKj%f1jNGhYNg z01`6;9T@ls{F%BV_z33gCTQ7>iAWqEvBxdPo$HhA4Amq$(JJ&8;kUy)j|%kQ@h*CI9~T zNrr)M$p^ZFow!d%!LxZnUd*5Gd-Jhp`0~~hxS5$*7>9(pFbhwj)XXfo6gRnDxRDIY z5H_~t?IJ6D>FmNjO$gMLPSeAkF6 z6K2W0((@~XaV2|guPy~T&ds4=STvxNP1zo~sP|gobbl5Tv`11pNj$>CHwtoW_7mbV zn(R}0vh3pSh%%avXbk)PvTN|cK@jt_j=tUNsQrO%7-~<&ou`8(*QVYiBoSM3{fevNmE2++!kA~aNfNv!{ve?tEU#?_ zt81}W>Mgkb%3AQwN-pBXpyF{aJ@(SYC#W#1(dCX%NckeiMC6i5y5R@f8; z3DhJ(l!W{ -
+
@@ -52,16 +52,20 @@

Dinning & Shopping

-
-
+
+
- + + +

Discover Deals
- + + +

Events

 diff --git a/scss/_main.scss b/scss/_main.scss index c41dd6d..8d3aebe 100644 --- a/scss/_main.scss +++ b/scss/_main.scss @@ -27,6 +27,11 @@ main { &.blocks-readmore { display: none; } + @media #{$small-only}{ + img { + max-height: 300px; + } + } } p { display: none; @@ -44,7 +49,7 @@ main { left: 15px; right: 15px; white-space: pre-wrap; - @media #{$medium-only}{ + @media screen and (max-width: 1024px){ top: 35%; } } @@ -114,17 +119,17 @@ main { } &.overlay { a { - &:hover { - &:before { - position: absolute; - content: ''; - top: 0; - left: 15px; - right: 15px; - height: 100%; - display: block; - background: rgba($black, 0.8); - z-index: 2; + &:hover { + &:before { + position: absolute; + content: ''; + top: 0; + left: 15px; + right: 15px; + height: 100%; + display: block; + background: rgba($black, 0.8); + z-index: 2; } } } @@ -147,17 +152,17 @@ main { } &.overlay { a { - &:hover { - &:before { - position: absolute; - content: ''; - top: 0; - left: 15px; - right: 15px; - height: 100%; - display: block; - background: rgba($black, 0.8); - z-index: 2; + &:hover { + &:before { + position: absolute; + content: ''; + top: 0; + left: 15px; + right: 15px; + height: 100%; + display: block; + background: rgba($black, 0.8); + z-index: 2; } } } @@ -166,14 +171,30 @@ main { #block-column { margin-bottom: 15px; height: 100%; - max-height: 336px; - min-height: 270px; + max-height: 329px; + overflow: hidden; #block-5 { - background: $orange; - margin-bottom: 9px; - min-height: 140px; - max-height: 160px; - height: 50%; + margin-bottom: 15px; + img { + width: 100%; + max-height: 158px; + overflow: hidden; + @media screen and (min-width: 1140px) and (max-width: 1189px) { + max-height: 150px; + } + @media screen and (min-width: 1106px) and (max-width: 1139px) { + max-height: 145px; + } + @media screen and (min-width: 1073px) and (max-width: 1105px) { + max-height: 140px; + } + @media screen and (min-width: 1052px) and (max-width: 1072px) { + max-height: 137px; + } + @media screen and (min-width: 1025px) and (max-width: 1051px) { + max-height: 133px; + } + } h1 { font-size: rem-calc(32); position: absolute; @@ -182,26 +203,44 @@ main { right: 0; } &.overlay { - &:hover { - &:before { - position: absolute; - content: ''; - top: 0; - left: 0; - width: 100%; - height: 100%; - display: block; - background: rgba($black, 0.80); - z-index: 2; + a { + &:hover { + &:before { + position: absolute; + content: ''; + top: 0; + left: 15px; + right: 15px; + height: 100%; + display: block; + background: rgba($black, 0.8); + z-index: 2; + } } - } + } } } #block-6 { - background: $green; - min-height: 140px; - max-height: 160px; - height: 50%; + img { + width: 100%; + max-height: 158px; + overflow: hidden; + @media screen and (min-width: 1140px) and (max-width: 1189px) { + max-height: 150px; + } + @media screen and (min-width: 1106px) and (max-width: 1139px) { + max-height: 145px; + } + @media screen and (min-width: 1073px) and (max-width: 1105px) { + max-height: 140px; + } + @media screen and (min-width: 1052px) and (max-width: 1072px) { + max-height: 137px; + } + @media screen and (min-width: 1025px) and (max-width: 1051px) { + max-height: 133px; + } + } h1 { font-size: rem-calc(32); position: absolute; @@ -210,19 +249,21 @@ main { right: 0; } &.overlay { - &:hover { - &:before { - position: absolute; - content: ''; - top: 0; - left: 0; - width: 100%; - height: 100%; - display: block; - background: rgba($black, 0.80); - z-index: 2; + a { + &:hover { + &:before { + position: absolute; + content: ''; + top: 0; + left: 15px; + right: 15px; + height: 100%; + display: block; + background: rgba($black, 0.8); + z-index: 2; + } } - } + } } } } -- 2.17.1