Author: Adam Evyčędo <git@apiote.xyz>
add style
templates/task.html | 127 +++++++++++++++++++++++++++++++++++++++-------
diff --git a/templates/task.html b/templates/task.html index 4da597eebd315e7f69c3b56b9147850441ded63c..38b25daa70055fa37c2fe479c82cadf0cc0a64b1 100644 --- a/templates/task.html +++ b/templates/task.html @@ -3,48 +3,137 @@ <head> <title>Roadmap {{ .Path }}</title> <style> + @font-face { + font-family: 'yellowcircle8'; + src: url('https://raw.codeberg.page/apiote/slam-door/@master/yellowcircle8.otf'); + font-weight: normal; + font-style: normal; + } + :root { + --primary: #3A3A3B; + --on-primary: #FFFFFF; + --primary-container: #E4E4E6; + --on-primary-container: #323233; + --secondary: #54AF39; + --on-secondary: #FFFFFF; + --secondary-container: #C0E6B5; + --on-secondary-container: #183311; + --tertiary: #C8963E; + --on-tertiary: #FFFFFF; + --tertiary-container: #E6D3B3; + --on-tertiary-container: #332610; + --error: #BA3F1D; + --on-error: #FFFFFF; + --error-container: #E6B6A9; + --on-error-container: #331108; + --background: #fcfcfc; + --on-background: #333333; + --surface: #fcfcfc; + --on-surface: #333333; + --surface-variant: #e5e5e6; + --on-surface-variant: #666666; + --outline: #989899; + } + @media (prefers-color-scheme: dark) { + :root { + --primary: #E3E3E6; + --on-primary: #4B4B4C; + --primary-container: #646466; + --on-primary-container: #E4E4E6; + --secondary: #B0E6A1; + --on-secondary: #254C19; + --secondary-container: #316622; + --on-secondary-container: #C0E6B5; + --tertiary: #E6CC9F; + --on-tertiary: #4C3918; + --tertiary-container: #664D20; + --on-tertiary-container: #E6D3B3; + --error: #E6A28F; + --on-error: #4C1A0C; + --error-container: #662310; + --on-error-container: #E6B6A9; + --background: #333333; + --on-background: #e5e5e6; + --surface: #333333; + --on-surface: #e5e5e6; + --surface-variant: #666666; + --on-surface-variant: #e5e5e6; + --outline: #b2b2b3; + } + } body { + font-family: 'yellowcircle8'; + font-weight: normal; + font-style: normal; margin: 1rem; + background-color: var(--background); + color: var(--on-background); + } + #header { + display: flex; + justify-content: space-between; } #subtasks { display: flex; justify-content: space-between; + margin-top: 3rem; } .subtaskHeader { + border-bottom: solid 1px var(--surface-variant); } .subtask { - border: solid 2px; - margin-top: 1rem; - padding: .5rem; + background-color: var(--surface); + color: var(--on-surface); + border: solid 1px var(--outline); + border-radius: 1rem; + margin: 1rem; + padding: 1rem 1rem 0 1rem; + } + .subtask:hover { + background-color: var(--primary-container); + color: var(--on-primary-container); + } + .column { + flex-grow: 1; } </style> + <meta name="color-scheme" content="dark light"> </head> <body> - <nav>{{ .Path }}</nav> - <h1>{{ .Summary }}</h1> - <p>{{ .Status }}</p> - {{ if .Assignee }}<p>assigned to {{ .Assignee }}</p>{{ end }} - {{ if .Milestone }}<p>milestone: {{ .Milestone }}</p>{{ end }} - {{ if .Tags }}<p>#{{ .Tags }}</p>{{ end }} + <div id="header"> + <div> + <nav>{{ .Path }}</nav> + <h1>{{ .Summary }}</h1> + <p>{{ .Status }}</p> + </div> + <div> + {{ if .Assignee }}<p>assigned to {{ .Assignee }}</p>{{ end }} + {{ if .Milestone }}<p>milestone: {{ .Milestone }}</p>{{ end }} + {{ if .Tags }}<p>#{{ .Tags }}</p>{{ end }} + </div> + </div> <p>{{ .Description }}</p> {{ if .Subtasks }} - <hr/> <div id="subtasks"> {{ range .Statuses }} - <div> + <div class="column"> <div class="subtaskHeader">{{ . }}</div> {{ range $.SubtasksMap . }} - <div class="subtask"> - <a href="{{ .Path }}">{{ .Path }}</a> - <p>{{ .Summary }}</p> - {{ if .Tags }}<p>#{{ .Tags }}</p>{{ end }} - {{ if .Assignee }}<p>assigned to {{ .Assignee }}</p>{{ end }} - {{ if .Milestone }}<p>milestone: {{ .Milestone }}</p>{{ end }} - </div> + <a href="{{ .Path }}" aria-label="{{ .Path }}" style="text-decoration: none;"> + <div class="subtask"> + {{ .Path }} + <h3>{{ .Summary }}</h3> + <p> + {{ if .Tags }}#{{ .Tags }}<br/>{{ end }} + {{ if .Assignee }}assigned to {{ .Assignee }}<br/>{{ end }} + {{ if .Milestone }}milestone: {{ .Milestone }}{{ end }} + </p> + </div> + </a> {{ end }} </div> {{ end }} </div> {{ end }} - </body> +</body> </html>