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: finished topbar

Browse source
This commit is contained in:
Smigz 2023-11-17 00:20:44 -05:00
parent 444638cf6c
commit 1e20f93a68
3 changed files with 235 additions and 162 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,8 +1,10 @@
:root {
--dark-bg: #222222;
--light-bg: #F3EEEA;
--dark-bg: #2C3639;
--light-bg: #DCD7C9;
--dark-bg-color-2: #EBE3D5;
--content-color: #FAF6F0;
--card-color: #B0A695;
}
* {
@ -13,7 +15,6 @@
.container {
display: grid;
grid-template-columns: 1fr 5fr;
height: 100vh;
}
.sidebar {
@ -22,12 +23,12 @@
color: var(--light-bg);
}
.navbar ul {
.navbar {
grid-column: 1 / 2;
display: grid;
grid-template-rows: repeat(auto-fit, minmax(60px, 1fr));
justify-content: center;
gap: 20px;
gap: 40px;
}
.navbar ul>a>h1 {
@ -37,6 +38,9 @@
font-size: 2rem;
}
.topbar-header {
margin: 12px 0;
}
.topbar-header > [class="material-symbols-outlined"] {
font-size: 40px;
@ -46,48 +50,83 @@
display: flex;
align-items: center;
gap: 1rem;
font-size: 1.2rem;
font-size: 1.4rem;
padding: 5px;
margin-top: 20px;
margin-left: 10px;
margin-bottom: 10px;
}
.topbar {
background-color: var(--dark-bg-color-2);
box-shadow: 0 3px 10px rgb(0 0 0 / 0.2);
grid-row: 1 / 1;
grid-column: 2 / 3;
min-height: 100px;
margin: 20px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: space-between;
}
.topbar ul {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(50px, 1fr));
padding: 20px;
display: flex;
justify-content: flex-start;
gap: 20px;
margin-left: 10px;
}
.topbar .user-info {
margin-right: 20px;
align-self: center;
}
.user-info {
display: flex;
justify-content: center;
gap: 20px;
}
.user-info img {
height: 2.2rem;
border: 2px #2C3639 solid;
border-radius: 50%;
}
.user-info span {
font-size: 2.2rem;
}
.content-header {
margin-left: 20px;
margin-top: 20px;
}
.content {
background-color: var(--dark-bg-color-2);
.cards {
grid-column: 2 / 3;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
grid-template-rows: repeat(auto-fit, minmax(330px, 1fr));
row-gap: 15px;
column-gap: 15px;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
padding: 20px;
gap: 20px;
}
.card {
word-wrap: wrap;
width: 300px;
height: 300px;
min-width: 300px;
padding: 20px;
background-color: var(--light-bg);
border-radius: 5%;
border-radius: 2%;
background-color: var(--card-color);
}
.card h1 {
font-size: 1.5rem;
margin-bottom: 6px;
text-align: left;
padding: 8px;
}
.card p {
@ -107,12 +146,14 @@ ul {
}
body {
font-family: 'Fira Sans', sans-serif;
font-size: 16px;
margin: 0;
padding: 0;
background-color: var(--light-bg);
}
a {
text-decoration: none;
color: inherit;
}
}