Fix for scrolling past content on mobile devices

This commit is contained in:
2019-09-18 23:17:12 +02:00
parent c2db60746c
commit 59ef838581
3 changed files with 41 additions and 36 deletions

View File

@@ -51,9 +51,9 @@
} }
/* Page rendering configuration */ /* Page rendering configuration */
html, body {
html{height: 100%;} overflow: hidden;
}
body{ body{
background-color: #0d0d0d; /* Fallback */ background-color: #0d0d0d; /* Fallback */
background-color: var(--body_color); background-color: var(--body_color);
@@ -61,14 +61,19 @@ body{
font-family: 'Ubuntu'; font-family: 'Ubuntu';
margin: 0; margin: 0;
line-height: 1.5em; line-height: 1.5em;
overflow-x: hidden;
color: #bfbfbf; /* Fallback */ color: #bfbfbf; /* Fallback */
color: var(--text_color); color: var(--text_color);
box-sizing: border-box;
padding: 0; padding: 0;
} }
/* Page layout elements */ /* Page layout elements */
.page_wrapper {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.button_toggle_navigation { .button_toggle_navigation {
position: absolute; position: absolute;
@@ -87,8 +92,7 @@ body{
position: absolute; position: absolute;
z-index: 100; z-index: 100;
width: 250px; width: 250px;
top: 0; height: 100%;
bottom: 0;
left: 0; left: 0;
float: left; float: left;
background-color: var(--layer_1_color); background-color: var(--layer_1_color);

View File

@@ -1,7 +1,7 @@
{{define "meta_tags"}} {{define "meta_tags"}}
<title>{{.}} ~ PixelDrain</title> <title>{{.}} ~ PixelDrain</title>
<meta charset="UTF-8"/> <meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/> <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1"/>
<link rel="stylesheet" href="/res/style/layout.css?v2"/> <link rel="stylesheet" href="/res/style/layout.css?v2"/>
<link rel="shortcut icon" href="/res/img/tray32.png"/> <link rel="shortcut icon" href="/res/img/tray32.png"/>
<meta name="theme-color" content="#75AD38"/> <meta name="theme-color" content="#75AD38"/>

View File

@@ -1,4 +1,5 @@
{{define "page_top"}} {{define "page_top"}}
<div id="page_wrapper">
<button id="button_toggle_navigation" class="button_toggle_navigation" onclick="toggleMenu();"></button> <button id="button_toggle_navigation" class="button_toggle_navigation" onclick="toggleMenu();"></button>
<div id="page_navigation" class="page_navigation"> <div id="page_navigation" class="page_navigation">
<a href="/">Home</a> <a href="/">Home</a>
@@ -29,7 +30,7 @@
Medium:&nbsp;<a href="https://medium.com/pixeldrain" target="_blank">Pixeldrain</a> Medium:&nbsp;<a href="https://medium.com/pixeldrain" target="_blank">Pixeldrain</a>
</div> </div>
</div><!-- end page_body --> </div><!-- end page_body -->
</div><!-- end page_wrapper -->
<script> <script>
var nav = document.getElementById("page_navigation"); var nav = document.getElementById("page_navigation");
var body = document.getElementById("page_body"); var body = document.getElementById("page_body");