diff --git a/web/_includes/top.html b/web/_includes/top.html index bd01a0e..6a1179a 100644 --- a/web/_includes/top.html +++ b/web/_includes/top.html @@ -4,15 +4,14 @@

A fun simulation game where you mess with people's lives

+

Play the demo or buy the game

-

Play the free demo

itch.io
-

Get the game

Steam diff --git a/web/style.css b/web/style.css index ff0c64b..c7015e8 100644 --- a/web/style.css +++ b/web/style.css @@ -1,175 +1,180 @@ -html { - scroll-padding-top: 70px; -} - -body { - position: relative; - font-family: Lato, sans-serif; -} - -.navbar-container { - max-width: 950px; -} - -.top { - background-image: url("media/large_background.png"); - background-size: cover; - color: white; -} - -.top a:link, -.top a:visited { - color: lightsteelblue; -} - -.top-content { - text-align: center; - padding-top: 70px; -} - -.section { - width: 95%; - max-width: 950px; - margin-top: 50px; - margin-bottom: 50px; - margin-left: auto; - margin-right: auto; -} - -.site { - padding-bottom: 20px; -} - -.top-container { - background-color: rgba(0, 0, 0, 0.4); - border-radius: 5px; - margin-bottom: 30px; - margin-top: 120px; - padding: 20px; -} - -.link { - display: inline-block; - width: 150px; -} - -.feature { - margin-top: 40px; - margin-bottom: 40px; -} - -.feature-banner { - position: relative; -} - -.feature ul { - margin-top: 1rem; -} - -.feature-title { - margin: 10px; - padding: 10px; - color: white; - background: rgb(0, 0, 0, 0.7); - position: absolute; - text-align: center; - transform: translate(-50%, 0); - left: 50%; - top: 0; - white-space: nowrap; -} - -.feature-title h2 { - margin-bottom: 0; -} - -.footer { - text-align: center; - padding: 15px; -} - -.devlog { - margin-bottom: 20px; - min-width: 250px; - width: 45%; - display: inline-block; -} - -.devlog-date { - margin-bottom: 10px; -} - -.devlog-title { - margin-bottom: 0; -} - -.trailer { - position: relative; - width: 100%; - height: 0; - padding-bottom: 56.25%; -} - -.trailer iframe { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; -} - -.roadmap { - width: 75%; - min-width: 250px; - margin-left: auto; - margin-right: auto; -} - -.roadmap-entry { - margin: 20px; - margin-top: 40px; - margin-bottom: 40px; -} - -.roadmap-entry-left { - text-align: left; -} - -.roadmap-entry-right { - text-align: right; -} - -.roadmap-entry-important { - text-align: center; - margin-top: 60px; - margin-bottom: 60px; -} - -.mailing-list { - width: 80%; - margin-left: auto; - margin-right: auto; - margin-top: 40px; - padding: 20px; - border-radius: 5px; -} - -@media (max-width: 576px) { - - .top-content { - max-width: 90%; - } - - .top-container img { - max-width: 150px; - } - - .top-container h3 { - font-size: 1.5rem; - } - - .top-content { - padding-top: 40px; - } - -} +html { + scroll-padding-top: 70px; +} + +body { + position: relative; + font-family: Lato, sans-serif; +} + +.navbar-container { + max-width: 950px; +} + +.top { + background-image: url("media/large_background.png"); + background-size: cover; + color: white; +} + +.top a:link, +.top a:visited { + color: lightsteelblue; +} + +.top-content { + text-align: center; + padding-top: 70px; +} + +.section { + width: 95%; + max-width: 950px; + margin-top: 50px; + margin-bottom: 50px; + margin-left: auto; + margin-right: auto; +} + +.site { + padding-top: 20px; + padding-bottom: 30px; +} + +.top-container { + background-color: rgba(0, 0, 0, 0.4); + border-radius: 5px; + margin-bottom: 30px; + margin-top: 120px; + padding: 20px; +} + +.link { + display: inline-block; + width: 150px; +} + +.feature { + margin-top: 40px; + margin-bottom: 40px; +} + +.feature-banner { + position: relative; +} + +.feature ul { + margin-top: 1rem; +} + +.feature-title { + margin: 10px; + padding: 10px; + color: white; + background: rgb(0, 0, 0, 0.7); + position: absolute; + text-align: center; + transform: translate(-50%, 0); + left: 50%; + top: 0; + white-space: nowrap; +} + +.feature-title h2 { + margin-bottom: 0; +} + +.footer { + text-align: center; + padding: 15px; +} + +.devlog { + margin-bottom: 20px; + min-width: 250px; + width: 45%; + display: inline-block; +} + +.devlog-date { + margin-bottom: 10px; +} + +.devlog-title { + margin-bottom: 0; +} + +.trailer { + position: relative; + width: 100%; + height: 0; + padding-bottom: 56.25%; +} + +.trailer iframe { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; +} + +.roadmap { + width: 75%; + min-width: 250px; + margin-left: auto; + margin-right: auto; +} + +.roadmap-entry { + margin: 20px; + margin-top: 40px; + margin-bottom: 40px; +} + +.roadmap-entry-left { + text-align: left; +} + +.roadmap-entry-right { + text-align: right; +} + +.roadmap-entry-important { + text-align: center; + margin-top: 60px; + margin-bottom: 60px; +} + +.mailing-list { + width: 80%; + margin-left: auto; + margin-right: auto; + margin-top: 40px; + padding: 20px; + border-radius: 5px; +} + +@media (max-width: 576px) { + + .top-content { + max-width: 90%; + } + + .top-container img { + max-width: 150px; + } + + .top-container h3 { + font-size: 1.5rem; + } + + .top-content { + padding-top: 40px; + } + + .site { + padding-top: 10px; + padding-bottom: 10px; + } +}