aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorGravatar Vitaly Takmazov2020-04-28 14:30:20 +0300
committerGravatar Vitaly Takmazov2020-04-28 14:30:20 +0300
commitc35693a6cc903107346dbdafb29a4026048d3e2e (patch)
treeff3ccc6e38f79d71cd8a2d04a5ee8c6f46e11fae
parent6e2f7b0a28adcc3ad79f72d2f3fb5ecbb20b9c09 (diff)
CSS Grid -> position: fixed
-rw-r--r--src/main/assets/style.css145
-rw-r--r--src/main/resources/templates/layouts/default.html14
2 files changed, 117 insertions, 42 deletions
diff --git a/src/main/assets/style.css b/src/main/assets/style.css
index 1224df5e..b182bdbd 100644
--- a/src/main/assets/style.css
+++ b/src/main/assets/style.css
@@ -59,7 +59,6 @@ body {
word-wrap: break-word;
color: var(--text-color);
line-height: 1.4;
- overflow: hidden;
}
button,
@@ -81,9 +80,11 @@ h1,
h2 {
font-weight: normal;
}
+
ul {
list-style-type: none;
}
+
a {
color: var(--link-color);
text-decoration: none;
@@ -92,11 +93,13 @@ img,
hr {
border: none;
}
+
hr {
background: var(--border-color);
height: 1px;
margin: 10px 0;
}
+
pre {
background: #1e2028;
color: #41b645;
@@ -104,14 +107,17 @@ pre {
padding: 6px 20px;
white-space: pre;
}
+
pre::selection {
background: #41b645;
color: #1e2028;
}
+
pre::-moz-selection {
background: #41b645;
color: #1e2028;
}
+
.u {
text-decoration: underline;
}
@@ -123,60 +129,59 @@ pre::-moz-selection {
#app {
height: 100%;
width: 100%;
- overflow: hidden;
-}
-#wrapper {
- display: grid;
- grid-template-areas: "content" "footer";
- grid-template-columns: 100%;
- grid-template-rows: 1fr auto;
- height: 100%;
- width: 100%;
- overflow: hidden;
}
+
#column {
- grid-area: footer;
+ position: fixed;
+ left: 0;
+ bottom: 0;
+ height: 60px;
+ width: 100%;
+ z-index: 10;
+ background: var(--text-background-color);
}
+
#content {
- grid-area: content;
- margin-top: 0;
- overflow: auto;
- -webkit-overflow-scrolling: touch;
-}
-.content--top {
- margin-top: 64px !important;
+ margin-top: 66px;
+ margin-bottom: 66px;
}
+
#minimal_content {
margin: 0 auto;
min-width: 310px;
width: auto;
}
+
.desktop {
display: none;
}
+
*::selection {
background: var(--link-color);
color: var(--main-background-color);
}
+
#header {
background: var(--text-background-color);
border-bottom: 1px solid var(--border-color);
transition: transform 0.2s;
z-index: 10;
- overflow-x: hidden;
position: fixed;
width: 100%;
top: 0;
}
+
#header_wrapper {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
}
+
.header--hidden {
transform: translateY(-100%);
}
+
#footer {
color: #999;
font-size: 10pt;
@@ -193,6 +198,7 @@ pre::-moz-selection {
height: 36px;
width: 110px;
}
+
#logo a {
background: url("logo@2x.png") no-repeat !important;
background-size: cover !important;
@@ -204,30 +210,36 @@ pre::-moz-selection {
white-space: nowrap;
width: 110px;
}
+
#global {
display: flex;
white-space: nowrap;
}
+
#global a {
color: var(--dimmed-link-color);
padding: 14px;
border-bottom: 2px solid transparent;
}
+
#ctitle {
display: flex;
flex: 1;
white-space: nowrap;
overflow: hidden;
}
+
#ctitle a {
padding: 2px 20px;
border-bottom: 2px solid transparent;
text-overflow: ellipsis;
overflow: hidden;
}
+
.l a {
border-bottom: 2px solid transparent;
}
+
#header_wrapper a.active {
background: var(background-color);
border-bottom: 2px solid #ff339a;
@@ -239,6 +251,7 @@ pre::-moz-selection {
border-bottom: 2px solid #ff339a;
cursor: pointer;
}
+
#search input {
background: var(--main-background-color);
border: 1px solid var(--border-color);
@@ -280,6 +293,7 @@ pre::-moz-selection {
#column hr {
margin: 10px 0;
}
+
#column .margtop {
margin-top: 15px;
}
@@ -291,6 +305,7 @@ pre::-moz-selection {
padding: 6px;
text-align: justify;
}
+
#column .inp {
background: var(--main-background-color);
border: 1px solid var(--border-color);
@@ -298,6 +313,7 @@ pre::-moz-selection {
padding: 4px;
width: 222px;
}
+
#column .tags h4 {
color: #88958d;
display: block;
@@ -311,16 +327,20 @@ pre::-moz-selection {
max-width: 48px;
max-height: 48px;
}
+
#ustats li {
font-size: 10pt;
margin: 3px 0;
}
+
#column table.iread {
width: 100%;
}
+
#column table.iread td {
text-align: center;
}
+
#column table.iread img {
height: 48px;
width: 48px;
@@ -337,6 +357,7 @@ pre::-moz-selection {
#minimal_content > h2 {
margin: 1em 0;
}
+
.page {
background: #eee;
padding: 6px;
@@ -359,17 +380,21 @@ article {
padding: 20px;
overflow: auto;
}
+
article time {
color: #88958d;
font-size: 10pt;
}
+
article .ir {
text-align: center;
}
+
article .ir a {
cursor: zoom-in;
display: block;
}
+
article .ir img {
max-width: 100%;
}
@@ -386,15 +411,19 @@ article > nav.l a,
color: #88958d;
margin-right: 15px;
}
+
article .likes {
padding-left: 20px;
}
+
article .replies {
margin-left: 18px;
}
+
article .tags {
margin-top: 3px;
}
+
.msg-tags {
margin-top: 12px;
min-height: 1px;
@@ -407,6 +436,7 @@ article .tags > a::before,
.msg-tags > a::before {
content: '#';
}
+
.badge {
background: #eee;
border: 1px solid #eee;
@@ -417,23 +447,28 @@ article .tags > a::before,
margin-right: 5px;
padding: 0 10px;
}
+
.l .msg-button {
padding-top: 12px;
}
+
.msgthread {
margin-bottom: 0;
}
+
.msg-avatar {
float: left;
max-height: 48px;
margin-right: 10px;
max-width: 48px;
}
+
.msg-avatar img {
max-height: 48px;
vertical-align: top;
max-width: 48px;
}
+
.msg-cont {
background: var(--text-background-color);
border: 1px solid var(--border-color);
@@ -441,9 +476,11 @@ article .tags > a::before,
margin-bottom: 12px;
padding: 20px;
}
+
.reply-new .msg-cont {
border-right: 5px solid #0C0;
}
+
.msg-ts {
font-size: small;
vertical-align: top;
@@ -452,6 +489,7 @@ article .tags > a::before,
.msg-ts > a {
color: #999;
}
+
.msg-txt {
clear: both;
margin: 0 0 12px;
@@ -459,15 +497,18 @@ article .tags > a::before,
word-wrap: break-word;
overflow-wrap: break-word;
}
+
.msg-media {
text-align: center;
overflow: auto;
}
+
.msg-links {
color: #999;
font-size: small;
margin: 5px 0 0 0;
}
+
.msg-comments {
color: #AAA;
font-size: small;
@@ -475,20 +516,24 @@ article .tags > a::before,
overflow: hidden;
text-indent: 10px;
}
+
.ta-wrapper {
border: 1px solid #DDD;
display: flex;
flex-grow: 1;
}
+
.msg-comment {
display: flex;
width: 100%;
margin-top: 10px;
flex-direction: column;
}
+
.msg-comment-hidden {
display: none;
}
+
.msg-comment textarea {
border: 0;
flex-grow: 1;
@@ -497,12 +542,15 @@ article .tags > a::before,
resize: vertical;
vertical-align: top;
}
+
.attach-photo {
cursor: pointer;
}
+
.attach-photo-active {
color: green;
}
+
.msg-recomms {
color: #AAA;
font-size: small;
@@ -514,15 +562,18 @@ article .tags > a::before,
#private-messages .msg-txt {
margin: 0;
}
+
.title2 {
background: var(--text-background-color);
margin: 20px 0;
padding: 10px 20px;
}
+
.title2-right {
float: right;
line-height: 24px;
}
+
#content .title2 h2 {
font-size: x-large;
margin: 0;
@@ -554,6 +605,7 @@ blockquote {
margin-bottom: 20px;
padding: 15px;
}
+
#newmessage textarea {
border: 1px solid #CCC;
box-sizing: border-box;
@@ -564,17 +616,21 @@ blockquote {
padding: 4px;
width: 100%;
}
+
#newmessage input {
border: 1px solid #CCC;
margin: 5px 0;
padding: 2px 4px;
}
+
#newmessage .img {
width: 500px;
}
+
#newmessage .tags {
width: 500px;
}
+
#newmessage .subm {
background: #EEEEE5;
width: 150px;
@@ -616,14 +672,17 @@ blockquote {
margin-right: 10px;
vertical-align: middle;
}
+
.signup-h1 {
font-size: x-large;
margin: 20px 0 10px 0;
}
+
.signup-h2 {
font-size: large;
margin: 10px 0 5px 0;
}
+
.signup-hr {
margin: 20px 0;
}
@@ -635,10 +694,12 @@ blockquote {
.newpm {
margin: 20px 60px 30px 60px;
}
+
.newpm textarea {
resize: vertical;
width: 100%;
}
+
.newpm-send input {
width: 100px;
}
@@ -657,6 +718,7 @@ blockquote {
width: 100%;
z-index: 10;
}
+
#dialogt {
height: 100%;
left: 0;
@@ -668,6 +730,7 @@ blockquote {
align-items: center;
justify-content: center;
}
+
#dialogw {
z-index: 11;
max-width: 96%;
@@ -677,14 +740,17 @@ blockquote {
left: 50%;
transform: translate(-50%, -50%);
}
+
#dialogw a {
display: block;
}
+
#dialogw img {
max-height: 100%;
max-height: 90vh;
max-width: 100%;
}
+
#dialog_header {
width: 100%;
height: 44px;
@@ -693,19 +759,23 @@ blockquote {
flex-direction: row-reverse;
align-items: center;
}
+
.header_image {
background: rgba(0, 0, 0, 0.28);
}
+
#dialogc {
cursor: pointer;
color: #ccc;
padding-right: 6px;
}
+
.dialoglogin {
background: var(--text-background-color);
padding: 25px;
width: 300px;
}
+
.dialog-opened {
overflow: hidden;
}
@@ -718,9 +788,11 @@ blockquote {
text-decoration: none;
width: 100%;
}
+
#signvk {
margin-bottom: 30px;
}
+
.dialoglogin form {
margin-top: 7px;
}
@@ -730,31 +802,38 @@ blockquote {
margin: 3px 0;
padding: 3px;
}
+
.signinput {
width: 100%;
}
+
.signsubmit {
width: 70px;
}
+
.dialogshare {
background: var(--text-background-color);
min-width: 300px;
overflow: auto;
padding: 20px;
}
+
.dialogl {
background: var(--text-background-color);
border: 1px solid #DDD;
margin: 3px 0 20px;
padding: 5px;
}
+
.dialogshare li {
float: left;
margin: 5px 10px 0 0;
}
+
.dialogshare a {
display: block;
}
+
.dialogtxt {
background: var(--text-background-color);
padding: 20px;
@@ -780,6 +859,7 @@ blockquote {
position: fixed;
right: 20px;
}
+
.sharenew {
display: inline-block;
line-height: 32px;
@@ -787,10 +867,12 @@ blockquote {
min-width: 200px;
padding: 0 12px 0 37px;
}
+
.icon {
margin-top: -4px;
vertical-align: middle;
}
+
.newmessage {
/* textarea on the /post page */
border: 1px solid #DDD;
@@ -839,6 +921,7 @@ fieldset {
.embedContainer > .compact {
flex-grow: 0;
}
+
.embedContainer .picture img {
display: block;
}
@@ -851,9 +934,11 @@ fieldset {
.embedContainer > .youtube {
min-width: 90%;
}
+
.embedContainer audio {
width: 100%;
}
+
.embedContainer iframe {
overflow: hidden;
resize: vertical;
@@ -888,9 +973,11 @@ article p {
min-width: 280px;
width: auto;
}
+
.title2 h2 {
font-size: large;
}
+
.msg-comment input {
align-self: flex-end;
margin: 6px 0 0 0;
@@ -904,27 +991,17 @@ article p {
}
@media (--viewport-mobile) {
- #content {
- margin-bottom: 12px;
- }
#sidebar {
background: var(--text-background-color);
}
}
@media (--viewport-desktop) {
- #app {
- overflow: initial;
- }
- #wrapper {
- grid-template-areas: "footer content";
- grid-template-columns: 1fr 3fr;
- grid-gap: 6px;
- overflow: initial;
- }
#column {
- overflow-y: auto;
padding: 12px;
+ left: 0;
+ top: 66px;
+ width: 240px;
}
#header_wrapper,
.footer_container {
@@ -947,12 +1024,12 @@ article p {
}
#content {
margin-bottom: 12px;
+ margin-left: 240px;
}
.toolbar {
flex-direction: column;
justify-content: initial;
border-top: initial;
- margin-top: 64px;
}
.toolbar a,
.l a {
diff --git a/src/main/resources/templates/layouts/default.html b/src/main/resources/templates/layouts/default.html
index 5974e19b..a836f4c4 100644
--- a/src/main/resources/templates/layouts/default.html
+++ b/src/main/resources/templates/layouts/default.html
@@ -36,16 +36,14 @@
<body id="body" {% if visitor.uid > 0 %}data-hash="{{visitor.authHash}}" {% endif %}>
<div id="app">
{% include "views/partial/navigation" %}
- <div id="wrapper">
- <section id="content" {% if msg | default('') is not empty %}data-mid="{{ msg.mid }}" {% endif %} class="content--top">
+ <aside id="column">
+ {% block column %}
+ {% endblock %}
+ </aside>
+ <section id="content" {% if msg | default('') is not empty %}data-mid="{{ msg.mid }}" {% endif %} class="content--top">
{% block content %}
{% endblock %}
- </section>
- <aside id="column">
- {% block column %}
- {% endblock %}
- </aside>
- </div>
+ </section>
</div>
</body>