jonnybarnes.uk/resources/assets/sass/layout.scss

131 lines
1.9 KiB
SCSS
Vendored

// import.scss
body {
max-width: 25em;
margin: 0 auto;
padding-left: 5px;
padding-right: 5px;
word-wrap: break-word;
}
#topheader {
text-align: center;
}
.h-entry {
padding-top: 1rem;
}
.note {
display: flex;
flex-direction: column;
}
.note-metadata {
display: flex;
flex-direction: row;
justify-content: space-between;
font-size: 0.75em;
}
.note img {
max-height: 80vh;
width: auto;
max-width: 100%;
image-orientation: from-image;
}
.social-links {
display: flex;
align-items: center;
}
.social-links svg {
padding-left: 3px;
}
.mini-h-card {
position: relative;
}
.mini-h-card .p-name {
position: relative;
z-index: 100; /* we want this to still appear in the hovercard */
}
.mini-h-card .hovercard {
display: none;
}
.mini-h-card:hover .hovercard {
display: inline;
background-color: white;
border: solid 1px grey;
position: absolute;
min-width: 300px;
left: -10px;
top: -10px;
z-index: 50; /* less than p-name */
padding: 2rem 3rem 10px 10px;
}
.hovercard .u-photo {
position: absolute;
top: 10px;
right: 10px;
width: 3rem;
height: auto;
padding-bottom: 10px;
}
.hovercard .social-icon {
height: 0.8rem;
}
.hovercard a::before {
content: "\A";
white-space: pre;
}
body > .h-card {
margin-top: 5px;
border-top: 1px solid grey;
}
footer {
margin-top: 1rem;
}
footer button {
margin-left: 5px;
}
.u-comment {
margin-top: 1em;
padding: 0 1em;
font-size: 0.75rem;
}
.u-comment.h-cite img {
height: 0.75rem;
}
.u-comment .e-content {
margin-top: 0.5em;
font-size: 1rem;
}
.container {
position: relative;
width: 100%;
height: 0;
padding-bottom: 56.25%;
}
.youtube {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}