diff --git a/_includes/header.html b/_includes/header.html index d9b5033..461b346 100644 --- a/_includes/header.html +++ b/_includes/header.html @@ -16,7 +16,7 @@ --> - +
diff --git a/_sass/_carbon-ads.scss b/_sass/_carbon-ads.scss index c2fe25c..588a68d 100644 --- a/_sass/_carbon-ads.scss +++ b/_sass/_carbon-ads.scss @@ -3,17 +3,27 @@ /////////////////////////////////////////////////////////////////////////////// #carbonads { + --width: 180px; + --font-size: 14px; +} + +#carbonads { + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Helvetica, Arial, sans-serif; display: block; overflow: hidden; - padding: 1em; + margin-bottom: 20px; + max-width: var(--width); + border-radius: 4px; text-align: center; - font-family: Verdana, "Helvetica Neue", Helvetica, sans-serif; + box-shadow: 0 0 0 1px hsla(0, 0%, 0%, .1); + background-color: hsl(0, 0%, 98%); + font-size: var(--font-size); line-height: 1.5; } #carbonads a { color: inherit; - border: none; + text-decoration: none; } #carbonads a:hover { @@ -21,24 +31,72 @@ } #carbonads span { + position: relative; display: block; overflow: hidden; } .carbon-img { display: block; - margin: 0 auto 1em; + margin-bottom: 8px; + max-width: var(--width); + line-height: 1; +} + +.carbon-img img { + display: block; + margin: 0 auto; + max-width: var(--width) !important; + width: var(--width); + height: auto; } .carbon-text { display: block; - margin-bottom: 1em; + padding: 0 1em 8px; } .carbon-poweredby { display: block; + padding: 10px var(--font-size); + background: repeating-linear-gradient(-45deg, transparent, transparent 5px, hsla(0, 0%, 0%, .025) 5px, hsla(0, 0%, 0%, .025) 10px) hsla(203, 11%, 95%, .4); text-transform: uppercase; - letter-spacing: 1px; - font-size: .8em; - line-height: 1; + letter-spacing: .5px; + font-weight: 600; + font-size: 9px; + line-height: 0; } + +@media only screen and (min-width: 320px) and (max-width: 759px) { + #carbonads { + float: none; + margin: 0 auto; + max-width: 330px; + } + #carbonads span { + position: relative; + } + #carbonads > span { + max-width: none; + } + .carbon-img { + float: left; + margin: 0; + } + + .carbon-img img { + max-width: 130px !important; + } + .carbon-text { + float: left; + margin-bottom: 0; + padding: 8px 20px; + text-align: left; + max-width: calc(100% - 130px - 3em); + } + .carbon-poweredby { + left: 130px; + bottom: 0; + display: block; + width: 100%; + }