Skip to content

Commit 7ef8263

Browse files
gfauredevgfauredev
committed
refactor: reorg css
1 parent 62fb7c4 commit 7ef8263

11 files changed

Lines changed: 68 additions & 41 deletions

File tree

‎assets/_context.scss‎

Lines changed: 0 additions & 26 deletions
This file was deleted.

‎assets/_light.scss‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎assets/_structure.scss‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,13 @@
11
// Semantic hiearchical structure styles
22
// Selector: HTML Types only, with eventual structural Operators like >, + …
33

4+
body {
5+
background: var(--void, black);
6+
color: var(--primary, white);
7+
font-family: system-ui, sans-serif;
8+
min-height: 100vh;
9+
}
10+
411
h2 {
512
margin: 0 0 var(--spacing) 0;
613
color: var(--primary);

‎assets/edit.scss‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
// Structure and components specific to Create/Edit Exercise page
2+
main.edit>div {
3+
display: flex;
4+
flex-direction: column;
5+
gap: var(--spacing);
6+
}

‎assets/more.scss‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
// Structure and components specific to More page
2+
main.more article form {
3+
display: flex;
4+
gap: 8px;
5+
align-items: stretch;
6+
7+
input {
8+
flex: 1;
9+
min-width: 0;
10+
}
11+
}

‎assets/session.scss‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
// Structure and components specific to Active Session page
2+
main.session article {
3+
margin: 0 auto;
4+
}

‎assets/style.scss‎

Lines changed: 34 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
// CSS entry point, Colors, Dimensions, Layout
1+
// CSS Colors, Dimensions, Layout, import of global rules
22
:root {
33
// Structure Colors
44
--void: black;
@@ -44,18 +44,39 @@
4444
padding: 0;
4545
}
4646

47-
body {
48-
background: var(--void, black);
49-
color: var(--primary, white);
50-
font-family: system-ui, sans-serif;
51-
min-height: 100vh;
52-
}
53-
5447
@import "structure"; // Semantic nodes among the semantic hiearchical structure
5548
@import "component"; // Self-contained individual reusable components
5649
@import "unique"; // Self-contained unique non reusable components
57-
@import "context"; // Components altered by their (hierarchical) context
58-
// @media screen and (prefers-color-scheme: light) { @import "light" }
59-
// @media (pointer: fine) { @import "fine-pointer" } // Controls needing mouse
60-
// @media (pointer: none) { @import "no-pointer" } // Keyboard only control
61-
// @media screen and (prefers-reduced-motion: reduce) { }
50+
51+
@media screen and (prefers-color-scheme: light) {
52+
:root {
53+
// Structure Colors
54+
--void: white;
55+
--article: #e2e2e2;
56+
--separation: #ccc;
57+
// Text Colors
58+
--primary: black;
59+
--secondary: #2a2a2a;
60+
// Actions Colors
61+
--more: #2e7dff; // Increment or Add +
62+
--less: #ff3b30; // Decrement - or Delete permanently 🗑️
63+
--edit: #e0e0e0; // Edit ✏️ or Repeat 🔁
64+
--save: #00ff94; // Save 💾, confirm writing of data
65+
--back: #8a8a8e; // Cancel or Go Back ❌
66+
// Data Type Tag Colors
67+
--tag-category: #e67e22; // orange
68+
--tag-force: #3498db; // blue
69+
--tag-equipment: #9b59b6; // purple
70+
--tag-level: #f1c40f; // yellow
71+
--tag-primary-muscle: #e74c3c; // red
72+
--tag-secondary-muscle: #2ecc71; // green
73+
--tag-strength: #c0392b; // dark red — strength (reps) exercises
74+
--tag-cardio: #1a78c2; // dark blue — cardio (distance) exercises
75+
--tag-static: #16a085; // teal — static (time only) exercises
76+
--on-light: #111; // near-black text for use on bright tag backgrounds
77+
}
78+
}
79+
80+
// @media (pointer: fine) { TODO Controls needing mouse }
81+
// @media (pointer: none) { TODO Keyboard only control }
82+
// @media screen and (prefers-reduced-motion: reduce) { TODO Motion sickness }

‎flake.nix‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -340,9 +340,11 @@
340340
{
341341
default = env.pkgs.mkShell {
342342
packages = with env.pkgs; [
343-
# biome python3 sass scss-lint strace
343+
# biome python3 sass strace
344344
cachix # Nix binary cache
345345
kotlin-language-server # Kotlin LSP
346+
lightningcss # CSS linter & optimizer
347+
scss-lint # SCSS linter
346348
taplo # TOML LSP
347349
typescript-language-server # TypeScript LSP
348350
vscode-langservers-extracted # HTML/CSS/JS(ON)

‎src/components/active_session.rs‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -454,6 +454,7 @@ pub fn SessionView() -> Element {
454454
storage::cancel_exercise_in_session();
455455
};
456456
rsx! {
457+
Stylesheet { href: asset!("/assets/session.scss") }
457458
main { class: "session",
458459
if current_exercise_id().is_none() && !pending_ids().is_empty() {
459460
PendingExercisesSection {

‎src/components/edit_exercise.rs‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -59,6 +59,7 @@ pub fn EditExercise(id: String) -> Element {
5959
navigator().go_back();
6060
};
6161
rsx! {
62+
Stylesheet { href: asset!("/assets/edit.scss") }
6263
header {
6364
button {
6465
onclick: move |_| navigator().go_back(),

0 commit comments

Comments
 (0)