Browse Source

Added page layout, fixed page list, updated style

master
Gisle Aune 7 years ago
parent
commit
3d1ade5ea7
  1. 122
      index.html
  2. 119
      testpage.html
  3. 184
      ui/css/base.css
  4. 45
      ui/css/magic.css
  5. 150
      ui/css/theme.css
  6. BIN
      ui/img/bg (kopi).png
  7. BIN
      ui/img/bg.png
  8. BIN
      ui/img/bg2.png
  9. 29
      ui/js/background.js

122
index.html

@ -12,9 +12,15 @@
<meta name="googlebot" content="noindex">
<link rel="stylesheet" href="/ui/css/base.css" />
<link rel="stylesheet" href="/ui/css/magic.css" />
<link rel="stylesheet" href="/ui/css/theme.css" />
<script type="text/javascript" src="/ui/js/background.js"></script>
</head>
<body>
<img id="main-background" src="/ui/img/bg2.png" />
<div id="content-wrapper">
<nav>
@ -23,6 +29,7 @@
<ul>
<li><a><div class="mg-icon">O</div><div class="mg-label">OoC</div></a></li>
<li><a><div class="mg-icon">S</div><div class="mg-label">Stories</div></a></li>
<li><a><div class="mg-icon">N</div><div class="mg-label">News</div></a></li>
<li><a><div class="mg-icon">D</div><div class="mg-label">Documents</div></a></li>
<li><a><div class="mg-icon">I</div><div class="mg-label">Items</div></a></li>
<li><a><div class="mg-icon">i</div><div class="mg-label">Info</div></a></li>
@ -41,70 +48,57 @@
<main>
<article>
<div class="menu-item">
<div class="mi-icon">O</div>
<div class="mi-body">
<div class="mi-title">What is this site for?</div>
<div class="mi-meta">
<div class="mi-segment mis-author" title="Author">Gisle</div>
<div class="mi-segment mis-date" title="Date">Sep 30, 2017</div>
<div class="mi-segment mis-tags">
<div class="mi-tag ttype-special">Sticky</div>
</div>
</div>
</div>
</div>
<div class="menu-item">
<div class="mi-icon">S</div>
<div class="mi-body">
<div class="mi-title">A Day At The Office With Jessica</div>
<div class="mi-meta">
<div class="mi-segment mis-author" title="Author">Dante</div>
<div class="mi-segment mis-date" title="Date">Nov 22, 2185</div>
<div class="mi-segment mis-tags">
<div class="mi-tag ttype-character">Jason Wolfe</div>
<div class="mi-tag ttype-character">Jessica Kaya</div>
<div class="mi-tag ttype-character">Jattic Kur'don</div>
<div class="mi-tag ttype-character">Leah Mercier</div>
<div class="mi-tag ttype-character">Steve Briggs</div>
<div class="mi-tag ttype-location">Freedom Falls</div>
</div>
</div>
</div>
</div>
<div class="menu-item">
<div class="mi-icon">I</div>
<div class="mi-body">
<div class="mi-title">Omni-Tool From Quinn</div>
<div class="mi-meta">
<div class="mi-segment mis-author" title="Author">Dante</div>
<div class="mi-segment mis-date" title="Date">Nov 19, 2185</div>
<div class="mi-segment mis-tags">
<div class="mi-tag ttype-character">Renala T'Iavay</div>
<div class="mi-tag ttype-character">Quinn</div>
<div class="mi-tag ttype-location">Freedom Falls</div>
</div>
</div>
</div>
</div>
<div class="menu-item">
<div class="mi-icon">S</div>
<div class="mi-body">
<div class="mi-title">Security</div>
<div class="mi-meta">
<div class="mi-segment mis-author" title="Author">Gisle</div>
<div class="mi-segment mis-date" title="Date">Oct 23, 2185</div>
<div class="mi-segment mis-tags">
<div class="mi-tag ttype-character">Ilyna T'Rea</div>
<div class="mi-tag ttype-character">Ehanis Tioran</div>
<div class="mi-tag ttype-location">Nos Astra</div>
</div>
</div>
</div>
</div>
<table class="page-list">
<tbody>
<tr class="unread">
<td class="pl-icon">N</td>
<td class="pl-content">
<div class="plc-title"><a href="/testpage.html">Weapons Seized by Adrasteian Authorities</a></div>
<div class="plc-meta">
<div class="plcm-author">Dante</div>
<div class="plcm-date">Nov 23, 2185</div>
<div class="plcm-tag ttype-source">The Pulse</div>
</div>
</td>
</tr>
<tr class="spacer"><td></td></tr>
<tr class="unread">
<td class="pl-icon">i</td>
<td class="pl-content">
<div class="plc-title"><a href="/testpage.html">The trip to Bull Plains</a></div>
<div class="plc-meta">
<div class="plcm-author">Gisle</div>
<div class="plcm-date">Nov 17, 2185</div>
<div class="plcm-tag ttype-location">Bull Plains</div>
</div>
</td>
</tr>
<tr class="spacer"><td></td></tr>
<tr>
<td class="pl-icon">S</td>
<td class="pl-content">
<div class="plc-title"><a href="/testpage.html">Security: Ilyna calling Ehanis after the mission</a></div>
<div class="plc-meta">
<div class="plcm-author">Gisle</div>
<div class="plcm-date">Oct 3, 2185</div>
<div class="plcm-tag ttype-location">Nos Astra</div>
</div>
</td>
</tr>
<tr class="spacer"><td></td></tr>
<tr>
<td class="pl-icon">I</td>
<td class="pl-content">
<div class="plc-title"><a href="/testpage.html">Day 6: Supplies</a></div>
<div class="plc-meta">
<div class="plcm-author">Tyranniac</div>
<div class="plcm-date">Oct 30, 2185</div>
<div class="plcm-tag ttype-event">Ruins of Rakhana</div>
</div>
</td>
</tr>
</tbody>
</table>
</article>
</main>
</div>

119
testpage.html

@ -0,0 +1,119 @@
<!DOCTYPE html>
<!-- For preview and template creation only -->
<html>
<head>
<title>Aite RP</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=2.0, user-scalable=no" />
<meta name="theme-color" content="#222222">
<meta name="robots" content="noindex">
<meta name="googlebot" content="noindex">
<link rel="stylesheet" href="/ui/css/base.css" />
<link rel="stylesheet" href="/ui/css/magic.css" />
<link rel="stylesheet" href="/ui/css/theme.css" />
<script type="text/javascript" src="/ui/js/background.js"></script>
</head>
<body>
<img id="main-background" src="/ui/img/bg2.png" />
<div id="content-wrapper">
<nav>
<h1>Story</h1>
<div class="page-property">
<div class="pp-value">Oct 3, 2185</div>
</div>
<div class="page-property">
<a href="/Aylena's_Rescue">
<div class="pp-tag ttype-event"><div class="ppt-icon">e</div>Aylena's Rescue</div>
</a>
<a href="/Nos_Astra">
<div class="pp-tag ttype-location"><div class="ppt-icon">L</div>Nos Astra</div>
</a>
<a href="/Ehanis_Tioran">
<div class="pp-tag ttype-character"><div class="ppt-icon">C</div>Ehanis Tioran</div>
</a>
<a href="/Ehanis_Tioran">
<div class="pp-tag ttype-character"><div class="ppt-icon">C</div>Ilyna T'Rea</div>
</a href="/Ilyna_T'Rea">
</div>
<ul>
<li><a><div class="mg-icon">E</div><div class="mg-label">Edit</div></a></li>
<li><a><div class="mg-icon">P</div><div class="mg-label">Unpublish</div></a></li>
<li><a><div class="mg-icon">D</div><div class="mg-label">Delete</div></a></li>
</ul>
<ul>
<li><a><div class="mg-icon">A</div><div class="mg-label">Login</div></a></li>
</ul>
</nav>
<main>
<article class="narrow">
<div class="page-body">
<h1>Security</h1>
<p><a href="https://wiki.aiterp.net/index.php/Ilyna_T%27Rea">Ilyna</a> was sitting alone in her room. She did not like leaving Li alone with the screen all day, but options were sorely lacking at this time. At least she had watched the vid with her while waiting for news from the hospital back at Nos Astra.</p>
<blockquote>
<p>She visited Renala shortly after speaking with Jason, and asked her for help with restricting what media the child could access. Renala had vehemently disagreed, of course, and one excuse after the other followed when Ilyna tried invoking what authority she had.</p>
<p>"The kid needs to figure that out for herself," Renala had said. "She needs to see why the vids aren't meant for kids. Putting a password on them isn't going to teach her crap." She had then went on talking about how the one thing she might learn is hacking by means of social engineering, or as Renala had specified in plain terms: bugging Jason about the password.</p>
<p>It was clear the two had a different perspective on that, although she could understand Renala's point. Ilyna had told her to make it happen regardless, but she was almost certain that it would be 'forgotten' at the bottom of Renala's backlog. She speculated that might be the cause for the matron's divorce over a year prior, but she kept that to herself.</p>
</blockquote>
<p>Regardless, she had heard that her sister's surgery is complete, and that she had woken up. That's why Ilyna was back at the office.</p>
<h2>Subheader</h2>
<p>She browsed the contact list and placed the call. </p>
<p>A full minute passed. Maybe she was sleeping? Ilyna quickly looked the Nos Astra time up, but that did not affirm that. Worry started to set in.</p>
<h3>Subsubheader</h3>
<p>Then, the call went through and a video feed appeared on her terminal. She could see Ehanis sitting against the wall, the camera close enough to show her shoulders cowered by the hospital gown. In the background, Ilyna could see a hint of the blanket in the bottom of the video feed.</p>
<p>"Hello," Ehanis said. "I was, uh, meaning to call... just didn't know where the tool was stashed away." A voice in the background says something, but the omni-tool's microphone didn't pick it up clearly enough for Ilyna to discern what was said.</p>
<h3>Subsubheader</h3>
<p>"Shut up," Ehanis said in response to the other voice, looking off towards a point behind the camera. "About that," she looked back at her sister, "could you please call off the security thing?"</p>
<p>Ilyna tilted her head. "What's wrong, Ehanis?"</p>
<p>"Where do I even start?" she began with a sigh. "This place is probably the safest place in Nos Astra, I don't need some sassy bitch treating me like a kid."</p>
<p>"Ehanis," she admonished. "Don't be the client you wouldn't want to work for."</p>
<p>"That's the thing, I'm not her client, I don't want to be," she said, a hint of frustration in her voice. "That's why I'm asking you to call this off."</p>
<p>"That isn't up to me," Ilyna said. "I'll bring it up with Vasquez when I see her, but... try to make the best of this, okay?"</p>
<p>"Fuck, you're not the one who ordered this?" Ehanis asked followed by a sigh. "Fine."</p>
<p>"Language," she said. "Anyway, what did the doctors say?"</p>
<p>Ehanis was thoughtful for a moment. "I'm stuck here for four days, at least," she says, "but I'll be fine to work when I'm out."</p>
<p>"I don't believe that," Ilyna chuckled. "Will I hear the same from your mother?"</p>
<p>"Well, she, uh, might have some different details here and there..."</p>
<p>"You are not losing your job, Ehanis," Ilyna frowned. "If you need time to recover, that's nothing to worry about."</p>
<p>"But how are they paying for me to sit on my ass?"</p>
<p>"Redrock Agency looks after their people," she said, confident in her answer. "I don't even need to convince them to. It's not just because you're my sister. I would have made sure of it, regardless, though, because. </p>
<p>Ilyna looked down, "I shouldn't have let you go on this job."</p>
<p>"Don't beat yourself up over it," Ehanis gave a dismissive wave. "I was nagging you about this, and you're f-...", she cleared her throat, "mistaken if you think that will stop once I'm back." A smirk showed up to punctuate her statement.</p>
<p>"We will talk about that later," Ilyna replied.</p>
<p>"Just not Miner's Respite again," she says. "The free meal is great, and the staff's nice, but it's boring."</p>
<p>"I know you don't want that," she said with a chuckle. "I will think about it until you come back, and we'll talk about it then." She paused for a moment. "Va'ynna might miss you, though."</p>
<p>"Eh, she'll be fine," she shrugged. "We didn't get along very well anyway. If she does, though, well, her invitation to go out drinking with me and Mian isn't going away."</p>
<p>"You should work on making friend with the people you work for," Ilyna chuckled. "That makes these kinds of security details better."</p>
<p>"Uh-huh," she said. "My security gigs aren't about going to a big party with a vid star!"</p>
<p>Ilyna frowned. "That is true," she said, "but it doesn't change my point. You can start with being nice to the hospital security staff."</p>
<p>"But she's-..."</p>
<p>"Ehanis," Ilyna drawls with an admonishing tone.</p>
<p>"Fine," she sighs.</p>
<p>Another asari sat down beside Ehanis, winding an arm over her shoulder and shifting Ehanis' arm to turn the omni-tool's camera towards her. Her lilac skin was emphasized by the dusk light shining into the room, and she had faint red markings on her cheeks. Her form-fitting uniform was of a gray color and bore the emblem of the hospital, and a label: 'Security'. Ilyna guessed she would be around 200 years judging by looks alone, but she did realize that could be as much as a century off.</p>
<p>The camera shaked as Ehanis tried to push her away, but her efforts were futile. Ilyna tilted her head.</p>
<p>"We'll look after your sister, ma'am," the intruding asari said with a nod. "And see to it the stay doesn't get too boring." A wink followed, and so did an elbow to the side from Ehanis.</p>
<p>"What did I just say?" Ilyna chuckled.</p>
<p>"Sorry," Ehanis mumbled, "but you have to agree-" </p>
<p>"No 'but's," she says.</p>
<p>The security guard grinned as she let go and stood up, letting Ehanis reclaim control of the omni-tool's front camera.</p>
<p>"Anyway, I'm glad we got a chance to speak," Ilyna said. "You take care, okay?"</p>
<p>Ehanis nodded. "You too, 'Lyna," Ehanis said. "Tell Li I said hi!"</p>
<p>Ilyna smiled before terminating the call.</p>
</div>
</article>
</main>
</div>
</body>
</html>

184
ui/css/base.css

@ -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;
.page-body h2 {
margin-top: 1em;
margin-bottom: 0.25em;
}
.mi-body {
display: inline-block;
width: calc(95% - 5ch);
.page-body h2:nth-child(1), .page-body h2:first-child {
margin-top: 0;
}
color: #777;
.page-body h3, .page-body h4, .page-body h5, .page-body h6 {
margin-top: 0.25em;
margin-bottom: 0;
}
.mi-title {
display: block;
color: #ccc;
}
.page-body blockquote {
margin: 0;
padding: 0.25em 0.5ch;
border: 0.5px solid;
margin-bottom: 0.5em;
}
.mi-meta {
font-size: 0.50em;
padding-top: 0.25em;
.page-body blockquote p:last-of-type {
margin-bottom: 0;
}
.mi-segment {
display: inline-block;
padding-right: 1ch;
}
.page-body p {
margin-top: 0;
}
.mi-tag {
display: inline-block;
/* Front Page */
.page-list {
width: 100%;
border-spacing: 0px;
margin-top: 0.75em;
}
margin-right: 0.5ch;
padding: 0.05em 0.50em;
border-radius: 12px;
.page-list .spacer {
background: none;
outline: none;
}
color: #ccc;
border: 0.5px solid;
background-color: #333;
border-color: #777;
}
.page-list .spacer td {
height: 0.5em;
}
.ttype-special {
color: #000;
background-color: #194;
border-color: #000;
}
.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;
}
.ttype-character {
color: #2ad;
border-color: #2ad;
}
.plc-meta {
padding: 0;
margin: 0;
font-size: 0.75em;
}
.ttype-location {
color: #d93;
border-color: #d93;
}
.plc-meta div {
display: inline-block;
margin-right: 1ch;
}
/* 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,11 +158,6 @@ nav li {
padding-left: 1ch;
}
nav li:hover {
color: #ccc;
background-color: #333;
}
nav .mg-icon {
display: inline-block;
text-align: center;
@ -161,19 +167,40 @@ nav .mg-icon {
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;
.page-body, .page-list {
margin-top: 0.33em;
}
.page-body h1, .page-body h2, .page-body h3 {
font-size: 1.25em;
}
.mis-tags {
.plc-meta .plcm-tag {
display: block;
padding-top: 0.25em;
}
.page-property {
display: none;
}
}

45
ui/css/magic.css

@ -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;
}

150
ui/css/theme.css

@ -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);
}
}

BIN
ui/img/bg (kopi).png

After

Width: 301  |  Height: 256  |  Size: 93 KiB

BIN
ui/img/bg.png

After

Width: 301  |  Height: 256  |  Size: 73 KiB

BIN
ui/img/bg2.png

After

Width: 301  |  Height: 256  |  Size: 40 KiB

29
ui/js/background.js

@ -0,0 +1,29 @@
/*
Makes
*/
document.addEventListener("DOMContentLoaded", function(event) {
var img = document.getElementById('main-background');
if(isLoaded(img)) {
var width = img.clientWidth;
var height = img.clientHeight;
if(width > (height * 1.50)) {
img.className += ' landscape';
}
} else {
img.onload = function () {
var width = img.clientWidth;
var height = img.clientHeight;
if(width > (height * 1.50)) {
img.className += ' landscape';
}
}
}
});
function isLoaded(img) {
return img.complete && typeof(img.naturalHeight) !== 'undefined' && img.naturalHeight !== 0;
}
Loading…
Cancel
Save