Enhance mobile responsiveness by updating viewport settings and restructuring layout #47
@ -5,6 +5,10 @@
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.gallery {
|
||||
padding: 50px;
|
||||
height: auto;
|
||||
@ -25,33 +29,36 @@ body {
|
||||
background-color: #000000;
|
||||
color: #e6e6e6;
|
||||
line-height: 1.5;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr;
|
||||
grid-template-rows: auto 1fr;
|
||||
grid-template-areas:
|
||||
"header header"
|
||||
"sidebar chat-area";
|
||||
min-width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
main {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
grid-area: chat-area;
|
||||
}
|
||||
|
||||
header {
|
||||
background-color: #000000;
|
||||
padding-top: 10px;
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
padding-bottom: 10px;
|
||||
grid-area: header;
|
||||
padding: 10px 20px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
header .logo {
|
||||
color: #fff;
|
||||
color: #fff;
|
||||
font-weight: bold;
|
||||
font-size: 1.2em;
|
||||
font-size: 1.2em;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
@ -81,13 +88,13 @@ a {
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
color: #f05a28;
|
||||
font-size: 2em;
|
||||
color: #f05a28;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.4em;
|
||||
color: #f05a28;
|
||||
font-size: 1.4em;
|
||||
color: #f05a28;
|
||||
}
|
||||
|
||||
|
||||
@ -112,10 +119,10 @@ h2 {
|
||||
}
|
||||
|
||||
footer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 10px 20px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 10px 20px;
|
||||
}
|
||||
|
||||
.message-list {
|
||||
@ -135,6 +142,11 @@ footer {
|
||||
background: #000000;
|
||||
}
|
||||
|
||||
.chat-messages {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.container {
|
||||
flex: 1;
|
||||
padding: 10px;
|
||||
@ -151,9 +163,11 @@ footer {
|
||||
}
|
||||
|
||||
}
|
||||
.chat-messages picture img {
|
||||
cursor: pointer;
|
||||
|
||||
.chat-messages picture img {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.chat-messages::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
@ -348,6 +362,7 @@ a {
|
||||
padding-right: 20px;
|
||||
padding-top: 10px;
|
||||
overflow-y: auto;
|
||||
grid-area: sidebar;
|
||||
}
|
||||
|
||||
.sidebar h2 {
|
||||
@ -376,65 +391,68 @@ a {
|
||||
}
|
||||
|
||||
@keyframes glow {
|
||||
0% {
|
||||
box-shadow: 0 0 5px #3498db;
|
||||
}
|
||||
50% {
|
||||
box-shadow: 0 0 20px #3498db, 0 0 30px #3498db;
|
||||
}
|
||||
100% {
|
||||
box-shadow: 0 0 5px #3498db;
|
||||
}
|
||||
0% {
|
||||
box-shadow: 0 0 5px #3498db;
|
||||
}
|
||||
50% {
|
||||
box-shadow: 0 0 20px #3498db, 0 0 30px #3498db;
|
||||
}
|
||||
100% {
|
||||
box-shadow: 0 0 5px #3498db;
|
||||
}
|
||||
}
|
||||
|
||||
.glow {
|
||||
animation: glow 1s;
|
||||
animation: glow 1s;
|
||||
}
|
||||
|
||||
|
||||
|
||||
@media only screen and (max-width: 768px) {
|
||||
|
||||
header{
|
||||
top: 0;
|
||||
left: 0;
|
||||
text-overflow: ellipsis;
|
||||
width:100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.logo {
|
||||
display:block;
|
||||
flex: 1;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
h2 {
|
||||
font-size: 14px;
|
||||
}
|
||||
text-align: center;
|
||||
}
|
||||
nav {
|
||||
text-align: right;
|
||||
flex: 1;
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
body {
|
||||
justify-content: flex-start;
|
||||
|
||||
header {
|
||||
top: 0;
|
||||
left: 0;
|
||||
text-overflow: ellipsis;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.logo {
|
||||
display: block;
|
||||
flex: 1;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
|
||||
h2 {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
text-align: center;
|
||||
}
|
||||
header{
|
||||
position: sticky;
|
||||
display: block;
|
||||
.logo {
|
||||
display:block;
|
||||
}
|
||||
|
||||
nav {
|
||||
text-align: right;
|
||||
flex: 1;
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
.chat-input {
|
||||
position:sticky;
|
||||
}*/
|
||||
}
|
||||
|
||||
/*
|
||||
body {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
header{
|
||||
position: sticky;
|
||||
display: block;
|
||||
.logo {
|
||||
display:block;
|
||||
}
|
||||
}
|
||||
.chat-input {
|
||||
position:sticky;
|
||||
}*/
|
||||
}
|
||||
|
||||
dialog {
|
||||
@ -494,13 +512,23 @@ dialog .dialog-button {
|
||||
|
||||
|
||||
@keyframes dialogFadeIn {
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes dialogScaleIn {
|
||||
from { transform: scale(0.95) translate(-50%, -50%); opacity: 0; }
|
||||
to { transform: scale(1) translate(-50%, -50%); opacity: 1; }
|
||||
from {
|
||||
transform: scale(0.95) translate(-50%, -50%);
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
transform: scale(1) translate(-50%, -50%);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
dialog .dialog-button.primary {
|
||||
@ -513,12 +541,12 @@ dialog .dialog-button.primary:hover {
|
||||
}
|
||||
|
||||
dialog .dialog-button.secondary {
|
||||
background-color: #f0a328;
|
||||
background-color: #f0a328;
|
||||
color: #eee;
|
||||
}
|
||||
|
||||
dialog .dialog-button.secondary:hover {
|
||||
background-color: #f0b84c;
|
||||
background-color: #f0b84c;
|
||||
}
|
||||
|
||||
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<html lang="en">
|
||||
<head>
|
||||
<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.0, interactive-widget=resizes-content">
|
||||
<link rel="manifest" href="/manifest.json" />
|
||||
<title>Snek</title>
|
||||
<style>{{highlight_styles}}</style>
|
||||
@ -50,10 +50,11 @@
|
||||
</nav>
|
||||
|
||||
</header>
|
||||
<main style="max-height: 100vh;overflow-y: none">
|
||||
|
||||
{% block sidebar %}
|
||||
{% include "sidebar_channels.html" %}
|
||||
{% endblock %}
|
||||
<main>
|
||||
|
||||
{% block main %}
|
||||
<chat-window class="chat-area"></chat-window>
|
||||
|
||||
@ -21,7 +21,7 @@
|
||||
<script src="/html-frame.js" type="module"></script>
|
||||
<script src="/generic-form.js?rid={{ rid }}" type="module"></script>
|
||||
<link rel="stylesheet" href="/html-frame.css">
|
||||
<script defer src="https://umami.molodetz.nl/script.js" data-website-id="d127c3e4-dc70-4041-a1c8-bcc32c2492ea"></script>
|
||||
<script async defer src="https://umami.molodetz.nl/script.js" data-website-id="d127c3e4-dc70-4041-a1c8-bcc32c2492ea"></script>
|
||||
{% block head %}
|
||||
{% endblock %}
|
||||
</head>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user