finish scss conversion

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>';
 	}