1
mirror of https://github.com/jakejarvis/jarv.is.git synced 2025-04-26 14:28:25 -04:00
jarv.is/assets/sass/pages/_single.scss
Jake Jarvis 363b4edf1c
shift asset processing to webpack (#424)
also migrated SASS to latest syntax (via dart-sass) and vastly simplified light/dark theme logic
2021-06-19 17:19:01 -04:00

85 lines
1.4 KiB
SCSS

@use "../abstracts/themes";
// Post Styles
div.layout-single {
padding-top: 1em;
padding-bottom: 1em;
div#meta {
font-size: 0.825em;
line-height: 2.3;
letter-spacing: 0.04em;
margin-top: 0.3em;
@include themes.themed(color, "medium");
a {
color: inherit;
}
> div {
display: inline-block;
margin-right: 1.25em;
white-space: nowrap;
img.emoji {
margin-right: 0.25em;
vertical-align: -0.22em;
cursor: inherit;
}
&:last-of-type {
margin-right: 0;
}
}
div#meta-tags {
white-space: normal;
span {
text-transform: lowercase;
white-space: nowrap;
margin-right: 0.4em;
&::before {
content: "#"; // cosmetically hashtagify tags
padding-right: 0.125em;
@include themes.themed(color, "light");
}
&:last-of-type {
margin-right: 0;
}
}
}
}
h1.title {
margin-top: 0.3em;
margin-bottom: 0.5em;
margin-left: -0.03em; // TODO: why is this indented slightly?
font-size: 2.1em;
line-height: 1.3;
font-weight: 700;
letter-spacing: -0.006em;
a {
color: inherit;
}
}
}
// Responsive
@mixin responsive() {
div.layout-single {
padding-top: 0.8em;
padding-bottom: 0.4em;
h1.title {
margin-top: 0.4em;
font-size: 1.8em;
}
}
}