69 lines
1.0 KiB
SCSS
69 lines
1.0 KiB
SCSS
// Tailwind
|
|
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
// Variables
|
|
@import "variables";
|
|
|
|
// Fonts
|
|
@import "fonts";
|
|
|
|
// Components
|
|
@import "components/wompum";
|
|
|
|
body {
|
|
font-family: $font-garamond;
|
|
}
|
|
|
|
.interviewer-question {
|
|
font-style: italic;
|
|
color: #444;
|
|
margin-left: -1rem;
|
|
}
|
|
|
|
.article-title {
|
|
&--single {
|
|
.article-title__narrator {
|
|
@apply mb-2 block font-light;
|
|
}
|
|
.article-title__subject {
|
|
font-size: 1.5em;
|
|
}
|
|
}
|
|
|
|
&--list {
|
|
.article-title__narrator {
|
|
&::after {
|
|
content: ":";
|
|
}
|
|
}
|
|
.article-title__subject {
|
|
@apply font-light;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Narrator Image Component
|
|
.wompum-radial-grid {
|
|
@apply absolute w-full h-full top-0 left-0;
|
|
}
|
|
|
|
.narrator {
|
|
&__container {
|
|
@apply relative;
|
|
}
|
|
|
|
&__frame {
|
|
@apply relative p-4;
|
|
}
|
|
|
|
&__image {
|
|
@apply w-full rounded-full object-cover relative z-10 bg-white text-center border-4 border-white grid place-items-center;
|
|
aspect-ratio: 1;
|
|
}
|
|
|
|
&__wompum {
|
|
@apply absolute inset-0 w-full h-full;
|
|
}
|
|
} |