rework styles with scss

19 files changed, 63 insertions, 63 deletions

diff --git a/src/web/_views/apps/auth/login.php b/src/web/_views/apps/auth/login.php
index c12af57..1741ac5 100644
--- a/src/web/_views/apps/auth/login.php
+++ b/src/web/_views/apps/auth/login.php
@@ -1,6 +1,6 @@
 <?php /* Copyright (c) 2024 Freya Murphy */ ?>
 <?php /* vi: syntax=php */ ?>
-<div id="main-content">
+<main id="main">
 	<div class="branding col">
 		<h1>xssbook</h1>
 		<span><?=ucfirst(lang('login_branding'))?></span>
@@ -31,18 +31,18 @@
 				</label>
 			</div>
 			<?=ilang('action_login',
-				class: 'btn btn-submit btn-wide',
+				class: 'btn btn-submit grow',
 				button: TRUE,
 				attrs: array('type' => 'submit')
 			)?>
 			<?=ilang('action_forgot_passwd',
-				class: 'btn btn-line btn-blue btn-wide mt'
+				class: 'btn btn-blend btn-primary grow mt'
 			)?>
 		</form>
 		<hr>
 		<?=ilang('action_create_account',
 			id: 'action-register',
-			class: 'btn btn-success btn-wide',
+			class: 'btn btn-success grow',
 			button: TRUE,
 			attrs: array('type' => 'submit')
 		)?>
@@ -84,4 +84,4 @@
 			});
 		})
 	</script>
-</div>
+</main>
diff --git a/src/web/_views/apps/error/main.php b/src/web/_views/apps/error/main.php
index 6d7e2ea..bcc6f90 100644
--- a/src/web/_views/apps/error/main.php
+++ b/src/web/_views/apps/error/main.php
@@ -1,6 +1,6 @@
 <?php /* Copyright (c) 2024 Freya Murphy */ ?>
 <?php /* vi: syntax=php */ ?>
-<div id="main-content">
+<main id="main">
 	<h1><?=$title?></h1>
 	<span><?=ucfirst($msg)?></span>
-</div>
+</main>
diff --git a/src/web/_views/apps/home/main.php b/src/web/_views/apps/home/main.php
index 6112173..05697b9 100644
--- a/src/web/_views/apps/home/main.php
+++ b/src/web/_views/apps/home/main.php
@@ -1,13 +1,13 @@
 <?php /* Copyright (c) 2024 Freya Murphy */ ?>
 <?php /* vi: syntax=php */ ?>
-<div id="main-content" class="container">
+<main id="main" class="container">
 <?php if ($self): ?>
 	<div id="new-post" class="card">
 		<div class="row grow">
 			<?=pfp($self)?>
 			<a
 				id="action-new-post"
-				class="btn btn-alt btn-wide ml"
+				class="btn btn-alt grow ml"
 				autocomplete="off"
 				aria-label="<?=ucfirst(lang('action_new_post_tip'))?>"
 			>
@@ -24,4 +24,4 @@
 	</div>
 <?php endif; ?>
 	<?php $this->post_controller->index(); ?>
-</div>
+</main>
diff --git a/src/web/_views/apps/people/card.php b/src/web/_views/apps/people/card.php
index eda49b5..93b1350 100644
--- a/src/web/_views/apps/people/card.php
+++ b/src/web/_views/apps/people/card.php
@@ -7,8 +7,8 @@
 	<div class="col">
 		<?=pfp($user, FALSE)?>
 		<div class="col ml">
-			<strong class=""><?=$this->format_model->name($user)?></strong>
-			<span class="dim"><?=$user['username']?></span>
+			<span class="name"><?=$this->format_model->name($user)?></span>
+			<span class="subtext"><?=$user['username']?></span>
 		</div>
 	</div>
 </a>
diff --git a/src/web/_views/apps/people/footer.php b/src/web/_views/apps/people/footer.php
index ff93026..f18e031 100644
--- a/src/web/_views/apps/people/footer.php
+++ b/src/web/_views/apps/people/footer.php
@@ -1,3 +1,3 @@
 <?php /* Copyright (c) 2024 Freya Murphy */ ?>
 <?php /* vi: syntax=php */ ?>
-</div>
+</main>
diff --git a/src/web/_views/apps/people/header.php b/src/web/_views/apps/people/header.php
index 1f3a025..b1099ec 100644
--- a/src/web/_views/apps/people/header.php
+++ b/src/web/_views/apps/people/header.php
@@ -1,6 +1,6 @@
 <?php /* Copyright (c) 2024 Freya Murphy */ ?>
 <?php /* vi: syntax=php */ ?>
-<div id="main-content" class="col">
+<main id="main">
 	<h1 class="title"><?=ucfirst(lang('title'))?></h1>
 	<h3 class="desc"><?=ucfirst(lang('desc'))?></h3>
 	<hr>
diff --git a/src/web/_views/apps/people/main.php b/src/web/_views/apps/people/main.php
index deec4c2..ec84ab9 100644
--- a/src/web/_views/apps/people/main.php
+++ b/src/web/_views/apps/people/main.php
@@ -16,7 +16,7 @@
 <?php if ($loaded >= $page_size && $page_size < $total): ?>
 	<?=ilang('action_load_users',
 			id: 'action-load-users',
-			class: 'btn btn-line btn-wide mb',
+			class: 'btn btn-blend grow mb',
 			attrs: array(
 				'loaded' => $loaded,
 				'pageSize' => $page_size,
diff --git a/src/web/_views/apps/profile/main.php b/src/web/_views/apps/profile/main.php
index 6d25c98..e3ed26c 100644
--- a/src/web/_views/apps/profile/main.php
+++ b/src/web/_views/apps/profile/main.php
@@ -1,6 +1,6 @@
 <?php /* Copyright (c) 2024 Freya Murphy */ ?>
 <?php /* vi: syntax=php */ ?>
-<div id="main-content">
+<main id="main">
 	<div id="profile-header-container">
 		<div id="profile-header" class="col">
 			<?=image('/api/rpc/profile_banner?user_id=' . $user['id'], 'banner', mime: $user['banner_mime'])?>
@@ -12,13 +12,13 @@
 					<div class="row grow">
 						<div class="col mb">
 							<strong class="name"><?=$this->format_model->name($user)?></strong>
-							<span class="dim"><?=$user['follower_count'] . ' ' . ucfirst(lang('followers'))?></span>
+							<span class="subtext"><?=$user['follower_count'] . ' ' . ucfirst(lang('followers'))?></span>
 						</div>
 						<?php if (
 							$this->main->session &&
 							(!isset($self) || $self['id'] != $user['id'])
 						): ?>
-						<div id="follow-container">
+						<div class="follow">
 							<?=ilang(
 								'action_follow',
 								id: 'action-follow-follow',
@@ -36,14 +36,14 @@
 							<?=ilang(
 								'action_following',
 								id: 'action-follow-following',
-								class: 'btn btn-alt btn-blue',
+								class: 'btn btn-alt btn-primary',
 								style: ($following && !$followed) ? '' : 'display: none',
 								sub: [$user['first_name']]
 							)?>
 							<?=ilang(
 								'action_friends',
 								id: 'action-follow-friends',
-								class: 'btn btn-alt btn-blue',
+								class: 'btn btn-alt btn-primary',
 								style: ($following && $followed) ? '' : 'display: none',
 								sub: [$user['first_name']]
 							)?>
@@ -124,7 +124,7 @@
 					<?php if(strlen($user['profile_bio']) > 0): ?>
 						<br>
 						<strong><?=ucfirst(lang('bio'))?></strong>
-						<span class="dim"><?=$user['profile_bio']?></span>
+						<span class="subtext"><?=$user['profile_bio']?></span>
 					<?php endif; ?>
 				</div>
 			</div>
@@ -132,7 +132,7 @@
 			<div class="row options">
 				<?=ilang('action_posts',
 					sub: [$user['first_name']],
-					class: 'btn btn-blue btn-border',
+					class: 'btn btn-primary btn-border',
 					id: 'action-posts'
 				)?>
 				<?=ilang('action_about',
@@ -231,13 +231,13 @@
 		let tabs = {};
 
 		const disableTab = (tab) => {
-			tab.btn.removeClass('btn-blue');
+			tab.btn.removeClass('btn-primary');
 			tab.btn.removeClass('btn-border');
 			tab.tab.css('display', 'none');
 		};
 
 		const enableTab = (tab) => {
-			tab.btn.addClass('btn-blue');
+			tab.btn.addClass('btn-primary');
 			tab.btn.addClass('btn-border');
 			tab.tab.css('display', '');
 		};
@@ -266,4 +266,4 @@
 		loadTab('followers');
 		loadTab('following');
 	</script>
-</div>
+</main>
diff --git a/src/web/_views/apps/settings/main.php b/src/web/_views/apps/settings/main.php
index dcfff92..02cbf57 100644
--- a/src/web/_views/apps/settings/main.php
+++ b/src/web/_views/apps/settings/main.php
@@ -116,7 +116,7 @@ function resetMedia(media_type) {
 }
 </script>
 
-<div id="main-content">
+<main id="main">
 	<div id="settings" class="card">
 		<h1><?=ucfirst(lang('title'))?></h1>
 		<hr class="mt">
@@ -155,7 +155,7 @@ function resetMedia(media_type) {
 				</label>
 			</div>
 			<button
-				class="btn btn-wide btn-submit"
+				class="btn grow btn-alt btn-submit"
 				style="flex: 0; height: fit-content;"
 			><?=lang('update')?></button>
 		</form>
@@ -170,11 +170,11 @@ function resetMedia(media_type) {
 		)?>
 			<div class="col ml">
 				<button
-					class="btn btn-alt btn-blue"
+					class="btn btn-alt btn-primary"
 					onclick="updateMedia('avatar')"
 				><?=ucfirst(lang('update'))?></button>
 				<button
-					class="btn btn-alt btn-blue mt"
+					class="btn btn-alt btn-primary mt"
 					onclick="resetMedia('avatar')"
 				><?=ucfirst(lang('reset'))?></button>
 			</div>
@@ -187,14 +187,14 @@ function resetMedia(media_type) {
 		)?>
 			<div class="col ml">
 				<button
-					class="btn btn-alt btn-blue"
+					class="btn btn-alt btn-primary"
 					onclick="updateMedia('banner')"
 				><?=ucfirst(lang('update'))?></button>
 				<button
-					class="btn btn-alt btn-blue mt"
+					class="btn btn-alt btn-primary mt"
 					onclick="resetMedia('banner')"
 				><?=ucfirst(lang('reset'))?></button>
 			</div>
 		</div>
 	</div>
-</div>
+</main>
diff --git a/src/web/_views/footer.php b/src/web/_views/footer.php
index bc9b3a2..e26d4a5 100644
--- a/src/web/_views/footer.php
+++ b/src/web/_views/footer.php
@@ -1,6 +1,6 @@
 <?php /* Copyright (c) 2024 Freya Murphy */ ?>
 <?php /* vi: syntax=php */ ?>
-	<footer>
+	<footer id="footer">
 		<?=ucfirst(lang('copyright'))?> | <a href="https://freya.cat">freya.cat</a>
 	</footer>
 	<body>
diff --git a/src/web/_views/header_empty.php b/src/web/_views/head.php
index cca43a1..cca43a1 100644
--- a/src/web/_views/header_empty.php
+++ b/src/web/_views/head.php
diff --git a/src/web/_views/header.php b/src/web/_views/header.php
index 98fcf81..7315afb 100644
--- a/src/web/_views/header.php
+++ b/src/web/_views/header.php
@@ -2,16 +2,16 @@
 <?php /* vim: syntax=php */ ?>
 <?php
 	$self = $this->main->user();
-	$this->view('header_empty', $data);
+	$this->view('head', $data);
 ?>
-		<header class="nav">
-			<div class="nav-left">
+		<header id="header">
+			<div class="left">
 				<span class="logo">xssbook</span>
 			</div>
-			<div class="nav-center" :class="{hidden: !visible}">
+			<div class="center" :class="{hidden: !visible}">
 				<a
 					id="action-home"
-					class="btn<?=$this->main->info['app'] == 'home' ? ' btn-blue btn-border' : ''?>"
+					class="btn <?=$this->main->info['app'] == 'home' ? 'btn-primary btn-border' : ''?>"
 					href="/home"
 					title="<?=ucfirst(lang('action_home_tip'))?>"
 				>
@@ -20,7 +20,7 @@
 				</a>
 				<a
 					id="action-people"
-					class="btn<?=$this->main->info['app'] == 'people' ? ' btn-blue btn-border' : ''?>"
+					class="btn <?=$this->main->info['app'] == 'people' ? 'btn-primary btn-border' : ''?>"
 					href="/people"
 					title="<?=ucfirst(lang('action_people_tip'))?>"
 				>
@@ -29,7 +29,7 @@
 				</a>
 				<!--a
 					id="action-chat"
-					class="btn<?=$this->main->info['app'] == 'chat' ? ' btn-blue btn-border' : ''?>"
+					class="btn <?=$this->main->info['app'] == 'chat' ? 'btn-primary btn-border' : ''?>"
 					href="/chat"
 					title="<?=lang('action_chat_tip')?>"
 				>
@@ -37,7 +37,7 @@
 					<span><?=lang('action_chat_text')?></span>
 				</a-->
 			</div>
-			<div class="nav-right">
+			<div class="right">
 				<button
 					id="action-hamburger"
 					title="<?=ucfirst(lang('action_hamburger_tip'))?>"
@@ -55,11 +55,11 @@
 				</script>
 				<?=pfp($self, FALSE, 'toggleUserMenu()')?>
 				<div class="card col hidden" id="user-menu">
-					<span class="row mr" id="user-menu-header">
+					<span class="user-menu-header row mr">
 						<?=pfp($self, FALSE)?>
 						<span class="col">
 							<strong><?=$this->format_model->name($self)?></strong>
-							<span class="dim"><?=$self['username']?></span>
+							<span class="subtext"><?=$self['username']?></span>
 						</span>
 					</span>
 					<hr>
@@ -99,14 +99,14 @@
 					});
 				})
 				$('#action-hamburger').on('click', function() {
-					let menu = $('.nav-center');
+					let menu = $('.center');
 					menu.toggleClass('visible');
 				});
 			</script>
 		</header>
 		<script>
 			userMenu = $('#user-menu');
-			var nav = $('.nav');
+			var nav = $('header#header');
 			document.onclick = function(event) {
 				let outside = !(nav[0].contains(event.target));
 				if (outside) {
diff --git a/src/web/_views/modal/about.php b/src/web/_views/modal/about.php
index d434908..55ea3f0 100644
--- a/src/web/_views/modal/about.php
+++ b/src/web/_views/modal/about.php
@@ -4,8 +4,8 @@
 	<span class="logo">xssbook</span>
 	<span class="mb"><?=ucfirst(lang('version'))?></span>
 	<span><?=ucfirst(lang('copyright'))?></span>
-	<a class="btn btn-blue mt" href="https://g.freya.cat/freya/xssbook2">Source Code</a>
-	<p>For reports of abuse, please email <a class="btn-blue" href="mailto:contact@freyacat.org">contact@freyacat.org</a></p>
+	<a class="btn btn-primary mt" href="https://g.freya.cat/freya/xssbook2">Source Code</a>
+	<p>For reports of abuse, please email <a class="btn-primary" href="mailto:contact@freyacat.org">contact@freyacat.org</a></p>
 </div>
 <style>
 #about-modal-body {
diff --git a/src/web/_views/modal/new_post.php b/src/web/_views/modal/new_post.php
index c9e9c7f..66e6561 100644
--- a/src/web/_views/modal/new_post.php
+++ b/src/web/_views/modal/new_post.php
@@ -9,7 +9,7 @@
 		<?=pfp($user)?>
 		<div class="col ml">
 			<strong><?=$user['first_name'] . ' ' . $user['last_name']?></strong>
-				<span class="dim"><?=ucfirst(lang('now'))?></span>
+				<span class="subtext"><?=ucfirst(lang('now'))?></span>
 		</div>
 	</div>
 	<textarea
@@ -22,7 +22,7 @@
 <div class="modal-footer">
 		<?=ilang('action_submit',
 			id: 'new-post-submit',
-			class: 'btn btn-wide btn-submit',
+			class: 'btn btn-submit btn-alt grow',
 			attrs: array('type' => 'submit'),
 			button: TRUE
 		)?>
diff --git a/src/web/_views/modal/register.php b/src/web/_views/modal/register.php
index a6a2f1f..9fa1fe2 100644
--- a/src/web/_views/modal/register.php
+++ b/src/web/_views/modal/register.php
@@ -7,7 +7,7 @@
 		<?=ucwords(lang('ph_basic_info'))?>
 	</label>
 	<div class="row mt">
-		<div class="rel btn-wide">
+		<div class="rel grow">
 			<input
 				type="text"
 				name="first_name"
@@ -18,7 +18,7 @@
 				<?=ucwords(lang('ph_first_name'))?>
 			</label>
 		</div>
-		<div class="rel ml btn-wide">
+		<div class="rel ml grow">
 			<input
 				type="text"
 				name="last_name"
@@ -123,7 +123,7 @@
 <div class="modal-footer">
 		<?=ilang('action_register',
 			id: 'register-submit',
-			class: 'btn btn-wide btn-success',
+			class: 'btn grow btn-success',
 			attrs: array('type' => 'submit'),
 			button: TRUE
 		)?>
diff --git a/src/web/_views/template/comment.php b/src/web/_views/template/comment.php
index 72bcedf..ceac588 100644
--- a/src/web/_views/template/comment.php
+++ b/src/web/_views/template/comment.php
@@ -8,7 +8,7 @@
 	<div class="ml col sub-card">
 		<div class="row">
 			<strong><?=$format_model->name($user)?></strong>
-			<span class="dim ml"><?=$this->main->date($comment['created'])?></span>
+			<span class="subtext ml"><?=$this->main->date($comment['created'])?></span>
 		</div>
 		<?=$comment['content']?>
 	</div>
diff --git a/src/web/_views/template/modal.php b/src/web/_views/template/modal.php
index e3ce6fe..2a041a7 100644
--- a/src/web/_views/template/modal.php
+++ b/src/web/_views/template/modal.php
@@ -3,10 +3,10 @@
 <div class="modal-container">
 	<div class="modal">
 		<div class="modal-header row">
-			<?=$title?>
+			<span class="modal-title"><?=$title?></span>
 			<?=ilang(
 				'action_modal_close',
-				class: 'float-right btn btn-action modal-close',
+				class: 'btn btn-action modal-close',
 			)?>
 		</div>
 		<?php $this->view('modal/' . $content) ?>
diff --git a/src/web/_views/template/post.php b/src/web/_views/template/post.php
index b8ea69a..48f8bb6 100644
--- a/src/web/_views/template/post.php
+++ b/src/web/_views/template/post.php
@@ -5,7 +5,7 @@
 		<?=pfp($user)?>
 		<div class="col ml">
 			<strong><?=$user['first_name'] . ' ' . $user['last_name']?></strong>
-			<span class="dim"><?=$this->main->date($post['created'])?></span>
+			<span class="subtext"><?=$this->main->date($post['created'])?></span>
 		</div>
 	</div>
 	<p>
@@ -13,7 +13,7 @@
 	</p>
 <?php
 	$self = $this->main->user();
-	$liked = $post['like_id'] ? 'btn-blue' : '';
+	$liked = $post['like_id'] ? 'btn-primary' : '';
 	$post_attrs = array(
 		'postId' => $post['id']
 	);
@@ -21,15 +21,15 @@
 		$post_attrs['likeId'] = $post['like_id'];
 	}
 ?>
-	<span class="likes dim"><span class="count"><?=$post['like_count']?></span><?=' ' . ucfirst(lang('likes'))?></span>
+	<span class="likes subtext"><span class="count"><?=$post['like_count']?></span><?=' ' . ucfirst(lang('likes'))?></span>
 <?php if ($self): ?>
 	<hr>
 	<div class="row">
 		<?=ilang('action_like',
-			class: 'btn btn-wide action-like ' . $liked,
+			class: 'btn grow action-like ' . $liked,
 			attrs: $post_attrs
 		)?>
-		<?=ilang('action_comment', class: 'btn btn-wide action-comment',
+		<?=ilang('action_comment', class: 'btn grow action-comment',
 			click: '$(\'#action-new-comment-' . $post['id'] . '\').focus()'
 		)?>
 	</div>
@@ -47,7 +47,7 @@
 
 			if ($loaded >= $page_size && $page_size < $total) {
 				ilang('action_load_comments',
-					class: 'action-load-comments btn btn-line mt',
+					class: 'action-load-comments btn btn-blend mt',
 					attrs: array(
 						'postId' => $post['id'],
 						'loaded' => $loaded,
@@ -71,7 +71,7 @@
 			>
 			<input
 				id="action-new-comment-<?=$post['id']?>"
-				class="action-new-comment btn btn-wide btn-alt"
+				class="action-new-comment btn grow btn-alt"
 				postId="<?=$post['id']?>"
 				autocomplete="off"
 				type="text"
diff --git a/src/web/_views/template/posts.php b/src/web/_views/template/posts.php
index 137c0dd..ed79688 100644
--- a/src/web/_views/template/posts.php
+++ b/src/web/_views/template/posts.php
@@ -11,7 +11,7 @@
 	if ($loaded >= $page_size && $page_size < $total) {
 		ilang('action_load_posts',
 			id: 'action-load-posts',
-			class: 'btn btn-line btn-wide mb mt',
+			class: 'btn btn-blend grow mb mt',
 			attrs: array(
 				'loaded' => $loaded,
 				'pageSize' => $page_size,