ThirdMirrors
/
cheatsheets
mirror of https://gitee.com/Hawkin99/cheatsheets.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Update image sizes

This commit is contained in:
Rico Sta. Cruz 2020-07-08 10:57:33 +10:00
parent 3cf86447a3
commit 901f457dc2
1 changed files with 25 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
_sass/2017/components/headline-pub.scss
View File

@ -1,5 +1,16 @@
$placeholder-bg-size: 450px; $placeholder-bg-size: 450px;
$image-width: 83px;
$image-height: 64px;
$image-margin: 16px;
$image-width: 130px;
$image-height: 100px;
$image-margin: 24px;
$ad-width: 380px;
$ad-height: $image-height;
/* /*
* Base carbon ads style * Base carbon ads style
*/ */
@ -19,8 +30,8 @@ $placeholder-bg-size: 450px;
} }
.carbon-img > img { .carbon-img > img {
width: 83px; // 13:10 ratio width: $image-width;
height: 64px; height: $image-height;
box-shadow: $shadow3; box-shadow: $shadow3;
border-radius: 3px; border-radius: 3px;
background: rgba($gray-text, 0.2); background: rgba($gray-text, 0.2);
@ -49,6 +60,8 @@ $placeholder-bg-size: 450px;
.carbon-poweredby, .carbon-poweredby,
.carbon-poweredby:visited { .carbon-poweredby:visited {
display: block;
margin-top: 8px;
white-space: nowrap; white-space: nowrap;
color: $gray-text; color: $gray-text;
} }
@ -100,17 +113,17 @@ $placeholder-bg-size: 450px;
& > .placeholder.-one { & > .placeholder.-one {
left: 0; left: 0;
top: 0; top: 0;
width: 83px; width: $image-width;
height: 64px; height: $image-height;
} }
& > .placeholder.-two, & > .placeholder.-two,
& > .placeholder.-three, & > .placeholder.-three,
& > .placeholder.-four { & > .placeholder.-four {
left: 99px; left: $image-width + $image-margin;
top: 6px; top: 6px;
height: 8px; height: 8px;
width: 280px; width: $ad-width - $image-width - $image-margin;
} }
& > .placeholder.-three { & > .placeholder.-three {
@ -119,7 +132,7 @@ $placeholder-bg-size: 450px;
& > .placeholder.-four { & > .placeholder.-four {
top: 50px; top: 50px;
width: 80px; width: ($ad-width - $image-width - $image-margin) * 0.28;
} }
// Make the ad show up above the placeholder // Make the ad show up above the placeholder
@ -132,8 +145,8 @@ $placeholder-bg-size: 450px;
&, &,
& > div > span { & > div > span {
display: block; display: block;
width: 380px; width: $ad-width;
height: 64px; height: $ad-height;
text-align: left; text-align: left;
} }
@ -151,12 +164,12 @@ $placeholder-bg-size: 450px;
.carbon-img { .carbon-img {
float: left; float: left;
margin-right: 16px; margin-right: $image-margin;
} }
} }
#carbonads { #carbonads {
animation: 250ms ease-out pub-text-enter; animation: 500ms ease-out pub-text-enter;
} }
@keyframes placeholder-swish { @keyframes placeholder-swish {
@ -176,7 +189,7 @@ $placeholder-bg-size: 450px;
@keyframes pub-text-enter { @keyframes pub-text-enter {
0% { 0% {
opacity: 0; opacity: 0;
transform: scale(0.97); transform: scale(0.9);
} }
100% { 100% {