fipamo/public/assets/css/dash/index.css
Ro 07b422a9c3
CSS Overhaul Part 1
This one is a doozy, so let's breakt it down into what areas where
touched.

-   updated package json to remove unneeded dependencies.
-   rebuilt file uploading to simply a very convuluted process
-   began proces to replace icons with https://tabler-icons.io
-   began process of removing the need for css preprocessor and using
    pure css
        - login completed
        - dashboard index completed
        - page edit ui completed
- page edit ui text editor tweaked so syntax highlighting is cleaner and
  more accurate

The settings and navigation UIs still remain and then polishing the
responsive for the new css structure
2023-03-23 13:55:34 -07:00

86 lines
1.7 KiB
CSS

section[role="index-header"] {
display: grid;
grid-template-columns: 1fr 1fr;
width: 100%;
max-width: 900px;
margin: 60px auto 0;
}
section[role="index-recent-pages"] a {
width: 100%;
height: 100%;
display: flex;
justify-content: left;
align-items: center;
border-radius: 5px;
border-bottom: none;
}
section[role="index-recent-pages"] a:nth-child(1) {
grid-column: 1/4;
grid-row: 1/3;
}
section[role="index-recent-pages"] a:nth-child(2) {
grid-row: 3/6;
}
section[role="index-recent-pages"] a:nth-child(3) {
grid-column: 2/4;
grid-row: 3/5;
}
section[role="index-header"] div[role="index-header-right"] {
display: flex;
justify-content: right;
align-items: center;
}
section[role="index-header"] div[role="index-header-right"] a {
border-bottom: none;
margin-left: 5px;
}
section[role="index-recent-pages"] {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-auto-rows: minmax(200px, auto);
gap: 10px;
width: 100%;
max-width: 900px;
margin: 10px auto;
}
section[role="index-recent-pages"] a button {
padding: 1px 5px;
}
section[role="index-recent-pages"] button[data-active="true"] {
background: var(--primary);
}
section[role="index-recent-pages"] button[data-active="true"] svg {
fill: var(--tertiary);
}
section[role="index-recent-pages"] button[data-active="false"] {
background: var(--secondary);
}
section[role="index-recent-pages"] button[data-active="false"] svg {
fill: var(--primary);
}
section[role="index-recent-pages"] aside {
font-size: 1.1em;
color: var(--white);
text-shadow: 2px 2px 2px var(--black);
padding: 10px;
}
section[role="index-recent-pages"] hr {
color: var(--white);
border: 0.1px solid;
margin: 7px 0;
}