finish scss conversion

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;

src/scss/auth.scss

@@ -1,44 +1,41 @@
 @import "./variables";
 @import "./mixins";
 
-#main-content {
+main#main {
-	padding-top: 20rem;
+	padding-top: 20em;
-	padding-bottom: 5rem;
+	padding-bottom: 5em;
-	display: flex;
+	@include row;
-	flex-direction: row;
 	justify-content: center;
-}
 
 	.branding {
 		max-width: 100%;
-	width: 30rem;
+		width: 30em;
-	margin-right: 5rem;
+		margin-right: 5em;
-}
 
-.branding h1 {
+		h1 {
 			color: $blue;
-	font-family: facebook;
+			font-family: $header-font;
-	font-size: 3.5rem;
+			font-size: 3.5em;
 		}
 
-.branding span {
+		span {
-	font-size: 1.5rem;
+			font-size: 1.5em;
+		}
 	}
 
 	.form {
-	display: flex;
+		@include column;
-	flex-direction: column;
-	width: 30rem;
 		max-width: 100%;
+		width: 30em;
+	}
 }
 
+
 @media(max-width: 1200px) {
-	#main-content {
+	main#main {
-		flex-direction: column;
+		@include column;
 		align-items: center;
-		width: 100%;
+		padding: 10rem $outer-gap;
-		padding: 10rem 1rem;
-	}
 
 		.branding {
 			margin: 0;
@@ -49,3 +46,5 @@
 		}
 	}
 
+}
+

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,68 +479,71 @@ 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: 1em;
   }
 
-.mi-sm {
+  &.mi-lg {
-  font-size: 1rem;
+    font-size: 2em;
   }
-
-.mi-lg {
-  font-size: 2rem;
 }
 
 #toast-container {
   position: fixed;
-  top: 4rem;
+  top: $header-height;
   left: 100%;
-  transform: translateX(-110%);
+  transform: translateX(-100%);
-  margin-top: 1rem;
+  padding: $outer-gap;
-  z-index: 10000;
+  z-index: $toast-z-index;
-}
 
   .toast {
-  color: $white;
+    padding: $inner-gap;
-  padding: .75rem;
+    margin: $inner-gap;
-  margin: .5rem;
+    border-radius: $inner-radius;
-  border-radius: .5rem;
+    min-width: 15em;
-  min-width: 15rem;
     animation: fadeIn .1s, slideIn .25s linear;
     display: flex;
     justify-content: space-between;
+
+    &.error {
+      background: $red;
     }
 
-.toast.error {
+    &.success {
-  background-color: $red;
+      background: $green;
+    }
+  }
 }
 
-.toast.success {
+form {
-  background-color: $green;
+  input {
-}
-
-form input:not(.btn) {
     display: block;
-  font-size: 1.1rem;
+    font-size: 1.1em;
     outline: 2px solid $surface2;
-  border-radius: .25rem;
+    border-radius: $inner-radius;
-  padding: .75rem;
+    padding: $inner-gap;
-}
 
-form input:not(.btn):focus {
+    &:focus {
       outline-color: $blue;
     }
 
-form .rel label:not(.static) {
+    &[type=radio] {
+      outline: none;
+      padding: 3em;
+      width: 1em;
+    }
+  }
+
+  .form-input {
+    position: relative;
+
+    label {
+      padding-left: $inner-gap / 2;
       position: absolute;
       top: 50%;
       transform: translate(.5rem, -40%);
@@ -536,8 +554,15 @@ form .rel label:not(.static) {
       font-size: 1.1rem;
     }
 
-input:focus + label:not(.static),
+    input {
-input:not(:placeholder-shown) + label:not(.static) {
+      width: 100%;
+      flex-grow: 1;
+
+      &:focus,
+      &:not(:placeholder-shown) {
+        & + label {
+          position: absolute;
+          top: 50%;
           color: $text;
           top: 0;
           padding: .5rem;
@@ -546,55 +571,30 @@ input:not(:placeholder-shown) + label:not(.static) {
           transform: translate(.5rem, -25%);
           background-color: $surface0;
         }
-
+      }
-.rel {
+    }
-  position: relative;
   }
 
-.rel input {
+  .form-radio {
-  width: 100%;
+    @include row;
-  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;
-}
+    position: relative;
 
-.radio label {
+    label {
       border: 1px solid $surface2;
       height: fit-content;
       width: 100%;
-  padding: .75rem;
+      padding: $inner-gap;
-  border-radius: .25rem;
+      border-radius: $inner-radius;
       cursor: pointer;
     }
 
-.radio input {
+    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;
 }

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

src/scss/settings.scss

@@ -1,15 +1,10 @@
 @import "./variables";
 @import "./mixins";
 
-#main-content {
-	display: flex;
-	justify-content: center;
-}
-
 #settings {
-	margin: 0 1rem;
+	margin: 0 $outer-gap;
-	margin-bottom: 1rem;
+	margin-bottom: $outer-gap;
-	max-width: 800px;
+	max-width: $content-width * 1.5;
-	min-width: 400px;
+	min-width: $content-width;
 	width: 100%;
 }

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')
 		)?>

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">

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

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"

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
 		)?>

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