smig/odin-codespace
1
0
Fork 0
mirror of https://gitea.smigz.com/smiggiddy/odin-codeprojects.git synced 2025-06-29 05:15:35 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: card formatting and colors

Browse source
This commit is contained in:
Smigz 2023-11-15 20:48:07 -05:00
parent f776b33aa1
commit 42b67d64d8
2 changed files with 192 additions and 65 deletions
Download patch file Download diff file Expand all files Collapse all files

71
admin-dashboard/css/style.css
View file

@ -1,3 +1,10 @@
:root {
--dark-bg: #222222;
--light-bg: #F3EEEA;
--dark-bg-color-2: #EBE3D5;
}
* {
margin: 0;
padding: 0;
@ -6,21 +13,49 @@
.container {
display: grid;
grid-template-columns: 1fr 5fr;
height: 100vh;
}
.sidebar {
grid-row: 1 / 3;
background-color: var(--dark-bg);
color: var(--light-bg);
}
.navbar ul {
grid-column: 1 / 2;
display: grid;
grid-template-rows: repeat(auto-fit, minmax(30px, 1fr));
grid-template-rows: repeat(auto-fit, minmax(60px, 1fr));
justify-content: center;
gap: 20px;
}
.navbar ul>a>h1 {
display: flex;
align-items: center;
gap: 1.3rem;
font-size: 2rem;
}
.topbar-header > [class="material-symbols-outlined"] {
font-size: 40px;
}
.navbar ul>a>li {
display: flex;
align-items: center;
gap: 1rem;
font-size: 1.2rem;
padding: 5px;
margin-left: 10px;
}
.topbar {
grid-row: 1 / 2;
grid-column: 1 / 3;
grid-row: 1 / 1;
grid-column: 2 / 3;
min-height: 100px;
}
.topbar ul {
@ -28,17 +63,15 @@
grid-template-columns: repeat(auto-fit, minmax(50px, 1fr));
}
.topbar h1 {
margin-bottom: 50px;
justify-self: center;
}
.content {
background-color: var(--dark-bg-color-2);
grid-column: 2 / 3;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(325px, 1fr));
grid-template-rows: repeat(auto-fit, minmax(325px, 1fr));
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
grid-template-rows: repeat(auto-fit, minmax(330px, 1fr));
gap: 5px;
padding: 20px;
}
@ -46,10 +79,23 @@
word-wrap: wrap;
width: 300px;
height: 300px;
padding: 20px;
}
.card h1 {
font-size: 1.5rem;
margin-bottom: 6px;
}
.card p {
font-size: 0.9rem;
padding: 8px;
}
.card-icons {
margin: 5px;
display: flex;
justify-content: flex-end;
}
@ -59,4 +105,11 @@ ul {
body {
font-size: 16px;
margin: 0;
padding: 0;
}
a {
text-decoration: none;
color: inherit;
}