From c7eb8d7f6105a5a15a1f45b5e2be3c2d1e2204bd Mon Sep 17 00:00:00 2001 From: Volpeon Date: Fri, 19 Mar 2021 22:10:55 +0100 Subject: WIP: Redesign --- assets/css/components/_page.scss | 134 +-------------------------------------- 1 file changed, 2 insertions(+), 132 deletions(-) (limited to 'assets/css/components/_page.scss') diff --git a/assets/css/components/_page.scss b/assets/css/components/_page.scss index 9d1e991..ef39061 100644 --- a/assets/css/components/_page.scss +++ b/assets/css/components/_page.scss @@ -1,133 +1,3 @@ -.c-page { - &__prefixed { - position: relative; - margin-left: -1 * $page--item-prefix--width; - padding-left: $page--item-prefix--width; - - &::before { - display: inline-block; - position: absolute; - box-sizing: border-box; - width: $page--item-prefix--width; - margin-left: -1 * $page--item-prefix--width; - padding-right: $page--item-prefix--pad; - color: var(--page--item-prefix--fg); - font-family: $font-fam--mono; - font-weight: normal; - text-align: right; - } - - $h1-unscale-factor: px-to-em($font-size, $content--h1--font-size); - - &--h1 { - margin-top: $line-height * $h1-unscale-factor; - font-size: px-to-em($content--h1--font-size); - - &::before { - content: '#'; - font-size: $h1-unscale-factor; - } - } - - &--h2::before { - content: '##'; - } - - &--h3::before { - content: '###'; - } - - &--pre { - $scale-factor: $font-size / $code-block--font-size; - - margin-left: calc(#{-1 * $page--item-prefix--width} * #{$scale-factor}); - padding-left: calc(#{$page--item-prefix--width} * #{$scale-factor}); - border-left: 0; - color: var(--code-block--fg); - font-size: $code-block--font-size; - line-height: $code-block--line-height; - text-overflow: ''; - - &::before { - content: str-repeat('``\A', 40); - height: 100%; - overflow: hidden; - color: var(--page--item-prefix--fg); - font-size: px-to-em($font-size, $code-block--font-size); - line-height: $code-block--line-height / $scale-factor; - } - } - - &--ref::before { - content: '|>'; - } - - &--backref::before { - content: '<|'; - } - } - - &__header { - margin-bottom: $line-height * 1em; - - &__title { - margin-top: 0; - } - - &__backlink__link { - &:link, - &:visited { - color: var(--fg-hi); - - &:hover { - color: var(--link--hover--fg); - } - } - } - - &__backlink + &__title { - margin-top: $line-height * 1em; - } - - &__meta { - margin-top: 0; - color: var(--fg-hi); - font-weight: normal; - } - } - - &__content { - padding-left: $page--item-prefix--width; - - > :first-child { - margin-top: 0; - } - } - - @media (max-width: map-get($breakpoints, 'sm')) { - &__prefixed { - margin-left: 0; - padding-left: $page--item-prefix--width--sm; - - &::before { - width: $page--item-prefix--width--sm; - margin-left: -1 * $page--item-prefix--width--sm; - } - - &--h1, - &--h2, - &--h3, - &--pre { - padding-left: 0; - - &::before { - display: none; - } - } - } - - &__content { - padding-left: 0; - } - } +@include component('page') { + // } -- cgit v1.2.3-54-g00ecf