summaryrefslogtreecommitdiff
path: root/src/scss
diff options
context:
space:
mode:
Diffstat (limited to 'src/scss')
-rw-r--r--src/scss/_mixins.scss22
-rw-r--r--src/scss/_variables.scss71
-rw-r--r--src/scss/auth.scss51
-rw-r--r--src/scss/common.scss600
-rw-r--r--src/scss/error.scss16
-rw-r--r--src/scss/home.scss24
-rw-r--r--src/scss/people.scss46
-rw-r--r--src/scss/post.scss15
-rw-r--r--src/scss/profile.scss121
-rw-r--r--src/scss/settings.scss15
10 files changed, 981 insertions, 0 deletions
diff --git a/src/scss/_mixins.scss b/src/scss/_mixins.scss
new file mode 100644
index 0000000..bcb795d
--- /dev/null
+++ b/src/scss/_mixins.scss
@@ -0,0 +1,22 @@
+@mixin font-face($name) {
+ @font-face {
+ font-family: $name;
+ src: url("../font/" + $name + ".woff2") format("woff2"),
+ url("../font/" + $name + ".woff") format("woff"),
+ url("../font/" + $name + ".ttf") format("truetype"),
+ url("../font/" + $name + ".otf") format("opentype");
+ font-weight: normal;
+ font-style: normal;
+ font-display: swap;
+ }
+}
+
+@mixin row {
+ display: flex;
+ flex-direction: row;
+}
+
+@mixin column {
+ display: flex;
+ flex-direction: column;
+}
diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss
new file mode 100644
index 0000000..3a81165
--- /dev/null
+++ b/src/scss/_variables.scss
@@ -0,0 +1,71 @@
+
+$varient: "dark";
+
+$white: #e4e6eb;
+$white-alt: #b0b3b8;
+$black: #000000;
+$black-alt: #1d2129;
+$red: #f02849;
+$red-alt: #f02849;
+$green: #30ab5a;
+$green-alt: #39b463;
+$blue: #1778f2;
+$blue-alt: #1d85fc;
+$yellow: #dcde81;
+$yellow-alt: #808037;
+$grey-100: #18191a;
+$grey-200: #242526;
+$grey-300: #3a3b3c;
+$grey-400: #4e4f50;
+$grey-500: #606770;
+$grey-700: #dadde1;
+$grey-800: #f0f2f5;
+$grey-900: #fff;
+
+$base: null !default;
+$surface0: null !default;
+$surface1: null !default;
+$surface2: null !default;
+$text: null !default;
+$subtext: null !default;
+$btntext: null !default;
+
+@if $varient == "dark" {
+ $base: $grey-100;
+ $surface0: $grey-200;
+ $surface1: $grey-300;
+ $surface2: $grey-400;
+ $text: $white;
+ $subtext: $white-alt;
+ $btntext: $white;
+}
+
+@if $varient == "light" {
+ $base: $grey-900;
+ $surface0: $grey-900;
+ $surface1: $grey-800;
+ $surface2: $grey-700;
+ $text: $black;
+ $subtext: $black-alt;
+ $btntext: $grey-500;
+}
+
+$font: "Helvetica Neue", Helvetica, Verdana, Courier, monospace;
+$header-font: "Facebook";
+
+$scale: 16px;
+$outer-gap: $scale;
+$inner-gap: $scale;
+$inner-inner-gap: $scale * 0.75;
+$outer-radius: $scale / 2;
+$inner-radius: $scale / 3;
+$font-size: $scale;
+$font-size-small: $scale * 0.75;
+
+$header-height: $scale * 3.5;
+
+$base-z-index: 1;
+$header-z-index: 2;
+$modal-z-index: 5;
+
+$content-width: $scale * 40;
diff --git a/src/scss/auth.scss b/src/scss/auth.scss
new file mode 100644
index 0000000..5f4fb91
--- /dev/null
+++ b/src/scss/auth.scss
@@ -0,0 +1,51 @@
+@import "./variables";
+@import "./mixins";
+
+#main-content {
+ padding-top: 20rem;
+ padding-bottom: 5rem;
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+}
+
+.branding {
+ max-width: 100%;
+ width: 30rem;
+ margin-right: 5rem;
+}
+
+.branding h1 {
+ color: $blue;
+ font-family: facebook;
+ font-size: 3.5rem;
+}
+
+.branding span {
+ font-size: 1.5rem;
+}
+
+.form {
+ display: flex;
+ flex-direction: column;
+ width: 30rem;
+ max-width: 100%;
+}
+
+@media(max-width: 1200px) {
+ #main-content {
+ flex-direction: column;
+ align-items: center;
+ width: 100%;
+ padding: 10rem 1rem;
+ }
+
+ .branding {
+ margin: 0;
+ }
+
+ .form {
+ margin-top: 4rem;
+ }
+}
+
diff --git a/src/scss/common.scss b/src/scss/common.scss
new file mode 100644
index 0000000..5a570f9
--- /dev/null
+++ b/src/scss/common.scss
@@ -0,0 +1,600 @@
+@import "./variables";
+@import "./mixins";
+
+@include font-face("Helvetica Neue");
+@include font-face("Material Icons");
+@include font-face("Facebook");
+@include font-face("SF Pro");
+
+* {
+ box-sizing: border-box;
+}
+
+hr {
+ color: $surface2;
+ background: $surface2;
+ width: 100%;
+ height: 1px;
+ border: none;
+}
+
+a,
+input,
+button {
+ background: none;
+ border: none;
+ color: inherit;
+}
+
+a,
+button {
+ cursor: pointer;
+}
+
+html {
+ color: $text;
+ font-family: $font;
+ font-size: $font-size;
+ background: $surface0;
+
+ .subtext {
+ color: $subtext;
+ }
+}
+
+html,
+body {
+ width: 100%;
+ margin: 0;
+ padding: 0;
+}
+
+header#header {
+ height: $header-height;
+ background: $surface0;
+ position: sticky;
+ top: 0;
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ padding: 0 $inner-gap;
+ border-bottom: 1px solid $surface1;
+ z-index: $header-z-index;
+
+ .left,
+ .center,
+ .right {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ flex: 1;
+ }
+
+ .left {
+ .logo {
+ font-family: $header-font;
+ color: $blue;
+ font-size: 2.25em;
+ height: 100%;
+ line-height: 2rem;
+ margin-top: $inner-gap;
+ }
+ }
+
+ .center {
+ position: absolute;
+ height: 100%;
+ left: 50%;
+ top: 0;
+ transform: translateX(-50%);
+ justify-content: center;
+ }
+
+ .right {
+ justify-content: flex-end;
+
+ > .pfp {
+ padding: 0;
+ }
+
+ #user-menu {
+ position: fixed;
+ right: $inner-gap;
+ top: $header-height + $inner-gap;
+ min-width: fit-content;
+ width: 20em;
+ animation: fadeIn .1s, slideIn .1s linear;
+
+ .user-menu-header {
+ align-items: center;
+
+ .pfp {
+ margin-right: $inner-gap;
+ }
+ }
+
+ .btn {
+ justify-content: flex-start;
+ }
+ }
+ }
+
+}
+
+@media (min-width: 800px) {
+ header#header {
+ .center {
+ .btn {
+ padding: 0 3rem;
+ height: 100%;
+
+ > span {
+ display: none;
+ }
+ }
+ }
+
+ .right {
+ #action-hamburger {
+ display: none;
+ }
+ }
+ }
+}
+
+@media (max-width: 800px) {
+ header#header {
+ .center {
+ display: none;
+ position: absolute;
+ flex-direction: column;
+ top: 100%;
+ height: fit-content;
+ background-color: $surface0;
+ width: 100%;
+ left: 0;
+ transform: translateX(0%);
+ justify-content: flex-start;
+
+ &.visible {
+ display: inherit !important;
+ }
+
+ .btn {
+ width: 100%;
+ padding: $inner-gap 0;
+ padding-left: 3rem;
+ justify-content: flex-start;
+
+ > span {
+ margin-left: $inner-gap;
+ }
+
+ &.btn-border {
+ ::before {
+ background: inherit;
+ }
+ }
+ }
+ }
+ }
+}
+
+main#main {
+ background: $base;
+ padding-top: $inner-gap;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+}
+
+footer#footer {
+ text-align: center;
+ padding: $inner-gap;
+ color: $subtext;
+ font-size: $font-size-small;
+}
+
+.btn {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ position: relative;
+ text-align: center;
+ border-radius: $inner-radius;
+ font-weight: bold;
+ text-decoration: none;
+ padding: $inner-gap * 0.5;
+
+ &:hover {
+ background: $surface1;
+ }
+
+ &.btn-alt {
+ background: $surface1;
+
+ &:hover {
+ background: $surface2;
+ }
+ }
+
+ &.btn-primary {
+ color: $blue-alt;
+
+ &.btn-alt {
+ background: $blue;
+ color: $white;
+
+ &:hover {
+ background: $blue-alt;
+ }
+ }
+ }
+
+ &.btn-success,
+ &.btn-submit {
+ color: $green-alt;
+
+ &.btn-alt {
+ background: $green;
+ color: $white;
+
+ &:hover {
+ background: $green-alt;
+ }
+ }
+ }
+
+ &.btn-blend {
+ font-weight: inherit;
+
+ &:hover {
+ background: inherit !important;
+ text-decoration: underline;
+ }
+ }
+
+ &.btn-border {
+ ::before {
+ position: absolute;
+ content: "";
+ display: block;
+ bottom: -1px;
+ left: 0;
+ right: 0;
+ height: 1px;
+ background: $blue-alt;
+ }
+ }
+}
+
+.image {
+ display: block;
+
+ .inner {
+ width: 100%;
+ height: 100%;
+ display: inherit;
+ border-radius: inherit;
+ }
+
+ &.pfp {
+ height: 2.5em;
+ aspect-ratio: 1;
+ border-radius: 100%;
+ }
+}
+
+/* fix banner on profile pages */
+object.inner {
+ pointer-events: none;
+}
+
+/* loading animation*/
+.loading {
+ background: linear-gradient(-45deg, $surface0) 0%, var(--base) 25%, var(--surface0) 50%;
+ background-size: 500%;
+ background-position-x: 150%;
+}
+
+/* loaded bg to fix transparent images */
+.loaded {
+ background-color: $base;
+}
+
+.card {
+ background-color: $surface0;
+ border-radius: $outer-radius;
+ padding: $inner-gap;
+ max-width: $content-width;
+ margin-bottom: $outer-gap;
+
+ p {
+ margin-bottom: 0;
+ }
+
+ form {
+ flex-grow: 1;
+ }
+
+ .sub-card {
+ background-color: $surface1;
+ border-radius: $inner-radius;
+ padding: $inner-inner-gap;
+ }
+}
+
+.row {
+ @include row;
+}
+
+.col {
+ @include column;
+}
+
+.grow {
+ width: auto;
+ flex: 1;
+ flex-grow: 1;
+}
+
+.ml-sm {
+ margin-left: .5rem;
+}
+
+.ml {
+ margin-left: 1rem;
+}
+
+.mr-sm {
+ margin-right: .5rem;
+}
+
+.mr {
+ margin-right: 1rem;
+}
+
+.mt {
+ margin-top: 1rem;
+}
+
+.mb {
+ margin-bottom: .75rem;
+}
+
+.pb {
+ padding-bottom: 1rem;
+}
+
+.modal-container {
+ z-index: $modal-z-index;
+ position: fixed;
+ background: #fff2;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ display: block;
+
+ .modal {
+ background-color: $surface0;
+ position: fixed;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ min-width: $content-width;
+ min-height: $content-width * 0.6;
+ border-radius: $outer-radius;
+ @include column;
+ animation: fadeIn .1s, slideInModal .1s linear;
+
+ .modal-header {
+ display: block;
+ position: relative;
+ border-bottom: 1px solid $surface1;
+ cursor: grab;
+ padding: $inner-gap;
+ text-align: center;
+
+ .modal-title {
+ position: absolute;
+ left: 50%;
+ top: 50%;
+ transform: translate(-50%, -50%);
+ font-weight: bold;
+ }
+
+ .modal-close {
+ float: right;
+ }
+ }
+
+ .modal-content {
+ flex-grow: 1;
+ padding: 1rem;
+ }
+
+ .modal-footer {
+ margin-top: auto;
+ padding: 0 1rem;
+ padding-bottom: 1rem;
+ display: flex;
+ flex-direction: row;
+ justify-content: flex-end;
+ }
+
+
+ > form {
+ display: flex;
+ flex-direction: column;
+ flex-grow: 1;
+ }
+ }
+}
+
+@media (max-width: $content-width) {
+ .modal-container {
+ .modal {
+ min-width: 100%;
+ width: 100%;
+ }
+ }
+}
+
+@keyframes slideInModal {
+ 0% {
+ animation-timing-function: ease-in;
+ transform: translate(-50%, -60%);
+ }
+}
+
+@keyframes slideIn {
+ 0% {
+ animation-timing-function: ease-in;
+ transform: translate(0, -20%);
+ }
+}
+
+@keyframes fadeIn {
+ 0% {
+ opacity: 0;
+ }
+ 100% {
+ opacity: 1;
+ }
+}
+
+.float-right {
+ position: absolute;
+ top: 50%;
+ left: 100%;
+ transform: translate(-125%, -50%);
+}
+
+.mi {
+ font-family: 'Material Icons';
+ font-style: normal;
+ font-size: 1.5rem;
+}
+
+.mi-sm {
+ font-size: 1rem;
+}
+
+.mi-lg {
+ font-size: 2rem;
+}
+
+#toast-container {
+ position: fixed;
+ top: 4rem;
+ left: 100%;
+ transform: translateX(-110%);
+ margin-top: 1rem;
+ z-index: 10000;
+}
+
+.toast {
+ color: $white;
+ padding: .75rem;
+ margin: .5rem;
+ border-radius: .5rem;
+ min-width: 15rem;
+ animation: fadeIn .1s, slideIn .25s linear;
+ display: flex;
+ justify-content: space-between;
+}
+
+.toast.error {
+ background-color: $red;
+}
+
+.toast.success {
+ background-color: $green;
+}
+
+form input:not(.btn) {
+ display: block;
+ font-size: 1.1rem;
+ outline: 2px solid $surface2;
+ border-radius: .25rem;
+ padding: .75rem;
+}
+
+form input:not(.btn):focus {
+ outline-color: $blue;
+}
+
+form .rel label:not(.static) {
+ position: absolute;
+ top: 50%;
+ transform: translate(.5rem, -40%);
+ color: $subtext;
+ transition: all 0.2s ease-out;
+ pointer-events: none;
+ width: fit-content;
+ font-size: 1.1rem;
+}
+
+input:focus + label:not(.static),
+input:not(:placeholder-shown) + label:not(.static) {
+ color: $text;
+ top: 0;
+ padding: .5rem;
+ padding-top: 0;
+ font-size: .75rem;
+ transform: translate(.5rem, -25%);
+ background-color: $surface0;
+}
+
+.rel {
+ position: relative;
+}
+
+.rel input {
+ width: 100%;
+ flex-grow: 1;
+}
+
+input[type=radio] {
+ padding: 3rem !important;
+ width: 1rem !important;
+ outline: none !important;
+}
+
+.radio {
+ display: flex;
+ flex-direction: row;
+ width: auto;
+ flex-grow: 1;
+}
+
+.radio label {
+ border: 1px solid $surface2;
+ height: fit-content;
+ width: 100%;
+ padding: .75rem;
+ border-radius: .25rem;
+ cursor: pointer;
+}
+
+.radio input {
+ position: absolute;
+ top: 50%;
+ left: 100%;
+ transform: translate(-250%, -70%);
+ width: fit-content;
+ outline: none !important;
+}
+
+.container {
+ padding: 1rem;
+}
+
+.grow {
+ flex-grow: 1;
+}
+
+.hidden {
+ display: none;
+}
diff --git a/src/scss/error.scss b/src/scss/error.scss
new file mode 100644
index 0000000..0f4c0b1
--- /dev/null
+++ b/src/scss/error.scss
@@ -0,0 +1,16 @@
+@import "./variables";
+@import "./mixins";
+
+main#main {
+ padding: 10rem 0;
+
+ h1 {
+ color: $blue;
+ font-family: $header-font;
+ font-size: 5em;
+ }
+
+ span {
+ font-size: 2em;
+ }
+}
diff --git a/src/scss/home.scss b/src/scss/home.scss
new file mode 100644
index 0000000..e490f55
--- /dev/null
+++ b/src/scss/home.scss
@@ -0,0 +1,24 @@
+@import "./variables";
+@import "./mixins";
+
+#main-content {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ padding: 1rem;
+ padding-bottom: 0;
+}
+
+.new-post-modal textarea {
+ border: none;
+ resize: none;
+ outline: none;
+ font-size: 1.5rem;
+ margin: 1rem 0;
+ width: 100%;
+ height: 10rem;
+ flex-grow: 1;
+ background-color: transparent;
+ color: $text;
+ font-family: $font;
+}
diff --git a/src/scss/people.scss b/src/scss/people.scss
new file mode 100644
index 0000000..4511aa8
--- /dev/null
+++ b/src/scss/people.scss
@@ -0,0 +1,46 @@
+@import "./variables";
+@import "./mixins";
+
+$profile-width: 16em;
+
+main#main {
+ .title {
+ margin-top: $outer-gap;
+ font-size: 3rem;
+ margin-bottom: 0;
+ }
+}
+
+#people-container {
+ display: grid;
+ width: 100%;
+ padding: $inner-gap;
+ margin-bottom: $outer-gap;
+ grid-template-columns: repeat(auto-fill, minmax($profile-width, 1fr) );
+ grid-auto-rows: max-content;
+ grid-gap: 2em;
+
+ .profile {
+ width: $profile-width;
+ text-decoration: none;
+ margin-left: auto;
+ margin-right: auto;
+
+ &:hover {
+ outline: 1px solid $blue;
+ }
+
+ .name {
+ font-weight: bold;
+ font-size: 1.5em;
+ }
+
+ .pfp {
+ border-radius: $inner-gap / 4;
+ width: 100%;
+ height: 100%;
+ margin-bottom: $inner-gap;
+ }
+ }
+
+}
diff --git a/src/scss/post.scss b/src/scss/post.scss
new file mode 100644
index 0000000..8913be0
--- /dev/null
+++ b/src/scss/post.scss
@@ -0,0 +1,15 @@
+@import "./variables";
+@import "./mixins";
+
+#post-container {
+ max-width: $content-width;
+ width: 100%;
+
+ .post {
+ padding-bottom: 0;
+ }
+}
+
+#new-post {
+ width: 100%;
+}
diff --git a/src/scss/profile.scss b/src/scss/profile.scss
new file mode 100644
index 0000000..ec271e4
--- /dev/null
+++ b/src/scss/profile.scss
@@ -0,0 +1,121 @@
+@import "./variables";
+@import "./mixins";
+
+main#main {
+ padding-top: 0;
+}
+
+$pfp-size: 12.5em;
+
+#profile-header-container {
+ width: 100%;
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ background-color: $surface0;
+ border-bottom: 1px solid $surface1;
+}
+
+#profile-header {
+ min-width: 0;
+ max-width: 80rem;
+ flex-grow: 1;
+
+ .banner {
+ width: 100%;
+ max-width: 100%;
+ min-height: 30em;
+ aspect-ratio: 5;
+
+ img {
+ object-fit: cover;
+ }
+ }
+
+ .info {
+ position: relative;
+ margin-bottom: 6em;
+
+ .pfp-wrapper {
+ padding: $inner-gap / 2;
+ background-color: $surface0;
+ height: fit-content;
+ border-radius: 100%;
+ position: absolute;
+ top: -2.5rem;
+ left: $inner-gap;
+
+ .pfp {
+ height: $pfp-size;
+ }
+ }
+
+ .content {
+ margin-left: $pfp-size + 5em;
+ margin-top: 2em;
+
+ .name {
+ font-size: 2em;;
+ }
+
+ .follow {
+ margin-left: auto;
+ margin-right: 2rem;
+
+ a {
+ width: 10rem;
+ padding: $inner-gap / 2;
+ }
+ }
+
+ }
+ }
+
+ > hr {
+ margin: 0;
+ border-bottom: 1px solid $surface1;
+ }
+
+ .options {
+ height: 3rem;
+
+ .btn {
+ width: 10rem;
+ }
+ }
+}
+
+@media(max-width: 800px) {
+ #profile-header {
+ .info {
+ .pfp-wrapper {
+ .pfp {
+ height: $pfp-size * 0.7;
+ }
+ }
+
+ .content {
+ margin-left: ($pfp-size + 5em) * 0.7;
+ }
+ }
+ }
+}
+
+#tab-container {
+ width: 100%;
+ @include column;
+ align-items: center;
+}
+
+#tab-posts,
+#tab-about {
+ width: 100%;
+ max-width: $content-width;
+}
+
+#tab-about {
+ td:nth-child(1) {
+ padding-right: 2rem;
+ }
+}
+
diff --git a/src/scss/settings.scss b/src/scss/settings.scss
new file mode 100644
index 0000000..2194bcc
--- /dev/null
+++ b/src/scss/settings.scss
@@ -0,0 +1,15 @@
+@import "./variables";
+@import "./mixins";
+
+#main-content {
+ display: flex;
+ justify-content: center;
+}
+
+#settings {
+ margin: 0 1rem;
+ margin-bottom: 1rem;
+ max-width: 800px;
+ min-width: 400px;
+ width: 100%;
+}
generated by cgit v1.2.3-freya (git 2.51.0) at 2025-09-22 21:19:03 +0000