eswyft/4in1_ws_web
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

improve header; improve cover on mobile

Browse Source
This commit is contained in:
E. S. 2024-02-02 02:22:19 +00:00
parent 69302d0a44
commit 5aabe046d3
5 changed files with 44 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
htdocs/scss/app/common.scss
View File

@ -119,7 +119,7 @@ p, p code {
padding: 0 $side-padding; padding: 0 $side-padding;
} }
.page-content-inner { .page-content-inner {
padding: $base-padding 0; padding: 0 0 $base-padding 0;
} }
@ -284,14 +284,18 @@ table.contacts div.note {
.index-book { .index-book {
//margin-top: -10px; //margin-top: -10px;
//padding-top: 5px; //padding-top: 5px;
&-image { &-image-wrap {
float: left; float: left;
width: 300px; width: 300px;
height: 463px; height: 463px;
}
&-image {
background: url(/img/cover.jpg?1) no-repeat 0 0; background: url(/img/cover.jpg?1) no-repeat 0 0;
background-size: 600px 463px; background-size: 600px 463px;
display: block; display: block;
text-decoration: none; text-decoration: none;
width: 300px;
height: 463px;
outline: none; outline: none;
} }
&-updates { &-updates {

13
htdocs/scss/app/head.scss
View File

@ -10,14 +10,14 @@
.head-logo-wrap { .head-logo-wrap {
display: table-cell; display: table-cell;
padding: 8px 0; padding: 10px 0;
} }
.head-logo { .head-logo {
padding: 10px 14px; padding: 10px 14px;
margin-left: -14px; margin-left: -14px;
z-index: 5; z-index: 5;
font-weight: bold; font-weight: bold;
font-size: 16px; font-size: $fs + 2px;
left: 0; left: 0;
background-color: transparent; background-color: transparent;
display: inline-block; display: inline-block;
@ -36,13 +36,18 @@
&-author { &-author {
font-weight: normal; font-weight: normal;
color: $grey; color: $grey;
//font-size: $fs;
//position: relative;
//top: -5px;
} }
} }
&-subtitle { &-subtitle {
font-size: 13px; font-size: 14px;
color: $fg; color: $fg;
font-weight: normal; font-weight: normal;
padding-top: 2px;
line-height: 18px;
} }
} }
//body:not(.theme-changing) .head-logo { //body:not(.theme-changing) .head-logo {
@ -57,7 +62,7 @@
} }
a.head-item { a.head-item {
color: $fg; color: $fg;
font-size: $fs - 1px; font-size: $fs;
display: inline-block; display: inline-block;
padding: 8px 12px; padding: 8px 12px;
vertical-align: middle; vertical-align: middle;

31
htdocs/scss/app/mobile.scss
View File

@ -14,13 +14,26 @@ textarea {
padding-bottom: 4px; padding-bottom: 4px;
} }
.head-logo { .head-logo {
border: 1px $border-color solid;
border-radius: 6px;
display: block; display: block;
text-align: center; text-align: center;
font-size: $fs;
box-sizing: border-box;
padding-top: 14px;
padding-bottom: 14px;
&:hover {
border-color: $hover-hl;
}
//&-subtitle {
// font-size: $fs - 2px;
//}
} }
.head-items { .head-items {
text-align: center; text-align: center;
padding: 0 0 8px; padding: 8px 0 16px;
white-space: nowrap; white-space: nowrap;
overflow-x: auto; overflow-x: auto;
overflow-y: hidden; overflow-y: hidden;
@ -50,14 +63,20 @@ a.head-item:last-child > span {
.index-book-image { .index-book-image {
float: none; float: none;
width: 100%; width: 300px;
padding-bottom: 154%;
//max-width: 300px;
margin: 0 auto 15px;
background-size: 200%;
height: auto; height: auto;
max-width: 100%;
padding-bottom: 154%;
background-size: 200%;
background-position: 0 0 !important; background-position: 0 0 !important;
} }
.index-book-image-wrap {
float: none;
width: 300px;
height: auto;
margin: 0 auto 15px;
max-width: 100%;
}
.index-book-updates { .index-book-updates {
float: none; float: none;
text-align: center; text-align: center;

2
skin/base.phps
View File

@ -208,7 +208,7 @@ return <<<HTML
<div class="head-logo"> <div class="head-logo">
<a href="/"> <a href="/">
<div class="head-logo-title">4in1 <span class="head-logo-title-author">by idb</span></div> <div class="head-logo-title">4in1 <span class="head-logo-title-author">by idb</span></div>
<div class="head-logo-subtitle">Mask of Shakespeare, Mysteries of Bacon,<br/>Book by Cartier, Secrets of the NSA</div> <div class="head-logo-subtitle">Mask of Shakespeare, Mysteries of Bacon,<br>Book by Cartier, Secrets of the NSA</div>
</a> </a>
</div> </div>
</div> </div>

4
skin/main.phps
View File

@ -9,7 +9,9 @@ function index($ctx) {
return <<<HTML return <<<HTML
<div class="page"><div class="blog-post-text"> <div class="page"><div class="blog-post-text">
<div class="clearfix index-book"> <div class="clearfix index-book">
<a class="index-book-image" id="index-book-image" href="https://files.4in1.ws/Images/4in1-cover-en.png" target="_blank" data-link-template="https://files.4in1.ws/Images/4in1-cover-{lang}.png"></a> <div class="index-book-image-wrap">
<a class="index-book-image" id="index-book-image" href="https://files.4in1.ws/Images/4in1-cover-en.png" target="_blank" data-link-template="https://files.4in1.ws/Images/4in1-cover-{lang}.png"></a>
</div>
<a class="index-dl-line" href="https://files.4in1.ws/4in1-en.pdf?4" onmouseenter="IndexPage.setCoverLang('en')"> <a class="index-dl-line" href="https://files.4in1.ws/4in1-en.pdf?4" onmouseenter="IndexPage.setCoverLang('en')">
<b>Download in English</b><br> <b>Download in English</b><br>