/*
WELCOME TO STYLESHEET.ORG
This is a design system for laying out content and user interface components.
It can be added to your site by putting the following tag inside the tag in your HTML page:
You can read more here:
About Stylesheet: https://stylesheet.org/about
Content Tags: https://stylesheet.org/content
Layout System: https://stylesheet.org/layout
Widgets: https://stylesheet.org/widgets
This stylesheet implements a default look & feel, and you are encouraged to copy-paste this into
your own site and customise for your needs.
*/
/*
RESET STYLES
This just resets sizing and display parameters to some known values and ensures they are the same on all browsers.
*/
* { box-sizing: border-box; margin: 0; padding: 0; height: fit-content; transform: scale(1.00); }
body, html { width:100%; height:100%; }
body{ display:flex; flex-direction:column; }
main{ flex:1; }
/*
CUSTOM PARTS
*/
@font-face {
font-family: rocksOffFont;
src: url('theme/font.ttf');
}
@font-face {
font-family: rocksOffFontColour;
src: url('theme/font-colour.woff2');
}
@font-palette-values --Green {
font-family: rocksOffFontColour;
base-palette: 2;
}
@font-palette-values --Orange {
font-family: rocksOffFontColour;
base-palette: 0;
}
* {
font-family: rocksOffFont, serif;
}
html {
background-color: #333;
}
h2, h3, h4 {
font-family: rocksOffFontColour, rocksOffFont, serif;
font-palette: --Green;
}
main > header {
background-image: url(theme/rocksoff-header.png);
background-size: cover;
background-position-x: center;
height: 300px;
padding-top: 40px;
}
h1 {
background-image: url(theme/rocksoff-logo.png);
background-size: cover;
text-indent: -500px;
width: 550px;
height: 211px;
overflow: hidden;
margin: 0 auto;
}
main {
display: flex;
flex-direction: column;
}
main > header nav {
top: 235px;
position: absolute;
width: 96%;
left: 2%;
border-radius: 100px;
}
main > header nav ol {
margin: 0 auto;
width: fit-content;
}
header nav {
padding: 8px;
}
header nav ol { gap: 20px; }
header nav ol li a {
padding: 4px 20px;
background: #8df;
color: #345;
border: 4px solid #fff;
font-weight:bold;
}
header nav ol li a:hover {
box-shadow: 4px 4px 4px 1px rgba(0,0,0,0.1);
}
header nav ol li a.selected { box-shadow: 0 0 0 4px #000; }
header nav ol li:nth-child(2) a { background: #fc0; }
header nav ol li:nth-child(3) a { background: #9e6; }
header nav ol li:nth-child(4) a { background: #ebf; }
main > section {
background-image: url(theme/bg1.png);
background-size: cover;
z-index: 11;
padding-bottom: 30px;
flex: 1;
}
main > section::after {
content: "";
position: absolute;
left: 0;
right: 0;
background-image: url(theme/bg1-end.png);
background-size: contain;
bottom: -25px; /* Adjusts the overlap */
height: 50px; /* Double the overlap height */
z-index: 12; /* Ensures the strip overlaps the content below */
}
main > section:nth-child(3) {
background-image: url(theme/bg2.png);
z-index: 3;
padding-top: 30px;
}
main > section:nth-child(3)::after {
background-image: url(theme/bg2-end.png);
z-index: 4;
}
main {
z-index: 5;
}
main > section > padding > h2 {
background: rgba(0,0,0,0.1);
width: 90%;
margin: 0 auto 10px auto;
}
main > section:nth-child(3) > padding > h2 {
font-palette: --Orange;
}
main > section:nth-child(3) > padding > p {
color: #fed;
}
main > section > padding > p {
width: 90%;
margin-left: auto;
margin-right: auto;
}
main > section:nth-child(3) article {
border-color: #c80;
}
named#worlds {
padding: 20px 0;
background: rgba(0, 0, 0, 0.1);
margin: 10px 0;
}
named#worlds img {
width: 80px;
height: 80px;
}
named#worlds panel {
display: block;
background: #fff;
padding: 4px;
margin: 0;
border: 8px solid #080;
}
named#worlds panel p {
text-align: center;
color: #000;
}
named#worlds a {
box-shadow: 0 0 0 0 rgba(0,0,0,0.05);
}
named#worlds a:hover {
transform: rotate(3deg) scale(1.05);
box-shadow: 2px 2px 2px 1px rgba(0,0,0,0.05);
}
named#worlds a.selected panel {
border: 8px solid #000;
transform: scale(1.05);
}
named#worlds a:nth-child(even):hover {
transform: rotate(-3deg);
}
#editor header {
padding-top: 10px;
height: 110px;
background-position-x: right;
background-position-y: center;
background-size: auto;
}
#editor h1 {
width: 275px;
height: 105px;
margin: 0 20px;
}
#editor header > nav {
top: 30px;
}
#editor footer {
height: 80px;
min-height: 80px;
background-position-y: top;
}
#editor iframe {
position: absolute;
top: 0;
left: 0;
right: 0;
width: 100%;
height: 100%;
bottom: 0;
border: 0;
}
#editor main > section {
padding-bottom: 0;
}
#editor main > section::after {
height: 0;
}
#instructions named#worlds{
padding: 0;
}
p + p {
margin-top: -25px;
}
footer {
background-image: url(theme/rocksoff-footer.png);
background-size: cover;
background-position-x: center;
height: 450px;
min-height: 450px;
max-height: 450px;
z-index: 0;
position: relative;
}
footer p {
color: #8ac;
position: absolute;
bottom: 10px;
left: 10px;
right: 10px;
text-align: center;
font-size: 19px;
}
footer a {
color: #9cf;
}
footer a:hover {
color: #def;
}
h2 {
font-size: 45px;
text-align: center;
color: #fff;
padding: 15px 0;
}
article {
position: relative;
display: block;
background: #fff;
border: 20px solid #080;
max-width: 1200px;
width: 90%;
margin: 0 auto;
}
article a {
color: #000;
}
article h2 {
text-align: left;
font-size: 30px;
padding-top: 20px;
padding-left: 40px;
padding-bottom: 0;
}
article p {
font-size: 20px;
padding-right: 20px;
padding-left: 20px;
}
article img {
width: 200px;
height: 200px;
border: 5px solid #fff;
border-bottom: 10px solid #fff;
transition: 0.1s;
}
article a:hover img {
box-shadow: 4px 4px 4px 1px rgba(0,0,0,0.1);
}
article:nth-child(even) img {
transform: rotate(-10deg);
}
article:nth-child(odd) img {
transform: rotate(10deg);
}
/* Instruction cards (the articles in a grid) are not links: the picture always has its shadow,
and the title is a span, kept black like the linked titles */
grid article img {
box-shadow: 4px 4px 4px 1px rgba(0,0,0,0.1);
}
grid article h2 span {
color: #000;
}
/* Song lyrics on the world pages: one paragraph per verse, each line ending in
*/
named#lyrics {
display: block;
width: 90%;
margin: 0 auto;
padding-bottom: 20px;
}
named#lyrics p {
text-align: center;
font-size: 20px;
line-height: 1.5;
color: #fed;
margin: 0 0 30px 0;
}
named#lyrics p + p {
margin-top: 0;
}
/* Music player on the world pages */
padding > audio {
display: block;
width: 90%;
max-width: 800px;
margin: 0 auto 20px auto;
}
main > section:nth-of-type(2) article {
border-width: 10px;
}
main > section:nth-of-type(2) article img {
width: 100px;
height: 100px;
}
main > section:nth-of-type(2) {
}
main > section:nth-of-type(2) h2 {
}
padding > p {
text-align: center;
font-size: 25px;
color: #dfd;
font-weight: bold;
padding-bottom: 20px;
}
iframe
{
border: 10px solid #080;
margin: 0 auto;
display: block;
}
/*
THE PAGE THEME
This sets the basic background colour and default font
*/
body {
background-color: #333;
max-width: 1400px;
min-width: 900px;
margin: 0 auto;
box-shadow: 0 0 50px 10px #000;
height: auto;
min-height: 100%;
}
* { position:relative; }
.selected { font-weight: bold; }
a {
transition: .1s;
transform: scale(1.00);
}
a:hover {
transform: scale(1.05);
}
/*
UI CONTENT
Described in: https://stylesheet.org/content
Tags:
- Declares a paragraph of text
... ...
- A link inside a paragraph of text
- A content panel