finally fix styles for responsiveness (hopefully)

This commit is contained in:
cel 🌸 2023-06-23 16:47:07 +01:00
parent 43c3cec8e7
commit cbfb8b8886
Signed by: cel
GPG Key ID: 48E29AF13B5F1349
4 changed files with 32 additions and 24 deletions

View File

@ -1,3 +1,7 @@
* {
word-break: break-word;
}
.panel {
pointer-events: all;
}
@ -27,6 +31,7 @@ body {
#page {
/* padding: 6vw; */
padding: 4vw;
gap: 4vw;
max-width: 2000px;
display: flex;
flex-direction: column;
@ -44,7 +49,7 @@ a {
padding: 0.5em;
border-radius: 2em;
display: inline-block;
margin: 0.5em;
margin: 0;
}
a:hover {
@ -59,17 +64,18 @@ a.active {
img,
video {
max-width: 100%;
box-sizing: border-box;
border: 4px solid #311f20;
}
ul {
ul#nav {
list-style-type: none;
margin: rem 0;
margin: 2vw 0;
padding: 0;
}
.panel {
margin: 2vw;
margin: 0;
border: 4px solid #311f20;
padding: 2vw 4vw;
position: relative;
@ -87,7 +93,7 @@ nav {
align-items: center;
justify-content: start;
flex-wrap: wrap;
gap: 0.2em;
gap: 1em;
font-size: 1.1rem;
}
@ -121,6 +127,7 @@ header {
main {
display: flex;
gap: 4vw;
flex-wrap: wrap;
align-items: flex-start;
}
@ -138,6 +145,9 @@ main {
/* z-index: 3; */
z-index: 15;
overflow-wrap: break-word;
display: flex;
flex-direction: column;
gap: 4vw;
}
.content {
@ -145,6 +155,9 @@ main {
}
aside {
display: flex;
flex-direction: column;
gap: 4vw;
flex: 1 1 30rem;
}
@ -179,12 +192,14 @@ footer {
/* homepage css */
#title {
#title,
#title * {
z-index: 10;
display: inline-block;
font-family: 'kaeru kaeru';
font-size: 2em;
padding: 0rem 4rem;
margin: 0;
padding: 1.5vw 2vw;
background-color: #d16a84;
}
@ -318,13 +333,6 @@ iframe {
gap: 1em;
}
.skweet-info h4 {
max-width: 40vw;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.skweet-text {
margin-top: 0.8em;
margin-bottom: 0.8em;

View File

@ -27,13 +27,9 @@
<div id="page">
<header>
{% block header %}
{% endblock header %}
</header>
<nav class="panel">
<ul id="nav">
<li><a class="{% block nav_home %}{% endblock %}" href="/">home</a></li>

View File

@ -4,9 +4,11 @@
{% block header %}
<div class="panel" id="title">
<h1>cel 🌸</h1>
</div>
<header>
<div class="panel" id="title">
<h1>cel 🌸</h1>
</div>
</header>
{% endblock header %}

View File

@ -4,9 +4,11 @@
{% block header %}
<div class="panel" id="title">
<h1>cel 🌸</h1>
</div>
<header>
<div class="panel" id="title">
<h1>cel 🌸</h1>
</div>
</header>
{% if is_live %}
<iframe