1.7.0 Minor update, added support for linking to blog articles to be viewed on the website, updated site theme. Added compatibility in css for terminal color schemes.
This commit is contained in:
parent
3b5f52ac4b
commit
0c96457cf8
|
|
@ -69,3 +69,5 @@ I personally could not be happier with my choice to move to the Odroid. It's sti
|
|||
Now that the hardware has been settled on, I can continue again with creating a comfortable server. Part of that will be to finally get going with creating a small tilde community on it. For that, I will likely be spending a lot of time writing wiki articles on how to use stuff. But besides that, also having fun using the damn server, of course.
|
||||
|
||||
See you later, and happy computing!
|
||||
|
||||
|
||||
22
index.html
22
index.html
|
|
@ -6,9 +6,9 @@
|
|||
<title>Comfitu.re</title>
|
||||
|
||||
<link href="fonts/IBM-Plex-Mono/font.css" />
|
||||
<link href="style.css?v=1.6.3" rel="stylesheet"/>
|
||||
<link href="style.css?v=1.7.0" rel="stylesheet"/>
|
||||
<script src="vendor/showdownjs/showdown/showdown.min.js?v=2.1.0" type="application/javascript"></script>
|
||||
<script src="script.js?v=1.6.3" type="application/javascript"></script>
|
||||
<script src="script.js?v=1.7.0" type="application/javascript"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
|
@ -16,6 +16,13 @@
|
|||
<script>comfiture.setupWallpaper();</script>
|
||||
|
||||
<div class="container">
|
||||
<div class="window">
|
||||
<div class="titlebar">
|
||||
~><> : fish - Command Prompt
|
||||
<span style="float: right;">
|
||||
<span class="btn">-</span><span class="btn close">×</span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="content">
|
||||
<header>
|
||||
<div class="logo" style="width: 352px; display:inline-block;">
|
||||
|
|
@ -25,7 +32,7 @@
|
|||
<pre style="color:#c18152;"> \___\___/_|_|_|_| |_|\__|\_,_(_)_| \___|</pre>
|
||||
<pre> </pre>
|
||||
</div><div style="display: inline-block; height: 48px; vertical-align: bottom;">
|
||||
<a href="#changelog">v1.6.3</a><br/>
|
||||
<a href="#changelog">v1.7.0</a><br/>
|
||||
<script>comfiture.printMotd();</script><br/>
|
||||
</div>
|
||||
<div>
|
||||
|
|
@ -108,7 +115,7 @@
|
|||
<tr>
|
||||
<td style="width: 160px;"><a href="https://comfitu.re">Comfitu.re</a>:</td>
|
||||
<td>My personal website, the one you're reading now.</td>
|
||||
<td><a href="https://factory.subcon.town/fristi/comfitu.re">Source</a></td>
|
||||
<td style="width: 80px;"><a href="https://factory.subcon.town/fristi/comfitu.re">Source</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="https://subcon.town/">Subcon Town</a>:</td>
|
||||
|
|
@ -239,6 +246,12 @@
|
|||
</div>
|
||||
<div class="content-tab" id="changelog">
|
||||
<h1>Changelog</h1>
|
||||
<ul>
|
||||
1.7.0 Minor update:
|
||||
<li>Added CSS variables for terminal color palettes.</li>
|
||||
<li>Added window decoration to the "terminal window".</li>
|
||||
<li>Added support for linking to blog articles to be opened in the website.</li>
|
||||
</ul>
|
||||
<ul>
|
||||
1.6.3 Patch:
|
||||
<li>Fixed links pointing to the old gitea server, which has been replaced.</li>
|
||||
|
|
@ -362,6 +375,7 @@
|
|||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>comfiture.showAddresses();</script>
|
||||
|
||||
|
|
|
|||
19
script.js
19
script.js
|
|
@ -91,10 +91,13 @@
|
|||
ajax(href, response => {
|
||||
let converter = new showdown.Converter({'tables': true});
|
||||
reader.innerHTML = converter.makeHtml(response);
|
||||
window.location.hash = href;
|
||||
content.classList.add('expand');
|
||||
}, () => {
|
||||
reader.innerHTML = "<h1>Could not load resource.</h1> <p>An error occurred, unable to display blog post.</p>";
|
||||
});
|
||||
content.classList.add('expand');
|
||||
});
|
||||
|
||||
readerBtn.classList.remove('hide');
|
||||
}
|
||||
|
||||
|
|
@ -117,8 +120,20 @@
|
|||
element.classList.add('hide');
|
||||
});
|
||||
|
||||
let hash = window.location.hash ? window.location.hash : '#home';
|
||||
|
||||
//Activate content matching hash in url (or home instead)
|
||||
switchActiveContent(window.location.hash ? window.location.hash : "#home");
|
||||
if(hash.includes('blogs/')) {
|
||||
let url = hash.slice(1);
|
||||
if(document.querySelector('a[href="'+url+'"]')) {
|
||||
switchActiveContent('#reader');
|
||||
loadReaderFile(url);
|
||||
} else {
|
||||
switchActiveContent('#home');
|
||||
}
|
||||
} else {
|
||||
switchActiveContent(hash);
|
||||
}
|
||||
|
||||
//Add click event handlers for header/footer links
|
||||
document.querySelectorAll('header, footer').forEach(element => {
|
||||
|
|
|
|||
159
style.css
159
style.css
|
|
@ -4,39 +4,65 @@
|
|||
}
|
||||
|
||||
:root {
|
||||
--fg-color: #e6e1dc;
|
||||
--bg-color: rgba(43, 43, 43, 0.95);
|
||||
--border-color: #000000;
|
||||
--shadow-color: rgba(0, 0, 0, .9);
|
||||
--accent-1-color: #ffc66d;
|
||||
--accent-2-color: #a5c261;
|
||||
--accent-3-color: #6d9cbe;
|
||||
--font-size: 16px;
|
||||
/* Color palette */
|
||||
--color-fg: #d0d0d0;
|
||||
--color-bg: #151515;
|
||||
--color-cursor: var(--color-fg);
|
||||
--color-0: #151515; --color-8: #505050;
|
||||
--color-1: #ac4142; --color-9: #ac4142;
|
||||
--color-2: #90a959; --color-10: #90a959;
|
||||
--color-3: #f4bf75; --color-11: #f4bf75;
|
||||
--color-4: #6a9fb5; --color-12: #6a9fb5;
|
||||
--color-5: #aa759f; --color-13: #aa759f;
|
||||
--color-6: #75b5aa; --color-14: #75b5aa;
|
||||
--color-7: #d0d0d0; --color-15: #f5f5f5;
|
||||
|
||||
/* Font, character sizings and relative paddings */
|
||||
--font-family: IBMVGA8, monospace;
|
||||
--char-height: 16px;
|
||||
--char-width: 8px;
|
||||
--padding-1x: var(--char-width);
|
||||
--padding-2x: calc(var(--padding-1x) * 2);
|
||||
|
||||
/* Text settings */
|
||||
--text-bold: normal;
|
||||
--text-italic: italic;
|
||||
|
||||
/* Color scheme */
|
||||
--color-interactive: var(--color-3);
|
||||
--color-interactive-accent: var(--color-11);
|
||||
--color-text-emphasize: var(--color-4);
|
||||
--color-code: var(--color-2);
|
||||
--color-mark: var(--color-5);
|
||||
--color-table-heading-bg: var(--color-7);
|
||||
--color-table-heading-fg: var(--color-bg);
|
||||
--color-border: #000000;
|
||||
--color-shadow: rgba(0, 0, 0, .9);
|
||||
}
|
||||
|
||||
/* Defaults, Resets */
|
||||
html, body, div, span, hr, p, ul, ol, blockquote, table, code, pre, h1, h2, h3, h4, h5, h6 {
|
||||
html, body, div, span, hr, p, ul, ol, blockquote, table, tr, td, th, code, pre, h1, h2, h3, h4, h5, h6 {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
body, h1, h2, h3, h4, h5, h6, pre, code {
|
||||
font-family: IBMVGA8, monospace;
|
||||
font-size: var(--font-size);
|
||||
line-height: var(--font-size);
|
||||
font-family: var(--font-family);
|
||||
font-size: var(--char-height);
|
||||
line-height: var(--char-height);
|
||||
}
|
||||
|
||||
.background, .container, .content {
|
||||
.background, .container, .window {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.background, .content {
|
||||
.background, .window {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.container, header, main, footer, .player {
|
||||
.container, .content, .titlebar, header, main, footer, .player {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
|
|
@ -58,16 +84,49 @@ body, h1, h2, h3, h4, h5, h6, pre, code {
|
|||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.window {
|
||||
border-radius: 5px 5px 0 0;
|
||||
border-top: 1px solid #999;
|
||||
background: linear-gradient(180deg, rgb(86, 91, 96) 0%, rgb(56, 62, 73) 18px, rgb(46, 51, 59) 19px);
|
||||
padding: 2px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.titlebar {
|
||||
color: #fff;
|
||||
padding: 6px 3px;
|
||||
font-family: "IBM Plex Mono", monospace;
|
||||
font-weight: bold;
|
||||
font-size: 9pt;
|
||||
text-shadow: 1px 2px 0px #000;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.titlebar .btn {
|
||||
display: inline-block;
|
||||
border-radius: 3px;
|
||||
padding: 2px 5px 4px 5px;
|
||||
margin: -5px 0 0 3px;
|
||||
font-size: 16pt;
|
||||
border: 1px solid #ccc;
|
||||
background: linear-gradient(135deg, rgba(50,50,50,1) 0%, rgba(78,78,78,1) 28%, rgba(105,105,105,1) 60%);
|
||||
}
|
||||
|
||||
.titlebar .btn.close {
|
||||
background: linear-gradient(135deg, rgb(255, 255, 255) 0%, rgb(251, 103, 103) 28%, rgb(253, 29, 29) 60%);
|
||||
}
|
||||
|
||||
.content {
|
||||
padding:8px;
|
||||
padding: var(--padding-2x);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: auto;
|
||||
box-sizing: border-box;
|
||||
|
||||
background-color: var(--bg-color);
|
||||
color: var(--fg-color);
|
||||
border: 2px solid var(--border-color);
|
||||
box-shadow: 8px 8px 0 var(--shadow-color);
|
||||
background-color: var(--color-bg);
|
||||
color: var(--color-fg);
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
header, main, footer {
|
||||
|
|
@ -78,8 +137,8 @@ header, main, footer {
|
|||
}
|
||||
|
||||
main {
|
||||
margin: 16px 0;
|
||||
padding: 0 16px;
|
||||
margin: var(--padding-2x) 0;
|
||||
padding: 0 var(--padding-2x);
|
||||
flex: 1 1 auto;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
|
|
@ -92,7 +151,7 @@ main {
|
|||
/* Content */
|
||||
|
||||
a {
|
||||
color: var(--accent-1-color);
|
||||
color: var(--color-interactive);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
|
|
@ -100,21 +159,21 @@ a:before { content: '['; }
|
|||
a:after { content: ']'; }
|
||||
|
||||
a:hover, a:active {
|
||||
background-color: var(--accent-1-color);
|
||||
color: var(--bg-color);
|
||||
background-color: var(--color-interactive);
|
||||
color: var(--color-bg);
|
||||
}
|
||||
|
||||
a.active {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
b:not(#reader b), strong:not(#reader strong) { font-weight: normal; }
|
||||
b, strong, blockquote { color: var(--accent-2-color); }
|
||||
|
||||
code { font-weight: 400; color: var(--accent-3-color); }
|
||||
b:not(#reader b), strong:not(#reader strong) { font-weight: var(--text-bold); }
|
||||
i:not(#reader i), em:not(#reader em) { font-style: vaR(--text-italic); }
|
||||
b, strong, blockquote, i, em { color: var(--color-text-emphasize); }
|
||||
code { font-weight: normal; color: var(--color-code); }
|
||||
|
||||
h1, h2, h3, h4, h5, h6, p, ul, ol, table, blockquote, hr {
|
||||
margin-bottom: 16px;
|
||||
margin-bottom: var(--padding-2x);
|
||||
}
|
||||
|
||||
.content-tab p:last-child {
|
||||
|
|
@ -134,8 +193,8 @@ h5:not(#reader h5):before { content: '##### '; }
|
|||
h6:not(#reader h6):before { content: '###### '; }
|
||||
|
||||
mark {
|
||||
background-color: var(--accent-2-color);
|
||||
color: var(--bg-color);
|
||||
background-color: var(--color-mark);
|
||||
color: var(--color-bg);
|
||||
}
|
||||
|
||||
ul { list-style: none; }
|
||||
|
|
@ -154,27 +213,27 @@ table {
|
|||
}
|
||||
|
||||
table tr td { vertical-align: top; }
|
||||
table.blog-table tr td:first-child { width: 96px; color: var(--accent-2-color); }
|
||||
table.blog-table tr td:nth-child(2) { color: var(--accent-3-color); }
|
||||
table.blog-table tr td:first-child { width: 96px; color: var(--color-4); }
|
||||
table.blog-table tr td:nth-child(2) { color: var(--color-2); }
|
||||
table.blog-table tr td:last-child { width: 114px; text-align: right; }
|
||||
|
||||
/* Reader Content */
|
||||
|
||||
blockquote {
|
||||
border-left: 4px solid var(--accent-2-color);
|
||||
border-left: 4px solid var(--color-text-emphasize);
|
||||
padding-left: 1rem;
|
||||
}
|
||||
|
||||
#reader pre {
|
||||
color: var(--accent-3-color);
|
||||
border-left: 4px solid var(--accent-3-color);
|
||||
color: var(--color-text-emphasize);
|
||||
border-left: 4px solid var(--color-text-emphasize);
|
||||
padding-left: 1rem;
|
||||
}
|
||||
|
||||
hr {
|
||||
margin: 1rem 0 2rem 0;
|
||||
border: none;
|
||||
border-top: 1px solid var(--fg-color);
|
||||
border-top: 1px solid var(--color-fg);
|
||||
}
|
||||
|
||||
#reader p {
|
||||
|
|
@ -182,10 +241,6 @@ hr {
|
|||
margin: 0 0 1.5rem 0
|
||||
}
|
||||
|
||||
#reader i, #reader em {
|
||||
color: var(--accent-3-color);
|
||||
}
|
||||
|
||||
#reader,
|
||||
#reader h1, #reader h2, #reader h3,
|
||||
#reader h4, #reader h5, #reader h6{
|
||||
|
|
@ -209,6 +264,10 @@ hr {
|
|||
#reader h5 { font-size: .9rem; margin: 1rem 0 .4rem 0; }
|
||||
#reader h6 { font-size: .75rem; margin: 1rem 0 .4rem 0; }
|
||||
|
||||
#reader table { margin: 0 0 1.5rem 0; }
|
||||
#reader table thead { background-color: var(--color-table-heading-bg); color: var(--color-table-heading-fg); }
|
||||
#reader table tbody tr:not(:last-child) { border-bottom: 1px solid var(--color-table-heading-bg); line-height:calc(1.5rem - 1px); }
|
||||
|
||||
/* Special */
|
||||
|
||||
#ascii {
|
||||
|
|
@ -226,17 +285,23 @@ hr {
|
|||
|
||||
|
||||
@media only screen and (min-width: 864px) {
|
||||
.content {
|
||||
.window {
|
||||
display: block;
|
||||
width: unset;
|
||||
height: unset;
|
||||
left: 32px;
|
||||
bottom: 32px;
|
||||
}
|
||||
|
||||
.content {
|
||||
width: 800px;
|
||||
height: 596px;
|
||||
padding:16px;
|
||||
transition: height .5s;
|
||||
height: 592px;
|
||||
padding: 16px 16px;
|
||||
transition: height .66s ease-out;
|
||||
}
|
||||
|
||||
.content.expand {
|
||||
height: calc(100% - 64px);
|
||||
height: calc(100vh - 64px - 32px);
|
||||
}
|
||||
|
||||
#reader {
|
||||
|
|
|
|||
Loading…
Reference in a new issue