initial commit of in-progress kettek site
kts
commit
d16b8c3f7d
|
|
@ -0,0 +1,82 @@
|
||||||
|
,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,
|
||||||
|
kettek website
|
||||||
|
````````````````````````````````
|
||||||
|
This document describes the kettek site's aesthetic, organization, and setup.
|
||||||
|
|
||||||
|
,,,,,,,,,,,,,,,,,,,,,,,,
|
||||||
|
Aesthetic
|
||||||
|
````````````````````````
|
||||||
|
* KISS
|
||||||
|
* Clean
|
||||||
|
* Modern
|
||||||
|
* Whitespace
|
||||||
|
|
||||||
|
,,,,,,,,,,,,,,,,,,,,,,,,
|
||||||
|
Organization
|
||||||
|
````````````````````````
|
||||||
|
Pages are organized fairly freely, but generally fall into these categories:
|
||||||
|
|
||||||
|
* Aphorism
|
||||||
|
* Some short amount of philosophical text. These are used for the [[#Header]].href(#Header).
|
||||||
|
* Article
|
||||||
|
* Some longer article, usually pertaining to technical things, but not technical documentation
|
||||||
|
* Dox
|
||||||
|
* Technical-specific documentation, how-tos, etc.
|
||||||
|
* Projects
|
||||||
|
* Fully-formed projects that have:
|
||||||
|
* code repositories
|
||||||
|
* releases
|
||||||
|
* Lab
|
||||||
|
* Test stuff, usually incomplete
|
||||||
|
* Probably should have a code repository
|
||||||
|
|
||||||
|
,,,,,,,,,,,,,,,,,,,,,,,,
|
||||||
|
Appearance
|
||||||
|
````````````````````````
|
||||||
|
Top:
|
||||||
|
* large white area
|
||||||
|
* off-grey text with daily-selected(modulo) aphorism
|
||||||
|
Left:
|
||||||
|
* content area, (black?)
|
||||||
|
* top-left has name of area/page/breadcrumbs in faded background
|
||||||
|
Right:
|
||||||
|
* menu area, (gray?)
|
||||||
|
* has sections with links
|
||||||
|
* bottom has twitter/youtube/etc. links
|
||||||
|
|
||||||
|
,,,,,,,,,,,,,,,,,,,,,,,,
|
||||||
|
Setup
|
||||||
|
````````````````````````
|
||||||
|
The content of kettek is built using kettext files, some css, some javascript, a serving script, and a "build to live" script.
|
||||||
|
|
||||||
|
* build.sh -- bash script that creates a live instance of kettek
|
||||||
|
* index.php -- web-server script to serve kettek
|
||||||
|
* style.css -- our style
|
||||||
|
* javascript/ -- our javascript directory
|
||||||
|
* *.js
|
||||||
|
* source/
|
||||||
|
front.ktx -- front page
|
||||||
|
* aphorism/
|
||||||
|
* *.ktx
|
||||||
|
* dox/
|
||||||
|
* *.ktx
|
||||||
|
* notes/
|
||||||
|
* *.ktx
|
||||||
|
* plans/
|
||||||
|
* *.ktx
|
||||||
|
|
||||||
|
build.sh produces the following file structure/layout for use by a web server:
|
||||||
|
|
||||||
|
* live/
|
||||||
|
* index.php
|
||||||
|
* style.css
|
||||||
|
* javascript/
|
||||||
|
* *.js
|
||||||
|
* aphorism/
|
||||||
|
* *.html
|
||||||
|
* dox/
|
||||||
|
* *.html
|
||||||
|
* notes/
|
||||||
|
* *.html
|
||||||
|
* plans/
|
||||||
|
* *.html
|
||||||
|
|
@ -0,0 +1,8 @@
|
||||||
|
#!/bin/bash
|
||||||
|
echo "Placing structure..."
|
||||||
|
mkdir -p live
|
||||||
|
cp -pf *.php live/
|
||||||
|
cp -pf *.css live/
|
||||||
|
echo "Building kettext..."
|
||||||
|
../kettext/kettext.pl menu.ktx > live/menu.html
|
||||||
|
../kettext/kettext.pl front.ktx > live/front.html
|
||||||
|
|
@ -0,0 +1,13 @@
|
||||||
|
,,,,,,,,,,,,,,,,
|
||||||
|
Welcome .alt(I am here to serve).class(drop-shadow)
|
||||||
|
````````````````
|
||||||
|
I am [[kts]].alt(Ketchetwahmeegwun Southall) and welcome to **kettek**.
|
||||||
|
|
||||||
|
This website is the central hub for my:
|
||||||
|
* **open source games**
|
||||||
|
* **open source projects**
|
||||||
|
* **technical documentation**
|
||||||
|
* **testing lab**
|
||||||
|
* **.plan files**
|
||||||
|
|
||||||
|
Embrace FOSS.
|
||||||
|
|
@ -0,0 +1,40 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
|
||||||
|
<title>kettek</title>
|
||||||
|
<style type="text/css">
|
||||||
|
/*<![CDATA[*/
|
||||||
|
@import "style_reset.css";
|
||||||
|
/*]]>*/
|
||||||
|
</style>
|
||||||
|
<style type="text/css">
|
||||||
|
/*<![CDATA[*/
|
||||||
|
@import "style.css";
|
||||||
|
/*]]>*/
|
||||||
|
</style>
|
||||||
|
<style type="text/css">
|
||||||
|
/*<![CDATA[*/
|
||||||
|
@import "style_pretty.css";
|
||||||
|
/*]]>*/
|
||||||
|
</style>
|
||||||
|
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="header" class="shadow_inset">
|
||||||
|
<div class="padder">
|
||||||
|
<p>Move beyond the modern limitations, doubt the fundamentals and entertain worlds void of preformulated idiosyncracies. Imagine and strive towards the altogether different.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="min">
|
||||||
|
<div id="menu">
|
||||||
|
<div class="padder">
|
||||||
|
<?php include 'menu.html' ?>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div id="content">
|
||||||
|
<?php include 'front.html' ?>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,11 @@
|
||||||
|
.imply(version.none)
|
||||||
|
* [[.plan]].href(?plans).alt(Of Action)
|
||||||
|
* Games
|
||||||
|
* [[Newsboy]].href(newsboy/).alt(Escape The Net)
|
||||||
|
* [[CirQuit]].href(CirQuit/).alt(Find Enlightenment)
|
||||||
|
* [[VAD]].href(VAD).alt(Get Vadding!)
|
||||||
|
* Projects
|
||||||
|
* [[kettext]].href(kettext/).alt(markup language)
|
||||||
|
* [[proclib]].href(proclib/).alt(procedural generation!)
|
||||||
|
* [[procsicle]].href(procsicle/).alt(PHP process linkage)
|
||||||
|
* [[noirchat]].href(noirchat/).alt(decentralized chatting at its finest)
|
||||||
|
|
@ -0,0 +1,66 @@
|
||||||
|
/* */
|
||||||
|
body {
|
||||||
|
background-color: #000;
|
||||||
|
}
|
||||||
|
/* general helper classes */
|
||||||
|
.min {
|
||||||
|
margin: 0 auto;
|
||||||
|
float: right;
|
||||||
|
width: 1000px;
|
||||||
|
}
|
||||||
|
.padder {
|
||||||
|
padding: 1em;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
/* header styling */
|
||||||
|
#header {
|
||||||
|
float: left;
|
||||||
|
min-width: 100%;
|
||||||
|
height: 200px;
|
||||||
|
background-color: #FFF;
|
||||||
|
text-align: center;
|
||||||
|
color: #DFDFDF;
|
||||||
|
font-size: 24pt;
|
||||||
|
line-height: 100%;
|
||||||
|
}
|
||||||
|
/* content styling */
|
||||||
|
#container {
|
||||||
|
padding: 15px 0;
|
||||||
|
clear: both;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
/* */
|
||||||
|
#menu {
|
||||||
|
position: relative;
|
||||||
|
width: 30%;
|
||||||
|
min-height: 70%;
|
||||||
|
float: right;
|
||||||
|
background-color: #000;
|
||||||
|
color: #DFDFDF;
|
||||||
|
text-align: right;
|
||||||
|
font-size: 16pt;
|
||||||
|
line-height: 150%;
|
||||||
|
}
|
||||||
|
/* */
|
||||||
|
#content {
|
||||||
|
position: relative;
|
||||||
|
float: left;
|
||||||
|
width: 70%;
|
||||||
|
min-height: 70%;
|
||||||
|
background-color: #FFF;
|
||||||
|
color: #DFDFDF;
|
||||||
|
font-size: 12pt;
|
||||||
|
line-height: 125%;
|
||||||
|
}
|
||||||
|
#content h1 {
|
||||||
|
width: 100%;
|
||||||
|
padding: 0.5em;
|
||||||
|
border-bottom: 2px solid #555;
|
||||||
|
color: #000;
|
||||||
|
background-color: #555;
|
||||||
|
}
|
||||||
|
#content p, ul {
|
||||||
|
padding-left: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -0,0 +1,23 @@
|
||||||
|
.shadow_inset {
|
||||||
|
-webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.8), 0 0 40px rgba(0, 0, 0, 0.4) inset;
|
||||||
|
-moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.8), 0 0 40px rgba(0, 0, 0, 0.4) inset;
|
||||||
|
box-shadow:0 1px 4px rgba(0, 0, 0, 0.8), 0 0 40px rgba(0, 0, 0, 0.4) inset;
|
||||||
|
}
|
||||||
|
.shadow_inset:before,
|
||||||
|
.shadow_inset:after {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
z-index: -2;
|
||||||
|
bottom:15px;
|
||||||
|
left:10px;
|
||||||
|
width:50%;
|
||||||
|
height:20%;
|
||||||
|
-webkit-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
|
||||||
|
-moz-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
|
||||||
|
box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
|
||||||
|
-webkit-transform:rotate(-3deg);
|
||||||
|
-moz-transform:rotate(-3deg);
|
||||||
|
-ms-transform:rotate(-3deg);
|
||||||
|
-o-transform:rotate(-3deg);
|
||||||
|
transform:rotate(-3deg);
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,80 @@
|
||||||
|
/* This file resets EVERYTHING */
|
||||||
|
html, body, div, span, applet, object, iframe,
|
||||||
|
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
|
||||||
|
a, abbr, acronym, address, big, cite, code,
|
||||||
|
del, dfn, em, font, img, ins, kbd, q, s, samp,
|
||||||
|
small, strike, strong, sub, sup, tt, var,
|
||||||
|
dl, dt, dd, ol, ul, li,
|
||||||
|
fieldset, form, label, legend,
|
||||||
|
table, caption, tbody, tfoot, thead, tr, th, td {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
border: 0;
|
||||||
|
outline: 0;
|
||||||
|
font-weight: inherit;
|
||||||
|
font-style: inherit;
|
||||||
|
font-size: 100%;
|
||||||
|
vertical-align: baseline;
|
||||||
|
}
|
||||||
|
/* remember to define focus styles! */
|
||||||
|
:focus {
|
||||||
|
outline: 0;
|
||||||
|
}
|
||||||
|
body {
|
||||||
|
line-height: 1;
|
||||||
|
color: black;
|
||||||
|
background: white;
|
||||||
|
}
|
||||||
|
ol, ul {
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
/* tables still need 'cellspacing="0"' in the markup */
|
||||||
|
table {
|
||||||
|
border-collapse: separate;
|
||||||
|
border-spacing: 0;
|
||||||
|
}
|
||||||
|
caption, th, td {
|
||||||
|
text-align: left;
|
||||||
|
font-weight: normal;
|
||||||
|
}
|
||||||
|
blockquote:before, blockquote:after,
|
||||||
|
q:before, q:after {
|
||||||
|
content: "";
|
||||||
|
}
|
||||||
|
blockquote, q {
|
||||||
|
quotes: "" "";
|
||||||
|
}
|
||||||
|
|
||||||
|
strong {
|
||||||
|
font-weight:bold;color:#0289ce;
|
||||||
|
}
|
||||||
|
|
||||||
|
em {
|
||||||
|
font-style:oblique;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
margin:15px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.aligncenter, div.aligncenter {
|
||||||
|
display: block;
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
}
|
||||||
|
.alignleft {
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
.alignright {
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {font-size:180%;}
|
||||||
|
h2 {font-size:150%;}
|
||||||
|
h3 {font-size:125%;}
|
||||||
|
h4 {font-size:100%;}
|
||||||
|
h5 {font-size:90%;}
|
||||||
|
h6 {font-size:80%;}
|
||||||
|
|
||||||
|
a:link {color:#0289ce;}
|
||||||
|
a:hover {color:#f64274;}
|
||||||
|
|
@ -0,0 +1,2 @@
|
||||||
|
/* this file stacks on top of style.css and add additional prettiness */
|
||||||
|
|
||||||
Loading…
Reference in New Issue