summaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/scss/_variables.scss3
-rw-r--r--src/scss/auth.scss67
-rw-r--r--src/scss/common.scss234
-rw-r--r--src/scss/profile.scss5
-rw-r--r--src/scss/settings.scss13
-rw-r--r--src/web/_views/apps/auth/login.php12
-rw-r--r--src/web/_views/apps/home/main.php2
-rw-r--r--src/web/_views/apps/profile/main.php2
-rw-r--r--src/web/_views/apps/settings/main.php6
-rw-r--r--src/web/_views/modal/register.php24
-rw-r--r--src/web/helper/lang.php2
11 files changed, 183 insertions, 187 deletions
diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss
index 3a81165..e3230cd 100644
--- a/src/scss/_variables.scss
+++ b/src/scss/_variables.scss
@@ -62,10 +62,9 @@ $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;
+$toast-z-index: 10;
$content-width: $scale * 40;
diff --git a/src/scss/auth.scss b/src/scss/auth.scss
index 5f4fb91..962641c 100644
--- a/src/scss/auth.scss
+++ b/src/scss/auth.scss
@@ -1,51 +1,50 @@
@import "./variables";
@import "./mixins";
-#main-content {
- padding-top: 20rem;
- padding-bottom: 5rem;
- display: flex;
- flex-direction: row;
+main#main {
+ padding-top: 20em;
+ padding-bottom: 5em;
+ @include row;
justify-content: center;
-}
-.branding {
- max-width: 100%;
- width: 30rem;
- margin-right: 5rem;
-}
+ .branding {
+ max-width: 100%;
+ width: 30em;
+ margin-right: 5em;
-.branding h1 {
- color: $blue;
- font-family: facebook;
- font-size: 3.5rem;
-}
+ h1 {
+ color: $blue;
+ font-family: $header-font;
+ font-size: 3.5em;
+ }
-.branding span {
- font-size: 1.5rem;
-}
+ span {
+ font-size: 1.5em;
+ }
+ }
-.form {
- display: flex;
- flex-direction: column;
- width: 30rem;
- max-width: 100%;
+ .form {
+ @include column;
+ max-width: 100%;
+ width: 30em;
+ }
}
+
@media(max-width: 1200px) {
- #main-content {
- flex-direction: column;
+ main#main {
+ @include column;
align-items: center;
- width: 100%;
- padding: 10rem 1rem;
- }
+ padding: 10rem $outer-gap;
- .branding {
- margin: 0;
- }
+ .branding {
+ margin: 0;
+ }
- .form {
- margin-top: 4rem;
+ .form {
+ margin-top: 4rem;
+ }
}
+
}
diff --git a/src/scss/common.scss b/src/scss/common.scss
index 5a570f9..222aba8 100644
--- a/src/scss/common.scss
+++ b/src/scss/common.scss
@@ -6,6 +6,8 @@
@include font-face("Facebook");
@include font-face("SF Pro");
+$header-height: $scale * 3.5;
+
* {
box-sizing: border-box;
}
@@ -268,6 +270,11 @@ footer#footer {
}
}
+input.btn {
+ text-align: left;
+ font-weight: normal;
+}
+
.image {
display: block;
@@ -332,24 +339,20 @@ object.inner {
@include column;
}
+.hidden {
+ display: none;
+}
+
.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;
}
@@ -362,6 +365,18 @@ object.inner {
margin-bottom: .75rem;
}
+.pl {
+ padding-left: 1rem;
+}
+
+.pr {
+ padding-right: 1rem;
+}
+
+.pt {
+ padding-top: 1rem;
+}
+
.pb {
padding-bottom: 1rem;
}
@@ -464,137 +479,122 @@ object.inner {
}
}
-.float-right {
- position: absolute;
- top: 50%;
- left: 100%;
- transform: translate(-125%, -50%);
-}
-
.mi {
font-family: 'Material Icons';
font-style: normal;
- font-size: 1.5rem;
-}
+ font-size: 1.5em;
-.mi-sm {
- font-size: 1rem;
-}
+ &.mi-sm {
+ font-size: 1em;
+ }
-.mi-lg {
- font-size: 2rem;
+ &.mi-lg {
+ font-size: 2em;
+ }
}
#toast-container {
position: fixed;
- top: 4rem;
+ top: $header-height;
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;
-}
+ transform: translateX(-100%);
+ padding: $outer-gap;
+ z-index: $toast-z-index;
-.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;
-}
+ .toast {
+ padding: $inner-gap;
+ margin: $inner-gap;
+ border-radius: $inner-radius;
+ min-width: 15em;
+ animation: fadeIn .1s, slideIn .25s linear;
+ display: flex;
+ justify-content: space-between;
-form input:not(.btn):focus {
- outline-color: $blue;
-}
+ &.error {
+ background: $red;
+ }
-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;
+ &.success {
+ background: $green;
+ }
+ }
}
-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;
-}
+form {
+ input {
+ display: block;
+ font-size: 1.1em;
+ outline: 2px solid $surface2;
+ border-radius: $inner-radius;
+ padding: $inner-gap;
-.rel {
- position: relative;
-}
+ &:focus {
+ outline-color: $blue;
+ }
-.rel input {
- width: 100%;
- flex-grow: 1;
-}
+ &[type=radio] {
+ outline: none;
+ padding: 3em;
+ width: 1em;
+ }
+ }
-input[type=radio] {
- padding: 3rem !important;
- width: 1rem !important;
- outline: none !important;
-}
+ .form-input {
+ position: relative;
-.radio {
- display: flex;
- flex-direction: row;
- width: auto;
- flex-grow: 1;
-}
+ label {
+ padding-left: $inner-gap / 2;
+ 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;
+ }
-.radio label {
- border: 1px solid $surface2;
- height: fit-content;
- width: 100%;
- padding: .75rem;
- border-radius: .25rem;
- cursor: pointer;
-}
+ input {
+ width: 100%;
+ flex-grow: 1;
-.radio input {
- position: absolute;
- top: 50%;
- left: 100%;
- transform: translate(-250%, -70%);
- width: fit-content;
- outline: none !important;
-}
+ &:focus,
+ &:not(:placeholder-shown) {
+ & + label {
+ position: absolute;
+ top: 50%;
+ color: $text;
+ top: 0;
+ padding: .5rem;
+ padding-top: 0;
+ font-size: .75rem;
+ transform: translate(.5rem, -25%);
+ background-color: $surface0;
+ }
+ }
+ }
+ }
-.container {
- padding: 1rem;
-}
+ .form-radio {
+ @include row;
+ width: auto;
+ flex-grow: 1;
+ position: relative;
-.grow {
- flex-grow: 1;
-}
+ label {
+ border: 1px solid $surface2;
+ height: fit-content;
+ width: 100%;
+ padding: $inner-gap;
+ border-radius: $inner-radius;
+ cursor: pointer;
+ }
-.hidden {
- display: none;
+ input {
+ position: absolute;
+ top: 50%;
+ left: 100%;
+ transform: translate(-250%, -70%);
+ }
+ }
}
diff --git a/src/scss/profile.scss b/src/scss/profile.scss
index ec271e4..3f1414d 100644
--- a/src/scss/profile.scss
+++ b/src/scss/profile.scss
@@ -105,11 +105,14 @@ $pfp-size: 12.5em;
width: 100%;
@include column;
align-items: center;
+
+ .tab {
+ width: 100%;
+ }
}
#tab-posts,
#tab-about {
- width: 100%;
max-width: $content-width;
}
diff --git a/src/scss/settings.scss b/src/scss/settings.scss
index 2194bcc..eb8463d 100644
--- a/src/scss/settings.scss
+++ b/src/scss/settings.scss
@@ -1,15 +1,10 @@
@import "./variables";
@import "./mixins";
-#main-content {
- display: flex;
- justify-content: center;
-}
-
#settings {
- margin: 0 1rem;
- margin-bottom: 1rem;
- max-width: 800px;
- min-width: 400px;
+ margin: 0 $outer-gap;
+ margin-bottom: $outer-gap;
+ max-width: $content-width * 1.5;
+ min-width: $content-width;
width: 100%;
}
diff --git a/src/web/_views/apps/auth/login.php b/src/web/_views/apps/auth/login.php
index 1741ac5..ac4cd02 100644
--- a/src/web/_views/apps/auth/login.php
+++ b/src/web/_views/apps/auth/login.php
@@ -7,7 +7,7 @@
</div>
<div class="form card col">
<form id="action-login" class="col" action="">
- <div class="rel mb">
+ <div class="form-input mb">
<input
type="text"
name="username"
@@ -19,7 +19,7 @@
<?=ucfirst(lang('ph_username'))?>
</label>
</div>
- <div class="rel mb">
+ <div class="form-input mb">
<input
type="password"
name="password"
@@ -31,18 +31,18 @@
</label>
</div>
<?=ilang('action_login',
- class: 'btn btn-submit grow',
+ class: 'btn btn-primary btn-alt grow',
button: TRUE,
attrs: array('type' => 'submit')
)?>
- <?=ilang('action_forgot_passwd',
+ <?/*=ilang('action_forgot_passwd',
class: 'btn btn-blend btn-primary grow mt'
- )?>
+ )*/?>
</form>
<hr>
<?=ilang('action_create_account',
id: 'action-register',
- class: 'btn btn-success grow',
+ class: 'btn btn-success btn-alt grow',
button: TRUE,
attrs: array('type' => 'submit')
)?>
diff --git a/src/web/_views/apps/home/main.php b/src/web/_views/apps/home/main.php
index 05697b9..864034a 100644
--- a/src/web/_views/apps/home/main.php
+++ b/src/web/_views/apps/home/main.php
@@ -1,6 +1,6 @@
<?php /* Copyright (c) 2024 Freya Murphy */ ?>
<?php /* vi: syntax=php */ ?>
-<main id="main" class="container">
+<main id="main">
<?php if ($self): ?>
<div id="new-post" class="card">
<div class="row grow">
diff --git a/src/web/_views/apps/profile/main.php b/src/web/_views/apps/profile/main.php
index e3ed26c..b2ad496 100644
--- a/src/web/_views/apps/profile/main.php
+++ b/src/web/_views/apps/profile/main.php
@@ -153,7 +153,7 @@
</div>
</div>
</div>
- <div id="tab-container" class="container">
+ <div id="tab-container" class="mt">
<div id="tab-posts" class="tab">
<?php
$_GET['user_id'] = $user['id'];
diff --git a/src/web/_views/apps/settings/main.php b/src/web/_views/apps/settings/main.php
index 02cbf57..2033acc 100644
--- a/src/web/_views/apps/settings/main.php
+++ b/src/web/_views/apps/settings/main.php
@@ -9,7 +9,7 @@ function __create_form($user, $col) {
$ph = ucfirst(lang('ph_' . $col));
$val = $user[$col];
return "<form action=\"\" class=\"row mt settings-form\" onsubmit=\"handleSubmit(event)\">
- <div class=\"rel mb\" style=\"flex: 1\">
+ <div class=\"form-input mb\" style=\"flex: 1\">
<input
type=\"text\"
name=\"{$col}\"
@@ -132,7 +132,7 @@ function resetMedia(media_type) {
<h2><?=ucfirst(lang('security_title'))?></h2>
<strong><?=ucfirst(lang('security_desc'))?></strong>
<form action="" class="col mt settings-form" onsubmit="handlePassword(event)">
- <div class="rel mb" style="flex: 1">
+ <div class="form-input mb" style="flex: 1">
<input
type="password"
name="curr_password"
@@ -143,7 +143,7 @@ function resetMedia(media_type) {
<?=ucwords(lang('ph_current_pass'))?>
</label>
</div>
- <div class="rel mb" style="flex: 1">
+ <div class="form-input mb" style="flex: 1">
<input
type="password"
name="new_password"
diff --git a/src/web/_views/modal/register.php b/src/web/_views/modal/register.php
index 9fa1fe2..5c76fe9 100644
--- a/src/web/_views/modal/register.php
+++ b/src/web/_views/modal/register.php
@@ -3,11 +3,11 @@
<?php /* vi: syntax=php */ ?>
<form id="register-form">
<div class="modal-content register-modal col">
- <label class="static">
+ <label>
<?=ucwords(lang('ph_basic_info'))?>
</label>
<div class="row mt">
- <div class="rel grow">
+ <div class="form-input grow">
<input
type="text"
name="first_name"
@@ -18,7 +18,7 @@
<?=ucwords(lang('ph_first_name'))?>
</label>
</div>
- <div class="rel ml grow">
+ <div class="form-input ml grow">
<input
type="text"
name="last_name"
@@ -30,7 +30,7 @@
</label>
</div>
</div>
- <div class="rel mt">
+ <div class="form-input mt">
<input
type="text"
name="username"
@@ -41,7 +41,7 @@
<?=ucwords(lang('ph_username'))?>
</label>
</div>
- <div class="rel mt">
+ <div class="form-input mt">
<input
type="password"
name="password"
@@ -52,7 +52,7 @@
<?=ucwords(lang('ph_password'))?>
</label>
</div>
- <div class="rel mt">
+ <div class="form-input mt">
<input
type="text"
name="email"
@@ -63,7 +63,7 @@
<?=ucwords(lang('ph_email'))?>
</label>
</div>
- <label for="birth_date" class="mt static">
+ <label for="birth_date" class="mt">
<?=ucwords(lang('ph_birth_date'))?>
</label>
<input
@@ -72,11 +72,11 @@
name="birth_date"
id="register-birth-date"
>
- <label for="gender" class="mt static">
+ <label for="gender" class="mt">
<?=ucwords(lang('ph_gender'))?>
</label>
<div class="row mt" data-type="radio" data-name="gender-wrapper">
- <div class="rel radio mr">
+ <div class="form-radio mr">
<input
type="radio"
id="register-gender-male"
@@ -90,7 +90,7 @@
<?=ucwords(lang('ph_gender_male'))?>
</label>
</div>
- <div class="rel radio mr">
+ <div class="form-radio mr">
<input
type="radio"
id="register-gender-female"
@@ -104,7 +104,7 @@
<?=ucwords(lang('ph_gender_female'))?>
</label>
</div>
- <div class="rel radio">
+ <div class="form-radio">
<input
type="radio"
id="register-gender-lettuce"
@@ -123,7 +123,7 @@
<div class="modal-footer">
<?=ilang('action_register',
id: 'register-submit',
- class: 'btn grow btn-success',
+ class: 'btn btn-submit btn-alt grow',
attrs: array('type' => 'submit'),
button: TRUE
)?>
diff --git a/src/web/helper/lang.php b/src/web/helper/lang.php
index f7d69e6..3397d63 100644
--- a/src/web/helper/lang.php
+++ b/src/web/helper/lang.php
@@ -69,7 +69,7 @@ function ilang($key,
if ($text) {
echo '<span';
if ($icon) {
- echo ' class="ml-sm"';
+ echo ' style="margin-left: .5em;"';
}
echo '>' . $text . '</span>';
}
generated by cgit v1.2.3-freya (git 2.51.0) at 2025-09-22 15:37:01 +0000