changed layout to flexbox, added additional css
This commit is contained in:
daveedmee
GitHub
parent
987c0c01e2
commit
eab844f335
1 changed files with 222 additions and 116 deletions
|
|
@ -1,17 +1,18 @@
|
||||||
@import url(/assets/themes/colors.css);
|
@import url(colors.css);
|
||||||
|
|
||||||
/* basics */
|
/* basics */
|
||||||
html, body {
|
html, body {
|
||||||
margin:0;
|
margin:0px;
|
||||||
padding: 8px;
|
padding: 0px;
|
||||||
|
gap: 0px;
|
||||||
|
|
||||||
font-family: monospace;
|
font-family: "Hermit NF Mono Regular", monospace;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
color:var(--t-color);
|
color:var(--t-color);
|
||||||
background-color: var(--bg-darkest);
|
background-color: var(--bg-darkest);
|
||||||
}
|
}
|
||||||
h1, h2, h3, h4, h5 {
|
h1, h2, h3, h4, h5 {
|
||||||
font-family: sans-serif;
|
font-family: Inter, sans-serif;
|
||||||
}
|
}
|
||||||
h1 {
|
h1 {
|
||||||
font-size: 2.5rem;
|
font-size: 2.5rem;
|
||||||
|
|
@ -40,165 +41,270 @@ a {
|
||||||
background-color: var(--s-color);
|
background-color: var(--s-color);
|
||||||
}
|
}
|
||||||
li {
|
li {
|
||||||
margin-bottom: 24px;
|
padding-bottom: 8px;
|
||||||
justify-self: center;
|
}
|
||||||
|
|
||||||
|
#search {
|
||||||
|
background-color: var();
|
||||||
|
border: 1px solid var();
|
||||||
}
|
}
|
||||||
|
|
||||||
/* parent container */
|
input[type=text] {
|
||||||
.parent {
|
background-color: var(--bg);
|
||||||
display: grid;
|
color: var(--t-color);
|
||||||
|
border-width: 2px;
|
||||||
|
border-style: solid;
|
||||||
|
border-top-color: var(--fg-lighter);
|
||||||
|
border-right-color: var(--fg-lighter);
|
||||||
|
border-bottom-color: var(--fg);
|
||||||
|
border-left-color: var(--fg);
|
||||||
|
padding:3px;
|
||||||
|
}
|
||||||
|
input[type=text]:focus {
|
||||||
|
background-color: var(--bg);
|
||||||
|
border-top-color: var(--fg-lightest);
|
||||||
|
border-right-color: var(--fg-lightest);
|
||||||
|
border-bottom-color: var(--fg-lighter);
|
||||||
|
border-left-color: var(--fg-lighter);
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
button[type=submit] {
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding:0px 2px;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
/* class styled as big button */
|
||||||
|
.button {
|
||||||
|
display:inline-flex;
|
||||||
|
flex-flow: column;
|
||||||
|
|
||||||
|
background-color: var(--bg-darker);
|
||||||
|
color: var(--t-color);
|
||||||
|
text-transform: uppercase;
|
||||||
|
text-decoration: none;
|
||||||
|
font-size: 16px;
|
||||||
|
|
||||||
grid-template-columns: repeat(12, 1fr);
|
border-width: 2px;
|
||||||
grid-template-rows: repeat(8, 1fr);
|
border-style: solid;
|
||||||
gap: 16px;
|
border-top-color: var(--fg-lighter);
|
||||||
|
border-right-color: var(--fg-lighter);
|
||||||
|
border-bottom-color: var(--fg);
|
||||||
|
border-left-color: var(--fg);
|
||||||
|
|
||||||
|
padding: 8px 16px;
|
||||||
margin: auto;
|
align-self: stretch;
|
||||||
height: max(calc(100vh - 32px), 700px); /* 8px top/bottom from body */
|
text-align: center;
|
||||||
|
}
|
||||||
|
.button:hover {
|
||||||
|
background-color: var(--bg);
|
||||||
|
border-top-color: var(--fg-lightest);
|
||||||
|
border-right-color: var(--fg-lightest);
|
||||||
|
border-bottom-color: var(--fg-lighter);
|
||||||
|
border-left-color: var(--fg-lighter);
|
||||||
|
}
|
||||||
|
.button:active {
|
||||||
|
background-color: var(--bg-darkest);
|
||||||
|
border-top-color: var(--fg-lighter);
|
||||||
|
border-right-color: var(--fg-lighter);
|
||||||
|
border-bottom-color: var(--fg);
|
||||||
|
border-left-color: var(--fg);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* real big button */
|
||||||
|
button {
|
||||||
|
display:inline-flex;
|
||||||
|
flex-flow: column;
|
||||||
|
|
||||||
|
background-color: var(--bg-darker);
|
||||||
|
color: var(--t-color);
|
||||||
|
text-transform: uppercase;
|
||||||
|
text-decoration: none;
|
||||||
|
font-size: 16px;
|
||||||
|
|
||||||
|
border-width: 2px;
|
||||||
|
border-style: solid;
|
||||||
|
border-top-color: var(--fg-lighter);
|
||||||
|
border-right-color: var(--fg-lighter);
|
||||||
|
border-bottom-color: var(--fg);
|
||||||
|
border-left-color: var(--fg);
|
||||||
|
|
||||||
|
padding: 4px;
|
||||||
|
align-self: stretch;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
button:hover {
|
||||||
|
background-color: var(--bg);
|
||||||
|
border-top-color: var(--fg-lightest);
|
||||||
|
border-right-color: var(--fg-lightest);
|
||||||
|
border-bottom-color: var(--fg-lighter);
|
||||||
|
border-left-color: var(--fg-lighter);
|
||||||
|
}
|
||||||
|
button:active {
|
||||||
|
background-color: var(--bg-darkest);
|
||||||
|
border-top-color: var(--fg-lighter);
|
||||||
|
border-right-color: var(--fg-lighter);
|
||||||
|
border-bottom-color: var(--fg);
|
||||||
|
border-left-color: var(--fg);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* class styled as small button */
|
||||||
|
.button-small {
|
||||||
|
display:inline-flex;
|
||||||
|
flex-flow: row;
|
||||||
|
|
||||||
|
background-color: var(--bg-darker);
|
||||||
|
color: var(--t-color);
|
||||||
|
text-transform: uppercase;
|
||||||
|
text-decoration: none;
|
||||||
|
font-size: 12px;
|
||||||
|
|
||||||
|
border-width: 2px;
|
||||||
|
border-style: solid;
|
||||||
|
border-top-color: var(--fg-lighter);
|
||||||
|
border-right-color: var(--fg-lighter);
|
||||||
|
border-bottom-color: var(--fg);
|
||||||
|
border-left-color: var(--fg);
|
||||||
|
|
||||||
|
padding: 4px 8px;
|
||||||
|
align-self: center;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.button-small:hover {
|
||||||
|
background-color: var(--bg);
|
||||||
|
border-top-color: var(--fg-lightest);
|
||||||
|
border-right-color: var(--fg-lightest);
|
||||||
|
border-bottom-color: var(--fg-lighter);
|
||||||
|
border-left-color: var(--fg-lighter);
|
||||||
|
}
|
||||||
|
.button-small:active {
|
||||||
|
background-color: var(--bg-darkest);
|
||||||
|
border-top-color: var(--fg-lighter);
|
||||||
|
border-right-color: var(--fg-lighter);
|
||||||
|
border-bottom-color: var(--fg);
|
||||||
|
border-left-color: var(--fg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.button-small img {
|
||||||
|
aspect-ratio: 1/1;
|
||||||
|
max-height:16px;
|
||||||
|
padding-right: 4px;
|
||||||
|
align-self: center;
|
||||||
|
}
|
||||||
|
|
||||||
/* top nav */
|
/* top nav */
|
||||||
.nav-top {
|
.nav-top {
|
||||||
grid-column: span 12 / span 12;
|
|
||||||
display:flex;
|
display:flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
|
|
||||||
padding-left: 8px;
|
width: 98%;
|
||||||
padding-right: 8px;
|
height: var(--top-height);
|
||||||
|
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
align-content: center;
|
align-content: center;
|
||||||
|
|
||||||
|
padding: 0px 16px;
|
||||||
|
|
||||||
|
border-bottom: 2px solid var(--fg);
|
||||||
|
}
|
||||||
|
.nav-top img {
|
||||||
|
max-height: 74px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* everything else */
|
||||||
|
.container-main {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* main nav */
|
/* main nav */
|
||||||
.nav-main {
|
.sidebar-left {
|
||||||
grid-column: span 2 / span 2;
|
width: 16.6%;
|
||||||
grid-row: span 3 / span 3;
|
height: calc(100dvh - var(--top-height));
|
||||||
grid-row-start: 2;
|
justify-content: space-between;
|
||||||
|
display:flex;
|
||||||
|
flex-direction: column;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
align-items: center;
|
||||||
|
border-right: 2px solid var(--fg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-main {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
justify-content: flex-start;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
align-content: center;
|
align-content: center;
|
||||||
}
|
gap: 16px;
|
||||||
.nav-main ul {
|
width: fit-content;
|
||||||
padding: 8px;
|
padding: 16px;
|
||||||
}
|
|
||||||
.nav-main li {
|
|
||||||
list-style: none;
|
|
||||||
}
|
|
||||||
.nav-icons {
|
|
||||||
grid-column: span 2 / span 2;
|
|
||||||
grid-row: span 2 / span 2;
|
|
||||||
grid-column-start: 1;
|
|
||||||
grid-row-start: 5;
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-icons {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: repeat(2, 1fr);
|
grid-template-columns: repeat(2, 1fr);
|
||||||
grid-template-rows: repeat(2, 1fr);
|
grid-template-rows: repeat(2, 1fr);
|
||||||
gap: 4px;
|
|
||||||
|
|
||||||
justify-items: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
gap: 16px;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/* buttons of main nav */
|
/* buttons of main nav */
|
||||||
.button {
|
|
||||||
display: flex;
|
.nav-icons a {
|
||||||
flex-direction: column;
|
aspect-ratio: 1/1;
|
||||||
align-self: center;
|
|
||||||
justify-self: center;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.button img {
|
.nav-icons a img {
|
||||||
aspect-ratio: 1/1;
|
|
||||||
max-width: 48px;
|
max-width: 48px;
|
||||||
align-self: center;
|
align-self: center;
|
||||||
}
|
justify-self: center;
|
||||||
|
|
||||||
.button p {
|
|
||||||
margin: 2px;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/* content table */
|
|
||||||
.content-table {
|
|
||||||
grid-column: span 2 / span 2;
|
|
||||||
grid-row: span 3 / span 3;
|
|
||||||
grid-column-start: 11;
|
|
||||||
grid-row-start: 2;
|
|
||||||
word-break: break-word;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/* news */
|
|
||||||
.n-feed {
|
|
||||||
grid-column: span 2 / span 2;
|
|
||||||
grid-row: span 2 / span 2;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
.news {
|
|
||||||
grid-row-start: 5;
|
|
||||||
grid-column-start: 11;
|
|
||||||
}
|
|
||||||
.announce {
|
|
||||||
grid-row-start: 7;
|
|
||||||
grid-column-start: 11;
|
|
||||||
}
|
|
||||||
|
|
||||||
.news-arts {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
overflow: scroll;
|
|
||||||
flex-grow: 2;
|
|
||||||
}
|
|
||||||
.news-item {
|
|
||||||
padding: 4px 16px;
|
|
||||||
margin: 2px;
|
|
||||||
}
|
|
||||||
.news-item h5 {
|
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
padding: 0;
|
||||||
.news-rss-subscribe {
|
|
||||||
align-self: flex-end;
|
|
||||||
padding: 4px 8px;
|
|
||||||
background-color: var(--fg-lighter); /* HACK: not a background color */
|
|
||||||
width: calc(100% - 16px);
|
|
||||||
}
|
|
||||||
.news-type-title {
|
|
||||||
font-weight: bold;
|
|
||||||
text-align: center;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* main content */
|
/* main content */
|
||||||
.content {
|
.content {
|
||||||
grid-column: span 8 / span 8;
|
display: flex;
|
||||||
grid-row: span 7 / span 7;
|
flex-direction: column;
|
||||||
grid-column-start: 3;
|
width:66.6%;
|
||||||
grid-row-start: 2;
|
|
||||||
|
|
||||||
padding: 16px;
|
padding: 16px;
|
||||||
|
background-color: var(--bg);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* right nav */
|
||||||
|
.sidebar-right {
|
||||||
|
width: 16.6%;
|
||||||
|
display:flex;
|
||||||
|
flex-direction: column;
|
||||||
|
flex-wrap: nowrap;
|
||||||
|
justify-content: space-between;
|
||||||
|
gap: 16px;
|
||||||
|
border-left: 2px solid var(--fg);
|
||||||
|
}
|
||||||
|
|
||||||
/* experimental stuff */
|
/* content table */
|
||||||
.nav-main, .nav-icons, .nav-top, .content-table, .news, .content, .announce{
|
.content-table {
|
||||||
background-color: var(--bg);
|
display: flex;
|
||||||
border: 1px solid var(--t-color);
|
flex-direction: column;
|
||||||
border-radius:16px;
|
height: 50%;
|
||||||
|
padding: 16px;
|
||||||
}
|
}
|
||||||
.nav-main, .nav-icons, .nav-top, .content-table, .news, .announce {
|
/* news */
|
||||||
position: sticky;
|
.news {
|
||||||
|
background-color: var(--bg-darker);
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
height: 50%;
|
||||||
|
padding: 16px;
|
||||||
|
gap: 16px;
|
||||||
}
|
}
|
||||||
.nav-main, .content-table, .content {
|
.news-item {
|
||||||
overflow-y: scroll;
|
|
||||||
}
|
}
|
||||||
Loading…
Add table
Add a link
Reference in a new issue