138 lines
2.7 KiB
SCSS
138 lines
2.7 KiB
SCSS
.post {
|
|
&__body {
|
|
--flow-space: #{get-size(800)};
|
|
|
|
/**
|
|
* Generic HTML styles
|
|
*/
|
|
h2 + *,
|
|
h3 + * {
|
|
--flow-space: #{get-size(500)};
|
|
}
|
|
|
|
h2,
|
|
h3 {
|
|
@include apply-utility('leading', 'tight');
|
|
position: relative;
|
|
/*display: flex;*/
|
|
}
|
|
|
|
a:not([class]) {
|
|
@include apply-utility('leading', 'tight');
|
|
color: var(--color-dark);
|
|
position: relative;
|
|
display: inline-block;
|
|
background: var(--color-theme-highlight);
|
|
padding: .2rem .4rem .3rem;
|
|
text-decoration: none;
|
|
word-break: break-word;
|
|
}
|
|
|
|
a:not([class]):hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
code {
|
|
font-size: 1.2em;
|
|
color: var(--color-theme-primary);
|
|
font-weight: 600;
|
|
margin-left: .01ch;
|
|
margin-right: .01ch;
|
|
}
|
|
|
|
pre > code {
|
|
margin-right: 0;
|
|
border: 1px solid rgba(255, 255, 255, .1);
|
|
overflow-x: auto;
|
|
-webkit-overflow-scrolling: touch;
|
|
}
|
|
|
|
blockquote {
|
|
border-left: .4rem solid var(--color-theme-primary-glare);
|
|
margin-left: 0;
|
|
padding-left: get-size(500);
|
|
font-style: italic;
|
|
font-size: get-size(600);
|
|
|
|
p {
|
|
opacity: .85;
|
|
padding: get-size(500) 0;
|
|
}
|
|
}
|
|
|
|
ol:not([class]),
|
|
ul:not([class]) {
|
|
margin-left: get-size(800);
|
|
|
|
li + li {
|
|
margin-top: get-size(300);
|
|
}
|
|
}
|
|
|
|
figure,
|
|
figure + *,
|
|
pre > code,
|
|
.video-player,
|
|
.video-player + *,
|
|
video {
|
|
--flow-space: #{get-size('max')};
|
|
}
|
|
|
|
figure,
|
|
pre > code,
|
|
.video-player,
|
|
video {
|
|
width: 100vw;
|
|
max-width: map-get($metrics, 'wrap-max-width');
|
|
margin-left: 50%; /*changing this value to 47% removes the horizontal scrollbar once the viewport is < 930px */
|
|
transform: translateX (-50%); /* changing this value to 49% allows for the suggestion above to also eliminate the horizontal scroll. */
|
|
position: relative;
|
|
}
|
|
|
|
figure img,
|
|
pre > code,
|
|
.video-player {
|
|
box-shadow: 0 10px 30px rgba(0, 0, 0, .15);
|
|
}
|
|
|
|
figure img {
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
figcaption {
|
|
font-size: .8em;
|
|
font-style: italic;
|
|
max-width: map-get($metrics, 'wrap-inner-max-width');
|
|
margin: .5rem auto 0;
|
|
padding: 0 get-size(500);
|
|
}
|
|
|
|
pre > code {
|
|
display: block;
|
|
background: var(--color-dark);
|
|
padding: get-size(700);
|
|
font-size: get-size(500);
|
|
}
|
|
}
|
|
|
|
&__footer {
|
|
background: var(--color-theme-highlight);
|
|
|
|
h2 {
|
|
flex-shrink: 0;
|
|
margin-right: get-size('base');
|
|
color: var(--color-dark);
|
|
}
|
|
|
|
h2 a {
|
|
@extend %visually-hidden;
|
|
}
|
|
|
|
a {
|
|
background: var(--color-bg);
|
|
padding: .4rem .6rem;
|
|
}
|
|
}
|
|
}
|