SiteWebAstrolabe/src/scss/components/_post.scss

138 lines
2.7 KiB
SCSS
Raw Normal View History

2020-06-19 23:47:44 +02:00
.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;
}
}
}