Fixed that annoying bug with uneven gap in divs

This commit is contained in:
Michał Gdula 2022-09-07 22:16:43 +00:00
parent d0afc5c8aa
commit 8713a6321a
3 changed files with 15 additions and 13 deletions

View file

@ -28,7 +28,7 @@
*/ */
nav { nav {
margin-bottom: 1rem; margin-bottom: 1rem;
padding: 0.5rem; padding: 0.5rem 0.5rem 0 0.5rem;
width: calc(100% - 1.4rem); width: calc(100% - 1.4rem);
background-color: #151515; background-color: #151515;
color: #E8E3E3; color: #E8E3E3;
@ -40,6 +40,7 @@ nav {
flex-wrap: wrap; flex-wrap: wrap;
justify-content: space-between; justify-content: space-between;
margin: 0 auto 1rem; margin: 0 auto 1rem;
padding: 0.5rem;
width: calc(100% - 1.4rem); width: calc(100% - 1.4rem);
height: 2.5rem; height: 2.5rem;
position: -webkit-sticky; position: -webkit-sticky;
@ -298,7 +299,7 @@ nav .btn {
.image-description { .image-description {
margin-bottom: 1rem; margin-bottom: 1rem;
padding: 0.5rem; padding: 0.5rem 0.5rem 0 0.5rem;
width: calc(100% - 1.4rem); width: calc(100% - 1.4rem);
background-color: #151515; background-color: #151515;
color: #E8E3E3; color: #E8E3E3;
@ -326,7 +327,7 @@ nav .btn {
.image-detail { .image-detail {
margin-bottom: 1rem; margin-bottom: 1rem;
padding: 0.5rem; padding: 0.5rem 0.5rem 0 0.5rem;
width: calc(100% - 1.4rem); width: calc(100% - 1.4rem);
background-color: #151515; background-color: #151515;
color: #E8E3E3; color: #E8E3E3;
@ -354,7 +355,7 @@ nav .btn {
.tags-root { .tags-root {
margin-bottom: 1rem; margin-bottom: 1rem;
padding: 0.5rem; padding: 0.5rem 0.5rem 0 0.5rem;
width: calc(100% - 1.4rem); width: calc(100% - 1.4rem);
background-color: #151515; background-color: #151515;
color: #E8E3E3; color: #E8E3E3;
@ -402,7 +403,7 @@ nav .btn {
.danger-zone { .danger-zone {
margin-bottom: 1rem; margin-bottom: 1rem;
padding: 0.5rem; padding: 0.5rem 0.5rem 0 0.5rem;
width: calc(100% - 1.4rem); width: calc(100% - 1.4rem);
background-color: #151515; background-color: #151515;
color: #E8E3E3; color: #E8E3E3;
@ -435,7 +436,7 @@ nav .btn {
*/ */
.about-root { .about-root {
margin-bottom: 1rem; margin-bottom: 1rem;
padding: 0.5rem; padding: 0.5rem 0.5rem 0 0.5rem;
width: calc(100% - 1.4rem); width: calc(100% - 1.4rem);
background-color: #151515; background-color: #151515;
color: #E8E3E3; color: #E8E3E3;
@ -468,7 +469,7 @@ nav .btn {
*/ */
.upload-root { .upload-root {
margin-bottom: 1rem; margin-bottom: 1rem;
padding: 0.5rem; padding: 0.5rem 0.5rem 0 0.5rem;
width: calc(100% - 1.4rem); width: calc(100% - 1.4rem);
background-color: #151515; background-color: #151515;
color: #E8E3E3; color: #E8E3E3;
@ -501,7 +502,7 @@ nav .btn {
*/ */
.account-root { .account-root {
margin-bottom: 1rem; margin-bottom: 1rem;
padding: 0.5rem; padding: 0.5rem 0.5rem 0 0.5rem;
width: calc(100% - 1.4rem); width: calc(100% - 1.4rem);
background-color: #151515; background-color: #151515;
color: #E8E3E3; color: #E8E3E3;
@ -534,7 +535,7 @@ nav .btn {
*/ */
.signup-root { .signup-root {
margin-bottom: 1rem; margin-bottom: 1rem;
padding: 0.5rem; padding: 0.5rem 0.5rem 0 0.5rem;
width: calc(100% - 1.4rem); width: calc(100% - 1.4rem);
background-color: #151515; background-color: #151515;
color: #E8E3E3; color: #E8E3E3;
@ -568,7 +569,7 @@ nav .btn {
*/ */
.login-root { .login-root {
margin-bottom: 1rem; margin-bottom: 1rem;
padding: 0.5rem; padding: 0.5rem 0.5rem 0 0.5rem;
width: calc(100% - 1.4rem); width: calc(100% - 1.4rem);
background-color: #151515; background-color: #151515;
color: #E8E3E3; color: #E8E3E3;
@ -601,7 +602,7 @@ nav .btn {
*/ */
.password-reset-root { .password-reset-root {
margin-bottom: 1rem; margin-bottom: 1rem;
padding: 0.5rem; padding: 0.5rem 0.5rem 0 0.5rem;
width: calc(100% - 1.4rem); width: calc(100% - 1.4rem);
background-color: #151515; background-color: #151515;
color: #E8E3E3; color: #E8E3E3;
@ -634,7 +635,7 @@ nav .btn {
*/ */
.search-root { .search-root {
margin-bottom: 1rem; margin-bottom: 1rem;
padding: 0.5rem; padding: 0.5rem 0.5rem 0 0.5rem;
width: calc(100% - 1.4rem); width: calc(100% - 1.4rem);
background-color: #151515; background-color: #151515;
color: #E8E3E3; color: #E8E3E3;

View file

@ -1,6 +1,6 @@
@mixin defaultDecoration($border) { @mixin defaultDecoration($border) {
margin-bottom: 1rem; margin-bottom: 1rem;
padding: 0.5rem; padding: 0.5rem 0.5rem 0 0.5rem;
width: calc(100% - 1.4rem); width: calc(100% - 1.4rem);

View file

@ -8,6 +8,7 @@ nav {
@include flexLeft(space-between); @include flexLeft(space-between);
margin: 0 auto 1rem; margin: 0 auto 1rem;
padding: 0.5rem;
width: calc(100% - 1.4rem); width: calc(100% - 1.4rem);
height: 2.5rem; height: 2.5rem;