Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Twine CSS
/* My Harelowe Game Styles */
@import url('https://fonts.googleapis.com/css?family=Poppins:200,600');
@import url('https://fonts.googleapis.com/css?family=Roboto+Mono:300,700');
html, tw-story {
background-color: #F2F2F2;
color: #242424;
}
tw-sidebar {
display: none;
}
.gamestage {
width: 80vw;
margin-left: auto;
margin-right: auto;
margin-bottom: 100px;
}
tw-story {
font: 1.2em/1.2 Roboto Mono, monospace;
font-weight: 200;
padding: 0 0;
}
tw-link,
tw-link:hover,
.enchantment-link,
.enchantment-link:hover,
.visited,
.visited:hover {
font-weight: 200;
transition: none;
color: #242424;
text-decoration: underline;
}
.time {
background-color: #FFDC00;
border-radius: 100%;
padding: 5px 11px;
}
h1 {
font-size: 2em;
line-height: 1.2em;
}
h2 {
font-size: 1.7em;
line-height: 1.2em;
}
h3 {
font-size: 1.5em;
line-height: 1.2em;
}
h1,
h2,
h3 {
font-weight: 600;
font-family: 'Poppins', sans-serif;
text-transform: uppercase;
}
img {
width: 100%;
/* object-fit: cover; */
/* height: 50vh; */
}
li {
padding: 10px 0;
}
hr {
border: 1px solid;
color: #D8D8D8;
}
/* VIDEO EMBED */
.video-container {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
margin-bottom: 2rem;
}
.video-container iframe,
.video-container object,
.video-container embed,
.video-container video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.sd {
padding-bottom: 75%;
}
.sq {
padding-bottom: 100%;
}
.vt {
padding-bottom: 178%;
}
/* Portrait */
@media only screen
and (orientation: portrait) {
img {
/* height: 30vh; */
}
}
/* Landscape */
@media only screen
and (orientation: landscape) {
.gamestage {
max-width: 800px;
}
}
@media (prefers-color-scheme: dark){
html, tw-story {
background-color: #242424;
color: #F2F2F2;
}
tw-link,
tw-link:hover,
.enchantment-link,
.enchantment-link:hover,
.visited,
.visited:hover {
color: #F2F2F2;
}
hr {
color: #3A3A3A;
}
.time {
color: #242424;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.