summaryrefslogtreecommitdiff
path: root/src/scss
diff options
context:
space:
mode:
Diffstat (limited to 'src/scss')
-rw-r--r--src/scss/_variables.scss3
-rw-r--r--src/scss/auth.scss4
-rw-r--r--src/scss/common.scss42
-rw-r--r--src/scss/error.scss2
-rw-r--r--src/scss/home.scss8
-rw-r--r--src/scss/people.scss2
-rw-r--r--src/scss/post.scss11
-rw-r--r--src/scss/profile.scss35
8 files changed, 61 insertions, 46 deletions
diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss
index 1a48cdd..4d93e17 100644
--- a/src/scss/_variables.scss
+++ b/src/scss/_variables.scss
@@ -64,7 +64,7 @@ $btntext: null !default;
$font: "Helvetica Neue", Helvetica, Verdana, Courier, monospace;
$header-font: "Facebook";
-$scale: 16px;
+$scale: 1rem;
$outer-gap: $scale;
$inner-gap: $scale;
$inner-inner-gap: $scale * 0.75;
@@ -79,3 +79,4 @@ $modal-z-index: 5;
$toast-z-index: 10;
$content-width: $scale * 40;
+$pfp-width: $scale * 2.5;
diff --git a/src/scss/auth.scss b/src/scss/auth.scss
index 962641c..cee18a7 100644
--- a/src/scss/auth.scss
+++ b/src/scss/auth.scss
@@ -35,14 +35,14 @@ main#main {
main#main {
@include column;
align-items: center;
- padding: 10rem $outer-gap;
+ padding: 10em $outer-gap;
.branding {
margin: 0;
}
.form {
- margin-top: 4rem;
+ margin-top: 4em;
}
}
diff --git a/src/scss/common.scss b/src/scss/common.scss
index 4c3bd77..7b3b5a2 100644
--- a/src/scss/common.scss
+++ b/src/scss/common.scss
@@ -84,7 +84,7 @@ header#header {
color: $blue;
font-size: 2.25em;
height: 100%;
- line-height: 2rem;
+ line-height: 2em;
margin-top: $inner-gap;
}
}
@@ -132,7 +132,7 @@ header#header {
header#header {
.center {
.btn {
- padding: 0 3rem;
+ padding: 0 3em;
height: 100%;
> span {
@@ -170,7 +170,7 @@ header#header {
.btn {
width: 100%;
padding: $inner-gap 0;
- padding-left: 3rem;
+ padding-left: 3em;
justify-content: flex-start;
> span {
@@ -292,7 +292,7 @@ input.btn {
}
&.pfp {
- height: 2.5em;
+ height: $pfp-width;
aspect-ratio: 1;
border-radius: 100%;
}
@@ -356,35 +356,35 @@ object.inner {
}
.ml {
- margin-left: 1rem;
+ margin-left: 1em;
}
.mr {
- margin-right: 1rem;
+ margin-right: 1em;
}
.mt {
- margin-top: 1rem;
+ margin-top: 1em;
}
.mb {
- margin-bottom: .75rem;
+ margin-bottom: .75em;
}
.pl {
- padding-left: 1rem;
+ padding-left: 1em;
}
.pr {
- padding-right: 1rem;
+ padding-right: 1em;
}
.pt {
- padding-top: 1rem;
+ padding-top: 1em;
}
.pb {
- padding-bottom: 1rem;
+ padding-bottom: 1em;
}
.modal-container {
@@ -432,13 +432,13 @@ object.inner {
.modal-content {
flex-grow: 1;
- padding: 1rem;
+ padding: $outer-gap;
}
.modal-footer {
margin-top: auto;
- padding: 0 1rem;
- padding-bottom: 1rem;
+ padding: 0 $outer-gap;
+ padding-bottom: $outer-gap;
display: flex;
flex-direction: row;
justify-content: flex-end;
@@ -562,12 +562,12 @@ form {
padding-left: $inner-gap / 2;
position: absolute;
top: 50%;
- transform: translate(.5rem, -40%);
+ transform: translate(.5em, -40%);
color: $subtext;
transition: all 0.2s ease-out;
pointer-events: none;
width: fit-content;
- font-size: 1.1rem;
+ font-size: 1.1em;
}
input {
@@ -581,10 +581,10 @@ form {
top: 50%;
color: $text;
top: 0;
- padding: .5rem;
+ padding: .5em;
padding-top: 0;
- font-size: .75rem;
- transform: translate(.5rem, -25%);
+ font-size: .75em;
+ transform: translate(.5em, -25%);
background-color: $surface0;
}
}
@@ -623,7 +623,7 @@ form {
.logo {
color: $blue;
font-family: $header-font;
- font-size: 2.25rem;
+ font-size: 2.25em;
margin-bottom: $inner-gap;
}
}
diff --git a/src/scss/error.scss b/src/scss/error.scss
index 0f4c0b1..d1b70ed 100644
--- a/src/scss/error.scss
+++ b/src/scss/error.scss
@@ -2,7 +2,7 @@
@import "./mixins";
main#main {
- padding: 10rem 0;
+ padding: 10em 0;
h1 {
color: $blue;
diff --git a/src/scss/home.scss b/src/scss/home.scss
index e490f55..18e84f9 100644
--- a/src/scss/home.scss
+++ b/src/scss/home.scss
@@ -5,7 +5,7 @@
display: flex;
flex-direction: column;
align-items: center;
- padding: 1rem;
+ padding: $outer-gap;
padding-bottom: 0;
}
@@ -13,10 +13,10 @@
border: none;
resize: none;
outline: none;
- font-size: 1.5rem;
- margin: 1rem 0;
+ font-size: 1.5em;
+ margin: $inner-gap 0;
width: 100%;
- height: 10rem;
+ height: 10em;
flex-grow: 1;
background-color: transparent;
color: $text;
diff --git a/src/scss/people.scss b/src/scss/people.scss
index 84a4f4c..8d07f4a 100644
--- a/src/scss/people.scss
+++ b/src/scss/people.scss
@@ -6,7 +6,7 @@ $profile-width: 16em;
main#main {
.title {
margin-top: $outer-gap;
- font-size: 3rem;
+ font-size: 3em;
margin-bottom: 0;
}
diff --git a/src/scss/post.scss b/src/scss/post.scss
index 5d78991..26025f5 100644
--- a/src/scss/post.scss
+++ b/src/scss/post.scss
@@ -7,6 +7,17 @@
.post {
padding-bottom: 0;
+
+ .content {
+ margin-top: $inner-gap / 2;
+ word-wrap: break-word;
+ }
+
+ .comment {
+ .sub-card {
+ max-width: calc(100% - #{$pfp-width} - #{$inner-gap});
+ }
+ }
}
}
diff --git a/src/scss/profile.scss b/src/scss/profile.scss
index 3f1414d..1e89e03 100644
--- a/src/scss/profile.scss
+++ b/src/scss/profile.scss
@@ -5,7 +5,10 @@ main#main {
padding-top: 0;
}
-$pfp-size: 12.5em;
+$profile-width: $content-width * 2;
+$profile-pfp-width: $pfp-width * 5;
+
+$profile-header-content-margin: $profile-pfp-width + $outer-gap * 5;
#profile-header-container {
width: 100%;
@@ -18,13 +21,13 @@ $pfp-size: 12.5em;
#profile-header {
min-width: 0;
- max-width: 80rem;
+ max-width: $profile-width;
flex-grow: 1;
.banner {
width: 100%;
max-width: 100%;
- min-height: 30em;
+ min-height: $profile-width * 3/8;
aspect-ratio: 5;
img {
@@ -34,7 +37,7 @@ $pfp-size: 12.5em;
.info {
position: relative;
- margin-bottom: 6em;
+ margin-bottom: $profile-pfp-width / 2;
.pfp-wrapper {
padding: $inner-gap / 2;
@@ -42,28 +45,28 @@ $pfp-size: 12.5em;
height: fit-content;
border-radius: 100%;
position: absolute;
- top: -2.5rem;
+ top: -$pfp-width;
left: $inner-gap;
.pfp {
- height: $pfp-size;
+ height: $profile-pfp-width;
}
}
.content {
- margin-left: $pfp-size + 5em;
- margin-top: 2em;
+ margin-left: $profile-header-content-margin;
+ margin-top: $outer-gap * 2;
.name {
- font-size: 2em;;
+ font-size: $font-size * 2;
}
.follow {
margin-left: auto;
- margin-right: 2rem;
+ margin-right: $outer-gap * 2;
a {
- width: 10rem;
+ width: 10em;
padding: $inner-gap / 2;
}
}
@@ -77,10 +80,10 @@ $pfp-size: 12.5em;
}
.options {
- height: 3rem;
+ height: 3em;
.btn {
- width: 10rem;
+ width: 10em;
}
}
}
@@ -90,12 +93,12 @@ $pfp-size: 12.5em;
.info {
.pfp-wrapper {
.pfp {
- height: $pfp-size * 0.7;
+ height: $profile-pfp-width * 0.7;
}
}
.content {
- margin-left: ($pfp-size + 5em) * 0.7;
+ margin-left: $profile-header-content-margin * 0.7;
}
}
}
@@ -118,7 +121,7 @@ $pfp-size: 12.5em;
#tab-about {
td:nth-child(1) {
- padding-right: 2rem;
+ padding-right: $inner-gap * 2;
}
}
generated by cgit v1.2.3-freya (git 2.51.0) at 2025-09-22 17:31:59 +0000