ludumdare37/sass/main.scss

204 lines
3.7 KiB
SCSS
Raw Normal View History

@import "../node_modules/bootstrap/scss/mixins/grid";
@import "mixins";
@import "variables";
// Bootstrap v4 stripped core
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";
@import "../node_modules/bootstrap/scss/normalize";
@import "../node_modules/bootstrap/scss/print";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
// @import "../node_modules/bootstrap/scss/images";
@import "../node_modules/bootstrap/scss/grid";
@import "../node_modules/bootstrap/scss/buttons";
@import "../node_modules/bootstrap/scss/nav";
@import "../node_modules/bootstrap/scss/responsive-embed";
@import "../node_modules/bootstrap/scss/utilities";
body {
overflow-y: scroll;
overflow-x: hidden;
background: $body-bg;
}
// The title block
.title {
margin-top: 3.5em;
@include col(10,12);
@media (min-width: breakpoint-min(sm)) {
@include make-col-offset(1);
}
.label {
margin: 1.5em auto;
@media (min-width: breakpoint-min(sm)) {
@include make-col-offset(2);
@include make-col(8);
}
@media (max-width: breakpoint-min(sm)) {
@include make-col(12);
}
text-align: center;
}
.subtitle {
font-size: smaller;
color: #aaa;
}
h2 {
font-size: 1.5rem;
}
.warnings {
font-size: small;
font-style: italic;
p {
margin-bottom: 1em;
}
}
.noscript_message {
left: 0;
right: 0;
bottom: 0;
position: absolute;
font-size: 0.9em;
font-style: italic;
text-align: center;
color: #943;
}
}
#choices {
@include make-col(12);
}
.fixed {
position: fixed;
left: 0;
right: 0;
top: 0;
z-index: 1000;
width: 100%;
}
#tools_wrapper {
background: $body-bg;
.ways {
padding: 0.5em;
@include make-col(6);
}
.buttons {
@include make-col(6);
text-align: right;
}
button {
display: inline-block;
}
}
#content_wrapper {
background: $text_background;
border-radius: 5px;
}
.content {
@include col(10, 12);
@media (min-width: breakpoint-min(sm)) {
@include make-col-offset(1);
}
.pic {
text-align: center;
margin-bottom: 1em;
}
p {
hyphens: auto;
}
padding: 1em;
ul {
margin: 0;
padding: 0 0 0 1em;
}
ul.options {
padding: 0;
text-align: center;
margin-top: 0.5em;
margin-bottom: 0.7em;
list-style-type: none;
border-radius: 4px;
li {
padding: 0.5em;
}
li:hover {
cursor: pointer;
}
li:last-child {
border-bottom: none;
}
}
section {
border-top: 1px dashed #bbb;
}
.situation-start {
border-top: none;
}
img.right {
float: right;
margin: 1.1em 0 1.1em 1.1em;
}
img.left {
float: left;
margin: 1.1em 1.1em 1.1em 0;
}
h3 {
text-align: center;
}
}
#legal {
margin-top: 1em;
color: darken($body-color, 10%);
font-size: smaller;
#footleft {
@media (min-width: breakpoint-min(sm)) {
@include make-col-offset(2);
@include make-col(5);
}
@media (max-width: breakpoint-max(xs)) {
@include make-col(12);
}
}
#footright {
text-align: right;
@media (min-width: breakpoint-min(sm)) {
@include make-col(3);
@include make-col-offset(2);
}
@media (max-width: breakpoint-max(xs)) {
@include make-col(12);
margin-bottom: 1em;
}
}
}
.way {
color: $waycolor;
margin-right: 1em;
}
.cycle {
color: darkgreen;
border-bottom: darkgreen dashed 1px;
}
ul.options {
border: 1px solid #876;
li {
border-bottom: 1px solid #876;
}
li:hover {
background-color: rgba(153,136,119,0.2);
}
}
#legal {
.muted {
color: grey;
}
}
hr {
width: 50%;
border-color: $body-color;
}
.center {
text-align: center;
}