diff --git a/public/assets/css/dash/atomic.css b/public/assets/css/dash/atomic.css new file mode 100644 index 0000000..a55de47 --- /dev/null +++ b/public/assets/css/dash/atomic.css @@ -0,0 +1,72 @@ +/* + * Atomic CSS + * + * Small, reusable classes + */ + + +/* + * Padding + */ +.p1 { padding: 5px; } +.pt1 { padding-top: 5px; } +.pl1 { padding-left: 5px; } +.pr1 { padding-right: 5px; } +.pb1 { padding-bottom: 5px; } + +.p2 { padding: 10px; } +.pt2 { padding-top: 10px; } +.pl2 { padding-left: 10px; } +.pr2 { padding-right: 10px; } +.pb2 { padding-bottom: 10px; } + + +/* + * Margin + */ +.mt1 { margin-top: 5px; } +.ml1 { margin-left: 5px; } +.mr1 { margin-right: 5px; } +.mb1 { margin-bottom: 5px; } + +.mt2 { margin-top: 10px; } +.ml2 { margin-left: 10px; } +.mr2 { margin-right: 10px; } +.mb2 { margin-bottom: 10px; } + + +/* + * Layout + */ +.row { + display: flex; +} + +.col { + display: flex; + flex-direction: column; +} + +.items-center { + display: flex; + align-items: center; +} + +.justify-center { + display: flex; + justify-content: flex; +} + +.grow { + flex-grow: 1; +} + + +/* + * Borders and rounding + */ +.rounded { + overflow: hidden; + border-radius: 5px; +} + diff --git a/public/assets/css/dash/forms.css b/public/assets/css/dash/forms.css index e52e0c5..4462cb7 100644 --- a/public/assets/css/dash/forms.css +++ b/public/assets/css/dash/forms.css @@ -15,7 +15,7 @@ input[type="email"], input[type="password"], input[type="text"] { border: 0; - border-radius: 5px; + /*border-radius: 5px;*/ font: 18px var(--base-type); display: inline-block; } diff --git a/public/assets/css/dash/init.css b/public/assets/css/dash/init.css index ed910b8..b2580ac 100644 --- a/public/assets/css/dash/init.css +++ b/public/assets/css/dash/init.css @@ -6,10 +6,9 @@ section.restore-fresh, section.restore-backup { margin: 15% auto; padding: 10px; - width: 500px; + max-width: 500px; border-radius: 5px; - display: grid; - grid-template-columns: 28.5% 1fr; + display: flex; gap: 10px; visibility: visible; } @@ -60,16 +59,11 @@ section.password-reset form input { /* SITE RESTORE */ -section.restore-fresh form button { - padding: 10px 5px; - width: 82%; -} - -section.restore-fresh form input { +/*section.restore-fresh form input { height: 30px; padding: 5px; margin-bottom: 10px; -} +}*/ section.restore-backup form button { padding: 10px 5px; @@ -85,20 +79,13 @@ section.restore-backup form input { /* RESPONSIVE */ @media only screen and (max-width: 500px) { - section.login, - section.password-reset, - section.restore-fresh, - section.restore-backup { - width: 97%; - } -} -@media only screen and (max-width: 375px) { section.login, section.password-reset, section.restore-fresh, section.restore-backup { - grid-template-columns: 1fr; + flex-direction: column; + margin: 10px auto; } section.login img, @@ -108,3 +95,22 @@ section.restore-backup form input { width: 50px; } } + +.form-label { + height: 30px; + width: 90px; + margin-right: 1px; + font-weight: bold; + background: var(--secondary); + color: var(--primary); +} + +.form-input { + height: 30px; +} + +.form-button { + padding: 10px 5px; + width: 100%; +} + diff --git a/public/assets/css/dash/start.css b/public/assets/css/dash/start.css index e07129a..c90ce41 100644 --- a/public/assets/css/dash/start.css +++ b/public/assets/css/dash/start.css @@ -1,3 +1,4 @@ +@import url("atomic.css"); @import url("colors.css"); @import url("forms.css"); @import url("typography.css"); diff --git a/resources/views/forms/init-fresh.blade.php b/resources/views/forms/init-fresh.blade.php index 865ca5c..0636dbe 100644 --- a/resources/views/forms/init-fresh.blade.php +++ b/resources/views/forms/init-fresh.blade.php @@ -1,15 +1,35 @@