siwwy :3 #3
					 1 changed files with 193 additions and 416 deletions
				
			
		Make CSS a little less messy
				commit
				
					
					
						d0fb028c3e
					
				
			
		| 
						 | 
					@ -1,4 +1,4 @@
 | 
				
			||||||
/*@import "colorschemes/catppuccin-macchiato.css";*/
 | 
					/* ── Global Elements ─────────────────────────────────────────────────────────────── */
 | 
				
			||||||
 | 
					
 | 
				
			||||||
body {
 | 
					body {
 | 
				
			||||||
    font-family: sans-serif;
 | 
					    font-family: sans-serif;
 | 
				
			||||||
| 
						 | 
					@ -17,9 +17,98 @@ hr {
 | 
				
			||||||
    border-bottom: none;
 | 
					    border-bottom: none;
 | 
				
			||||||
}
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					h1, h2, h3 {
 | 
				
			||||||
 | 
					    margin-top: 0;
 | 
				
			||||||
 | 
					    clear: left;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					img {
 | 
				
			||||||
 | 
					    border: none;
 | 
				
			||||||
 | 
					    max-width: 100%;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					pre {
 | 
				
			||||||
 | 
					    display: inline;
 | 
				
			||||||
 | 
					    max-width: 95%;
 | 
				
			||||||
 | 
					    overflow: auto;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					nav {
 | 
				
			||||||
 | 
					    margin-bottom: 0.3em;
 | 
				
			||||||
 | 
					    text-align: left;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					nav img {
 | 
				
			||||||
 | 
					    width: 32px;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					nav h1 {
 | 
				
			||||||
 | 
					    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
 | 
				
			||||||
 | 
					    Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue",
 | 
				
			||||||
 | 
					    sans-serif;
 | 
				
			||||||
 | 
					    font-weight: normal;
 | 
				
			||||||
 | 
					    font-size: 30px;
 | 
				
			||||||
 | 
					    margin: 10px 10px 10px 0;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					video {
 | 
				
			||||||
 | 
					    max-width: 100%;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					table {
 | 
				
			||||||
 | 
					    border-collapse: collapse;
 | 
				
			||||||
 | 
					    border-color: var(--foreground);
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					table td {
 | 
				
			||||||
 | 
					    border: 1px solid var(--foreground);
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					td {
 | 
				
			||||||
 | 
					    padding: 0;
 | 
				
			||||||
 | 
					    vertical-align: top;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					h1 { font-size: 150%; }
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					h2 { font-size: 130%; }
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					h3 { font-size: 115%; }
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					a {
 | 
				
			||||||
 | 
					    color: var(--links);
 | 
				
			||||||
 | 
					    text-decoration: underline dotted;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					a:hover {
 | 
				
			||||||
 | 
					    text-decoration: underline;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					caption h1,
 | 
				
			||||||
 | 
					caption h2 {
 | 
				
			||||||
 | 
					    margin: 0;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					caption {
 | 
				
			||||||
 | 
					    text-align: left;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					button {
 | 
				
			||||||
 | 
					    background-color: var(--background);
 | 
				
			||||||
 | 
					    border: var(--foreground) solid 1px;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					button:hover {
 | 
				
			||||||
 | 
					    color: var(--background);
 | 
				
			||||||
 | 
					    background-color: var(--foreground);
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					/* ── Common Styles ───────────────────────────────────────────────────────────────── */
 | 
				
			||||||
 | 
					
 | 
				
			||||||
div.page {
 | 
					div.page {
 | 
				
			||||||
    min-width: 780px;
 | 
					    /*min-width: 1000px;*/
 | 
				
			||||||
    max-width: 800px;
 | 
					    /*max-width: 1100px;*/
 | 
				
			||||||
 | 
					    width: 1000px;
 | 
				
			||||||
    padding-left: 0.5em;
 | 
					    padding-left: 0.5em;
 | 
				
			||||||
    padding-right: 0.5em;
 | 
					    padding-right: 0.5em;
 | 
				
			||||||
    margin: auto;
 | 
					    margin: auto;
 | 
				
			||||||
| 
						 | 
					@ -31,18 +120,6 @@ h1.inline {
 | 
				
			||||||
    display: inline;
 | 
					    display: inline;
 | 
				
			||||||
}
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
h1,
 | 
					 | 
				
			||||||
h2,
 | 
					 | 
				
			||||||
h3 {
 | 
					 | 
				
			||||||
    margin-top: 0;
 | 
					 | 
				
			||||||
    clear: left;
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
img {
 | 
					 | 
				
			||||||
    border: none;
 | 
					 | 
				
			||||||
    max-width: 100%;
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
img.right {
 | 
					img.right {
 | 
				
			||||||
    float: right;
 | 
					    float: right;
 | 
				
			||||||
    margin-left: 0.5em;
 | 
					    margin-left: 0.5em;
 | 
				
			||||||
| 
						 | 
					@ -52,55 +129,94 @@ table.form td {
 | 
				
			||||||
    border: none;
 | 
					    border: none;
 | 
				
			||||||
}
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
/* -------------------------------------------------------------------------- */
 | 
					img.pixel {
 | 
				
			||||||
 | 
					    image-rendering: pixelated;
 | 
				
			||||||
div.code-block {
 | 
					 | 
				
			||||||
    background-color: var(--background);
 | 
					 | 
				
			||||||
    border: 2px solid var(--foreground);
 | 
					 | 
				
			||||||
    padding: 10px;
 | 
					 | 
				
			||||||
    display: inline-block;
 | 
					 | 
				
			||||||
    text-align: left;
 | 
					 | 
				
			||||||
    max-width: 90%;
 | 
					 | 
				
			||||||
    min-width: 400px;
 | 
					 | 
				
			||||||
    margin: 10px;
 | 
					 | 
				
			||||||
}
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
div.code-block hr {
 | 
					td.diagonal-line {
 | 
				
			||||||
    margin-top: 5px;
 | 
					    background: linear-gradient(to right bottom, var(--background) 0%,var(--background) 49.9%,var(--foreground) 50%,var(--foreground) 51%,var(--background) 51.1%,var(--background) 100%);
 | 
				
			||||||
    margin-bottom: 5px;
 | 
					 | 
				
			||||||
}
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
div.code-block h1 {
 | 
					.info-section {
 | 
				
			||||||
 | 
					    margin-top: 20px;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					.info-section ul,
 | 
				
			||||||
 | 
					ul.quick-specs {
 | 
				
			||||||
 | 
					    list-style-position: inside;
 | 
				
			||||||
 | 
					    list-style-type: none;
 | 
				
			||||||
 | 
					    padding-left: 0;
 | 
				
			||||||
    margin: 0;
 | 
					    margin: 0;
 | 
				
			||||||
    font-family: monospace;
 | 
					 | 
				
			||||||
}
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
div.code-block h1 small {
 | 
					.info-section ul li:before {
 | 
				
			||||||
    color: var(--foreground);
 | 
					    content: "◆ ";
 | 
				
			||||||
    font-size: 12px;
 | 
					 | 
				
			||||||
}
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
div.code-block pre hr {
 | 
					.info-section h2 {
 | 
				
			||||||
 | 
					    margin: 0;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					.info-section p {
 | 
				
			||||||
 | 
					    margin: 0;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					table.info-table tr td {
 | 
				
			||||||
 | 
					    border: none;
 | 
				
			||||||
 | 
					    padding-right: 5px;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					table.info-table {
 | 
				
			||||||
 | 
					    width: 100%;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					table.info-table tr td h1,
 | 
				
			||||||
 | 
					table.info-table tr td h2,
 | 
				
			||||||
 | 
					table.info-table tr td small {
 | 
				
			||||||
 | 
					    margin: 0;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					table.info-table tr td small {
 | 
				
			||||||
    margin-bottom: 5px;
 | 
					    margin-bottom: 5px;
 | 
				
			||||||
}
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
div.code-block pre code {
 | 
					/* ── Footer ──────────────────────────────────────────────────────────────────────── */
 | 
				
			||||||
    background-color: var(--background);
 | 
					
 | 
				
			||||||
 | 
					.footer p {
 | 
				
			||||||
 | 
					    vertical-align: middle;
 | 
				
			||||||
 | 
					    margin: 0;
 | 
				
			||||||
 | 
					    line-height: 1.2;
 | 
				
			||||||
}
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
pre {
 | 
					.footer button,
 | 
				
			||||||
    display: inline;
 | 
					.footer select{
 | 
				
			||||||
    max-width: 95%;
 | 
					    padding: 5px 10px;
 | 
				
			||||||
    overflow: auto;
 | 
					 | 
				
			||||||
}
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
.header a {
 | 
					label[for="scheme-selector"] {
 | 
				
			||||||
 | 
					    font-weight: bold;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					#scheme-selector {
 | 
				
			||||||
 | 
					    border: var(--foreground) solid 1px;
 | 
				
			||||||
 | 
					    background-color: var(--background-secondary);
 | 
				
			||||||
 | 
					    color: var(--foreground)
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					div.footer {
 | 
				
			||||||
 | 
					    text-align: center;
 | 
				
			||||||
 | 
					    margin-bottom: 5px;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					div.footer a.button {
 | 
				
			||||||
    text-decoration: none;
 | 
					    text-decoration: none;
 | 
				
			||||||
}
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
.theme-selector {
 | 
					
 | 
				
			||||||
    text-align: right;
 | 
					/* ── Navbar ──────────────────────────────────────────────────────────────────────── */
 | 
				
			||||||
    vertical-align: middle;
 | 
					
 | 
				
			||||||
 | 
					a:hover img.navbar-icon {
 | 
				
			||||||
 | 
					    opacity: 80%;
 | 
				
			||||||
}
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
.nav-wrapper {
 | 
					.nav-wrapper {
 | 
				
			||||||
| 
						 | 
					@ -115,80 +231,10 @@ .nav-wrapper div:nth-child(2) {
 | 
				
			||||||
    text-align: right;
 | 
					    text-align: right;
 | 
				
			||||||
}
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
.theme-selector label {
 | 
					/* ── Header ──────────────────────────────────────────────────────────────────────── */
 | 
				
			||||||
    font-weight: bold;
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
 | 
					
 | 
				
			||||||
.theme-selector label::after {
 | 
					.header a {
 | 
				
			||||||
    content: ': ';
 | 
					    text-decoration: none;
 | 
				
			||||||
}
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
nav {
 | 
					 | 
				
			||||||
    margin-bottom: 0.3em;
 | 
					 | 
				
			||||||
    text-align: left;
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
nav img {
 | 
					 | 
				
			||||||
    width: 32px;
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
nav h1 {
 | 
					 | 
				
			||||||
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
 | 
					 | 
				
			||||||
        Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue",
 | 
					 | 
				
			||||||
        sans-serif;
 | 
					 | 
				
			||||||
    font-weight: normal;
 | 
					 | 
				
			||||||
    font-size: 30px;
 | 
					 | 
				
			||||||
    margin: 10px 10px 10px 0;
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
div.date {
 | 
					 | 
				
			||||||
    text-align: center;
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
div.note {
 | 
					 | 
				
			||||||
    font-style: italic;
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
table {
 | 
					 | 
				
			||||||
    border-collapse: collapse;
 | 
					 | 
				
			||||||
    border-color: var(--foreground);
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
table.weather th {
 | 
					 | 
				
			||||||
    font-weight: normal;
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
table.weather td {
 | 
					 | 
				
			||||||
    font-weight: bold;
 | 
					 | 
				
			||||||
    text-align: right;
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
div.rss {
 | 
					 | 
				
			||||||
    position: absolute;
 | 
					 | 
				
			||||||
    top: 1em;
 | 
					 | 
				
			||||||
    right: 1em;
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
div.archived {
 | 
					 | 
				
			||||||
    margin-top: 0.5em;
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
div.archived span.date {
 | 
					 | 
				
			||||||
    font-style: italic;
 | 
					 | 
				
			||||||
    margin-right: 0.2em;
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
video {
 | 
					 | 
				
			||||||
    max-width: 100%;
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
table td {
 | 
					 | 
				
			||||||
    border: 1px solid var(--foreground);
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
td {
 | 
					 | 
				
			||||||
    padding: 0;
 | 
					 | 
				
			||||||
    vertical-align: top;
 | 
					 | 
				
			||||||
}
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
.header .title {
 | 
					.header .title {
 | 
				
			||||||
| 
						 | 
					@ -202,20 +248,7 @@ .header {
 | 
				
			||||||
    text-align: center;
 | 
					    text-align: center;
 | 
				
			||||||
}
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
h1 {
 | 
					/* ── Computers ───────────────────────────────────────────────────────────────────── */
 | 
				
			||||||
    font-size: 150%;
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
h1 {
 | 
					 | 
				
			||||||
    font-size: 150%;
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
h2 {
 | 
					 | 
				
			||||||
    font-size: 130%;
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
h3 {
 | 
					 | 
				
			||||||
    font-size: 115%;
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
 | 
					
 | 
				
			||||||
table.computers {
 | 
					table.computers {
 | 
				
			||||||
    width: 100%;
 | 
					    width: 100%;
 | 
				
			||||||
| 
						 | 
					@ -251,30 +284,7 @@ table.computers th {
 | 
				
			||||||
    padding: 5px;
 | 
					    padding: 5px;
 | 
				
			||||||
}
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					/* ── Forms ───────────────────────────────────────────────────────────────────────── */
 | 
				
			||||||
 | 
					 | 
				
			||||||
img.pixel {
 | 
					 | 
				
			||||||
    image-rendering: pixelated;
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
div.footer {
 | 
					 | 
				
			||||||
    text-align: center;
 | 
					 | 
				
			||||||
    margin-bottom: 5px;
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
div.footer a.button {
 | 
					 | 
				
			||||||
    text-decoration: none;
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
table.commits tr td {
 | 
					 | 
				
			||||||
    border: none;
 | 
					 | 
				
			||||||
    padding-right: 5px;
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
a {
 | 
					 | 
				
			||||||
    color: var(--links);
 | 
					 | 
				
			||||||
    text-decoration: underline dotted;
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
 | 
					
 | 
				
			||||||
table.form tr td {
 | 
					table.form tr td {
 | 
				
			||||||
    border: none;
 | 
					    border: none;
 | 
				
			||||||
| 
						 | 
					@ -289,16 +299,9 @@ table.form tr td span.text-danger {
 | 
				
			||||||
    color: var(--warning);
 | 
					    color: var(--warning);
 | 
				
			||||||
}
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
input.file {
 | 
					 | 
				
			||||||
    border: 0 !important;
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
table.form tr td textarea,
 | 
					table.form tr td textarea,
 | 
				
			||||||
table.form tr td input,
 | 
					table.form tr td input,
 | 
				
			||||||
table.form tr td button,
 | 
					table.form tr td button {
 | 
				
			||||||
button,
 | 
					 | 
				
			||||||
form.import input::file-selector-button,
 | 
					 | 
				
			||||||
form.import button {
 | 
					 | 
				
			||||||
    background-color: var(--background);
 | 
					    background-color: var(--background);
 | 
				
			||||||
    border: var(--foreground) solid 1px;
 | 
					    border: var(--foreground) solid 1px;
 | 
				
			||||||
}
 | 
					}
 | 
				
			||||||
| 
						 | 
					@ -307,21 +310,22 @@ table.form label {
 | 
				
			||||||
    margin: 5px 0;
 | 
					    margin: 5px 0;
 | 
				
			||||||
}
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
form.import button,
 | 
					 | 
				
			||||||
form.import input::file-selector-button,
 | 
					 | 
				
			||||||
table.form tr td button {
 | 
					table.form tr td button {
 | 
				
			||||||
    color: var(--foreground);
 | 
					    color: var(--foreground);
 | 
				
			||||||
    background-color: var(--background-secondary);
 | 
					    background-color: var(--background-secondary);
 | 
				
			||||||
}
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
form.import button:hover,
 | 
					 | 
				
			||||||
button:hover,
 | 
					 | 
				
			||||||
form.import input::file-selector-button:hover,
 | 
					 | 
				
			||||||
table.form tr td button:hover {
 | 
					table.form tr td button:hover {
 | 
				
			||||||
    color: var(--background);
 | 
					    color: var(--background);
 | 
				
			||||||
    background-color: var(--foreground);
 | 
					    background-color: var(--foreground);
 | 
				
			||||||
}
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					table.form tbody tr td textarea {
 | 
				
			||||||
 | 
					    width: 210px;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					/* ── Guestbook ───────────────────────────────────────────────────────────────────── */
 | 
				
			||||||
 | 
					
 | 
				
			||||||
table.gb-entry-form-container {
 | 
					table.gb-entry-form-container {
 | 
				
			||||||
    width: 100%;
 | 
					    width: 100%;
 | 
				
			||||||
}
 | 
					}
 | 
				
			||||||
| 
						 | 
					@ -336,10 +340,6 @@ table.gb-entry-form-container tr td ul {
 | 
				
			||||||
    margin: 0;
 | 
					    margin: 0;
 | 
				
			||||||
}
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
table.form tbody tr td textarea {
 | 
					 | 
				
			||||||
    width: 210px;
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
table.gb-entry tr td {
 | 
					table.gb-entry tr td {
 | 
				
			||||||
    border: solid var(--foreground) 1px;
 | 
					    border: solid var(--foreground) 1px;
 | 
				
			||||||
    width: 500px;
 | 
					    width: 500px;
 | 
				
			||||||
| 
						 | 
					@ -360,153 +360,23 @@ table.gb-entry address {
 | 
				
			||||||
    font-size: 0.8pc;
 | 
					    font-size: 0.8pc;
 | 
				
			||||||
}
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
table.gb-admin {
 | 
					.guestbook-message {
 | 
				
			||||||
    margin-bottom: 5px;
 | 
					    text-wrap: normal;
 | 
				
			||||||
    width: 500px;
 | 
					 | 
				
			||||||
    border: var(--foreground) solid;
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
table.gb-admin tr td {
 | 
					 | 
				
			||||||
    border-right: none;
 | 
					 | 
				
			||||||
    border-bottom: none;
 | 
					 | 
				
			||||||
    vertical-align: top;
 | 
					 | 
				
			||||||
    padding: 5px;
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
table.gb-admin tr td.gb-del {
 | 
					 | 
				
			||||||
    border-left: none;
 | 
					 | 
				
			||||||
    vertical-align: top;
 | 
					 | 
				
			||||||
    padding: 5px;
 | 
					 | 
				
			||||||
    width: 32px;
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
table.gb-admin tr td.gb-message {
 | 
					 | 
				
			||||||
    border-top: none;
 | 
					 | 
				
			||||||
    vertical-align: top;
 | 
					 | 
				
			||||||
    padding: 5px;
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
table.info-table tr td {
 | 
					 | 
				
			||||||
    border: none;
 | 
					 | 
				
			||||||
    padding-right: 5px;
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
table.info-table {
 | 
					 | 
				
			||||||
    width: 100%;
 | 
					    width: 100%;
 | 
				
			||||||
}
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
table.info-table tr td h1,
 | 
					
 | 
				
			||||||
table.info-table tr td h2,
 | 
					/* ── Calculators ─────────────────────────────────────────────────────────────────── */
 | 
				
			||||||
table.info-table tr td small {
 | 
					
 | 
				
			||||||
    margin: 0;
 | 
					.calculator-spec-table td {
 | 
				
			||||||
 | 
					    padding: 5px 10px 5px 5px;
 | 
				
			||||||
}
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
caption h1,
 | 
					.calculator-spec-table tr td:first-child {
 | 
				
			||||||
caption h2 {
 | 
					 | 
				
			||||||
    margin: 0;
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
caption {
 | 
					 | 
				
			||||||
    text-align: left;
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
table.info-table tr td small {
 | 
					 | 
				
			||||||
    margin-bottom: 5px;
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
.me img {
 | 
					 | 
				
			||||||
    float: right;
 | 
					 | 
				
			||||||
    margin: 5px;
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
.me p {
 | 
					 | 
				
			||||||
    text-align: justify;
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
a:hover {
 | 
					 | 
				
			||||||
    text-decoration: underline;
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
.spec {
 | 
					 | 
				
			||||||
    padding-left: 20px;
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
.spec-title {
 | 
					 | 
				
			||||||
    font-weight: bold;
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
.project-grid {
 | 
					 | 
				
			||||||
    display: grid;
 | 
					 | 
				
			||||||
    grid-template-columns: repeat(2, 1fr);
 | 
					 | 
				
			||||||
    grid-template-rows: repeat(0, 1fr);
 | 
					 | 
				
			||||||
    grid-column-gap: 0;
 | 
					 | 
				
			||||||
    grid-row-gap: 0;
 | 
					 | 
				
			||||||
    height: 100%;
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
.project-grid div {
 | 
					 | 
				
			||||||
    padding: 5px;
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
.project-section-title,
 | 
					 | 
				
			||||||
.project-grid div h1,
 | 
					 | 
				
			||||||
.project-grid div p {
 | 
					 | 
				
			||||||
    margin: 5px 0;
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
.project-section-title {
 | 
					 | 
				
			||||||
    margin-top: 20px;
 | 
					 | 
				
			||||||
    padding-bottom: 5px;
 | 
					 | 
				
			||||||
    border-bottom: 1px solid var(--foreground);
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
.project-grid div h1 {
 | 
					 | 
				
			||||||
    margin-top: 10px;
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
.project-grid div a {
 | 
					 | 
				
			||||||
    text-decoration: underline dotted;
 | 
					 | 
				
			||||||
    padding: 2px 2px 0 2px;
 | 
					 | 
				
			||||||
    margin: 0;
 | 
					 | 
				
			||||||
    font-size: 10pt;
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
.project-grid .project-links a {
 | 
					 | 
				
			||||||
    color: var(--links);
 | 
					 | 
				
			||||||
    border: 1px solid var(--foreground);
 | 
					 | 
				
			||||||
    border-left: none;
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
.project-grid .project-links a:first-child {
 | 
					 | 
				
			||||||
    border: 1px solid var(--foreground);
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
.project-grid .project-links a:hover {
 | 
					 | 
				
			||||||
    background-color: var(--foreground);
 | 
					 | 
				
			||||||
    color: var(--background);
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
.error-box {
 | 
					 | 
				
			||||||
    width: 500px;
 | 
					 | 
				
			||||||
    border: 5px solid var(--warning-box-border);
 | 
					 | 
				
			||||||
    background-color: var(--warning-box-bg);
 | 
					 | 
				
			||||||
    padding: 5px;
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
.error-box a,
 | 
					 | 
				
			||||||
.error-box p {
 | 
					 | 
				
			||||||
    margin: 0;
 | 
					 | 
				
			||||||
    color: var(--foreground)
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
label[for="scheme-selector"] {
 | 
					 | 
				
			||||||
    font-weight: bold;
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
#scheme-selector {
 | 
					 | 
				
			||||||
    border: var(--foreground) solid 1px;
 | 
					 | 
				
			||||||
    background-color: var(--background-secondary);
 | 
					    background-color: var(--background-secondary);
 | 
				
			||||||
    color: var(--foreground)
 | 
					 | 
				
			||||||
}
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					/* ── Music ───────────────────────────────────────────────────────────────────────── */
 | 
				
			||||||
 | 
					
 | 
				
			||||||
.music-top10 td,
 | 
					.music-top10 td,
 | 
				
			||||||
.music-top10 th {
 | 
					.music-top10 th {
 | 
				
			||||||
| 
						 | 
					@ -553,32 +423,11 @@ .current-track h2 {
 | 
				
			||||||
    margin: 0;
 | 
					    margin: 0;
 | 
				
			||||||
}
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
.info-section {
 | 
					/* ── Misc ────────────────────────────────────────────────────────────────────────── */
 | 
				
			||||||
    margin-top: 20px;
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
 | 
					
 | 
				
			||||||
.info-section ul {
 | 
					.red-banner {
 | 
				
			||||||
    list-style-position: inside;
 | 
					    border: 3px solid var(--foreground);
 | 
				
			||||||
    list-style-type: none;
 | 
					    background-color: var(--background-secondary);
 | 
				
			||||||
    padding-left: 0;
 | 
					 | 
				
			||||||
    margin: 0;
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
.info-section ul li:before {
 | 
					 | 
				
			||||||
    content: "◆ ";
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
.info-section h2 {
 | 
					 | 
				
			||||||
    margin: 0;
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
.info-section p {
 | 
					 | 
				
			||||||
    margin: 0;
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
.contact-section {
 | 
					 | 
				
			||||||
    display: grid;
 | 
					 | 
				
			||||||
    grid-template-rows: 1fr 1fr;
 | 
					 | 
				
			||||||
}
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
.banner {
 | 
					.banner {
 | 
				
			||||||
| 
						 | 
					@ -599,86 +448,14 @@ .banner div:nth-child(2) {
 | 
				
			||||||
    text-align: right;
 | 
					    text-align: right;
 | 
				
			||||||
}
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
.red-banner {
 | 
					.error-box {
 | 
				
			||||||
    border: 3px solid var(--foreground);
 | 
					    width: 500px;
 | 
				
			||||||
    background-color: var(--background-secondary);
 | 
					    border: 5px solid var(--warning-box-border);
 | 
				
			||||||
}
 | 
					    background-color: var(--warning-box-bg);
 | 
				
			||||||
 | 
					 | 
				
			||||||
.info-admin td,
 | 
					 | 
				
			||||||
.info-admin th {
 | 
					 | 
				
			||||||
    border: 1px solid var(--foreground);
 | 
					 | 
				
			||||||
    padding: 5px;
 | 
					    padding: 5px;
 | 
				
			||||||
}
 | 
					}
 | 
				
			||||||
 | 
					.error-box a,
 | 
				
			||||||
.info-admin th {
 | 
					.error-box p {
 | 
				
			||||||
    background-color: var(--background-secondary);
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
.info-admin th.blank {
 | 
					 | 
				
			||||||
    border: none;
 | 
					 | 
				
			||||||
    background-color: var(--background);
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
.info-admin button {
 | 
					 | 
				
			||||||
    border: 1px solid var(--foreground);
 | 
					 | 
				
			||||||
    background-color: var(--background);
 | 
					 | 
				
			||||||
    color: var(--foreground);
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
.info-admin button:hover {
 | 
					 | 
				
			||||||
    background-color: var(--foreground);
 | 
					 | 
				
			||||||
    color: var(--background);
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
.info-admin button:active {
 | 
					 | 
				
			||||||
    background-color: var(--background-secondary);
 | 
					 | 
				
			||||||
    color: var(--foreground);
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
.info-admin-section h2 {
 | 
					 | 
				
			||||||
    margin-bottom: 5px;
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
.fullwidth {
 | 
					 | 
				
			||||||
    width: 100%;
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
.fullwidth td:last-child {
 | 
					 | 
				
			||||||
    width: 0;
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
.guestbook-message {
 | 
					 | 
				
			||||||
    text-wrap: normal;
 | 
					 | 
				
			||||||
    width: 100%;
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
td.diagonal-line {
 | 
					 | 
				
			||||||
    background: linear-gradient(to right bottom, var(--background) 0%,var(--background) 49.9%,var(--foreground) 50%,var(--foreground) 51%,var(--background) 51.1%,var(--background) 100%);
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
form.import h2 {
 | 
					 | 
				
			||||||
    margin: 10px 0 5px 0;
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
.calculator-spec-table td {
 | 
					 | 
				
			||||||
    padding: 5px 10px 5px 5px;
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
.calculator-spec-table tr td:first-child {
 | 
					 | 
				
			||||||
    background-color: var(--background-secondary);
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
a:hover img.navbar-icon {
 | 
					 | 
				
			||||||
    opacity: 80%;
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
.footer p {
 | 
					 | 
				
			||||||
    vertical-align: middle;
 | 
					 | 
				
			||||||
    margin: 0;
 | 
					    margin: 0;
 | 
				
			||||||
    line-height: 1.2;
 | 
					    color: var(--foreground)
 | 
				
			||||||
}
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
.footer button,
 | 
					 | 
				
			||||||
.footer select{
 | 
					 | 
				
			||||||
    padding: 5px 10px;
 | 
					 | 
				
			||||||
}
 | 
					}
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
		Loading…
	
	Add table
		Add a link
		
	
		Reference in a new issue