Skip to content

GitLab

Commit 64855307 authored by 2dmaster's avatar 2dmaster
Browse files

initial commit

parents
Hide whitespace changes
Inline Side-by-side
.gitignore 0 → 100644
View file @ 64855307
.git
.idea
css/forgotten-books.css 0 → 100644
View file @ 64855307
/*helper classes*/
@font-face {
font-family: 'PT_Sans_normal', sans-serif;
src: url('../fonts/PT_Sans-Web-Regular.ttf');
}
@font-face {
font-family: 'PT_Sans_normal_italic', sans-serif;
src: url('../fonts/PT_Sans-Web-Italic.ttf');
}
@font-face {
font-family: 'PT_Sans_bold', sans-serif;
src: url('../fonts/PT_Sans-Web-Bold.ttf');
}
@font-face {
font-family: 'PT_Sans_bold_italic', sans-serif;
src: url('../fonts/PT_Sans-Web-BoldItalic.ttf');
}
html, body{
font-family: 'PT_Sans_normal' , sans-serif;
}
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
margin:0;
padding:0;
border:0;
outline:0;
vertical-align:baseline;
color: #212121;
}
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
display:block;
}
nav ul {
list-style:none;
}
blockquote, q {
quotes:none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content:'';
content:none;
}
a {
margin:0;
padding:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}
/* change colours to suit your needs */
ins {
background-color:#ff9;
color:#000;
text-decoration:none;
}
/* change colours to suit your needs */
mark {
background-color:#ff9;
color:#000;
font-style:italic;
font-weight:bold;
}
del {
text-decoration: line-through;
}
abbr[title], dfn[title] {
border-bottom:1px dotted;
cursor:help;
}
table {
width: 100%;
border-collapse:collapse;
border-spacing:0;
}
/* change border colour to suit your needs */
hr {
display:block;
height:1px;
border:0;
border-top:1px solid #cccccc;
margin:1em 0;
padding:0;
}
input, select {
vertical-align:middle;
width: 100%;
}
.full-height{
height: 100%;
}
.full-width{
width: 100%;
}
.half-width{
width: 50%;
}
.text-center{
text-align: center;
}
.text-left{
text-align: left;
}
.text-right{
text-align: right;
}
.block{
display: block;
}
.global-container{
margin: 0 auto;
}
.global-container:after{
content: '';
display: block;
width: 100%;
clear: both;
}
.align-left{
float: left;
}
.align-right{
float: right;
}
/*color scheme*/
.primary-text-color{
color: #212121;
}
.secondary-text-color{
color: #727272;
}
.base-background-color{
background-color: #607D8B;
}
.base-background-dark-color{
background-color: #455A64;
}
.base-background-light-color{
background-color: #CFD8DC;
}
.divider-color{
background-color: #B6B6B6;
}
/*end color scheme*/
.width-30{
width: 33%;
}
a, a:visited, a:focus{
text-decoration: none;
color: #212121;
}
a:hover{
text-decoration: underline;
}
@media (min-width: 320px) {
.global-container{
padding: 0 15px;
}
}
@media (min-width: 768px) {
.global-container {
width: 750px;
margin: 0 auto;
}
}
@media (min-width: 992px) {
.global-container {
width: 970px;
margin: 0 auto;
}
}
@media (min-width: 1200px) {
.global-container {
width: 1170px;
margin: 0 auto;
}
}
@media (min-width: 1600px) {
.global-container {
width: 1470px;
margin: 0 auto;
}
}
body,
.menu-bar-overlay{
padding-top: 65px;
}
.demo-section{
border: 1px solid #CFD8DC;
padding: 15px;
margin: 0 0 30px 0;
}
.base-form{
position: relative;
}
.form-label{
display: inline-block;
position: relative;
padding-left: 25px;
}
.form-field{
padding: 10px 0;
}
.form-input{
display: block;
font-weight: 200;
font-size: 16px;
padding: 30px 0 15px 15px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin:0 0 16px 0;
width: 100%;
outline: 0;
border: none;
border-top: 1px solid #DEE2E5;
border-bottom: 1px solid #DEE2E5;
background-color: transparent;
background-image: none;
-webkit-tap-highlight-color: transparent;
transition: color , background-color 0.6s ease;
}
.form-input:focus{
background-color: #f9f9f9;
transition: color , background-color 0.6s ease;
}
.form-input:focus::-webkit-input-placeholder {
color:#283036;
transition: color , background-color 0.6s ease;
}
.form-input:focus::-moz-placeholder {
color:#283036;
transition: color , background-color 0.6s ease;
}/* Firefox 19+ */
.form-input:focus:-moz-placeholder {
color:#283036;
transition: color , background-color 0.6s ease;
}/* Firefox 18- */
.form-input:focus:-ms-input-placeholder {
color:#283036;
transition: color , background-color 0.6s ease;
}
.form-input.invalid{
border-bottom: 2px solid #D0021B;
color: #D0021B;
}
.form-input.invalid::-webkit-input-placeholder {
color:#D0021B;
transition: color , background-color 0.6s ease;
}
.form-input.invalid::-moz-placeholder {
color:#D0021B;
transition: color , background-color 0.6s ease;
}/* Firefox 19+ */
.form-input.invalid:-moz-placeholder {
color:#D0021B;
transition: color , background-color 0.6s ease;
}/* Firefox 18- */
.form-input.invalid:-ms-input-placeholder {
color:#D0021B;
transition: color , background-color 0.6s ease;
}
.form-check-input{
display: none;
}
.form-check-input[type=checkbox] + label,
.form-check-input[type=radio] + label{
display: inline-block;
margin: 5px 0;
}
.form-check-input[type=checkbox] + label:before,
.form-check-input[type=radio] + label:before{
content: '';
display: block;
z-index: 1;
width: 20px;
height: 20px;
border-radius: 3px;
background-color: #cccccc;
box-sizing: border-box;
position: absolute;
left:0;
top:-2px;
transition: background-color 0.3s ease;
}
.form-check-input[type=radio] + label:before{
border-radius: 30px;
}
.form-check-input[type=checkbox]:checked + label:before,
.form-check-input[type=radio]:checked + label:before{
background-color: #0EAB0E;
}
.form-check-input[type=checkbox] + label:after,
.form-check-input[type=radio] + label:after{
content: '\2714';
display: block;
color: white;
font-weight: bold;
position: absolute;
left: 3px;
top:-3px;
opacity: 0;
transition: opacity 0.6s ease;
z-index: 2;
}
.form-check-input[type=radio] + label:after{
content: '\2022';
font-size: 28px;
line-height: 1px;
top:8px;
left:5.5px;
}
.form-check-input[type=checkbox]:checked + label:after,
.form-check-input[type=radio]:checked + label:after{
opacity: 1;
}
.button{
display: block;
width: auto;
padding: 10px 20px;
margin: 5px 0;
text-align: center;
cursor: pointer;
text-decoration: none;
border: none;
outline: none;
position: relative;
transition: background-color .3s ease;
}
.button.icon{
padding: 10px 20px 10px 35px;
display: inline-block;
}
.button.icon:before{
content: '';
display: inline-block;
position: absolute;
color: inherit;
font: inherit;
top:8px;
left:20px;
}
.icon.check:before{
content: '\2714';
top:8px;
}
.icon.dot:before{
content: '\2022';
top:10px;
}
.icon.plus:before{
content: '+';
top:8px;
font-size: 20px;
}
.icon.minus:before{
content: '-';
top:6px;
font-size: 20px;
}
.icon.image-icon{
padding-left: 45px;
}
.icon.image-icon:before{
background-size: 20px 20px;
width: 20px;
height: 20px;
content: '';
}
.image-icon.check:before{
background-image:url("../img/icon.png");
}
.image-icon.book:before{
background-image:url("../img/book-icon.png");
}
.button:hover{
text-decoration: none;
}
.button.inline{
display: inline-block;
}
.button.rounded{
border-radius: 4px;
}
.button.default{
background-color: #cccccc;
}
.button.default:hover{
background-color: #B6B6B6;
}
.button.confirm{
background-color: #0EAB0E;
color: white;
font-weight: 700;
}
.button.confirm:hover{
background-color: #008D00;
}
.button.cancel{
background-color: #F68900;
color: white;
font-weight: 700;
}
.button.cancel:hover{
background-color: #C46D00;
}
.button.info{
background-color: #0488DD;
color: white;
font-weight: 700;
}
.button.info:hover{
background-color: #025C97;
}
.button.critical{
background-color: #FA0027;
color: white;
font-weight: 700;
}
.button.critical:hover{
background-color: #DF0023;
}
.banner{
background-color: red;
}
.banner-image{
max-width: 100%;
height: auto;
border: none;display: block;
}
@media (max-width: 768px){
.banner-image{
display: none;
}
.banner{
height: 250px;
}
}
.menu-bar{
position: fixed;
left:0;
top:0;
width: 100%;
z-index: 999;
padding: 15px 0;
}
.menu-bar:after{
content: '';
display: block;
width: 100%;
clear: both;
}
.menu-bar-logo{
text-transform: uppercase;
font-size: 24px;
font-weight: bold;
}
#menu-bar-toggle-trigger{
display: none;
}
#menu-bar-toggle-trigger:checked ~ .menu-bar{
background-color: transparent;
}
#menu-bar-toggle-trigger:checked ~ .menu-bar-overlay{
z-index: 998;
transition: opacity .6s ease;
opacity: 1;
}
#menu-bar-toggle-trigger:checked ~ .menu-bar .menu-bar-logo{
color: white;
}
#menu-bar-toggle-trigger:checked ~ .menu-bar .menu-toggle-close-text{
display: block;
color: white;
}
#menu-bar-toggle-trigger:checked ~ .menu-bar .menu-toggle-menu-text{
display: none;
}
#menu-bar-toggle-trigger:checked ~ .menu-bar .menu-bar-menu-toggle:before {
-webkit-transform: translate3d(0,5px,0)rotate(45deg);
transform: translate3d(0,5px,0)rotate(45deg);
background-color: white;
}
#menu-bar-toggle-trigger:checked ~ .menu-bar .menu-bar-menu-toggle:after{
-webkit-transform: translate3d(0,-1px,0)rotate(-45deg);
transform: translate3d(0,-1px,0)rotate(-45deg);
background-color: white;
}
.menu-bar-menu-toggle{
position: relative;
padding-left: 20px;
cursor: pointer;
margin-top: 3px;
}
.menu-bar-menu-toggle:before,
.menu-bar-menu-toggle:after,
.menu-bar-menu-toggle .menu-toggle-menu-text:before {
content: "";
width: 15px;
height: 2px;
background-color: #101010;
display: block;
position: absolute;
-webkit-transition: all .3s;
-moz-transition: all .3s;
transition: all .3s;
top: 2px;
left: 0;
}
.menu-bar-menu-toggle:after{
top:50%;
margin-top: -1.5px;
}
.menu-bar-menu-toggle .menu-toggle-menu-text:before{
top:inherit;
bottom: 2px;
}
.menu-toggle-close-text{
display: none;
}
.menu-bar-overlay{