// {{< expand "Label" "icon" >}} .gblog-expand { margin-top: $padding-16; margin-bottom: $padding-16; border: $border-1 solid var(--accent-color); border-radius: $border-radius; overflow: hidden; &__head { background: var(--accent-color-lite); padding: $padding-8 $padding-16; cursor: pointer; user-select: none; } &__content { display: none; padding: $padding-16; } &__control:checked + &__content { display: block; } .gblog-post__anchor { display: none; } } // {{< tabs >}} .gblog-tabs { margin-top: $padding-16; margin-bottom: $padding-16; border: $border-1 solid var(--accent-color); border-radius: $border-radius; overflow: hidden; display: flex; flex-wrap: wrap; &__label { display: inline-block; padding: $padding-8 $padding-16; border-bottom: $border-1 transparent; cursor: pointer; user-select: none; } &__content { order: 999; //Move content blocks to the end width: 100%; border-top: $border-1 solid var(--accent-color-lite); padding: $padding-16; display: none; } &__control:checked + &__label { border-bottom: $border-2 solid var(--link-color); } &__control:checked + &__label + &__content { display: block; } .gblog-post__anchor { display: none; } } // {{< columns >}} .gblog-columns { &--regular > :first-child { flex: 1; } &--small > :first-child { flex: 0.35; min-width: $body-min-width * 0.35; } &--large > :first-child { flex: 1.65; min-width: $body-min-width * 1.65; } &__content { flex: 1 1; margin: $padding-16 0; min-width: $body-min-width * 0.66; padding: 0; } .gblog-post__anchor { display: none; } } // {{< button >}} .gblog-button { $root: &; display: inline-block; background: var(--accent-color-lite); border: $border-1 solid var(--accent-color); border-radius: $border-radius; margin: $padding-8 0; cursor: pointer; user-select: none; &__link { display: inline-block; color: inherit !important; text-decoration: none !important; &:hover, &:visited:hover { background: none; } } &:hover { background: var(--button-background); border-color: var(--button-border-color); color: $gray-100; } &--regular { font-size: $font-size-base; #{$root}__link { padding: $padding-4 $padding-8; } } &--large { font-size: $font-size-20; #{$root}__link { padding: $padding-8 $padding-16; } } } // {{< box >}} .gblog-box { background: var(--accent-color-lite); border: $border-1 solid var(--accent-color); border-radius: $border-radius; text-align: center; flex: 1 1 0; &--regular { font-size: $font-size-base; padding: $padding-4 $padding-8; min-width: 8rem; } &--large { font-size: $font-size-20; padding: $padding-8 $padding-16; min-width: 12rem; } &__title { word-wrap: break-word; overflow-wrap: anywhere; gap: $padding-8; svg.gblog-icon { width: 1.3rem; height: 1.3rem; min-width: 1.3rem; } } &__text { margin: $padding-8 0; font-size: $font-size-16; } } // {{< hint >}} .gblog-hint { @each $name, $color in $hint-colors { &.#{$name} { border-left-color: $color; background-color: scale-color($color, $lightness: 95%, $saturation: -30%); color: $body-font-color; padding: 0; } } &__title { padding: $padding-4 $padding-16; background-color: scale-color($gray-600, $alpha: -95%); font-weight: bold; color: scale-color($body-font-color, $alpha: -15%); i.fa::after { content: attr(title); font-style: normal; padding-left: $padding-24; } i.fa { color: $black; background-size: auto 90%; background-repeat: no-repeat; filter: invert(30%); margin-left: -5px; } @each $name, $icon in $hint-icons { i.fa.#{$name} { background-image: url(img/geekblog-stack.svg##{$icon}); } } .gblog-icon { width: $font-size-24; height: $font-size-24; margin-left: -5px; } } &__text { padding: $padding-4 $padding-16; } .gblog-page__anchor { display: none; } } // {{< mermaid >}} .gblog-mermaid { font-family: "Liberation Sans", sans-serif; }