Custom CSS

Pogo fully supports custom CSS themeing of the main client frontend through CSS classes. There are several classes to know with the default index.html.

The custom CSS is not included in the admin interface, so only the stock CSS is available.

You are not limited to these classes in the custom CSS - the whole page can be themed. By default Pogo uses the Muli font from Google Fonts, and keeps other CSS minimal for full compatibility.

.container

This is the main container of the page, which positions and pads content appropriately.

/* Default .container */
.container {
  margin: 0 auto;
  padding: 0 2.0rem;
  position: relative;
  width: 60vw;
}

.title

This is the main header, the title of the podcast.

/* No default */

.adminlink

The link to the admin dashboard.

/* No default */

.podcastlist

Div containing all the podcasts in chonological order.

/* No default */

.pocastitem

A single episode item, including the title, date, description and audio tag.

/* Default .podcastitem */
.podcastitem {
	width:70%;
}

.podcasttitle

Title of episode in .podcastitem.

/* No default */

.podcastdate

Date of episode in DD/MM/YYYY in .podcastitem.

/* No default */

.podcastdesc

Description of episode in .podcastitem.

/* No default */

.podcastaudio

Podcast <audio> tag

/* No default */