Commit 7104cff5 authored by Dominik V. Salonen's avatar Dominik V. Salonen

Make initial text more specific

Because that makes browsers override the regular page style in favor of this one.
parent 420b0e77
html, body {
margin: 0;
padding: 0;
overflow: hidden;
}
h1, h2, h3, h4, h5, p {
margin: 0;
}
/* Main IDs forthe site */
#site {
position: absolute;
top: 0;
left: 0;
background-color: #2b2b2b;
min-width: 100vw;
min-height: 100vh;
max-width: 100vw;
max-height: 100vh;
overflow: hidden;
margin: 0;
color: #FFF;
font-family: "Lato", sans-serif;
}
#content {
display: block;
margin-right: auto;
margin-left: auto;
width: 750px;
max-width: 90vw;
margin-top: 25vh;
max-height: 50vh;
}
@media only screen and (max-device-width: 600px) {
#content {
margin-top: 10vh;
max-height: 75vh;
}
}
#main-container {
background-color: #3b3b3b;
margin-top: 10px;
padding: 5px;
border-radius: 5px 5px 0px 0px;
width: 100%;
box-shadow: 3px 3px 7px rgba(0,0,0,0.25);
}
#navbar {
width: 100%;
/* Whitespace hack */
font-size: 0;
text-align: center;
}
#page {
width: 100%;
padding: 15px 5px 8px 5px;
}
/* Core site components */
.title {
font-size: 32pt;
font-weight: 300;
text-align: center;
}
.sub-title {
font-size: 10pt;
color: #AAA;
text-align: center;
}
.sub-title span {
color: #555;
}
.nav-button {
display: inline-block;
border-bottom: solid 3px #2b2b2b;
background-color: #3b3b3b;
color: #AAA;
transition: background 0.15s ease-in-out, border 0.5s ease-in-out, color 0.15s ease-in-out;
padding: 10px 5px;
box-sizing: border-box;
margin: 0;
text-align: center;
width: 33%;
/* Undo whitespace hack */
font-size: 12pt;
cursor: pointer;
}
.nav-button:hover {
background-color: #4b4b4b;
color: #FFF;
transition: background 0.15s ease-in-out, color 0.15s ease-in-out;
}
.nav-button.active {
border-color: #FF5555;
color: #FFF;
transition: background 0.15s ease-in-out, border 0.5s ease-in-out, color 0.15s ease-in-out;
}
.initial-text {
font-size: 18pt;
text-align: center;
margin-top: 70px;
margin-bottom: 70px;
}
.loading {
font-size: 26pt;
color: #FF5555;
display: block;
margin: 70px auto;
animation-name: spin;
animation-duration: 2000ms;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
.notice {
color: #3b3b3b;
text-align: right;
}
/* Thanks StackOverflow, heck if I can remember this stuff */
.noselect, .nav-button, .notice {
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Safari */
-khtml-user-select: none; /* Konqueror HTML */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none; /* Non-prefixed version, currently
supported by Chrome and Opera */
}
/* Animations */
@keyframes spin {
from { transform:rotate(0deg); }
to { transform:rotate(360deg); }
}
/* Social media icons */
.icon-container {
display: block;
text-align: center;
width: 100%;
font-size: 0;
}
.icon-container a {
display: inline-block;
padding: 10px;
margin: 35px;
box-sizing: border-box;
font-size: 12pt;
color: #FFFFFF;
transition: color 0.25s ease-in-out;
text-decoration: none;
}
.icon-container a svg {
font-size: 42pt;
}
.icon-container a:hover {
color: #FF5555;
transition: color 0.25s ease-in-out;
}
/* Page contents */
#page p {
margin-top: 5px;
margin-bottom: 5px;
}
#page h1, #page h2, #page h3 {
margin-top: 15px;
font-weight: 300;
text-align: center;
margin-bottom: 5px;
}
#page h1:first-child {
margin-top: 0;
html, body {
margin: 0;
padding: 0;
overflow: hidden;
}
h1, h2, h3, h4, h5, p {
margin: 0;
}
/* Main IDs forthe site */
#site {
position: absolute;
top: 0;
left: 0;
background-color: #2b2b2b;
min-width: 100vw;
min-height: 100vh;
max-width: 100vw;
max-height: 100vh;
overflow: hidden;
margin: 0;
color: #FFF;
font-family: "Lato", sans-serif;
}
#content {
display: block;
margin-right: auto;
margin-left: auto;
width: 750px;
max-width: 90vw;
margin-top: 25vh;
max-height: 50vh;
}
@media only screen and (max-device-width: 600px) {
#content {
margin-top: 10vh;
max-height: 75vh;
}
}
#main-container {
background-color: #3b3b3b;
margin-top: 10px;
padding: 5px;
border-radius: 5px 5px 0px 0px;
width: 100%;
box-shadow: 3px 3px 7px rgba(0,0,0,0.25);
}
#navbar {
width: 100%;
/* Whitespace hack */
font-size: 0;
text-align: center;
}
#page {
width: 100%;
padding: 15px 5px 8px 5px;
}
/* Core site components */
.title {
font-size: 32pt;
font-weight: 300;
text-align: center;
}
.sub-title {
font-size: 10pt;
color: #AAA;
text-align: center;
}
.sub-title span {
color: #555;
}
.nav-button {
display: inline-block;
border-bottom: solid 3px #2b2b2b;
background-color: #3b3b3b;
color: #AAA;
transition: background 0.15s ease-in-out, border 0.5s ease-in-out, color 0.15s ease-in-out;
padding: 10px 5px;
box-sizing: border-box;
margin: 0;
text-align: center;
width: 33%;
/* Undo whitespace hack */
font-size: 12pt;
cursor: pointer;
}
.nav-button:hover {
background-color: #4b4b4b;
color: #FFF;
transition: background 0.15s ease-in-out, color 0.15s ease-in-out;
}
.nav-button.active {
border-color: #FF5555;
color: #FFF;
transition: background 0.15s ease-in-out, border 0.5s ease-in-out, color 0.15s ease-in-out;
}
#page .initial-text {
font-size: 18pt;
text-align: center;
margin-top: 70px;
margin-bottom: 70px;
}
.loading {
font-size: 26pt;
color: #FF5555;
display: block;
margin: 70px auto;
animation-name: spin;
animation-duration: 2000ms;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
.notice {
color: #3b3b3b;
text-align: right;
}
/* Thanks StackOverflow, heck if I can remember this stuff */
.noselect, .nav-button, .notice {
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Safari */
-khtml-user-select: none; /* Konqueror HTML */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none; /* Non-prefixed version, currently
supported by Chrome and Opera */
}
/* Animations */
@keyframes spin {
from { transform:rotate(0deg); }
to { transform:rotate(360deg); }
}
/* Social media icons */
.icon-container {
display: block;
text-align: center;
width: 100%;
font-size: 0;
}
.icon-container a {
display: inline-block;
padding: 10px;
margin: 35px;
box-sizing: border-box;
font-size: 12pt;
color: #FFFFFF;
transition: color 0.25s ease-in-out;
text-decoration: none;
}
.icon-container a svg {
font-size: 42pt;
}
.icon-container a:hover {
color: #FF5555;
transition: color 0.25s ease-in-out;
}
/* Page contents */
#page p {
margin-top: 5px;
margin-bottom: 5px;
}
#page h1, #page h2, #page h3 {
margin-top: 15px;
font-weight: 300;
text-align: center;
margin-bottom: 5px;
}
#page h1:first-child {
margin-top: 0;
}
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment