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

2
flake.nix
View File

@@ -25,7 +25,7 @@
owner = "mikke89"; owner = "mikke89";
repo = "RmlUi"; repo = "RmlUi";
rev = "master"; rev = "master";
hash = "sha256-vfFtjNHw7coXWrGgtcFyuIsu5rctW5dBJoOt8MTZwDU="; hash = "sha256-5vyrVJhmNE/msJuVSESsKhiW9Pc+peA0NTYJDVoRanA=";
}; };
nativeBuildInputs = [ nativeBuildInputs = [

7
src/main.cpp
View File

@@ -184,9 +184,16 @@ int main(int arc, char *argv[]) {
if (windows && window_count > 0) { if (windows && window_count > 0) {
int current_width = 0, current_height = 0; int current_width = 0, current_height = 0;
SDL_GetWindowSize(windows[0], &current_width, &current_height); SDL_GetWindowSize(windows[0], &current_width, &current_height);
float display_scale = SDL_GetWindowDisplayScale(windows[0]);
if (Rml::Vector2i(current_width, current_height) != ctx->GetDimensions()) { if (Rml::Vector2i(current_width, current_height) != ctx->GetDimensions()) {
ctx->SetDimensions(Rml::Vector2i(current_width, current_height)); ctx->SetDimensions(Rml::Vector2i(current_width, current_height));
} }
if (display_scale != ctx->GetDensityIndependentPixelRatio()) {
ctx->SetDensityIndependentPixelRatio(display_scale);
}
} }
SDL_free(windows); SDL_free(windows);
} }