oreolek/inkjs-boilerplate
1
0
Fork 0
Code Releases 1 Activity

Styling

Browse source
This commit is contained in:
Alexander Yakovlev 2020-11-08 00:13:24 +07:00
parent dc45caa4b2
commit 75213b076f
Signed by: oreolek
GPG key ID: 1CDC4B7820C93BD3
2 changed files with 91 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
html/index.html
View file

@ -8,15 +8,10 @@
</head>
<body>
<div id="page" class="container">
<div class="row">
<div class="col-12">
<button id="restart" type="button" class="btn btn-warning">Restart</button>
<hr>
</div>
</div>
<button id="restart" type="button" class="btn btn-warning">Restart</button>
<div class="row">
<div id="content" class="col-12"></div>
<div class="col-md-10 col-md-offset-1">
<div class="col-10 offset-1">
<ul id="options">
</ul>
</div>

93
scss/style.scss
View file

@ -1,5 +1,43 @@
@import '~bootstrap/scss/functions';
@import '~bootstrap/scss/variables';
$font-family-sans-serif: 'PT Sans','Open Sans',"Helvetica Neue", Helvetica, Arial, sans-serif;
$headings-font-family: "PT Sans Caption",$font-family-sans-serif;
$font-family-base: $font-family-sans-serif;
$grey-color: #cc925d;
$body-bg: #E4CDD4;
$content-bg: rgba(202,158,185, 0.4);
$body-color: #3A2D42;
$link-color: #7D6393;
$link-button-background: rgb(202, 158, 185);
$link-button-background-hover: $body-color;
$link-button-foreground: $body-color;
$link-button-foreground-hover: $body-bg;
$status-color: #7E5980;
$btn-bg: grey;
$btn-color: lighten($btn-bg, 50%);
$secondary-bg: #F1EED9;
$primary: $link-color;
$brand-primary: lighten($body-color, 20%);
$brand-danger: darken($body-bg, 30%);
$waycolor: $link-color;
$animation_duration: 2s;
$enable-rounded: true;
$enable-shadows: false;
$enable-gradients: false;
$enable-transitions: false;
$enable-hover-media-query: false;
$enable-grid-classes: true;
$enable-print-styles: true;
$ok-color: $link-color;
$neutral-color: brown;
$warning-color: darkred;
@import '~bootstrap/scss/mixins';
@import '~bootstrap/scss/root';
@import '~bootstrap/scss/reboot';
@ -11,18 +49,65 @@
@import '~bootstrap/scss/utilities';
@import '~bootstrap/scss/print';
h1,h2,h3 {
font-weight: bold;
text-align: center;
}
h1 {
color: #333;
}
h2 {
color: #666;
}
#page {
background: $content-bg;
border-radius: 5px;
margin-top: $font-size-base;
padding-top: ($font-size-base / 2);
}
#restart {
position: fixed;
top: $font-size-base / 2;
right: $font-size-base / 2;
}
#content {
.subtitle {
display: none;
}
}
#options {
a {
display: block;
padding: ($font-size-base * 0.5);
border: 1px solid #876;
padding: 0;
list-style-type: none;
border-radius: 4px;
&:empty {
display: none;
}
li {
background-color: $link-button-background;
padding: 0.5em;
border-bottom: 1px solid #876;
&,a {
color: $link-button-foreground;
}
}
li:hover {
background-color: $link-button-background-hover;
cursor: pointer;
&,a {
color: $link-button-foreground-hover;
}
}
li:last-child {
border-bottom: none;
}
.subtitle {
display: block;
font-size: ($font-size-base * 0.5);
font-size: ($font-size-base * 0.9);
font-style: italic;
}
}
.room-start {
border-top: none;
}