forked from Cavemanon/hugthegator.xyz
490 lines
9.0 KiB
CSS
Executable File
490 lines
9.0 KiB
CSS
Executable File
button {
|
|
all: unset;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
float: none !important;
|
|
background: linear-gradient(transparent, #102211), url("img/room.webp");
|
|
background-repeat: no-repeat;
|
|
background-color: black;
|
|
background-size: cover;
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
|
|
}
|
|
|
|
main, header {
|
|
max-width: 1480px;
|
|
}
|
|
|
|
p > a:visited, p > a:link {
|
|
color: rgb(77, 139, 255);
|
|
}
|
|
p > a:hover {
|
|
color: rgb(113, 163, 255);
|
|
}
|
|
p > a:active {
|
|
color: rgb(35, 91, 247);
|
|
}
|
|
|
|
header {
|
|
margin: 5px 5rem 0 5rem !important;
|
|
}
|
|
|
|
.app {
|
|
min-height: 100vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
h1 {
|
|
color: #e5e3f5;
|
|
}
|
|
|
|
main > nav > ul {
|
|
display: flex;
|
|
margin: 0;
|
|
padding: 1rem;
|
|
flex-direction: column;
|
|
list-style: none;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
main > nav > ul > li {
|
|
margin: 10px auto;
|
|
}
|
|
|
|
#characterslink:hover{
|
|
background: #3f5251;
|
|
}
|
|
#characterslink{
|
|
background: #2f4241;
|
|
}
|
|
nav{
|
|
position: relative;
|
|
}
|
|
.navigation-button {
|
|
display: block;
|
|
padding: 0.6rem;
|
|
background: #112928;
|
|
width: 200px;
|
|
color: white;
|
|
text-decoration: none;
|
|
border-radius: 10px;
|
|
text-align: center;
|
|
font-size: 16pt;
|
|
}
|
|
.navigation-button:hover {
|
|
background: #3d3d3f;
|
|
}
|
|
|
|
.logo-container {
|
|
display: block;
|
|
max-width: 800px;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
text-align: center;
|
|
}
|
|
.logo-container img {
|
|
display: block;
|
|
max-width: 500px;
|
|
width: 100%;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
height: auto;
|
|
}
|
|
|
|
.logo-flavor {
|
|
display: block;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
|
|
color: #a3dbb8;
|
|
background-color: #15260e21;
|
|
font-size: 1.4rem;
|
|
}
|
|
|
|
main {
|
|
margin: 3rem 5rem 3rem 5rem;
|
|
}
|
|
|
|
.teaser-container {
|
|
display: block;
|
|
position:relative;
|
|
padding-bottom: 56.25%;
|
|
padding-top: 30px;
|
|
height: 0;
|
|
overflow: hidden;
|
|
}
|
|
.teaser-container video{
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
|
|
.download-link-container {
|
|
display: flex;
|
|
margin: 0;
|
|
justify-content: center;
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.download-link-system-links {
|
|
display: flex;
|
|
background: rgb(0, 27, 16);
|
|
margin: 10px;
|
|
justify-content: left;
|
|
flex-direction: column;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.download-link-system {
|
|
background: rgb(6, 54, 48);
|
|
color: rgb(217, 255, 237);
|
|
display: block;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
padding: 8px;
|
|
font-size: 15pt;
|
|
min-width: 48px;
|
|
min-height: 30px;
|
|
height: 30px;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.download-link-system-icon {
|
|
display: inline-block;
|
|
float: right;
|
|
width: 30px;
|
|
height: 30px;
|
|
margin: 0;
|
|
padding: 0 0 5px 0; /* wtf why won't it just center and I don't have to resort to this */
|
|
text-align: right;
|
|
vertical-align: middle;
|
|
}
|
|
.download-link-system-icon img {
|
|
display: block;
|
|
max-height: 100%;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.download-link {
|
|
display: block;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
margin: 0.8rem;
|
|
padding: 8px;
|
|
font-size: 18pt;
|
|
min-width: 48px;
|
|
width: 200px;
|
|
min-height: 48px;
|
|
height: 48px;
|
|
text-decoration: none;
|
|
border-radius: 100px;
|
|
color: white;
|
|
background: #074fa1;
|
|
}
|
|
.download-link:hover {
|
|
background: #1a6be4;
|
|
}
|
|
.download-link-icon {
|
|
display: inline-block;
|
|
width: 30px;
|
|
height: 30px;
|
|
margin: 0 0 0 10px;
|
|
padding: 0;
|
|
vertical-align: middle;
|
|
}
|
|
.download-link-icon img {
|
|
display: block;
|
|
width: 100%;
|
|
max-height: 100%;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.social-link-container {
|
|
display: flex;
|
|
margin: 1rem;
|
|
justify-content: center;
|
|
flex-direction: row;
|
|
flex-wrap: nowrap;
|
|
}
|
|
|
|
.download-link span {
|
|
display: inline-block;
|
|
position: relative;
|
|
top: 2px;
|
|
margin: 4px;
|
|
margin-right: 24px;
|
|
}
|
|
|
|
.social-link {
|
|
display: block;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
margin: 0.8rem;
|
|
padding: 8px;
|
|
font-size: 18pt;
|
|
min-width: 48px;
|
|
min-height: 48px;
|
|
height: 48px;
|
|
text-decoration: none;
|
|
border-radius: 100px;
|
|
}
|
|
.social-link span {
|
|
display: inline-block;
|
|
position: relative;
|
|
top: 2px;
|
|
margin: 4px;
|
|
margin-right: 24px;
|
|
}
|
|
.social-link-icon {
|
|
display: inline-block;
|
|
width: 48px;
|
|
height: 48px;
|
|
margin: 0;
|
|
padding: 0;
|
|
vertical-align: middle;
|
|
}
|
|
.social-link-icon img {
|
|
display: block;
|
|
width: 100%;
|
|
max-height: 100%;
|
|
pointer-events: none;
|
|
}
|
|
.social-link__twitter {
|
|
background: #1D9BF0;
|
|
color: white;
|
|
}
|
|
.social-link__twitter:hover {
|
|
background: #2fa8f8;
|
|
}
|
|
.social-link__steam {
|
|
background: #111;
|
|
color: white;
|
|
}
|
|
.social-link__steam:hover {
|
|
background: #222222;
|
|
}
|
|
.social-link__youtube {
|
|
background: #ff0000;
|
|
color: white;
|
|
}
|
|
.social-link__youtube:hover {
|
|
background: #ff5252;
|
|
}
|
|
.social-link__newgrounds {
|
|
background: #f05e09;
|
|
color: white;
|
|
}
|
|
.social-link__newgrounds:hover {
|
|
background: #ff843d;
|
|
}
|
|
.social-link__gog,.social-link__itch{
|
|
background: #777777;
|
|
}
|
|
.social-link__gog div,.social-link__itch div{
|
|
height: unset;
|
|
width: 30px;
|
|
left: 50%;
|
|
position: relative;
|
|
top: 4px;
|
|
transform: translateX(-50%);
|
|
}
|
|
.social-link__twitch {
|
|
background: #9146ff;
|
|
color: white;
|
|
}
|
|
.social-link__twitch:hover {
|
|
background: #aa70ff;
|
|
}
|
|
|
|
.social-link__twitch .social-link-icon{
|
|
height: 37px;
|
|
width: unset;
|
|
margin-left: 5px;
|
|
}
|
|
|
|
.socials-blurb{
|
|
text-align: center;
|
|
}
|
|
|
|
|
|
.summary {
|
|
max-width: 860px;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
padding-left: 0.8rem;
|
|
padding-right: 0.8rem;
|
|
|
|
color: #e5e3f5;
|
|
font-size: 1.2rem;
|
|
}
|
|
|
|
.paragraph-title {
|
|
color: #a3dbb8;
|
|
}
|
|
|
|
.screenshot-container {
|
|
margin-top: 3rem;
|
|
|
|
width: 100%;
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
justify-content: space-evenly;
|
|
|
|
}
|
|
|
|
.screenshot {
|
|
margin: 0.4rem;
|
|
padding: 0;
|
|
max-width: 320px;
|
|
max-height: 180px;
|
|
border: 3px solid #4960A2;
|
|
|
|
color: white; /* Ensures alt text works */
|
|
|
|
transition-property: border-color;
|
|
transition-property: transform;
|
|
transition-duration: 100ms;
|
|
}
|
|
.screenshot:hover {
|
|
transform: scale(1.1);
|
|
border-color: #9894E1;
|
|
}
|
|
.screenshot img {
|
|
display: block;
|
|
position: relative;
|
|
|
|
object-fit:scale-down;
|
|
max-width: 100%;
|
|
max-height: 100%;
|
|
|
|
/* pointer-events: none; */
|
|
}
|
|
.screenshot a {
|
|
display: block;
|
|
position: relative;
|
|
width: 320px;
|
|
height: 180px;
|
|
top: -180px;
|
|
}
|
|
|
|
|
|
.screenshot--large {
|
|
max-width: fit-content;
|
|
max-height: fit-content;
|
|
margin: 0.8rem;
|
|
order: -1;
|
|
}
|
|
.screenshot--large:hover {
|
|
transform: none;
|
|
}
|
|
|
|
footer {
|
|
margin-top: auto;
|
|
width: 100%;
|
|
left: 0;
|
|
text-align: left;
|
|
background: linear-gradient(45deg, #7b70bf, #ae9fdc);
|
|
border-style: solid;
|
|
border-width: 0;
|
|
border-top-width: 2px;
|
|
border-image: linear-gradient(to left, #c9d0d6, #3d389c) 1;
|
|
}
|
|
|
|
.footerlogo{
|
|
display: inline-block;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
position: relative;
|
|
background-image: url(img/footerlogo.png);
|
|
background-size: contain;
|
|
background-repeat: no-repeat;
|
|
background-position: bottom;
|
|
width: 400px;
|
|
height: 6rem;
|
|
}
|
|
|
|
a.jslicense, .email, .attributions {
|
|
display: block;
|
|
color: white;
|
|
text-align: center;
|
|
width: max-content;
|
|
margin-left: 20px;
|
|
position: relative;
|
|
margin-top: 0.5rem;
|
|
}
|
|
|
|
.footerlinks{
|
|
position: absolute;
|
|
}
|
|
|
|
@-moz-document url-prefix(){
|
|
.social-link__twitch .social-link-icon{
|
|
width: 35px !important; /* fuck you */
|
|
}
|
|
}
|
|
|
|
@media only screen and (max-width: 1120px) {
|
|
|
|
.social-link__twitch div.social-link-icon{
|
|
left: 50%;
|
|
position: relative;
|
|
top: 15px;
|
|
transform: translateX(-50%);
|
|
margin-left: 0;
|
|
}
|
|
|
|
.social-link__itch div{
|
|
top: 17px;
|
|
}
|
|
|
|
.social-link__gog div{
|
|
top: 14px;
|
|
}
|
|
|
|
.app {
|
|
margin-left: 5px;
|
|
margin-right: 5px;
|
|
}
|
|
|
|
.social-link-container {
|
|
flex-wrap: wrap;
|
|
}
|
|
.social-link {
|
|
font-size: 0;
|
|
width: 64px;
|
|
height: 64px;
|
|
padding: 0;
|
|
border-radius: 64px;
|
|
}
|
|
.social-link-icon {
|
|
width: 64px;
|
|
height: 64px;
|
|
}
|
|
|
|
.summary {
|
|
background-color: #000000bb;
|
|
border-top: #a3dbb8 solid 2px;
|
|
padding-top: 1rem;
|
|
padding-bottom: 1rem;
|
|
}
|
|
|
|
.footerlogo{
|
|
background-image: url(img/cavemanonlogo.png);
|
|
transform: none;
|
|
left: unset;
|
|
float: right;
|
|
width: 170px;
|
|
background-position: right top;
|
|
margin-right: 20px;
|
|
}
|
|
}
|