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

77
src/scss/auth.scss
View file

@ -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 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 {
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 {
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("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;
transform: translateX(-100%);
padding: $outer-gap;
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 {
color: $white;
padding: .75rem;
margin: .5rem;
border-radius: .5rem;
min-width: 15rem;
animation: fadeIn .1s, slideIn .25s linear;
display: flex;
justify-content: space-between;
}
form {
input {
display: block;
font-size: 1.1em;
outline: 2px solid $surface2;
border-radius: $inner-radius;
padding: $inner-gap;
.toast.error {
background-color: $red;
}
&:focus {
outline-color: $blue;
}
.toast.success {
background-color: $green;
}
&[type=radio] {
outline: none;
padding: 3em;
width: 1em;
}
}
form input:not(.btn) {
display: block;
font-size: 1.1rem;
outline: 2px solid $surface2;
border-radius: .25rem;
padding: .75rem;
}
.form-input {
position: relative;
form input:not(.btn):focus {
outline-color: $blue;
}
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;
}
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;
}
input {
width: 100%;
flex-grow: 1;
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;
}
&: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;
}
}
}
}
.rel {
position: relative;
}
.form-radio {
@include row;
width: auto;
flex-grow: 1;
position: relative;
.rel input {
width: 100%;
flex-grow: 1;
}
label {
border: 1px solid $surface2;
height: fit-content;
width: 100%;
padding: $inner-gap;
border-radius: $inner-radius;
cursor: pointer;
}
input[type=radio] {
padding: 3rem !important;
width: 1rem !important;
outline: none !important;
}
.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;
input {
position: absolute;
top: 50%;
left: 100%;
transform: translate(-250%, -70%);
}
}
}

5
src/scss/profile.scss
View file

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

13
src/scss/settings.scss
View file

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

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

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

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

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

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

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

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

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

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

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

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

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