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

First commit

Browse Source
This commit is contained in:
gisle
2017-09-23 10:36:14 +02:00
commit aaceec4e1a
4 changed files with 327 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+112
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>
readme.md
+5
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.
serve
Executable
BIN
View File
Binary file not shown.
ui/css/base.css
+210
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;
}
}