mirror of
https://github.com/Fluffy-Bean/image-gallery.git
synced 2025-05-30 15:23:13 +00:00
Fixed that annoying bug with uneven gap in divs
This commit is contained in:
parent
d0afc5c8aa
commit
8713a6321a
3 changed files with 15 additions and 13 deletions
25
css/main.css
25
css/main.css
|
@ -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;
|
||||||
|
|
|
@ -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);
|
||||||
|
|
||||||
|
|
|
@ -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;
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue