aiterp
/
aitestory-ui
1
0
Fork 0
Code Issues Pull Requests Releases Activity
Browse Source

First commit

master
Gisle Aune 7 years ago
commit
aaceec4e1a
4 changed files with 327 additions and 0 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 112
      index.html
  2. 5
      readme.md
  3. BIN
      serve
  4. 210
      ui/css/base.css

112
index.html
View File

@ -0,0 +1,112 @@
<!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" />
</head>
<body>
<div id="content-wrapper">
<nav>
<h1>Aite RP</h1>
<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">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>
<li><a><div class="mg-icon">B</div><div class="mg-label">Background</div></a></li>
</ul>
<ul>
<li><a><div class="mg-icon">+</div><div class="mg-label">Post</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>
<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>
</article>
</main>
</div>
</body>
</html>

5
readme.md
View File

@ -0,0 +1,5 @@
# AiteStory UI
This is the UI component for the project aiming to replace the forum's function for announcements, stories, OoC postings and other things that don't mesh with the Wiki's directed-graph structure.
The `ui/` directory has the content used, while the HTML documents are for previewing the UI elements and for template creation. I have chosen to go for a traditional website rather than a Single-Page Application to keep things simple.

BIN
serve
View File

210
ui/css/base.css
View File

@ -0,0 +1,210 @@
body {
padding: 0;
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 {
position: absolute;
left: 0;
top: 0;
width: 100%;
min-height: 100%;
}
/* Main Body */
main {
position: absolute;
top: 0;
left: 18ch;
right: 0;
min-height: 100%;
padding: 0;
margin: 0;
background-color: rgba(0, 0, 0, 0.50);
}
article {
width: 80ch;
max-width: 95%;
margin-left: auto;
margin-right: auto;
}
/* Front Page */
.menu-item {
background-color: #222;
margin-top: 0.5em;
}
.mi-icon {
display: inline-block;
width: 2ch;
height: 100%;
text-align: center;
font-size: 2em;
background-color: #333;
color: #ccc;
}
.mi-body {
display: inline-block;
width: calc(95% - 5ch);
color: #777;
}
.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;
height: 100%;
background-color: #222;
color: #aaa;
padding: 0;
margin: 0;
overflow-y: auto;
}
nav h1 {
text-align: center;
}
nav a {
display: block;
cursor: pointer;
}
nav ul {
display: block;
padding: 0;
margin: 0;
margin-bottom: 0.5em;
}
nav li {
list-style: none;
padding: 0.1em;
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;
}
@media screen and (max-width: 900px) {
nav {
width: 4ch;
}
nav h1 {
display: none;
}
nav li {
padding-left: 0;
text-align: center;
}
nav .mg-label {
display: none;
}
nav .mg-icon {
width: 3ch;
margin-left: 0;
padding: 0;
}
main {
left: 4ch;
}
.mi-icon {
font-size: 2.55em;
}
.mis-tags {
display: block;
padding-top: 0.25em;
}
}
Write Preview
Loading…
Cancel
Save