cel
/
blossom
1
0
Fork 0
Code Issues 25 Pull Requests Packages Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
static/style.css
View File

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

4
templates/base.html.tera
View File

@ -27,12 +27,8 @@
<div id="page"> <div id="page">
<header>
{% block header %} {% block header %}
{% endblock header %} {% endblock header %}
</header>
<nav class="panel"> <nav class="panel">
<ul id="nav"> <ul id="nav">

8
templates/contact.html.tera
View File

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

8
templates/home.html.tera
View File

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