mirror of
https://github.com/th3r00t/pyShelf.git
synced 2026-04-28 01:59:35 -04:00
Added responsive css for various resolutions, more work needed
This commit is contained in:
Raelon Masters
78
src/interface/static/css/main.css
vendored
78
src/interface/static/css/main.css
vendored
@@ -1,18 +1,18 @@
|
||||
body {
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
background-color: #FFF;
|
||||
background-color: #676767;
|
||||
background-image: url(/static/img/bookshelf.jpg);
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
#app {
|
||||
display: grid;
|
||||
grid-template-areas: "nav" "main";
|
||||
background-image: url(/static/img/fractal-bg-dark.png);
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
/* background-origin: unset; */
|
||||
grid-row-gap: 20px;
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
.clear {
|
||||
@@ -20,7 +20,6 @@ body {
|
||||
}
|
||||
|
||||
.app_header {
|
||||
grid-area: app_header;
|
||||
margin: 0px;
|
||||
display: grid;
|
||||
grid-template-areas: "title nav_left_top nav_center_top nav_right_top";
|
||||
@@ -59,7 +58,7 @@ body {
|
||||
font-size: 17px;
|
||||
text-align: center;
|
||||
padding: 0px 0px 0px 0px;
|
||||
color: deepskyblue;
|
||||
color: #ffffffc7;
|
||||
}
|
||||
|
||||
.shadow {
|
||||
@@ -88,8 +87,6 @@ body {
|
||||
/* grid-template-rows: auto; */
|
||||
grid-template-areas: "nav_l shelf";
|
||||
grid-template-columns: min-content auto;
|
||||
background-color: white;
|
||||
background-image: url(/static/img/fractal-bg-dark.png);
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
@@ -230,7 +227,7 @@ body {
|
||||
.nav_search {
|
||||
/* margin: 0px 5px 0px 0px; */
|
||||
/* border-radius: 5px; */
|
||||
border: 1px solid deepskyblue;
|
||||
border: 1px solid #ffffffc7;
|
||||
/* max-height: 17px; */
|
||||
/* padding: 0px 5px; */
|
||||
/* margin-left: 0px; */
|
||||
@@ -264,15 +261,16 @@ body {
|
||||
display: flex;
|
||||
grid-area: horiz_nav_main;
|
||||
align-items: center;
|
||||
/* justify-content: center; */
|
||||
justify-content: center;
|
||||
padding: 5px 5px 0px 5px;
|
||||
min-width: max-content;
|
||||
color: deepskyblue;
|
||||
color: #ffffffc7;
|
||||
font-size: smaller;
|
||||
}
|
||||
|
||||
#hdr_branding {
|
||||
grid-area: left_col;
|
||||
display: none;
|
||||
}
|
||||
|
||||
#hdr_nav_center {
|
||||
@@ -283,26 +281,27 @@ body {
|
||||
|
||||
#hdr_nav_right {
|
||||
grid-area: right_col;
|
||||
color: deepskyblue;
|
||||
color: #ffffffc7;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.nav_icon {
|
||||
font-size: larger;
|
||||
color: deepskyblue;
|
||||
color: #ffffffc7;
|
||||
}
|
||||
|
||||
.input_box {
|
||||
border: 1px solid deepskyblue;
|
||||
background-color: #f0ffff00;
|
||||
color: deepskyblue;
|
||||
border: 1px solid #ffffffc7;
|
||||
background-color: #0000006e;
|
||||
color: #ffffffc7;
|
||||
padding: 0px 5px;
|
||||
text-align: center;
|
||||
font-size: medium;
|
||||
}
|
||||
|
||||
.ui_btn_w_icon {
|
||||
background-color: deepskyblue;
|
||||
background-color: #ffffffc7;
|
||||
/* border-radius: 5px; */
|
||||
padding: 0px 5px;
|
||||
font-size: small;
|
||||
@@ -320,28 +319,31 @@ body {
|
||||
list-style-type: none;
|
||||
display: flex;
|
||||
background-color: #00000045;
|
||||
padding: 0px 5px 0px 5px;
|
||||
margin: 0px auto -1px 0px;
|
||||
padding: 0px;
|
||||
margin: 0px auto;
|
||||
}
|
||||
|
||||
.active_tab {
|
||||
background-color: deepskyblue;
|
||||
color: black !important;
|
||||
border-bottom: 1px solid black !important;
|
||||
/* border-right: 1px dashed white; */
|
||||
background-color: #ffffffc7 !important;
|
||||
color: #000000 !important;
|
||||
border-bottom: 1px solid #000000 !important;
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
.nav_menu_tab {
|
||||
min-width: 5vw;
|
||||
min-width: 8vw;
|
||||
margin: 0px auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
padding: 0px 0px 0px 5px;
|
||||
font-size: smaller;
|
||||
font-size: medium;
|
||||
border-bottom: 1px solid;
|
||||
color: deepskyblue;
|
||||
cursor: pointer;
|
||||
background-color: #282828;
|
||||
color: #ffffff;
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
.search_button {
|
||||
@@ -354,9 +356,7 @@ body {
|
||||
|
||||
#shelf_nav {
|
||||
display: grid;
|
||||
grid-template-areas:
|
||||
"horiz_nav_hdr"
|
||||
"horiz_nav_main";
|
||||
grid-template-areas: "horiz_nav_hdr" "horiz_nav_main";
|
||||
grid-area: nav;
|
||||
list-style-type: none;
|
||||
/* background-color: #6767677a; */
|
||||
@@ -366,7 +366,7 @@ body {
|
||||
padding-inline-start: 0px;
|
||||
border-bottom-left-radius: 5px;
|
||||
border-bottom-right-radius: 5px;
|
||||
/* min-width: 1645px; */
|
||||
min-width: 1645px;
|
||||
/* position: fixed; */
|
||||
}
|
||||
|
||||
@@ -409,10 +409,13 @@ p {
|
||||
}
|
||||
|
||||
.shelf_item {
|
||||
background-color: #ffffff2e;
|
||||
background-color: #0000006e;
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
backdrop-filter: blur(10px);
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 5fr;
|
||||
grid-template-areas: "thumb details";
|
||||
grid-template-areas:
|
||||
"thumb details";
|
||||
/* grid-template-rows: auto; */
|
||||
margin: 0 10px 25px 10px;
|
||||
border: 0px solid #ffffff2e;
|
||||
@@ -450,9 +453,10 @@ a.book_link {
|
||||
/* justify-content: center; */
|
||||
align-items: center;
|
||||
/* text-align: center; */
|
||||
font-family: "Ubuntu Mono", monospace;
|
||||
font-family: "Ubuntu", monospace;
|
||||
font-size: medium;
|
||||
padding: 0px 5px 0px;
|
||||
margin: 5px 0px 0px 0px;
|
||||
/* background-color: #676767; */
|
||||
}
|
||||
|
||||
@@ -460,7 +464,7 @@ a.book_link {
|
||||
grid-area: book_author;
|
||||
font-family: serif;
|
||||
font-style: oblique;
|
||||
font-size: medium;
|
||||
font-size: small;
|
||||
padding: 0px 5px 0px;
|
||||
margin: 0px 0px 0px 5px;
|
||||
}
|
||||
@@ -476,7 +480,7 @@ a.book_link {
|
||||
grid-area: book_tags;
|
||||
font-size: small;
|
||||
padding: 0px 5px 0px;
|
||||
color: deepskyblue;
|
||||
color: #ffffffc7;
|
||||
font-style: italic;
|
||||
font-size: xx-small;
|
||||
margin-bottom: 5px;
|
||||
|
||||
55
src/interface/static/css/main.scss
vendored
55
src/interface/static/css/main.scss
vendored
@@ -1,9 +1,17 @@
|
||||
$ui-color-1: deepskyblue;
|
||||
$ui-background-img: url(/static/img/fractal-bg-dark.png);
|
||||
$ui-color-1: #ffffffc7;
|
||||
$ui-color-2: #282828;
|
||||
$ui-color-3: #676767;
|
||||
$ui-font-color-1: #000000;
|
||||
$ui-font-color-2: #ffffff;
|
||||
$ui-shelf-item-color: #0000006e;
|
||||
$ui-background-img: url(/static/img/bookshelf.jpg);
|
||||
body {
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
background-color: #FFF;
|
||||
background-color: $ui-color-3;
|
||||
background-image: $ui-background-img;
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
@@ -12,11 +20,10 @@ body {
|
||||
grid-template-areas:
|
||||
"nav"
|
||||
"main";
|
||||
background-image: $ui-background-img;
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
//background-image: $ui-background-img;
|
||||
/* background-origin: unset; */
|
||||
grid-row-gap: 20px;
|
||||
// grid-row-gap: 20px;
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
.clear {
|
||||
@@ -24,7 +31,7 @@ body {
|
||||
}
|
||||
|
||||
.app_header {
|
||||
grid-area: app_header;
|
||||
//grid-area: a#282828;
|
||||
margin: 0px;
|
||||
display: grid;
|
||||
grid-template-areas:
|
||||
@@ -94,8 +101,8 @@ body {
|
||||
grid-template-areas:
|
||||
"nav_l shelf";
|
||||
grid-template-columns: min-content auto;
|
||||
background-color: white;
|
||||
background-image: $ui-background-img;
|
||||
//background-color: white;
|
||||
//background-image: $ui-background-img;
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
@@ -289,6 +296,7 @@ body {
|
||||
}
|
||||
#hdr_branding{
|
||||
grid-area: left_col;
|
||||
display: none;
|
||||
}
|
||||
#hdr_nav_center{
|
||||
display: flex;
|
||||
@@ -310,10 +318,11 @@ body {
|
||||
}
|
||||
.input_box{
|
||||
border: 1px solid $ui-color-1;
|
||||
background-color: #f0ffff00;
|
||||
background-color: $ui-shelf-item-color;
|
||||
color: $ui-color-1;
|
||||
padding: 0px 5px;
|
||||
text-align: center;
|
||||
font-size: medium;
|
||||
}
|
||||
.ui_btn_w_icon{background-color: $ui-color-1;/* border-radius: 5px; */padding: 0px 5px;font-size: small;display: flex;justify-content: center;align-items: center;/* min-width: 55px; */}
|
||||
.ui_icon_notxt{
|
||||
@@ -327,9 +336,11 @@ body {
|
||||
margin: 0px auto;
|
||||
}
|
||||
.active_tab{
|
||||
background-color: $ui-color-1;
|
||||
color: black !important;
|
||||
border-bottom: 1px solid black !important;
|
||||
background-color: $ui-color-1 !important;
|
||||
color: $ui-font-color-1 !important;
|
||||
border-bottom: 1px solid $ui-font-color-1 !important;
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
.nav_menu_tab{
|
||||
min-width: 8vw;
|
||||
@@ -338,9 +349,12 @@ body {
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
padding: 0px 0px 0px 5px;
|
||||
font-size: smaller;
|
||||
font-size: medium;
|
||||
border-bottom: 1px solid;
|
||||
color: $ui-color-1;
|
||||
background-color: $ui-color-2;
|
||||
color: $ui-font-color-2;
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
.search_button{
|
||||
/* color: aliceblue; */
|
||||
@@ -406,7 +420,9 @@ p {
|
||||
}
|
||||
|
||||
.shelf_item {
|
||||
background-color: #ffffff2e;
|
||||
background-color: $ui-shelf-item-color;
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
backdrop-filter: blur(10px);
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 5fr;
|
||||
grid-template-areas:
|
||||
@@ -452,16 +468,17 @@ a.book_link {
|
||||
/* justify-content: center; */
|
||||
align-items: center;
|
||||
/* text-align: center; */
|
||||
font-family: 'Ubuntu Mono', monospace;
|
||||
font-family: 'Ubuntu', monospace;
|
||||
font-size: medium;
|
||||
padding: 0px 5px 0px;
|
||||
margin: 5px 0px 0px 0px;
|
||||
/* background-color: #676767; */
|
||||
}
|
||||
.book_author {
|
||||
grid-area: book_author;
|
||||
font-family: serif;
|
||||
font-style: oblique;
|
||||
font-size: medium;
|
||||
font-size: small;
|
||||
padding: 0px 5px 0px;
|
||||
margin: 0px 0px 0px 5px;
|
||||
}
|
||||
|
||||
58
src/interface/static/css/mobile.css
vendored
58
src/interface/static/css/mobile.css
vendored
@@ -1,4 +1,38 @@
|
||||
@media only screen and (max-width: 600px) {
|
||||
@media only screen and (max-width: 1366px) {
|
||||
#vert-nav{
|
||||
display: none;
|
||||
}
|
||||
.book_description{
|
||||
font-size: xx-small;
|
||||
}
|
||||
#shelf_nav{
|
||||
min-width: auto;
|
||||
}
|
||||
.nav_menu_tab{
|
||||
font-size: small;
|
||||
}
|
||||
.shelf_item{
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1024px) {
|
||||
#vert-nav{
|
||||
display: none;
|
||||
}
|
||||
.book_description{
|
||||
font-size: xx-small;
|
||||
}
|
||||
#shelf_nav{
|
||||
min-width: auto;
|
||||
}
|
||||
.nav_menu_tab{
|
||||
font-size: small;
|
||||
}
|
||||
.shelf_item{
|
||||
max-width: min-content;
|
||||
}
|
||||
}
|
||||
@media only screen and (max-width: 400px) {
|
||||
.vert-nav{
|
||||
list-style: None;
|
||||
padding: 0px;
|
||||
@@ -8,7 +42,7 @@
|
||||
.vert-nav-item {}
|
||||
|
||||
#vert-nav {
|
||||
display: initial;
|
||||
display: none;
|
||||
list-style: None;
|
||||
padding: 0px 0px 0px 0px;
|
||||
margin: 0px;
|
||||
@@ -17,4 +51,24 @@
|
||||
/* border-right: 1px solid; */
|
||||
background: linear-gradient(to right, #333 51%, #7d7a7aed 181%);
|
||||
}
|
||||
#shelf_nav {
|
||||
min-width: auto;
|
||||
}
|
||||
.shelf_item {
|
||||
grid-template-areas:
|
||||
"thumb details";
|
||||
max-width: initial;
|
||||
min-width: -webkit-fill-available;
|
||||
margin: 0px 0px 40px auto;
|
||||
}
|
||||
.book_thumb {
|
||||
max-width: -webkit-fill-available;
|
||||
}
|
||||
.app_body{
|
||||
margin: 0px 50px;
|
||||
}
|
||||
#book_shelf{
|
||||
display: grid;
|
||||
grid-template-columns: auto auto;
|
||||
}
|
||||
}
|
||||
|
||||
BIN
src/interface/static/img/bookshelf.jpg
vendored
Normal file
BIN
src/interface/static/img/bookshelf.jpg
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 544 KiB |
2
src/interface/templates/index.html
vendored
2
src/interface/templates/index.html
vendored
@@ -10,7 +10,7 @@
|
||||
<link type="text/css" rel="stylesheet" href="/static/css/mobile.css" />
|
||||
<link type="text/css" rel="stylesheet" href="/static/css/all-fa.css" />
|
||||
<title>pyShelf E-Book Server</title>
|
||||
<link href="https://fonts.googleapis.com/css?family=Audiowide&family=Montserrat:wght@300&family=Gruppo&family=Cinzel+Decorative&family=Ubuntu+Mono&display=swap" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Gruppo&family=Montserrat&family=Ubuntu&display=swap" rel="stylesheet">
|
||||
<script src="/static/js/jquery-3.4.1.min.js" type="text/javascript"></script>
|
||||
<!-- Place this tag in your head or just before your close body tag. -->
|
||||
<script async defer src="https://buttons.github.io/buttons.js"></script>
|
||||
|
||||
Reference in New Issue
Block a user