GNUsocial
/
gnu-social
4
0
Fork 1
Code Issues Releases Wiki Activity

[UI] Fixed top header spacing issue, hamburger menu weird rendering

This commit is contained in:
rainydaysavings 2020-07-21 17:42:16 +01:00 committed by Hugo Sales
parent d0b04b6084
commit 5a53915f80
Signed by: someonewithpc
GPG Key ID: 7D0C7EAFC9D835A0
10 changed files with 34 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
public/assets/css/base.css
View File

@ -69,7 +69,8 @@ b {
right: 0; right: 0;
background-color: #272E36; background-color: #272E36;
box-shadow: 0px 0px 60px -20px rgba(0, 0, 0, 0.75); box-shadow: 0px 0px 60px -20px rgba(0, 0, 0, 0.75);
padding: var(--unit-size); padding: var(--main-size);
height: var(--main-size);
} }
#top { #top {
@ -98,7 +99,8 @@ b {
#instance b { #instance b {
margin: 0; margin: 0;
padding: 0; padding: 0;
vertical-align: top; vertical-align: middle;
margin-left: calc(0.2 * var(--unit-size));
} }
.icon-logo { .icon-logo {
@ -110,6 +112,7 @@ b {
stroke-width: 0; stroke-width: 0;
stroke: currentColor; stroke: currentColor;
fill: currentColor; fill: currentColor;
vertical-align: middle;
} }
#left-panel { #left-panel {
@ -126,6 +129,7 @@ b {
stroke-width: 0; stroke-width: 0;
stroke: currentColor; stroke: currentColor;
fill: currentColor; fill: currentColor;
align-self: center;
} }
/*-------------------------------------*/ /*-------------------------------------*/
@ -135,7 +139,7 @@ b {
height: calc(100vh - (3 * var(--unit-size))); height: calc(100vh - (3 * var(--unit-size)));
position: fixed; position: fixed;
background-color: rgba(0, 0, 0, 0.40); background-color: rgba(0, 0, 0, 0.40);
margin-top: calc(2 * var(--unit-size) + var(--main-size)); margin-top: calc(3 * var(--main-size));
} }
.navbar { .navbar {

15
public/assets/css/base_mid.css
View File

@ -65,12 +65,14 @@ b {
right: 0; right: 0;
background-color: #272E36; background-color: #272E36;
box-shadow: 0px 0px 60px -20px rgba(0, 0, 0, 0.75); box-shadow: 0px 0px 60px -20px rgba(0, 0, 0, 0.75);
padding: var(--medium-size); padding: var(--main-size);
height: var(--main-size);
} }
#top { #top {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center;
flex-wrap: wrap; flex-wrap: wrap;
width: 100%; width: 100%;
} }
@ -83,14 +85,12 @@ b {
height: var(--unit-size); height: var(--unit-size);
cursor: pointer; cursor: pointer;
transition: all .5s ease-in-out; transition: all .5s ease-in-out;
background-color: #272E36;
} }
.icon-menu label { .icon-menu label {
width: var(--unit-size); width: var(--unit-size);
height: 2px; height: 2px;
background: #F6F6F6; background: #F6F6F6;
transition: all .5s ease-in-out; transition: all .5s ease-in-out;
z-index: 1;
} }
.icon-menu label::before, .icon-menu label::before,
.icon-menu label::after { .icon-menu label::after {
@ -124,7 +124,8 @@ b {
#instance b { #instance b {
margin: 0; margin: 0;
padding: 0; padding: 0;
vertical-align: top; vertical-align: middle;
margin-left: calc(0.2 * var(--unit-size));
} }
.icon-logo { .icon-logo {
@ -136,6 +137,7 @@ b {
stroke-width: 0; stroke-width: 0;
stroke: currentColor; stroke: currentColor;
fill: currentColor; fill: currentColor;
vertical-align: middle;
} }
#left-panel { #left-panel {
@ -155,6 +157,7 @@ b {
stroke-width: 0; stroke-width: 0;
stroke: currentColor; stroke: currentColor;
fill: currentColor; fill: currentColor;
align-self: center;
} }
/*-------------------------------------*/ /*-------------------------------------*/
@ -168,7 +171,7 @@ b {
background: -webkit-linear-gradient(80deg, rgba(51,61,71,1) 0%, rgba(39,46,54,1) 90%); background: -webkit-linear-gradient(80deg, rgba(51,61,71,1) 0%, rgba(39,46,54,1) 90%);
background: linear-gradient(80deg, rgba(51,61,71,1) 0%, rgba(39,46,54,1) 90%); background: linear-gradient(80deg, rgba(51,61,71,1) 0%, rgba(39,46,54,1) 90%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#333d47",endColorstr="#272e36",GradientType=1); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#333d47",endColorstr="#272e36",GradientType=1);
margin-top: calc(2 * var(--medium-size) + var(--main-size) + 0.15em); margin-top: calc(3 * var(--main-size));
} }
.navbar { .navbar {
@ -194,7 +197,7 @@ b {
transition: all 0.8s ease; transition: all 0.8s ease;
} }
label { .icon-menu label {
display: block; display: block;
cursor: pointer cursor: pointer
} }

16
public/assets/css/base_small.css
View File

@ -65,7 +65,8 @@ b {
right: 0; right: 0;
background-color: #272E36; background-color: #272E36;
box-shadow: 0px 0px 60px -20px rgba(0, 0, 0, 0.75); box-shadow: 0px 0px 60px -20px rgba(0, 0, 0, 0.75);
padding: var(--medium-size); padding: var(--main-size);
height: var(--main-size);
} }
#top { #top {
@ -73,24 +74,19 @@ b {
justify-content: space-between; justify-content: space-between;
flex-wrap: wrap; flex-wrap: wrap;
width: 100%; width: 100%;
align-items: center;
} }
.icon-menu { .icon-menu {
position: relative; position: relative;
display: flex;
align-items: center;
width: var(--unit-size); width: var(--unit-size);
height: var(--unit-size); height: var(--unit-size);
cursor: pointer;
transition: all .5s ease-in-out;
background-color: #272E36;
} }
.icon-menu label { .icon-menu label {
width: var(--unit-size); width: var(--unit-size);
height: 2px; height: 2px;
background: #F6F6F6; background: #F6F6F6;
transition: all .5s ease-in-out; transition: all .5s ease-in-out;
z-index: 1;
} }
.icon-menu label::before, .icon-menu label::before,
.icon-menu label::after { .icon-menu label::after {
@ -124,7 +120,8 @@ b {
#instance b { #instance b {
margin: 0; margin: 0;
padding: 0; padding: 0;
vertical-align: top; vertical-align: middle;
margin-left: calc(0.2 * var(--unit-size));
} }
.icon-logo { .icon-logo {
@ -136,6 +133,7 @@ b {
stroke-width: 0; stroke-width: 0;
stroke: currentColor; stroke: currentColor;
fill: currentColor; fill: currentColor;
vertical-align: middle;
} }
#left-panel { #left-panel {
@ -168,7 +166,7 @@ b {
background: -webkit-linear-gradient(80deg, rgba(51,61,71,1) 0%, rgba(39,46,54,1) 90%); background: -webkit-linear-gradient(80deg, rgba(51,61,71,1) 0%, rgba(39,46,54,1) 90%);
background: linear-gradient(80deg, rgba(51,61,71,1) 0%, rgba(39,46,54,1) 90%); background: linear-gradient(80deg, rgba(51,61,71,1) 0%, rgba(39,46,54,1) 90%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#333d47",endColorstr="#272e36",GradientType=1); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#333d47",endColorstr="#272e36",GradientType=1);
margin-top: calc(2 * var(--medium-size) + var(--main-size) + 0.15em); margin-top: calc(3 * var(--main-size));
} }
.navbar { .navbar {

2
public/assets/css/faq/faq.css
View File

@ -1,7 +1,7 @@
.content { .content {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
margin-top: calc(2 * var(--unit-size) + var(--main-size)); margin-top: calc(3 * var(--main-size));
justify-content: center; justify-content: center;
align-items: center; align-items: center;
margin-left: var(--nav-size); margin-left: var(--nav-size);

2
public/assets/css/faq/faq_mid.css
View File

@ -1,7 +1,7 @@
.content { .content {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
margin-top: calc(2 * var(--medium-size) + var(--main-size)); margin-top: calc(3 * var(--main-size));
justify-content: center; justify-content: center;
align-items: center; align-items: center;
margin-left: 0; margin-left: 0;

2
public/assets/css/faq/faq_small.css
View File

@ -1,7 +1,7 @@
.content { .content {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
margin-top: calc(2 * var(--medium-size) + var(--main-size)); margin-top: calc(3 * var(--main-size));
justify-content: center; justify-content: center;
align-items: center; align-items: center;
margin-left: 0; margin-left: 0;

2
public/assets/css/settings/settings.css
View File

@ -1,7 +1,7 @@
.content { .content {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
margin-top: calc(2 * var(--unit-size) + var(--main-size)); margin-top: calc(3 * var(--main-size));
justify-content: center; justify-content: center;
align-items: center; align-items: center;
margin-left: var(--nav-size); margin-left: var(--nav-size);

10
public/assets/css/settings/settings_mid.css
View File

@ -1,7 +1,7 @@
.content { .content {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
margin-top: calc(2 * var(--medium-size) + var(--main-size)); margin-top: calc(3 * var(--main-size));
justify-content: center; justify-content: center;
align-items: center; align-items: center;
margin-left: 0; margin-left: 0;
@ -114,16 +114,16 @@
/* FORMS ------------------------------*/ /* FORMS ------------------------------*/
label { .form label {
font-family: 'Montserrat', sans-serif; font-family: 'Montserrat', sans-serif;
font-weight: 700; font-weight: 700;
} }
label:nth-child() { .form label:nth-child() {
margin-top: var(--medium-size); margin-top: var(--medium-size);
} }
input[type=text] { .form input[type=text] {
margin-top: calc(var(--unit-size) * 0.5); margin-top: calc(var(--unit-size) * 0.5);
width: calc(100% - var(--unit-size)); width: calc(100% - var(--unit-size));
background-color: rgba(0, 0, 0, 0.30); background-color: rgba(0, 0, 0, 0.30);
@ -134,7 +134,7 @@ input[type=text] {
font-size: var(--medium-size); font-size: var(--medium-size);
} }
button[type=submit] { .form button[type=submit] {
background: rgba(0, 0, 0, 0.30); background: rgba(0, 0, 0, 0.30);
padding: calc(var(--unit-size) * 0.8) calc(var(--unit-size) * 2); padding: calc(var(--unit-size) * 0.8) calc(var(--unit-size) * 2);
color: #F6F6F6; color: #F6F6F6;

2
public/assets/css/settings/settings_small.css
View File

@ -1,7 +1,7 @@
.content { .content {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
margin-top: calc(2 * var(--medium-size) + var(--main-size)); margin-top: calc(3 * var(--main-size));
justify-content: center; justify-content: center;
align-items: center; align-items: center;
margin-left: 0; margin-left: 0;

3
templates/base.html.twig
View File

@ -94,8 +94,7 @@
<a href="#"> <a href="#">
<svg class="icon icon-logo"> <svg class="icon icon-logo">
<use xlink:href="#icon-logo"></use> <use xlink:href="#icon-logo"></use>
</svg> </svg><b>GNU social</b>
<b>GNU social</b>
</a> </a>
</nav> </nav>
<svg id='search' class="icon icon-search"> <svg id='search' class="icon icon-search">