Bellsworne/critterfolio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

completely reworked stylesheet to use DP measurments

Browse Source
This commit is contained in:
Chris Bell
2026-08-09 14:55:30 -05:00
parent 6f6a92257a
commit 906e5097dd
3 changed files with 228 additions and 210 deletions
Download Patch File Download Diff File Expand all files Collapse all files

429
assets/styles/main.rcss
View File

@@ -1,8 +1,7 @@
* {
box-sizing: border-box;
font-family: "Hubballi";
--background-color: #2b2d2f;
--foreground-color: #f0eae1;
--accent-green: #606c38;
@@ -13,19 +12,22 @@
--border-dark: #191a1b;
}
/* ==========================================================================
Mobile-First Base Styles (scaled via dp)
========================================================================== */
body {
display: block;
width: 100vw;
height: 100vh;
font-size: 15pt;
font-size: 12dp;
background-color: var(--background-color);
color: var(--foreground-color);
margin: 0px;
padding: 24px;
margin: 0dp;
padding: 12dp;
}
/* Generic Structural Layout Defaults */
div, section, article, header, footer, main, nav, aside {
display: block;
}
@@ -37,39 +39,37 @@ span, em, strong, a {
/* Typographic Defaults */
p {
display: block;
margin: 0px;
margin: 0dp;
}
h1, h2, h3, h4, h5, h6 {
display: block;
font-weight: bold;
margin: 0px;
margin: 0dp;
}
h1 { font-size: 2em; }
h1 { font-size: 1.6em; }
h2 { font-size: 1.5em; }
h3 { font-size: 1.17em; }
em { font-style: italic; }
strong { font-weight: bold; }
/* ==========================================================================
Form Inputs & Interactive UI Components
========================================================================== */
/* Form Inputs & Interactive UI Components */
button, input, select, textarea {
display: inline-block;
font-family: "Hubballi";
font-size: 14pt;
margin: 0px;
font-size: 14dp;
margin: 0dp;
vertical-align: middle;
}
button {
padding: 6px 16px;
padding: 6dp 16dp;
background-color: var(--accent-green);
color: var(--foreground-color);
border: 3px var(--border-dark);
border-radius: 6px;
border: 3dp var(--border-dark);
border-radius: 6dp;
text-align: center;
font-weight: bold;
}
@@ -84,11 +84,11 @@ button:active {
}
input[type="text"], textarea {
padding: 8px 12px;
padding: 8dp 12dp;
background-color: #212325;
color: var(--foreground-color);
border: 3px var(--border-dark);
border-radius: 6px;
border: 3dp var(--border-dark);
border-radius: 6dp;
width: 100%;
}
@@ -99,58 +99,56 @@ input[type="text"]:focus, textarea:focus {
textarea {
display: block;
height: 150px;
height: 120dp;
}
/* ===================================
App Header
=================================== */
/* App Header */
#header {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
padding: 12px 20px;
padding: 10dp 14dp;
background-color: var(--accent-green);
border: 3px var(--border-dark);
border-radius: 8px;
margin-bottom: 24px;
border: 3dp var(--border-dark);
border-radius: 8dp;
margin-bottom: 14dp;
}
.header-title-group {
display: flex;
flex-direction: row;
align-items: baseline;
gap: 16px;
gap: 12dp;
}
#header h1 {
font-size: 2.5em;
font-size: 1.6em;
color: var(--foreground-color);
letter-spacing: 1px;
letter-spacing: 1dp;
}
.header-tag {
font-size: 12pt;
font-size: 10dp;
font-weight: bold;
background-color: var(--border-dark);
color: var(--accent-gold);
padding: 2px 10px;
border-radius: 12px;
padding: 2dp 10dp;
border-radius: 12dp;
}
#new-critter-btn {
height: 48px;
width: 48px;
border-radius: 8px;
font-size: 28pt;
height: 40dp;
width: 40dp;
border-radius: 8dp;
font-size: 20dp;
display: flex;
align-items: center;
justify-content: center;
border: 3px var(--border-dark);
border: 3dp var(--border-dark);
background-color: var(--accent-gold);
color: var(--border-dark);
padding: 0px;
padding: 0dp;
}
#new-critter-btn:hover {
@@ -158,13 +156,11 @@ textarea {
color: var(--foreground-color);
}
/* ===================================
Drawer List Styles
=================================== */
/* Drawer List Styles */
.critter-list {
display: flex;
flex-direction: column;
gap: 10px;
gap: 8dp;
}
.critter-card {
@@ -173,12 +169,12 @@ textarea {
align-items: center;
justify-content: space-between;
width: 100%;
padding: 8px 14px;
padding: 8dp 10dp;
background-color: var(--card-bg);
color: var(--foreground-color);
border: 3px var(--border-dark);
border-left: 10px var(--accent-green);
border-radius: 6px;
border: 3dp var(--border-dark);
border-left: 10dp var(--accent-green);
border-radius: 6dp;
text-align: left;
}
@@ -191,43 +187,43 @@ textarea {
display: flex;
flex-direction: row;
align-items: center;
gap: 14px;
gap: 10dp;
flex: 1;
}
.thumb-frame {
background-color: var(--accent-green);
border: 2px var(--border-dark);
border-radius: 4px;
padding: 2px;
border: 2dp var(--border-dark);
border-radius: 4dp;
padding: 2dp;
}
.critter-thumb {
width: 50px;
height: 50px;
width: 40dp;
height: 40dp;
}
.critter-info {
display: flex;
flex-direction: column;
gap: 2px;
gap: 2dp;
flex: 1;
}
.critter-card-header {
display: flex;
align-items: baseline;
gap: 12px;
gap: 10dp;
}
.critter-name {
font-size: 18pt;
margin: 0px;
font-size: 14dp;
margin: 0dp;
color: var(--foreground-color);
}
.critter-id {
font-size: 11pt;
font-size: 9dp;
font-weight: bold;
color: var(--accent-gold);
}
@@ -235,39 +231,37 @@ textarea {
.info-pills {
display: flex;
flex-direction: row;
gap: 8px;
gap: 8dp;
}
.pill {
font-size: 12pt;
font-size: 10dp;
background-color: #212325;
color: var(--foreground-color);
border: 1px var(--accent-green);
padding: 1px 8px;
border-radius: 4px;
border: 1dp var(--accent-green);
padding: 1dp 6dp;
border-radius: 4dp;
}
.btn-delete {
padding: 4px 10px;
font-size: 11pt;
padding: 3dp 8dp;
font-size: 9dp;
font-weight: bold;
background-color: var(--accent-clay);
color: #ffffff;
border: 2px var(--border-dark);
border-radius: 4px;
border: 2dp var(--border-dark);
border-radius: 4dp;
}
.btn-delete:hover {
background-color: #a3561a;
}
/* ===================================
Modals Layout
=================================== */
/* Modals Layout */
.modal-overlay {
position: absolute;
top: 0px;
left: 0px;
top: 0dp;
left: 0dp;
width: 100%;
height: 100%;
background-color: #1f1f1fdd;
@@ -279,55 +273,55 @@ textarea {
.modal-content {
background-color: var(--card-bg);
color: var(--foreground-color);
border: 4px var(--border-dark);
border-radius: 10px;
width: 600px;
padding: 0px;
border: 4dp var(--border-dark);
border-radius: 10dp;
width: 94vw;
padding: 0dp;
display: flex;
flex-direction: column;
}
.modal-content-small {
width: 450px;
width: 88vw;
}
.modal-header {
background-color: var(--accent-green);
color: #ffffff;
padding: 12px 20px;
border-bottom: 3px var(--border-dark);
padding: 10dp 16px;
border-bottom: 3dp var(--border-dark);
}
.modal-header h2 {
font-size: 20pt;
font-size: 16dp;
color: #ffffff;
}
.modal-body {
padding: 18px 20px;
padding: 14dp 16px;
display: flex;
flex-direction: column;
gap: 12px;
gap: 10dp;
}
.form-group {
display: flex;
flex-direction: column;
gap: 4px;
gap: 4dp;
}
.form-row {
display: flex;
flex-direction: row;
gap: 12px;
flex-direction: column;
gap: 10dp;
}
.form-group.half {
width: 50%;
width: 100%;
}
.modal-content label {
font-size: 14pt;
font-size: 12dp;
font-weight: bold;
color: var(--foreground-color);
}
@@ -335,32 +329,32 @@ textarea {
.error {
color: #ffffff;
font-weight: bold;
padding: 8px;
border: 2px var(--border-dark);
padding: 8dp;
border: 2dp var(--border-dark);
background-color: var(--accent-clay);
border-radius: 4px;
border-radius: 4dp;
}
.dialog-text {
font-size: 18pt;
font-size: 14dp;
color: var(--foreground-color);
padding: 10px 0px;
padding: 10dp 0dp;
}
.modal-buttons {
padding: 14px 20px;
padding: 12dp 16px;
background-color: #2b2d2f;
border-top: 3px var(--border-dark);
border-top: 3dp var(--border-dark);
display: flex;
flex-direction: row;
gap: 12px;
gap: 12dp;
justify-content: flex-end;
}
.modal-buttons button {
min-width: 120px;
height: 42px;
font-size: 16pt;
min-width: 90dp;
height: 38dp;
font-size: 13dp;
}
.btn-cancel {
@@ -381,125 +375,142 @@ textarea {
background-color: var(--accent-bright-green);
}
/* ===================================
Small Screen Media Queries
=================================== */
@media (max-width: 600dp) {
body {
padding: 12px;
font-size: 12pt;
}
#header {
padding: 10px 14px;
margin-bottom: 14px;
}
#header h1 {
font-size: 1.6em;
}
.header-tag {
font-size: 10pt;
}
#new-critter-btn {
height: 40px;
width: 40px;
font-size: 20pt;
}
.critter-list {
gap: 8px;
}
.critter-card {
padding: 8px 10px;
}
.critter-card-body {
gap: 10px;
}
.critter-thumb {
width: 40px;
height: 40px;
}
.critter-name {
font-size: 14pt;
}
.critter-id {
font-size: 9pt;
}
.pill {
font-size: 10pt;
padding: 1px 6px;
}
.btn-delete {
padding: 3px 8px;
font-size: 9pt;
}
.modal-content {
width: 94vw;
}
.modal-content-small {
width: 88vw;
}
.modal-header h2 {
font-size: 16pt;
}
.modal-body {
padding: 14px 16px;
gap: 10px;
}
.form-row {
flex-direction: column;
gap: 10px;
}
.form-group.half {
width: 100%;
}
.modal-content label {
font-size: 12pt;
}
.modal-buttons {
padding: 12px 16px;
}
.modal-buttons button {
min-width: 90px;
height: 38px;
font-size: 13pt;
}
.dialog-text {
font-size: 14pt;
}
}
/* Extra Narrow Viewports (< 380dp) */
@media (max-width: 380dp) {
#header h1 {
font-size: 1.3em;
}
.critter-name {
font-size: 12pt;
font-size: 12dp;
}
.info-pills {
flex-direction: column;
gap: 4px;
gap: 4dp;
}
}
/* ==========================================================================
Desktop / Larger Screens Media Query (Min-Width >= 600dp)
========================================================================== */
@media (min-width: 600dp) {
body {
padding: 24dp;
font-size: 15dp;
}
textarea {
height: 150dp;
}
#header {
padding: 12dp 20px;
margin-bottom: 24dp;
}
.header-title-group {
gap: 16dp;
}
#header h1 {
font-size: 2.5em;
}
.header-tag {
font-size: 12dp;
}
#new-critter-btn {
height: 48dp;
width: 48dp;
font-size: 28dp;
}
.critter-list {
gap: 10dp;
}
.critter-card {
padding: 8dp 14dp;
}
.critter-card-body {
gap: 14dp;
}
.critter-thumb {
width: 50dp;
height: 50dp;
}
.critter-card-header {
gap: 12dp;
}
.critter-name {
font-size: 18dp;
}
.critter-id {
font-size: 11dp;
}
.pill {
font-size: 12dp;
padding: 1dp 8dp;
}
.btn-delete {
padding: 4dp 10dp;
font-size: 11dp;
}
.modal-content {
width: 600dp;
}
.modal-content-small {
width: 450dp;
}
.modal-header {
padding: 12dp 20px;
}
.modal-header h2 {
font-size: 20dp;
}
.modal-body {
padding: 18dp 20px;
gap: 12px;
}
.form-row {
flex-direction: row;
gap: 12dp;
}
.form-group.half {
width: 50%;
}
.modal-content label {
font-size: 14dp;
}
.dialog-text {
font-size: 18dp;
}
.modal-buttons {
padding: 14px 20px;
}
.modal-buttons button {
min-width: 120dp;
height: 42dp;
font-size: 16dp;
}
}