implemented spaces, fixed login and signup, thought creation and space creation.
This commit is contained in:
+446
-44
@@ -10,6 +10,232 @@ body {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6,
|
||||
p,
|
||||
small,
|
||||
label,
|
||||
input,
|
||||
input:-webkit-autofill,
|
||||
input:-webkit-autofill:hover,
|
||||
input:-webkit-autofill:focus,
|
||||
textarea,
|
||||
a,
|
||||
.modal_button,
|
||||
th,
|
||||
td,
|
||||
li,
|
||||
select,
|
||||
option,
|
||||
span {
|
||||
font-family: "Hack Nerd Font Mono", Hack, sans-serif;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 3vw;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 2.5vw;
|
||||
}
|
||||
|
||||
h3,
|
||||
h3 a {
|
||||
font-size: 2vw;
|
||||
}
|
||||
|
||||
h4,
|
||||
h4 a {
|
||||
font-size: 1.75vw;
|
||||
}
|
||||
|
||||
h5,
|
||||
h5 a {
|
||||
font-size: 1.5vw;
|
||||
}
|
||||
|
||||
h6,
|
||||
h6 a {
|
||||
font-size: 1.25vw;
|
||||
}
|
||||
|
||||
p,
|
||||
a,
|
||||
label,
|
||||
li,
|
||||
.modal_button,
|
||||
.button,
|
||||
span {
|
||||
font-size: 1vw;
|
||||
}
|
||||
|
||||
small {
|
||||
font-size: 0.75vw;
|
||||
}
|
||||
|
||||
a,
|
||||
.modal_button {
|
||||
color: red;
|
||||
transition-duration: 1s;
|
||||
}
|
||||
|
||||
a {
|
||||
-webkit-tap-highlight-color: transparent !important;
|
||||
outline: none !important;
|
||||
}
|
||||
|
||||
a.fillDiv {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.button {
|
||||
background-color: transparent;
|
||||
padding: 15px;
|
||||
text-decoration: none;
|
||||
border-radius: 12px;
|
||||
transition-duration: 1s;
|
||||
border: 3px solid red;
|
||||
}
|
||||
|
||||
.link {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.underline {
|
||||
text-decoration: underline;
|
||||
text-decoration-thickness: 3px;
|
||||
text-decoration-color: red;
|
||||
}
|
||||
|
||||
i {
|
||||
border: none;
|
||||
background: transparent;
|
||||
font-size: 1.5vw;
|
||||
transition-duration: 500ms;
|
||||
}
|
||||
|
||||
#theme_toggle {
|
||||
background: none;
|
||||
border: none;
|
||||
}
|
||||
|
||||
i:hover {
|
||||
color: red;
|
||||
}
|
||||
|
||||
/********** Forms ************/
|
||||
|
||||
input,
|
||||
.autofilled,
|
||||
input:-webkit-autofill,
|
||||
textarea:-webkit-autofill,
|
||||
input:-webkit-autofill:hover,
|
||||
textarea:-webkit-autofill:hover,
|
||||
input:-webkit-autofill:focus,
|
||||
select,
|
||||
option,
|
||||
textarea {
|
||||
/* Try this first */
|
||||
border-radius: 12px;
|
||||
width: 100%;
|
||||
padding: 15px;
|
||||
margin: 15px 15px 15px 0px;
|
||||
box-sizing: border-box;
|
||||
transition-duration: 500ms;
|
||||
resize: none;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
input:focus,
|
||||
textarea:focus,
|
||||
input:hover,
|
||||
textarea:hover {
|
||||
border: 3px solid red;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
textarea {
|
||||
border-radius: 18px;
|
||||
height: 70%;
|
||||
}
|
||||
|
||||
input[type="radio"] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.form_checkbox_container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
padding-left: 35px;
|
||||
margin: 15px 15px 15px 0px;
|
||||
cursor: pointer;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
|
||||
height: 29px;
|
||||
width: max-content;
|
||||
}
|
||||
|
||||
.checkmark {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 25px;
|
||||
width: 25px;
|
||||
}
|
||||
|
||||
.form_checkbox_container input {
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
cursor: pointer;
|
||||
height: 0;
|
||||
width: 0;
|
||||
}
|
||||
|
||||
/* Create the checkmark/indicator (hidden when not checked) */
|
||||
.checkmark:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Show the checkmark when checked */
|
||||
.form_checkbox_container input:checked ~ .checkmark:after {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* When the checkbox is checked, add a blue background */
|
||||
.form_checkbox_container input:checked ~ .checkmark {
|
||||
background-color: red;
|
||||
}
|
||||
|
||||
/* Style the checkmark/indicator */
|
||||
.form_checkbox_container .checkmark:after {
|
||||
left: 9px;
|
||||
top: 5px;
|
||||
width: 5px;
|
||||
height: 10px;
|
||||
border: solid white;
|
||||
border-width: 0 3px 3px 0;
|
||||
-webkit-transform: rotate(45deg);
|
||||
-ms-transform: rotate(45deg);
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
/********** Width & Sizing **********/
|
||||
.full_width {
|
||||
width: 100%;
|
||||
@@ -50,6 +276,11 @@ body {
|
||||
border: 1px solid red;
|
||||
}
|
||||
|
||||
.line {
|
||||
margin-top: 5px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
/********** Rows & Columns **********/
|
||||
.row {
|
||||
display: flex;
|
||||
@@ -71,6 +302,10 @@ body {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.rel {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/********** Margins & Padding **********/
|
||||
.margin {
|
||||
margin: 15px;
|
||||
@@ -124,6 +359,83 @@ body {
|
||||
padding-left: 15px;
|
||||
}
|
||||
|
||||
/*********** Nav **********/
|
||||
nav {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
position: sticky;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
backdrop-filter: blur(50px);
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
nav ul {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
nav ul li {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
nav ul li a {
|
||||
font-size: 2vw;
|
||||
font-weight: 800;
|
||||
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
padding: 15px;
|
||||
|
||||
transition-duration: 500ms;
|
||||
}
|
||||
|
||||
nav ul li a:hover {
|
||||
color: red;
|
||||
}
|
||||
|
||||
nav form {
|
||||
padding: 15px;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.nav_right_hand {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.nav_right_hand * {
|
||||
margin: 0px 15px 0px 15px;
|
||||
}
|
||||
|
||||
/*********** Dropdowns **********/
|
||||
.dropdown {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.dropdownContent {
|
||||
display: none;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
/******* Space Selector *********/
|
||||
#postSpaces {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/************ Modals ************/
|
||||
#stdModal {
|
||||
position: absolute;
|
||||
@@ -136,55 +448,25 @@ body {
|
||||
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
#stdModal>* {}
|
||||
|
||||
/******** Action Buttons ********/
|
||||
.circleLayout {
|
||||
width: 350px;
|
||||
/* Adjust as needed */
|
||||
height: 350px;
|
||||
border-radius: 50%;
|
||||
/* Important for positioning children */
|
||||
position: fixed;
|
||||
bottom: 50px;
|
||||
right: 50px;
|
||||
overflow: hidden;
|
||||
#stdModal > * {
|
||||
}
|
||||
|
||||
.actionButton {
|
||||
.glass {
|
||||
background-color: transparent;
|
||||
backdrop-filter: blur(5px);
|
||||
}
|
||||
|
||||
#actionBar {
|
||||
position: absolute;
|
||||
|
||||
border-radius: 50%;
|
||||
width: 75px;
|
||||
height: 75px;
|
||||
background-color: orange;
|
||||
color: black;
|
||||
}
|
||||
|
||||
#actionButton {
|
||||
top: 50%;
|
||||
bottom: 3.5%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
transform: translate(-50%, -5%);
|
||||
|
||||
#newPost {
|
||||
top: 50%;
|
||||
left: 0%;
|
||||
transform: translate(0%, -50%);
|
||||
}
|
||||
|
||||
#newSpace {
|
||||
top: 15%;
|
||||
left: 15%;
|
||||
transform: translate(-15%, -15%);
|
||||
}
|
||||
|
||||
#filterSort {
|
||||
top: 0%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, 0%);
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
/********** Animations **********/
|
||||
@@ -194,11 +476,11 @@ body {
|
||||
}
|
||||
|
||||
::view-transition-old(root) {
|
||||
animation: fade-out 750ms forwards;
|
||||
animation: fade-out 1s forwards;
|
||||
}
|
||||
|
||||
::view-transition-new(root) {
|
||||
animation: fade-in 750ms forwards;
|
||||
animation: fade-in 1s forwards;
|
||||
}
|
||||
|
||||
@keyframes fade-in {
|
||||
@@ -220,3 +502,123 @@ body {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/********** Misc. **********/
|
||||
::-webkit-scrollbar {
|
||||
background-color: transparent;
|
||||
border-radius: 18px;
|
||||
width: 10px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-button {
|
||||
display: none;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
display: none;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background-color: red;
|
||||
border-radius: 9px;
|
||||
}
|
||||
|
||||
#backButton {
|
||||
position: absolute;
|
||||
top: 11%;
|
||||
left: 8%;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
#backButton:hover > i {
|
||||
color: red;
|
||||
}
|
||||
|
||||
/********** Mobile **********/
|
||||
@media screen and (max-width: 1200px) {
|
||||
h1 {
|
||||
font-size: 6vw;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 5vw;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 4vw;
|
||||
}
|
||||
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-size: 3.5vw;
|
||||
}
|
||||
|
||||
p,
|
||||
a,
|
||||
nav ul li a,
|
||||
li,
|
||||
i,
|
||||
span,
|
||||
input,
|
||||
label,
|
||||
input[type="submit"] {
|
||||
font-size: 2.5vw;
|
||||
}
|
||||
|
||||
.std_width,
|
||||
.stdWidth {
|
||||
width: 95%;
|
||||
}
|
||||
|
||||
.med_width,
|
||||
.medWidth {
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
nav {
|
||||
position: fixed;
|
||||
bottom: -2px;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding: 25px 0px 25px 0px;
|
||||
backdrop-filter: blur(50px);
|
||||
}
|
||||
|
||||
nav ul li a {
|
||||
font-size: 3vw;
|
||||
}
|
||||
|
||||
.site_navigation ul {
|
||||
display: flex;
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
|
||||
nav .row_space_between .no_margin {
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
|
||||
.nav_right_hand {
|
||||
flex-direction: row-reverse;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.nav_right_hand * {
|
||||
margin: 0px 0px 0px 15px;
|
||||
}
|
||||
|
||||
#backButton {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#actionBar {
|
||||
bottom: 125px;
|
||||
}
|
||||
|
||||
.modalContent {
|
||||
max-height: 600px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user