diff --git a/style.css b/style.css index 55b3c03..fdfd0b9 100755 --- a/style.css +++ b/style.css @@ -1,194 +1,194 @@ -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