freya/xssbook2
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

finish scss conversion

Browse source
This commit is contained in:
Murphy 2024-12-20 11:23:32 -05:00
parent 4334596d4b
commit edb6022ebe
Signed by: freya
GPG key ID: 9FBC6FFD6D2DBF17
11 changed files with 191 additions and 195 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
src/scss/_variables.scss
View file

@ -62,10 +62,9 @@ $inner-radius: $scale / 3;
$font-size: $scale; $font-size: $scale;
$font-size-small: $scale * 0.75; $font-size-small: $scale * 0.75;
$header-height: $scale * 3.5;
$base-z-index: 1; $base-z-index: 1;
$header-z-index: 2; $header-z-index: 2;
$modal-z-index: 5; $modal-z-index: 5;
$toast-z-index: 10;
$content-width: $scale * 40; $content-width: $scale * 40;

77
src/scss/auth.scss
View file

@ -1,51 +1,50 @@
@import "./variables"; @import "./variables";
@import "./mixins"; @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; justify-content: center;
}
.branding {
max-width: 100%;
width: 30rem;
margin-right: 5rem;
}
.branding h1 {
color: $blue;
font-family: facebook;
font-size: 3.5rem;
}
.branding span {
font-size: 1.5rem;
}
.form {
display: flex;
flex-direction: column;
width: 30rem;
max-width: 100%;
}
@media(max-width: 1200px) {
#main-content {
flex-direction: column;
align-items: center;
width: 100%;
padding: 10rem 1rem;
}
.branding { .branding {
margin: 0; max-width: 100%;
width: 30em;
margin-right: 5em;
h1 {
color: $blue;
font-family: $header-font;
font-size: 3.5em;
}
span {
font-size: 1.5em;
}
} }
.form { .form {
margin-top: 4rem; @include column;
max-width: 100%;
width: 30em;
} }
} }
@media(max-width: 1200px) {
main#main {
@include column;
align-items: center;
padding: 10rem $outer-gap;
.branding {
margin: 0;
}
.form {
margin-top: 4rem;
}
}
}

240
src/scss/common.scss
View file

@ -6,6 +6,8 @@
@include font-face("Facebook"); @include font-face("Facebook");
@include font-face("SF Pro"); @include font-face("SF Pro");
$header-height: $scale * 3.5;
* { * {
box-sizing: border-box; box-sizing: border-box;
} }
@ -268,6 +270,11 @@ footer#footer {
} }
} }
input.btn {
text-align: left;
font-weight: normal;
}
.image { .image {
display: block; display: block;
@ -332,24 +339,20 @@ object.inner {
@include column; @include column;
} }
.hidden {
display: none;
}
.grow { .grow {
width: auto; width: auto;
flex: 1; flex: 1;
flex-grow: 1; flex-grow: 1;
} }
.ml-sm {
margin-left: .5rem;
}
.ml { .ml {
margin-left: 1rem; margin-left: 1rem;
} }
.mr-sm {
margin-right: .5rem;
}
.mr { .mr {
margin-right: 1rem; margin-right: 1rem;
} }
@ -362,6 +365,18 @@ object.inner {
margin-bottom: .75rem; margin-bottom: .75rem;
} }
.pl {
padding-left: 1rem;
}
.pr {
padding-right: 1rem;
}
.pt {
padding-top: 1rem;
}
.pb { .pb {
padding-bottom: 1rem; padding-bottom: 1rem;
} }
@ -464,137 +479,122 @@ object.inner {
} }
} }
.float-right {
position: absolute;
top: 50%;
left: 100%;
transform: translate(-125%, -50%);
}
.mi { .mi {
font-family: 'Material Icons'; font-family: 'Material Icons';
font-style: normal; font-style: normal;
font-size: 1.5rem; font-size: 1.5em;
}
.mi-sm { &.mi-sm {
font-size: 1rem; font-size: 1em;
} }
.mi-lg { &.mi-lg {
font-size: 2rem; font-size: 2em;
}
} }
#toast-container { #toast-container {
position: fixed; position: fixed;
top: 4rem; top: $header-height;
left: 100%; left: 100%;
transform: translateX(-110%); transform: translateX(-100%);
margin-top: 1rem; padding: $outer-gap;
z-index: 10000; z-index: $toast-z-index;
.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;
&.error {
background: $red;
}
&.success {
background: $green;
}
}
} }
.toast { form {
color: $white; input {
padding: .75rem; display: block;
margin: .5rem; font-size: 1.1em;
border-radius: .5rem; outline: 2px solid $surface2;
min-width: 15rem; border-radius: $inner-radius;
animation: fadeIn .1s, slideIn .25s linear; padding: $inner-gap;
display: flex;
justify-content: space-between;
}
.toast.error { &:focus {
background-color: $red; outline-color: $blue;
} }
.toast.success { &[type=radio] {
background-color: $green; outline: none;
} padding: 3em;
width: 1em;
}
}
form input:not(.btn) { .form-input {
display: block; position: relative;
font-size: 1.1rem;
outline: 2px solid $surface2;
border-radius: .25rem;
padding: .75rem;
}
form input:not(.btn):focus { label {
outline-color: $blue; 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;
}
form .rel label:not(.static) { input {
position: absolute; width: 100%;
top: 50%; flex-grow: 1;
transform: translate(.5rem, -40%);
color: $subtext;
transition: all 0.2s ease-out;
pointer-events: none;
width: fit-content;
font-size: 1.1rem;
}
input:focus + label:not(.static), &:focus,
input:not(:placeholder-shown) + label:not(.static) { &:not(:placeholder-shown) {
color: $text; & + label {
top: 0; position: absolute;
padding: .5rem; top: 50%;
padding-top: 0; color: $text;
font-size: .75rem; top: 0;
transform: translate(.5rem, -25%); padding: .5rem;
background-color: $surface0; padding-top: 0;
} font-size: .75rem;
transform: translate(.5rem, -25%);
background-color: $surface0;
}
}
}
}
.rel { .form-radio {
position: relative; @include row;
} width: auto;
flex-grow: 1;
position: relative;
.rel input { label {
width: 100%; border: 1px solid $surface2;
flex-grow: 1; height: fit-content;
} width: 100%;
padding: $inner-gap;
border-radius: $inner-radius;
cursor: pointer;
}
input[type=radio] { input {
padding: 3rem !important; position: absolute;
width: 1rem !important; top: 50%;
outline: none !important; left: 100%;
} transform: translate(-250%, -70%);
}
.radio { }
display: flex;
flex-direction: row;
width: auto;
flex-grow: 1;
}
.radio label {
border: 1px solid $surface2;
height: fit-content;
width: 100%;
padding: .75rem;
border-radius: .25rem;
cursor: pointer;
}
.radio 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;
} }

5
src/scss/profile.scss
View file

@ -105,11 +105,14 @@ $pfp-size: 12.5em;
width: 100%; width: 100%;
@include column; @include column;
align-items: center; align-items: center;
.tab {
width: 100%;
}
} }
#tab-posts, #tab-posts,
#tab-about { #tab-about {
width: 100%;
max-width: $content-width; max-width: $content-width;
} }

13
src/scss/settings.scss
View file

@ -1,15 +1,10 @@
@import "./variables"; @import "./variables";
@import "./mixins"; @import "./mixins";
#main-content {
display: flex;
justify-content: center;
}
#settings { #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%; width: 100%;
} }

12
src/web/_views/apps/auth/login.php
View file

@ -7,7 +7,7 @@
</div> </div>
<div class="form card col"> <div class="form card col">
<form id="action-login" class="col" action=""> <form id="action-login" class="col" action="">
<div class="rel mb"> <div class="form-input mb">
<input <input
type="text" type="text"
name="username" name="username"
@ -19,7 +19,7 @@
<?=ucfirst(lang('ph_username'))?> <?=ucfirst(lang('ph_username'))?>
</label> </label>
</div> </div>
<div class="rel mb"> <div class="form-input mb">
<input <input
type="password" type="password"
name="password" name="password"
@ -31,18 +31,18 @@
</label> </label>
</div> </div>
<?=ilang('action_login', <?=ilang('action_login',
class: 'btn btn-submit grow', class: 'btn btn-primary btn-alt grow',
button: TRUE, button: TRUE,
attrs: array('type' => 'submit') attrs: array('type' => 'submit')
)?> )?>
<?=ilang('action_forgot_passwd', <?/*=ilang('action_forgot_passwd',
class: 'btn btn-blend btn-primary grow mt' class: 'btn btn-blend btn-primary grow mt'
)?> )*/?>
</form> </form>
<hr> <hr>
<?=ilang('action_create_account', <?=ilang('action_create_account',
id: 'action-register', id: 'action-register',
class: 'btn btn-success grow', class: 'btn btn-success btn-alt grow',
button: TRUE, button: TRUE,
attrs: array('type' => 'submit') attrs: array('type' => 'submit')
)?> )?>

2
src/web/_views/apps/home/main.php
View file

@ -1,6 +1,6 @@
<?php /* Copyright (c) 2024 Freya Murphy */ ?> <?php /* Copyright (c) 2024 Freya Murphy */ ?>
<?php /* vi: syntax=php */ ?> <?php /* vi: syntax=php */ ?>
<main id="main" class="container"> <main id="main">
<?php if ($self): ?> <?php if ($self): ?>
<div id="new-post" class="card"> <div id="new-post" class="card">
<div class="row grow"> <div class="row grow">

2
src/web/_views/apps/profile/main.php
View file

@ -153,7 +153,7 @@
</div> </div>
</div> </div>
</div> </div>
<div id="tab-container" class="container"> <div id="tab-container" class="mt">
<div id="tab-posts" class="tab"> <div id="tab-posts" class="tab">
<?php <?php
$_GET['user_id'] = $user['id']; $_GET['user_id'] = $user['id'];

6
src/web/_views/apps/settings/main.php
View file

@ -9,7 +9,7 @@ function __create_form($user, $col) {
$ph = ucfirst(lang('ph_' . $col)); $ph = ucfirst(lang('ph_' . $col));
$val = $user[$col]; $val = $user[$col];
return "<form action=\"\" class=\"row mt settings-form\" onsubmit=\"handleSubmit(event)\"> 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 <input
type=\"text\" type=\"text\"
name=\"{$col}\" name=\"{$col}\"
@ -132,7 +132,7 @@ function resetMedia(media_type) {
<h2><?=ucfirst(lang('security_title'))?></h2> <h2><?=ucfirst(lang('security_title'))?></h2>
<strong><?=ucfirst(lang('security_desc'))?></strong> <strong><?=ucfirst(lang('security_desc'))?></strong>
<form action="" class="col mt settings-form" onsubmit="handlePassword(event)"> <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 <input
type="password" type="password"
name="curr_password" name="curr_password"
@ -143,7 +143,7 @@ function resetMedia(media_type) {
<?=ucwords(lang('ph_current_pass'))?> <?=ucwords(lang('ph_current_pass'))?>
</label> </label>
</div> </div>
<div class="rel mb" style="flex: 1"> <div class="form-input mb" style="flex: 1">
<input <input
type="password" type="password"
name="new_password" name="new_password"

24
src/web/_views/modal/register.php
View file

@ -3,11 +3,11 @@
<?php /* vi: syntax=php */ ?> <?php /* vi: syntax=php */ ?>
<form id="register-form"> <form id="register-form">
<div class="modal-content register-modal col"> <div class="modal-content register-modal col">
<label class="static"> <label>
<?=ucwords(lang('ph_basic_info'))?> <?=ucwords(lang('ph_basic_info'))?>
</label> </label>
<div class="row mt"> <div class="row mt">
<div class="rel grow"> <div class="form-input grow">
<input <input
type="text" type="text"
name="first_name" name="first_name"
@ -18,7 +18,7 @@
<?=ucwords(lang('ph_first_name'))?> <?=ucwords(lang('ph_first_name'))?>
</label> </label>
</div> </div>
<div class="rel ml grow"> <div class="form-input ml grow">
<input <input
type="text" type="text"
name="last_name" name="last_name"
@ -30,7 +30,7 @@
</label> </label>
</div> </div>
</div> </div>
<div class="rel mt"> <div class="form-input mt">
<input <input
type="text" type="text"
name="username" name="username"
@ -41,7 +41,7 @@
<?=ucwords(lang('ph_username'))?> <?=ucwords(lang('ph_username'))?>
</label> </label>
</div> </div>
<div class="rel mt"> <div class="form-input mt">
<input <input
type="password" type="password"
name="password" name="password"
@ -52,7 +52,7 @@
<?=ucwords(lang('ph_password'))?> <?=ucwords(lang('ph_password'))?>
</label> </label>
</div> </div>
<div class="rel mt"> <div class="form-input mt">
<input <input
type="text" type="text"
name="email" name="email"
@ -63,7 +63,7 @@
<?=ucwords(lang('ph_email'))?> <?=ucwords(lang('ph_email'))?>
</label> </label>
</div> </div>
<label for="birth_date" class="mt static"> <label for="birth_date" class="mt">
<?=ucwords(lang('ph_birth_date'))?> <?=ucwords(lang('ph_birth_date'))?>
</label> </label>
<input <input
@ -72,11 +72,11 @@
name="birth_date" name="birth_date"
id="register-birth-date" id="register-birth-date"
> >
<label for="gender" class="mt static"> <label for="gender" class="mt">
<?=ucwords(lang('ph_gender'))?> <?=ucwords(lang('ph_gender'))?>
</label> </label>
<div class="row mt" data-type="radio" data-name="gender-wrapper"> <div class="row mt" data-type="radio" data-name="gender-wrapper">
<div class="rel radio mr"> <div class="form-radio mr">
<input <input
type="radio" type="radio"
id="register-gender-male" id="register-gender-male"
@ -90,7 +90,7 @@
<?=ucwords(lang('ph_gender_male'))?> <?=ucwords(lang('ph_gender_male'))?>
</label> </label>
</div> </div>
<div class="rel radio mr"> <div class="form-radio mr">
<input <input
type="radio" type="radio"
id="register-gender-female" id="register-gender-female"
@ -104,7 +104,7 @@
<?=ucwords(lang('ph_gender_female'))?> <?=ucwords(lang('ph_gender_female'))?>
</label> </label>
</div> </div>
<div class="rel radio"> <div class="form-radio">
<input <input
type="radio" type="radio"
id="register-gender-lettuce" id="register-gender-lettuce"
@ -123,7 +123,7 @@
<div class="modal-footer"> <div class="modal-footer">
<?=ilang('action_register', <?=ilang('action_register',
id: 'register-submit', id: 'register-submit',
class: 'btn grow btn-success', class: 'btn btn-submit btn-alt grow',
attrs: array('type' => 'submit'), attrs: array('type' => 'submit'),
button: TRUE button: TRUE
)?> )?>

2
src/web/helper/lang.php
View file

@ -69,7 +69,7 @@ function ilang($key,
if ($text) { if ($text) {
echo '<span'; echo '<span';
if ($icon) { if ($icon) {
echo ' class="ml-sm"'; echo ' style="margin-left: .5em;"';
} }
echo '>' . $text . '</span>'; echo '>' . $text . '</span>';
} }