OceanSlim/dwm-app
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

added basic styling to skills html

Browse Source
This commit is contained in:
Chris kerr 2024-02-11 14:11:14 -05:00
parent fb1257a009
commit 9eed5e3d11
2 changed files with 69 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
static/style/output.css
View File

@ -552,6 +552,10 @@ video {
margin: 0.5rem; margin: 0.5rem;
} }
.m-4 {
margin: 1rem;
}
.mx-auto { .mx-auto {
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
@ -573,6 +577,10 @@ video {
margin-top: 1rem; margin-top: 1rem;
} }
.mb-4 {
margin-bottom: 1rem;
}
.block { .block {
display: block; display: block;
} }
@ -581,6 +589,10 @@ video {
display: flex; display: flex;
} }
.table {
display: table;
}
.grid { .grid {
display: grid; display: grid;
} }
@ -590,6 +602,14 @@ video {
width: fit-content; width: fit-content;
} }
.w-full {
width: 100%;
}
.border-collapse {
border-collapse: collapse;
}
.cursor-pointer { .cursor-pointer {
cursor: pointer; cursor: pointer;
} }
@ -602,10 +622,6 @@ video {
grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-columns: repeat(2, minmax(0, 1fr));
} }
.content-center {
align-content: center;
}
.items-center { .items-center {
align-items: center; align-items: center;
} }
@ -622,6 +638,10 @@ video {
border-radius: 0.375rem; border-radius: 0.375rem;
} }
.border {
border-width: 1px;
}
.border-2 { .border-2 {
border-width: 2px; border-width: 2px;
} }
@ -636,11 +656,6 @@ video {
background-color: rgb(15 23 42 / var(--tw-bg-opacity)); background-color: rgb(15 23 42 / var(--tw-bg-opacity));
} }
.bg-gray-800 {
--tw-bg-opacity: 1;
background-color: rgb(31 41 55 / var(--tw-bg-opacity));
}
.bg-neutral-800 { .bg-neutral-800 {
--tw-bg-opacity: 1; --tw-bg-opacity: 1;
background-color: rgb(38 38 38 / var(--tw-bg-opacity)); background-color: rgb(38 38 38 / var(--tw-bg-opacity));
@ -650,6 +665,20 @@ video {
padding: 0.5rem; padding: 0.5rem;
} }
.p-4 {
padding: 1rem;
}
.px-4 {
padding-left: 1rem;
padding-right: 1rem;
}
.py-2 {
padding-top: 0.5rem;
padding-bottom: 0.5rem;
}
.pl-2 { .pl-2 {
padding-left: 0.5rem; padding-left: 0.5rem;
} }
@ -681,6 +710,11 @@ video {
line-height: 1.75rem; line-height: 1.75rem;
} }
.text-3xl {
font-size: 1.875rem;
line-height: 2.25rem;
}
.font-black { .font-black {
font-weight: 900; font-weight: 900;
} }

42
templates/skills.html
View File

@ -3,23 +3,33 @@
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="icon" href="/img/favicon.ico" />
<link rel="stylesheet" href="../static/style/output.css" />
<title>Skills Data</title> <title>Skills Data</title>
</head> </head>
<body> <body
<h1>Skills Data</h1> class="flex items-center justify-center p-4 m-4 font-mono text-white bg-neutral-800"
<table border="1"> >
<tr> <div class="text-center">
{% for key in csv_data[0].keys() %} <h1 class="text-3xl font-bold mb-4">Skills Data</h1>
<th>{{ key }}</th> <table class="border-collapse border w-full">
{% endfor %} <thead>
</tr> <tr>
{% for row in csv_data %} {% for key in csv_data[0].keys() %}
<tr> <th class="border py-2 px-4">{{ key }}</th>
{% for value in row.values() %} {% endfor %}
<td>{{ value }}</td> </tr>
{% endfor %} </thead>
</tr> <tbody>
{% endfor %} {% for row in csv_data %}
</table> <tr>
{% for value in row.values() %}
<td class="border py-2 px-4">{{ value }}</td>
{% endfor %}
</tr>
{% endfor %}
</tbody>
</table>
</div>
</body> </body>
</html> </html>