Added page layout, fixed page list, updated style
This commit is contained in:
+123
-89
@@ -3,10 +3,6 @@ body {
|
||||
margin: 0;
|
||||
|
||||
font-size: 1.25em;
|
||||
|
||||
background-color: #000;
|
||||
|
||||
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
|
||||
}
|
||||
|
||||
#content-wrapper {
|
||||
@@ -27,10 +23,9 @@ main {
|
||||
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
|
||||
background-color: rgba(0, 0, 0, 0.50);
|
||||
}
|
||||
|
||||
/* Article surrounds the content */
|
||||
article {
|
||||
width: 80ch;
|
||||
max-width: 95%;
|
||||
@@ -38,86 +33,102 @@ article {
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
/* Front Page */
|
||||
.menu-item {
|
||||
background-color: #222;
|
||||
margin-top: 0.5em;
|
||||
article.narrow {
|
||||
width: 60ch;
|
||||
}
|
||||
|
||||
.mi-icon {
|
||||
display: inline-block;
|
||||
width: 2ch;
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
/* Page Body */
|
||||
.page-body {
|
||||
text-align: left;
|
||||
outline: 0.5px solid;
|
||||
padding: 1ch 1em;
|
||||
margin-top: 0.75em;
|
||||
margin-bottom: 2em;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
.page-body h1 {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0.5em;
|
||||
font-size: 2em;
|
||||
|
||||
background-color: #333;
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.mi-body {
|
||||
.page-body h2 {
|
||||
margin-top: 1em;
|
||||
margin-bottom: 0.25em;
|
||||
}
|
||||
|
||||
.page-body h2:nth-child(1), .page-body h2:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.page-body h3, .page-body h4, .page-body h5, .page-body h6 {
|
||||
margin-top: 0.25em;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.page-body blockquote {
|
||||
margin: 0;
|
||||
padding: 0.25em 0.5ch;
|
||||
border: 0.5px solid;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
.page-body blockquote p:last-of-type {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.page-body p {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
/* Front Page */
|
||||
.page-list {
|
||||
width: 100%;
|
||||
border-spacing: 0px;
|
||||
margin-top: 0.75em;
|
||||
}
|
||||
|
||||
.page-list .spacer {
|
||||
background: none;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.page-list .spacer td {
|
||||
height: 0.5em;
|
||||
}
|
||||
|
||||
.pl-icon {
|
||||
text-align: center;
|
||||
font-size: 2em;
|
||||
width: 1.5ch;
|
||||
padding: 0 0.5ch;
|
||||
outline: 0.5px solid;
|
||||
}
|
||||
|
||||
.pl-content {
|
||||
padding: 0.25em 0.5em;
|
||||
}
|
||||
|
||||
.plc-meta {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
font-size: 0.75em;
|
||||
}
|
||||
|
||||
.plc-meta div {
|
||||
display: inline-block;
|
||||
width: calc(95% - 5ch);
|
||||
|
||||
color: #777;
|
||||
margin-right: 1ch;
|
||||
}
|
||||
|
||||
.mi-title {
|
||||
display: block;
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.mi-meta {
|
||||
font-size: 0.50em;
|
||||
padding-top: 0.25em;
|
||||
}
|
||||
|
||||
.mi-segment {
|
||||
display: inline-block;
|
||||
padding-right: 1ch;
|
||||
}
|
||||
|
||||
.mi-tag {
|
||||
display: inline-block;
|
||||
|
||||
margin-right: 0.5ch;
|
||||
padding: 0.05em 0.50em;
|
||||
border-radius: 12px;
|
||||
|
||||
color: #ccc;
|
||||
border: 0.5px solid;
|
||||
background-color: #333;
|
||||
border-color: #777;
|
||||
}
|
||||
|
||||
.ttype-special {
|
||||
color: #000;
|
||||
background-color: #194;
|
||||
border-color: #000;
|
||||
}
|
||||
|
||||
.ttype-character {
|
||||
color: #2ad;
|
||||
border-color: #2ad;
|
||||
}
|
||||
|
||||
.ttype-location {
|
||||
color: #d93;
|
||||
border-color: #d93;
|
||||
}
|
||||
|
||||
/* Side Menu */
|
||||
nav {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 18ch;
|
||||
width: calc(18ch - 1px);
|
||||
height: 100%;
|
||||
|
||||
background-color: #222;
|
||||
color: #aaa;
|
||||
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
|
||||
@@ -147,33 +158,49 @@ nav li {
|
||||
padding-left: 1ch;
|
||||
}
|
||||
|
||||
nav li:hover {
|
||||
color: #ccc;
|
||||
background-color: #333;
|
||||
}
|
||||
|
||||
nav .mg-icon {
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
width: 2ch;
|
||||
padding: 0em 0.5ch;
|
||||
}
|
||||
}
|
||||
|
||||
nav .mg-label {
|
||||
display: inline-block;
|
||||
|
||||
padding: 0 0.5ch;
|
||||
|
||||
color: #555;
|
||||
}
|
||||
|
||||
nav li:hover .mg-label {
|
||||
color: #777;
|
||||
nav .page-property {
|
||||
text-align: center;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
nav .pp-key {
|
||||
color: #333;
|
||||
font-size: 0.75em;
|
||||
}
|
||||
|
||||
nav .pp-value {
|
||||
}
|
||||
|
||||
nav .pp-tag {
|
||||
font-size: 0.9em;
|
||||
text-align: left;
|
||||
padding-left: 1.5ch;
|
||||
}
|
||||
|
||||
nav .ppt-icon {
|
||||
display: inline-block;
|
||||
width: 2ch;
|
||||
text-align: center;
|
||||
margin-right: 0.5ch;
|
||||
|
||||
color: #1af;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 900px) {
|
||||
nav {
|
||||
width: 4ch;
|
||||
width: calc(4ch - 1px);
|
||||
}
|
||||
|
||||
nav h1 {
|
||||
@@ -192,19 +219,26 @@ nav li:hover .mg-label {
|
||||
nav .mg-icon {
|
||||
width: 3ch;
|
||||
margin-left: 0;
|
||||
padding: 0;
|
||||
padding: 0.125em 0;
|
||||
}
|
||||
|
||||
main {
|
||||
left: 4ch;
|
||||
}
|
||||
|
||||
.mi-icon {
|
||||
font-size: 2.55em;
|
||||
}
|
||||
|
||||
.mis-tags {
|
||||
.page-body, .page-list {
|
||||
margin-top: 0.33em;
|
||||
}
|
||||
|
||||
.page-body h1, .page-body h2, .page-body h3 {
|
||||
font-size: 1.25em;
|
||||
}
|
||||
|
||||
.plc-meta .plcm-tag {
|
||||
display: block;
|
||||
padding-top: 0.25em;
|
||||
}
|
||||
|
||||
.page-property {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,45 @@
|
||||
/*
|
||||
* background.js magic
|
||||
*/
|
||||
img#main-background {
|
||||
/* Set rules to fill background */
|
||||
width: 100%;
|
||||
/* Set up proportionate scaling */
|
||||
min-height: 100%;
|
||||
height: auto;
|
||||
/* Set up positioning */
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
user-select: none;
|
||||
}
|
||||
img#main-background.landscape {
|
||||
/* Set rules to fill background */
|
||||
height: 100%;
|
||||
/* Set up proportionate scaling */
|
||||
min-width: 100%;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
/*
|
||||
* Less glaring chrome/ium scrollbars.
|
||||
*/
|
||||
::-webkit-scrollbar {
|
||||
width: 2px;
|
||||
/* for vertical scrollbars */
|
||||
height: 2px;
|
||||
/* for horizontal scrollbars */
|
||||
}
|
||||
::-webkit-scrollbar-button {
|
||||
background-color: #777;
|
||||
color: 000;
|
||||
display: none;
|
||||
}
|
||||
::-webkit-scrollbar-track {
|
||||
background-color: #ccc;
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
background-color: #777;
|
||||
color: #000;
|
||||
}
|
||||
@@ -0,0 +1,150 @@
|
||||
body {
|
||||
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
|
||||
}
|
||||
|
||||
main {
|
||||
}
|
||||
|
||||
.page-body {
|
||||
color: #99a;
|
||||
outline: 0.5px solid #2bf;
|
||||
background-color: rgba(0, 0, 0, 0.75);
|
||||
}
|
||||
|
||||
.page-body a {
|
||||
color: #f91;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.page-body a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.page-body h1, .page-body h2, .page-body h3,
|
||||
.page-body h4, .page-body h5, .page-body h6 {
|
||||
color: #2bf;
|
||||
}
|
||||
|
||||
.page-body blockquote {
|
||||
background-color: rgba(34, 187, 255, 0.25);
|
||||
border-color: #2bf;
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.page-list {
|
||||
width: 100%;
|
||||
border-spacing: 0px;
|
||||
margin-top: 0.75em;
|
||||
|
||||
color: #99a;
|
||||
}
|
||||
|
||||
.page-list tr {
|
||||
outline: 0.5px solid #2bf;
|
||||
}
|
||||
|
||||
.pl-icon {
|
||||
outline: 0.5px solid #2bf;
|
||||
background: rgba(34, 187, 255, 0.125);
|
||||
color: #2bf;
|
||||
}
|
||||
|
||||
.pl-content {
|
||||
background-color: rgba(0, 0, 0, 0.75)
|
||||
}
|
||||
|
||||
.plc-title {
|
||||
color: #2bf;
|
||||
}
|
||||
|
||||
.plc-title a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.plc-title a:hover {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.plc-meta div {
|
||||
color: #99a;
|
||||
}
|
||||
|
||||
/* Tag colors */
|
||||
.plcm-tag.ttype-event {
|
||||
color: #b77;
|
||||
}
|
||||
|
||||
.plcm-tag.ttype-location {
|
||||
color: #aa7;
|
||||
}
|
||||
|
||||
.plcm-tag.ttype-source {
|
||||
color: #7b7;
|
||||
}
|
||||
|
||||
/* Unread */
|
||||
.page-list tr.unread {
|
||||
outline: 0.5px solid #f91;
|
||||
}
|
||||
|
||||
.page-list .unread .pl-content {
|
||||
background-color: rgba(2, 1, 0, 0.75)
|
||||
}
|
||||
|
||||
.page-list .unread .plc-title {
|
||||
color: #f91;
|
||||
}
|
||||
|
||||
.page-list .unread .pl-icon {
|
||||
outline: 0.5px solid #f91;
|
||||
background: rgba(255, 153, 17, 0.25);
|
||||
color: #f91;
|
||||
}
|
||||
|
||||
nav {
|
||||
background-color: rgba(0, 0, 0, 0.75);
|
||||
color: #aaa;
|
||||
border-right: 1px solid #2bf;
|
||||
}
|
||||
|
||||
nav a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
nav li:hover, nav .pp-tag:hover {
|
||||
color: #ccc;
|
||||
background-color: rgba(34, 187, 255, 0.25);
|
||||
}
|
||||
|
||||
nav .mg-icon {
|
||||
color: #2bf;
|
||||
}
|
||||
|
||||
nav .mg-label {
|
||||
color: #99a;
|
||||
}
|
||||
|
||||
nav li:hover .mg-label {
|
||||
color: #99a;
|
||||
}
|
||||
|
||||
/* Scrollbar */
|
||||
::-webkit-scrollbar-track {
|
||||
background-color: #111;
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
background-color: #333;
|
||||
}
|
||||
|
||||
/* Mobile weirdness with rgba */
|
||||
@media screen and (max-width: 900px) {
|
||||
nav, .page-body, .pl-content {
|
||||
background-color: rgba(0, 0, 0, 0.50);
|
||||
}
|
||||
|
||||
.page-body blockquote, .pl-icon {
|
||||
background-color: rgba(34, 187, 255, 0.25);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user