bookmarklets page, apps, info/credits, other misc

css/bookmarklets.css

@@ -0,0 +1,38 @@
+.bookmarklet {
+    width: 90vw;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    flex-wrap: wrap;
+    height: 100%;
+    gap: 0px;
+}
+.bookmarkletdiv {
+    width: 25vw;
+    height: 15vh;
+    background-color: color-mix(in srgb, var(--color-2) 40%, #00000000 60%);
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    border-radius: 20px;
+    margin: 15px;
+    transition-duration: 0.25s;
+	backdrop-filter: blur(2px);
+    box-shadow: 0 0 10px var(--color-2);
+}
+.bookmarkletdiv a {
+    width: 90%;
+}
+.bookmarkletdiv:hover {
+    transform: scale(1.1);
+    filter:brightness(1.15);
+}
+#bookmarklets {
+    display: flex;
+    height: auto;
+    width: 90%;
+    flex-direction: row;
+    justify-content: center;
+    flex-wrap: wrap;
+}

css/loader.css

@@ -35,6 +35,7 @@
     padding: 2px;
     width: 7%;
     transition-duration: 0.25s;
+    cursor: pointer;
 }
 .button:hover {
   filter: brightness(1.1);

css/pages.css

@@ -138,11 +138,12 @@ input[type=text]::placeholder, input[type=password]::placeholder {
 	transform: translate(-50%, -50%);
 	display: flex;
 	flex-direction: column;
-	background-color: var(--color-3);
+  background-color: color-mix(in srgb, var(--color-2) 70%, #00000000 30%);
 	border-radius: 10px;
 	justify-content: center;
 	align-items: center;
-	box-shadow: 0px 0px 5px 5px var(--color-3);
+	backdrop-filter: blur(2px);
+  box-shadow: 0 0 10px var(--color-2);
 }
 #popup input {
 	width: 90%;

css/profile.css

@@ -43,6 +43,15 @@ p {
     margin-right: auto;
     max-width: 33.3%;
 }
+.profile-element h2 {
+    font-size: 32px;
+}
+.profile-element h2 {
+    font-size: 28px;
+}
+.profile-element h3 {
+    font-size: 20px;
+}
 #enter {
     position: absolute;
     width: 100vw;
@@ -57,20 +66,29 @@ p {
     flex-direction: column;
     transition-duration: 1s;
 }
-#edit {
-    width: 48px;
-    cursor: pointer;
-}
 #search {
     height: 36px !important;
 }
+.edit {
+    cursor: context-menu;
+}
+#blur {
+    position: absolute;
+    width: 100vw;
+    height: 100vh;
+    top: 0;
+    left: 0;
+    backdrop-filter: blur(16px);
+    z-index: 999;
+    display: none;
+}
 results {
     display: flex;
     width: 95%;
     height: 120px;
     overflow-y: scroll;
-    background-color: var(--color-4);
-    box-shadow: 0 0 10px var(--color-4);
+    background-color: color-mix(in srgb, var(--color-3) 50%, #00000000 50%);
+    box-shadow: 0 0 10px var(--color-3);
     bottom: 16px;
     flex-direction: column;
     border-radius: 8px;
@@ -83,8 +101,12 @@ result {
     margin: 2px;
     width: auto;
     text-align: left;
-    display: flex;
+    display: none;
     flex-direction: column;
+    transition-duration: 0.25s;
+}
+result:hover {
+    background-color: #ffffff11;
 }
 result h2 {
     font-size: 16px;
@@ -93,4 +115,9 @@ result h2 {
 result p {
     font-size: 12px;
     margin: 0px;
+    line-height: 16px;
+    width: 80%;
 }
+.about {
+    width: 70%;
+}

css/sidebar.css

@@ -34,7 +34,7 @@ iframe {
     background-color: #ffffff22;
     /* auto is being stupid
     100vh minus height of 1 object 7 times minus the margin and padding of 7 objects (multiplied twice bc margin and padding on top and bottom) */
-    margin-bottom: calc(100vh - 26px * 7 - ((6px + 6px) * 2) * 7);
+    margin-bottom: calc(100vh - 26px * 8 - ((6px + 6px) * 2) * 8);
 }
 
 .sidebar-item-descriptor {

css/themes.css

@@ -18,8 +18,8 @@ body[theme=blackandwhite] {
 }
 body[theme=grass] {
     --text-color: #ffffff;
-    --bg-1: #1d3024;
-    --bg-2: #385041;
+    --bg-1: #385041;
+    --bg-2: #1d3024;
     --color-1: #a8e5a7;
     --color-2: #559b7a;
     --color-3: #3a5c3f;
@@ -27,8 +27,8 @@ body[theme=grass] {
 }
 body[theme=evil] {
     --text-color: #ffffff;
-    --bg-1: #591414;
-    --bg-2: #ba2a2a;
+    --bg-1: #ba2a2a;
+    --bg-2: #591414;
     --color-1: #eb8181;
     --color-2: #ae4141;
     --color-3: #7b3838;

css/users.css

@@ -0,0 +1,49 @@
+#users {
+    display: flex;
+    height: auto;
+    width: 90%;
+    flex-direction: row;
+    justify-content: center;
+    flex-wrap: wrap;
+}
+.users {
+    width: 25vw;
+    height: 10vh;
+    background-color: color-mix(in srgb, var(--color-2) 40%, #00000000 60%);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+    border-radius: 20px;
+    margin: 15px;
+    transition-duration: 0.5s;
+	backdrop-filter: blur(2px);
+    box-shadow: 0 0 10px var(--color-2);
+    text-decoration: none;
+    text-align: right;
+}
+.users:hover {
+    transform: scale(1.05);
+    filter:brightness(1.15);
+}
+.users img {
+    height: 80%;
+	border-radius: 15px;
+	aspect-ratio: 1 / 1;
+    margin: 20px;
+    justify-self: left;
+    margin-right: auto;
+}
+.user_info {
+    width: 60%;
+    margin: 12px;
+}
+.user_info h1 {
+    font-size: 20px;
+}
+.user_info p {
+    font-size: 12px;
+}
+.pages-btn {
+    margin: 6px;
+}