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