diff --git a/18-expenses-chart/notes.org b/18-expenses-chart/notes.org index 5ff4e67..0852590 100644 --- a/18-expenses-chart/notes.org +++ b/18-expenses-chart/notes.org @@ -53,6 +53,24 @@ also do i have a separate note with all of these things? i've also used some commands to vertically center my stuff -** TODO allright, tailwind config go +** DONE allright, tailwind config go font, size, colors +** well, i don't really want to go on. +but yeah, i'll need hierarchy of the elements. + +** ok. thoughs: +the componets would be +- my balance bubble + because it is spacially separate +- spending summary +- graph inside spending summary + or maybe don't even need that + +the component should take up all space provided to it. +if parent would want to add space around - that's easy to do, +but if component insists on adding space around itself - harder to reuse? +because then if parent would want to have child take up all space - negative padding? + +*** allright, @ to include sub templates + diff --git a/18-expenses-chart/tailwind.config.js b/18-expenses-chart/tailwind.config.js index 286cd0a..98a78ad 100644 --- a/18-expenses-chart/tailwind.config.js +++ b/18-expenses-chart/tailwind.config.js @@ -18,7 +18,7 @@ module.exports = { }, neutral: { 'dark-brown': 'hsl(25, 47%, 15%)', - 'medum-brown': 'hsl(28, 10%, 53%)', + 'medium-brown': 'hsl(28, 10%, 53%)', cream: 'hsl(27, 66%, 92%)', 'very-pale-orange': 'hsl(33, 100%, 98%)', }, diff --git a/18-expenses-chart/templates/index.templ b/18-expenses-chart/templates/index.templ index cf64f2d..a29fb5a 100644 --- a/18-expenses-chart/templates/index.templ +++ b/18-expenses-chart/templates/index.templ @@ -1,5 +1,38 @@ package templates +templ myBalanceComponent() { +
+ My balance +

$921.48

+
+} + +templ spendingSummaryComponent() { +
+ Spending - Last 7 days +
+ mon + tue + wed + thu + fri + sat + sun +
+
+
+
+ Total this month +

$478.33

+
+
+

+2.4%

+ from last month +
+
+
+} + templ IndexPage() { @@ -15,22 +48,12 @@ templ IndexPage() { .attribution a { color: hsl(228, 45%, 44%); } - - My balance - Spending - Last 7 days - $921.48 - mon - tue - wed - thu - fri - sat - sun - Total this month - $478.33 - +2.4% - from last month -
+ +
+ @myBalanceComponent() + @spendingSummaryComponent() +
+
Challenge by Frontend Mentor. Coded by Your Name Here.