@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;
	padding: 75px var(--slide-side) 0;
	box-sizing: border-box;
	width: var(--slide-width);
	height: var(--slide-height);
	overflow: hidden;
	background-color: white;
}

/* Number */

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