SiteWebAstrolabe/src/scss/components/_post.scss
2020-07-08 17:05:39 +02:00

339 lines
6.8 KiB
SCSS

.post {
padding-bottom: 8rem;
&__body {
// --flow-space: #{get-size(800)};
/**
* Generic HTML styles
*/
h1 {
margin-top: 8rem;
}
// h2 + *,
// h3 + * {
// --flow-space: #{get-size(500)};
// }
h2,
h3 {
@include apply-utility('leading', 'tight');
position: relative;
/*display: flex;*/
}
p {
font-size: 1.125rem;
}
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: 100%;
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);
}
// page specific
.split-content {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: auto;
grid-column-gap: 1.5rem;
grid-row-gap: 0;
margin-top: 4rem;
.video-player > iframe {
height: 89%;
}
}
details {
border-bottom: 1px solid var(--color-mid);
&:first-of-type {
border-top: 1px solid var(--color-mid);
margin-top: 4rem;
}
&[open] {
summary::after {
transform: rotateZ(180deg);
}
}
> summary:first-of-type {
position: relative;
padding: 1rem 0;
list-style-type: none;
cursor: pointer;
&::-webkit-details-marker {
display: none;
}
&::after {
content: '';
background-image: url("data:image/svg+xml,%3Csvg width='16' height='10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.364 1.636L8 8 1.636 1.636' stroke='%23111' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
width: 1rem;
height: .625rem;
position: absolute;
right: 0;
top: calc(50% - .3125rem);
}
}
h3 {
display: inline-block;
font-weight: 600;
.heading-permalink {
display: none;
}
}
}
table {
margin-bottom: 1rem;
&,
thead,
tbody {
display: block;
}
th,
td {
padding: 0;
}
tr {
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-template-rows: auto;
grid-column-gap: 1.5rem;
grid-row-gap: 0;
text-align: left;
}
thead th {
font-weight: 600;
&:last-child {
background-color: var(--color-primary);
}
}
tbody tr {
padding: 1.5rem 0;
&:nth-child(odd) {
background-color: var(--color-light-gray);
}
}
~ p {
font-size: .875rem;
&:last-child {
margin-bottom: 1.5rem;
}
}
}
.process-cae {
max-width: 34.875rem;
margin: 8rem auto 0;
&.split {
max-width: 100%;
margin: 0;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: 1fr;
grid-column-gap: 1.5rem;
grid-row-gap: 0;
.process-cae__block:last-child {
align-items: flex-end;
}
}
&__block {
display: flex;
flex-direction: column;
margin: 3rem 0;
&:last-child {
margin-bottom: 0;
}
p {
margin-top: 2rem;
}
.highlight {
background-color: var(--color-primary);
width: 100%;
margin: 3rem 0;
padding: 1.5rem;
border-radius: 1.5rem;
display: flex;
flex-direction: column;
&.secondary {
background-color: var(--color-secondary);
color: var(--color-white);
.heading-permalink svg {
fill: var(--color-white);
}
a:not(.heading-permalink) {
background-color: var(--color-primary);
color: var(--color-dark);
}
}
h2 {
@include apply-utility('font', 'base');
text-align: left;
font-weight: 600;
margin-bottom: 1rem;
}
a:not(.heading-permalink) {
background-color: var(--color-secondary);
color: var(--color-white);
}
ul + p {
align-self: flex-end;
font-size: 1rem;
margin-top: 1rem;
}
}
img {
// width: 18rem;
align-self: center;
margin: 0 auto;
}
}
}
}
&__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;
}
}
}