aboutsummaryrefslogtreecommitdiff
path: root/public/css/master.css
diff options
context:
space:
mode:
Diffstat (limited to 'public/css/master.css')
-rw-r--r--public/css/master.css345
1 files changed, 66 insertions, 279 deletions
diff --git a/public/css/master.css b/public/css/master.css
index 6c91fc1..dcc2cc4 100644
--- a/public/css/master.css
+++ b/public/css/master.css
@@ -1,343 +1,130 @@
-@font-face {
- font-family: 'BigBlue TerminalPlus';
- src: url('/fonts/BigBlue_TerminalPlus.woff2') format('woff2'),
- url('/fonts/BigBlue_TerminalPlus.woff') format('woff');
- font-weight: normal;
- font-style: normal;
- font-display: swap;
-}
-
-@font-face {
- font-family: pixel nes;
- src: url("/fonts/Pixel_NES.eot?") format("eot"),
- url("/fonts/Pixel_NES.woff") format("woff"),
- url("/fonts/Pixel_NES.ttf") format("truetype");
- font-style: normal;
- font-weight: 400;
-}
-
-@font-face {
- font-family: nec_apc3;
- src: url("/fonts/Web437_NEC_APC3_8x16.woff") format("woff");
- font-style: normal;
- font-weight: 400;
-}
-
-@font-face {
- font-family: nec_apc3;
- src: url("/fonts/Web437_Nix8810_M16.woff") format("woff");
- font-style: normal;
- font-weight: 700;
-}
-
-@supports (-moz-appearance:none) {
- h2 {
- text-shadow: var(--firefox-shadow) var(--shadow) !important;
- }
-}
-
-html,
-body,
-.container {
- height: 100%;
+:root {
+ --pattern: hsl(280, 63%, 81%);
+ --links: hsl(280, 50%, 57%);
+ --background: hsl(280, 20%, 88%);
+ --border: 1px solid hsl(0, 0%, 20%);
+ --foreground: hsl(0, 0%, 0%);
}
body {
- background-color: var(--background);
- color: var(--foreground);
-}
-
-body,
-button,
-select {
- font-family: russiangothic, ms ui gothic, "nec_apc3", Tahoma, sans-serif;
-}
-
-h1,
-h2 {
- font-family: "pixel nes", sans-serif;
+ background-image: url("/images/background.svg");
+ background-color: var(--pattern);
+ background-size: 150px;
+ margin: 0;
+ font-family: "Gill Sans", sans-serif;
}
h1,
h2,
h3,
h4,
+p,
ul,
-p {
+ol {
margin: 0;
}
-hr {
- border: none;
- border-top: 1px solid var(--foreground);
-}
-
a {
color: var(--links);
text-decoration: underline dotted;
}
a:hover {
- text-decoration: underline;
-}
-
-ul {
- list-style: square;
- padding-left: 0;
- list-style-position: inside;
-}
-
-.container {
- display: flex;
- /*align-items: center;*/
- justify-content: center;
-}
-
-.page {
- min-width: var(--page-width);
- max-width: var(--page-width);
+ opacity: 80%;
+ text-decoration: underline solid;
}
-.navbar {
- border: var(--foreground) solid 1px;
+a.button,
+a.button:hover {
+ text-decoration: none;
}
-.navbar ul {
- list-style-type: none;
- margin: 0;
- padding: 0;
- overflow: hidden;
+a.button:hover img {
+ opacity: 80%;
}
-.navbar li {
- float: left;
- border-right: solid var(--foreground) 1px;
+img.pixel {
+ image-rendering: pixelated;
}
-.navbar li a {
- display: block;
- text-align: center;
+div.page-container {
color: var(--foreground);
- text-decoration: none;
- padding: 5px 7px 5px 5px;
-}
-
-.navbar li a:hover {
- background-color: var(--foreground);
- color: var(--background);
+ height: calc(100vh - 20px);
+ width: calc(100vw - 20px);
+ display: grid;
+ grid-template-columns: minmax(auto, 400px) minmax(50vw, auto);
+ grid-template-rows: 1fr;
+ grid-column-gap: 1vw;
+ grid-row-gap: 0px;
}
-.pathbar {
- border: 1px solid var(--foreground);
- padding: 5px;
+div.page-container > div:first-child > div:first-child {
+ margin-top: 0;
}
-.content {
- display: flex;
- flex-wrap: wrap;
- gap: 10px;
- padding: 0;
+div.page-container > div:first-child > div:last-child {
+ margin-bottom: 0;
}
-.section {
- border: var(--foreground) 1px solid;
- padding: 10px;
+div.page-container {
+ margin: 10px;
}
-
-.sidebar {
- flex-basis: var(--sidebar-width);
- flex-grow: 1;
+div.page-container > div:first-child > div {
+ margin: 10px 0;
}
-main {
- flex-basis: 0;
- flex-grow: 999;
- min-inline-size: 50%;
+div.page-container > div:nth-child(2),
+div.page-container > div:first-child > div,
+div.page-container > div:last-child {
+ padding: 10px;
+ height: auto;
+ background-color: var(--background);
+ border: var(--border);
}
-.navbar,
-.content,
-header,
-footer {
- margin: 10px 10px 0 0;
+div.page-container > div:first-child {
+ height: fit-content;
+ height: auto;
}
-header,
-footer,
-.navbar {
- padding: 5px;
+div.page-container > div:first-child,
+div.page-container > div:nth-child(2) {
+ overflow: scroll;
}
-footer {
+div.page-container > div.footer {
+ grid-area: 2 / 1 / 3 / 3;
+ margin-top: 10px;
display: grid;
- grid-template-columns: repeat(2, auto);
+ grid-template-columns: repeat(2, 1fr);
grid-template-rows: 1fr;
grid-column-gap: 0;
grid-row-gap: 0;
}
-footer div:last-child {
- text-align: right;
-}
-
-select {
- background-color: var(--background-secondary);
- border: 1px solid var(--foreground);
- color: var(--foreground);
- padding: 0.25em;
-}
-
-button {
- background-color: var(--background);
- color: var(--foreground);
- border: 1px solid var(--foreground);
- padding: 0.25em 0.5em;
-}
-
-button:hover {
- background-color: var(--foreground);
- color: var(--background);
-}
-
-img.pixel {
- image-rendering: pixelated;
-}
-
-a.button,
-a.button:hover {
- text-decoration: none;
+div.footer > div:first-child {
+ margin-left: 5px;
}
-a.button:hover img {
- opacity: 80%;
+div.footer > div:last-child {
+ text-align: right;
}
-main > .section,
-.sidebar > .section {
- margin-bottom: 10px;
+div.footer > div {
+ vertical-align: middle;
+ height: fit-content;
+ width: 100%;
+ margin: auto;
}
-main > .section:last-child,
-.sidebar > .section:last-child {
- margin-bottom: 0;
+div.pa .navlinks {
+ padding-left: 10px;
}
.navbar-icon {
margin-right: 0.25em;
}
-.navlinks {
- padding-left: 10px;
-}
-
.online-status {
display: inline;
}
-
-.centerbox {
- text-align: center;
-}
-
-.quote {
- padding-left: 10px;
- border-left: solid 2px var(--foreground);
-}
-
-.music-top10 {
- width: 100%;
-}
-
-.music-top10 td,
-.music-top10 th {
- border: none;
- border-left: 1px dotted var(--foreground);
- padding: 2px 5px
-}
-
-.music-top10 tr:nth-child(1) th {
- border-bottom: 1px dotted var(--foreground);
-}
-
-.music-top10 tr:nth-child(2) td {
- padding-top: 5px;
-}
-
-.music-top10 td:first-child,
-.music-top10 th:first-child {
- border: none;
-}
-
-.music-top10 tr th:first-child {
- text-align: right;
-}
-
-.music-top10 td {
- max-width: 200px;
- white-space: nowrap;
- text-overflow:ellipsis;
- overflow: hidden;
-}
-
-.music-top10 tr td:first-child {
- text-align: right;
-}
-
-.music-top10 tr td:nth-child(2),
-.music-top10 tr td:nth-child(3) {
-}
-
-
-.current-track h2 {
- margin: 0;
-}
-
-table.computers {
- table-layout: auto;
- width: 75%;
-}
-
-table.computers td ul {
- margin: 0;
- padding-left: 20px;
-}
-
-table.computers .section-title {
- text-decoration: underline;
- font-style: italic;
- font-weight: bold;
-}
-
-table.computers p.description {
- font-style: italic;
- margin: 5px 0 2px 0;
-}
-
-table.computers th {
- background-color: var(--background-secondary);
-}
-
-table.computers td:first-child {
- white-space: nowrap;
-}
-
-table.computers td,
-table.computers th {
- border: var(--foreground) solid 1px;
- padding: 5px;
-}
-
-.calculator-spec-table td {
- border: var(--foreground) solid 1px;
-}
-
-.calculator-spec-table td {
- padding: 5px 10px 5px 5px;
-}
-
-.calculator-spec-table tr td:first-child {
- background-color: var(--background-secondary);
-}
-
-.sidebar > .section > button {
- margin-top: 5px;
-}