Merge pull request 'Fix CSS Formatting' (#5) from cleanup_css into main

Reviewed-on: #5
This commit is contained in:
glyph 2022-09-06 07:49:39 +00:00
commit 125211cabc
2 changed files with 77 additions and 81 deletions

2
.gitignore vendored
View File

@ -1,6 +1,6 @@
diagrams diagrams
next next
notes notes
screenshots/lykin_gui_* screenshots/lykin_*
/target /target
src/*.bak src/*.bak

View File

@ -1,157 +1,153 @@
.content { .content {
background-color: lightyellow; background-color: lightyellow;
border: 5px solid #ffd700; border: 5px solid #ffd700;
border-radius: 1rem; border-radius: 1rem;
grid-area: content; grid-area: content;
padding: 1.5rem; padding: 1.5rem;
overflow-y: scroll; overflow-y: scroll;
word-wrap: anywhere; word-wrap: anywhere;
} }
.container { .container {
height: 100%; height: 100%;
width: 100%; width: 100%;
margin: 0; margin: 0;
} }
.disabled { .disabled {
opacity: 0.4; opacity: 0.4;
pointer-events: none; pointer-events: none;
} }
.flash-message { .flash-message {
margin-left: auto; margin-left: auto;
margin-right: 0; margin-right: 0;
margin-top: 0; margin-top: 0;
margin-bottom: 0; margin-bottom: 0;
color: red; color: red;
} }
.flex-container { .flex-container {
display: flex; display: flex;
align-items: center; align-items: center;
flex-wrap: wrap; flex-wrap: wrap;
} }
.flex-container > input { .flex-container > input {
margin: 0.3rem; margin: 0.3rem;
} }
.grid-container { .grid-container {
display: grid; display: grid;
grid-template-columns: 1fr; grid-template-columns: 1fr;
grid-template-rows: 1fr 1fr 1fr 3fr; grid-template-rows: 1fr 1fr 1fr 3fr;
grid-template-areas: grid-template-areas: 'nav' 'peers' 'posts' 'content';
'nav' grid-gap: 0.5rem;
'peers' padding-left: 1rem;
'posts' padding-right: 1rem;
'content'; padding-top: 0.2rem;
grid-gap: 0.5rem; overflow: hidden;
padding-left: 1rem; height: 85vh;
padding-right: 1rem;
padding-top: 0.2rem;
overflow: hidden;
height: 85vh;
} }
@media only screen and (min-width: 600px) { @media only screen and (min-width: 600px) {
.grid-container { .grid-container {
grid-template-columns: repeat(4, 1fr); grid-template-columns: repeat(4, 1fr);
grid-template-rows: 1fr 3fr 4fr; grid-template-rows: 1fr 3fr 4fr;
grid-template-areas: grid-template-areas:
'nav nav nav nav nav' 'nav nav nav nav nav'
'peers posts posts posts posts' 'peers posts posts posts posts'
'peers content content content content'; 'peers content content content content';
} }
} }
.icon { .icon {
margin-left: 1rem; margin-left: 1rem;
} }
.nav { .nav {
background-color: lightgreen; background-color: lightgreen;
border: 5px solid #19a974; border: 5px solid #19a974;
border-radius: 1rem; border-radius: 1rem;
grid-area: nav; grid-area: nav;
padding: 1rem; padding: 1rem;
} }
.peers { .peers {
background-color: lightblue; background-color: lightblue;
border: 5px solid #357edd; border: 5px solid #357edd;
border-radius: 1rem; border-radius: 1rem;
grid-area: peers; grid-area: peers;
text-align: left; text-align: left;
} }
.peers > ul { .peers > ul {
padding-left: 1rem; padding-left: 1rem;
} }
.peers > ul > li > a { .peers > ul > li > a {
justify-content: space-between; justify-content: space-between;
} }
.peers > ul > li > a > p { .peers > ul > li > a > p {
margin: 0; margin: 0;
font-weight: bold; font-weight: bold;
padding-right: 1rem; padding-right: 1rem;
} }
.post > ul { .post > ul {
padding-left: 1rem; padding-left: 1rem;
padding-right: 1rem; padding-right: 1rem;
} }
.posts { .posts {
background-color: bisque; background-color: bisque;
border: 5px solid #ff6300; border: 5px solid #ff6300;
border-radius: 1rem; border-radius: 1rem;
grid-area: posts; grid-area: posts;
overflow-y: scroll; overflow-y: scroll;
} }
.posts > ul { .posts > ul {
padding-left: 1rem; padding-left: 1rem;
padding-right: 1rem; padding-right: 1rem;
} }
.posts > ul > li > a { .posts > ul > li > a {
justify-content: space-between; justify-content: space-between;
} }
.posts > ul > li > a > p { .posts > ul > li > a > p {
margin: 0; margin: 0;
} }
.selected { .selected {
background-color: #f9c587; background-color: #f9c587;
} }
a { a {
text-decoration: none; text-decoration: none;
color: black; color: black;
} }
code { code {
word-wrap: anywhere; word-wrap: anywhere;
} }
form { form {
margin-left: auto; margin-left: auto;
margin-right: 0.5rem; margin-right: 0.5rem;
} }
h1 { h1 {
margin-left: 1rem; margin-left: 1rem;
} }
img { img {
width: 3rem; width: 3rem;
} }
li { li {
list-style: none; list-style: none;
font-size: 12px; font-size: 12px;
} }