@shower/ribbon/styles/slide/slide.css

Ribbon theme for Shower HTML presentation engine

/* Types */

@import 'slide-list.css' screen;
@import 'slide-full.css' screen;

/* Content */

@import 'content/basic.css';
@import 'content/code.css';
@import 'content/footer.css';
@import 'content/inline.css';
@import 'content/lists.css';
@import 'content/quote.css';
@import 'content/table.css';

/* Elements */

@import 'elements/columns.css';
@import 'elements/copyright.css';
@import 'elements/cover.css';
@import 'elements/next.css';
@import 'elements/place.css';
@import 'elements/shout.css';
@import 'elements/spotlight.css';

/* Modifiers */

@import 'modifiers/clear.css';
@import 'modifiers/gray.css';
@import 'modifiers/black.css';

/* Slide */

.slide {
    position: relative;
    z-index: 0;
    overflow: hidden;
    box-sizing: border-box;
    padding: 75px var(--slide-side) 0;
    width: var(--slide-width);
    height: var(--slide-height);
    background-color: white;
}

/* Number */

.slide::after {
    position: absolute;
    top: 0;
    left: 875px;
    box-sizing: border-box;
    padding-top: 15px;
    width: var(--ribbon-size);
    height: calc(var(--ribbon-size) * 2);
    background-image: url('ribbon.svg');
    background-size: cover;
    color: white;
    counter-increment: slide;
    content: counter(slide);
    text-align: center;
}