-
+
-
diff --git a/src/css/styles.css b/src/css/styles.css
index 9cef1b396..3655b9864 100644
--- a/src/css/styles.css
+++ b/src/css/styles.css
@@ -8,9 +8,54 @@ body, html {
background-size: 100% 100%;
}
main {
+ .sortContainer{
+ display: none;
+ }
display: flex;
flex-direction: column;
align-items: center;
+ article {
+ display: flex;
+ flex-wrap: nowrap;
+ align-items: center;
+ flex-direction: column;
+ padding-top: 10em;
+ height: 100vh;
+ img {
+ z-index: 0;
+ position: fixed;
+ }
+ }
+ .sizeableContainer {
+ width: 90%;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: flex-start;
+ }
+ .info-card {
+ border-radius: 5%;
+ width: 75%;
+ height: 75%;
+ display: flex;
+ box-shadow: rgba(0, 0, 0, 0.631372549) 12px 12px 20px 4px;
+ overflow: scroll;
+ flex-direction: column;
+ justify-content: flex-start;
+ max-width: 75%;
+ align-items: center;
+ padding: 10px;
+ background: transparent;
+
+ .section-text {
+ width: 75%;
+ height: 100vh;
+ padding: 6%;
+ margin: 10px;
+ display: flex;
+ justify-content: center;
+ }
+ }
}
input {
@@ -70,44 +115,6 @@ nav a:hover {
text-shadow: 0px 0px 11px rgb(0, 0, 0);
}
-.info-card {
- width: 75%;
- height: 100vh;
- padding: 6%;
- margin: 10px;
- display: flex;
- justify-content: center;
-}
-
-.info-card div {
- border-radius: 5%;
- width: 75%;
- height: 75%;
- display: flex;
- box-shadow: rgba(0, 0, 0, 0.631372549) 12px 12px 20px 4px;
- overflow: hidden;
- flex-direction: column;
- justify-content: space-around;
- max-width: 75%;
- align-items: center;
- padding: 10px;
- background: transparent;
-}
-
-article {
- display: flex;
- flex-wrap: nowrap;
- align-items: center;
- flex-direction: column;
- padding-top: 10em;
- height: 100vh;
-}
-
-img {
- z-index: 0;
- position: fixed;
-}
-
.underline {
text-decoration: underline;
}
@@ -202,19 +209,23 @@ canvas {
}
.condensed {
- position: absolute;
display: flex;
flex-direction: row;
- height: 78%;
- width: 90%;
- align-items: center;
- left: 72px;
- top: 157px;
- padding: 30px;
- border: black inset thin;
- justify-content: center;
- flex-wrap: wrap;
- align-content: center;
+ justify-content: flex-end;
+ align-items: flex-start;
+ .sortContainer{
+ display: flex;
+ width: 35%;
+ height: 100vh;
+ margin-top: 90px;
+ margin-right: 150px;
+ box-shadow: inset #0000008a -1px -2px 20px 14px;
+ border-radius: 25px;
+ }
+ .sizeableContainer {
+ width: 25%;
+ margin-top: 90px;
+ }
article{
padding: 0px;
position: fixed;
@@ -229,23 +240,41 @@ canvas {
}
}
.info-card{
- width: 40%;
- height: 40%;
- padding: 0;
- margin: 0;
- font-size: 12px;
- overflow: scroll;
- position: absolute;
+ border-radius: 5%;
+ width: 75%;
+ height: 250px;
+ display: flex;
+ box-shadow: rgba(0, 0, 0, 0.631372549) 12px 12px 20px 4px;
+ max-width: 75%;
+ align-items: center;
+ background: transparent;
+ flex-direction: column;
+ justify-content: flex-start;
+ margin: 10px;
+ padding: 0px;
+ .section-text{
+ width: 75%;
+ height: 100%;
+ padding: 0px;
+ margin: 5px;
+ display: flex;
+ justify-content: center;
+ flex-wrap: wrap;
+ flex-direction: row;
+ align-content: flex-start;
+ font-size: 10px;
+ }
.iconSection{
height: 28px;
z-index: 10;
+ font-size: 10px;
+ margin-bottom: 5px;
+ justify-content: center;
&:hover{
cursor: grab;
}
}
canvas {
- height: 170px !important;
- width: 500px !important;
}
p{
font-size: 10px;