summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorblendoit <blendoit@gmail.com>2020-01-25 10:25:06 -0800
committerblendoit <blendoit@gmail.com>2020-01-25 10:25:06 -0800
commit513452520bc419bed16ff3a763a99e8a6cd2ebcc (patch)
treed23ffbceaedb14c8a5a6c4b249e0aae89409f27e
parent8a5b3a083ad9b3bd710d944e5c83ac08ead433e7 (diff)
Change every possible component to relative sizing.
This saves a bunch of CSS instructions that manually update the size of adjacent components on resize.
-rw-r--r--app/static/styles/home.css23
-rw-r--r--app/static/styles/no.css24
2 files changed, 13 insertions, 34 deletions
diff --git a/app/static/styles/home.css b/app/static/styles/home.css
index c875893..553299c 100644
--- a/app/static/styles/home.css
+++ b/app/static/styles/home.css
@@ -1,36 +1,31 @@
.main {
height: 100%;
- position: absolute;
+ position: relative;
z-index: 0;
- left: 3%;
- right: 3%;
overflow: hidden;
}
.feed-post {
height: 100%;
- padding: 1px;
display: flex;
position: relative;
flex-wrap: wrap;
overflow: auto;
- justify-content: space-around;
+ justify-content: space-between;
}
.tab-yes {
height: 100%;
width: 3%;
float: left;
- position: fixed;
- left: 0;
+ position: relative;
background: var(--yes);
}
.tab-no {
height: 100%;
width: 3%;
float: right;
- position: fixed;
- right: 0;
+ position: relative;
background: var(--no);
}
@@ -44,16 +39,6 @@
transition: 0.2s;
}
-.tab-yes:hover ~ .main {
- left: 5%;
- transition: 0.2s;
-}
-
-.tab-no:hover ~ .main {
- right: 5%;
- transition: 0.2s;
-}
-
.post {
max-height: 20%;
max-width: 30%;
diff --git a/app/static/styles/no.css b/app/static/styles/no.css
index 4673cf3..8f20ce5 100644
--- a/app/static/styles/no.css
+++ b/app/static/styles/no.css
@@ -1,8 +1,7 @@
.main {
height: 100%;
- position: fixed;
+ position: relative;
z-index: 0;
- left: 7%;
overflow: auto;
}
@@ -29,16 +28,6 @@
transition: 0.2s;
}
-.tab-yes:hover ~ .main {
- left: 10%;
- transition: 0.2s;
-}
-
-.tab-home:hover ~ .main {
- left: 8%;
- transition: 0.2s;
-}
-
.tab-yes:hover ~ .tab-home {
width: 5%;
transition: 0.2s;
@@ -51,23 +40,28 @@
/* Archive. */
.feed-archive {
- width: 100%;
+ height: 100%;
display: flex;
position: relative;
flex-wrap: wrap;
- justify-content: space-around;
+ overflow: auto;
+ justify-content: space-between;
}
.archive {
+ max-height: 20%;
+ max-width: 25%;
background: white;
- position: relative;
border-radius: 14px;
padding: 1rem;
margin: 0.5rem;
+ overflow: hidden;
+ position: relative;
}
.archive:hover {
background: linear-gradient(to left, var(--no) 50%, var(--yes) 50%);
cursor: pointer;
transition: 0.8s;
color: white;
+ overflow: auto;
}
Copyright 2019--2024 Marius PETER