Homepage up and running

.editorconfig

@@ -0,0 +1,15 @@
+root = true
+
+[*]
+charset = utf-8
+end_of_line = lf
+insert_final_newline = true
+indent_style = space
+indent_size = 4
+trim_trailing_whitespace = true
+
+[*.md]
+trim_trailing_whitespace = false
+
+[*.{yml,yaml}]
+indent_size = 2

.env.example

@@ -0,0 +1,19 @@
+APP_NAME=Lumen
+APP_ENV=local
+APP_KEY=
+APP_DEBUG=true
+APP_URL=http://localhost
+APP_TIMEZONE=UTC
+
+LOG_CHANNEL=stack
+LOG_SLACK_WEBHOOK_URL=
+
+DB_CONNECTION=mysql
+DB_HOST=127.0.0.1
+DB_PORT=3306
+DB_DATABASE=homestead
+DB_USERNAME=homestead
+DB_PASSWORD=secret
+
+CACHE_DRIVER=file
+QUEUE_CONNECTION=sync

.gitignore

@@ -0,0 +1,6 @@
+/vendor
+/.idea
+Homestead.json
+Homestead.yaml
+.env
+.phpunit.result.cache

.styleci.yml

@@ -0,0 +1,6 @@
+php:
+  preset: laravel
+  disabled:
+    - unused_use
+js: true
+css: true

README.md

@@ -0,0 +1,24 @@
+# Lumen PHP Framework
+
+[![Build Status](https://travis-ci.org/laravel/lumen-framework.svg)](https://travis-ci.org/laravel/lumen-framework)
+[![Total Downloads](https://img.shields.io/packagist/dt/laravel/framework)](https://packagist.org/packages/laravel/lumen-framework)
+[![Latest Stable Version](https://img.shields.io/packagist/v/laravel/framework)](https://packagist.org/packages/laravel/lumen-framework)
+[![License](https://img.shields.io/packagist/l/laravel/framework)](https://packagist.org/packages/laravel/lumen-framework)
+
+Laravel Lumen is a stunningly fast PHP micro-framework for building web applications with expressive, elegant syntax. We believe development must be an enjoyable, creative experience to be truly fulfilling. Lumen attempts to take the pain out of development by easing common tasks used in the majority of web projects, such as routing, database abstraction, queueing, and caching.
+
+## Official Documentation
+
+Documentation for the framework can be found on the [Lumen website](https://lumen.laravel.com/docs).
+
+## Contributing
+
+Thank you for considering contributing to Lumen! The contribution guide can be found in the [Laravel documentation](https://laravel.com/docs/contributions).
+
+## Security Vulnerabilities
+
+If you discover a security vulnerability within Lumen, please send an e-mail to Taylor Otwell at taylor@laravel.com. All security vulnerabilities will be promptly addressed.
+
+## License
+
+The Lumen framework is open-sourced software licensed under the [MIT license](https://opensource.org/licenses/MIT).

app/Console/Commands/Stats.php

@@ -0,0 +1,17 @@
+<?php
+
+namespace App\Console\Commands;
+
+use Illuminate\Console\Command;
+
+class Stats extends Command {
+
+    protected $name = 'knockout:stats';
+    protected $description = 'Fetch new stats';
+
+    public function handle()
+    {
+        echo 'wolo';
+    }
+
+}

app/Console/Commands/Subforums.php

@@ -0,0 +1,18 @@
+<?php
+
+namespace App\Console\Commands;
+
+use Illuminate\Console\Command;
+use App\Knockout\Subforum;
+
+class Subforums extends Command {
+
+    protected $name = 'knockout:subforums';
+    protected $description = 'Fetch new subforum list';
+
+    public function handle()
+    {
+        Subforum::updateCache();
+    }
+
+}

app/Console/Kernel.php

@@ -0,0 +1,31 @@
+<?php
+
+namespace App\Console;
+
+use Illuminate\Console\Scheduling\Schedule;
+use Laravel\Lumen\Console\Kernel as ConsoleKernel;
+
+class Kernel extends ConsoleKernel
+{
+    /**
+     * The Artisan commands provided by your application.
+     *
+     * @var array
+     */
+    protected $commands = [
+        \App\Console\Commands\Subforums::class,
+        \App\Console\Commands\Stats::class
+    ];
+
+    /**
+     * Define the application's command schedule.
+     *
+     * @param  \Illuminate\Console\Scheduling\Schedule  $schedule
+     * @return void
+     */
+    protected function schedule(Schedule $schedule)
+    {
+        $schedule->command('knockout:subforums')->everyMinute();
+        $schedule->command('knockout:stats')->hourly();
+    }
+}

app/Events/Event.php

@@ -0,0 +1,10 @@
+<?php
+
+namespace App\Events;
+
+use Illuminate\Queue\SerializesModels;
+
+abstract class Event
+{
+    use SerializesModels;
+}

app/Events/ExampleEvent.php

@@ -0,0 +1,16 @@
+<?php
+
+namespace App\Events;
+
+class ExampleEvent extends Event
+{
+    /**
+     * Create a new event instance.
+     *
+     * @return void
+     */
+    public function __construct()
+    {
+        //
+    }
+}

app/Exceptions/Handler.php

@@ -0,0 +1,54 @@
+<?php
+
+namespace App\Exceptions;
+
+use Illuminate\Auth\Access\AuthorizationException;
+use Illuminate\Database\Eloquent\ModelNotFoundException;
+use Illuminate\Validation\ValidationException;
+use Laravel\Lumen\Exceptions\Handler as ExceptionHandler;
+use Symfony\Component\HttpKernel\Exception\HttpException;
+use Throwable;
+
+class Handler extends ExceptionHandler
+{
+    /**
+     * A list of the exception types that should not be reported.
+     *
+     * @var array
+     */
+    protected $dontReport = [
+        AuthorizationException::class,
+        HttpException::class,
+        ModelNotFoundException::class,
+        ValidationException::class,
+    ];
+
+    /**
+     * Report or log an exception.
+     *
+     * This is a great spot to send exceptions to Sentry, Bugsnag, etc.
+     *
+     * @param  \Throwable  $exception
+     * @return void
+     *
+     * @throws \Exception
+     */
+    public function report(Throwable $exception)
+    {
+        parent::report($exception);
+    }
+
+    /**
+     * Render an exception into an HTTP response.
+     *
+     * @param  \Illuminate\Http\Request  $request
+     * @param  \Throwable  $exception
+     * @return \Illuminate\Http\Response|\Illuminate\Http\JsonResponse
+     *
+     * @throws \Throwable
+     */
+    public function render($request, Throwable $exception)
+    {
+        return parent::render($request, $exception);
+    }
+}

app/Http/Controllers/Controller.php

@@ -0,0 +1,10 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use Laravel\Lumen\Routing\Controller as BaseController;
+
+class Controller extends BaseController
+{
+    //
+}

app/Http/Controllers/IndexController.php

@@ -0,0 +1,24 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use Illuminate\Http\Request;
+use App\Knockout\Subforum;
+
+class IndexController extends Controller {
+
+    public function get(Request $request)
+    {
+        $subforums = Subforum::getCache();
+
+        $len = count($subforums);
+        $leftSubforums = array_slice($subforums, 0, $len / 2);
+        $rightSubforums = array_slice($subforums, $len / 2);
+
+        return view('page/index', [
+            'leftSubforums' => $leftSubforums,
+            'rightSubforums' => $rightSubforums
+        ]);
+    }
+
+}

app/Http/Middleware/Authenticate.php

@@ -0,0 +1,44 @@
+<?php
+
+namespace App\Http\Middleware;
+
+use Closure;
+use Illuminate\Contracts\Auth\Factory as Auth;
+
+class Authenticate
+{
+    /**
+     * The authentication guard factory instance.
+     *
+     * @var \Illuminate\Contracts\Auth\Factory
+     */
+    protected $auth;
+
+    /**
+     * Create a new middleware instance.
+     *
+     * @param  \Illuminate\Contracts\Auth\Factory  $auth
+     * @return void
+     */
+    public function __construct(Auth $auth)
+    {
+        $this->auth = $auth;
+    }
+
+    /**
+     * Handle an incoming request.
+     *
+     * @param  \Illuminate\Http\Request  $request
+     * @param  \Closure  $next
+     * @param  string|null  $guard
+     * @return mixed
+     */
+    public function handle($request, Closure $next, $guard = null)
+    {
+        if ($this->auth->guard($guard)->guest()) {
+            return response('Unauthorized.', 401);
+        }
+
+        return $next($request);
+    }
+}

app/Http/Middleware/ExampleMiddleware.php

@@ -0,0 +1,20 @@
+<?php
+
+namespace App\Http\Middleware;
+
+use Closure;
+
+class ExampleMiddleware
+{
+    /**
+     * Handle an incoming request.
+     *
+     * @param  \Illuminate\Http\Request  $request
+     * @param  \Closure  $next
+     * @return mixed
+     */
+    public function handle($request, Closure $next)
+    {
+        return $next($request);
+    }
+}

app/Jobs/ExampleJob.php

@@ -0,0 +1,26 @@
+<?php
+
+namespace App\Jobs;
+
+class ExampleJob extends Job
+{
+    /**
+     * Create a new job instance.
+     *
+     * @return void
+     */
+    public function __construct()
+    {
+        //
+    }
+
+    /**
+     * Execute the job.
+     *
+     * @return void
+     */
+    public function handle()
+    {
+        //
+    }
+}

app/Jobs/Job.php

@@ -0,0 +1,24 @@
+<?php
+
+namespace App\Jobs;
+
+use Illuminate\Bus\Queueable;
+use Illuminate\Contracts\Queue\ShouldQueue;
+use Illuminate\Queue\InteractsWithQueue;
+use Illuminate\Queue\SerializesModels;
+
+abstract class Job implements ShouldQueue
+{
+    /*
+    |--------------------------------------------------------------------------
+    | Queueable Jobs
+    |--------------------------------------------------------------------------
+    |
+    | This job base class provides a central location to place any logic that
+    | is shared across all of your jobs. The trait included with the class
+    | provides access to the "queueOn" and "delay" queue helper methods.
+    |
+    */
+
+    use InteractsWithQueue, Queueable, SerializesModels;
+}

app/Knockout/AbstractData.php

@@ -0,0 +1,45 @@
+<?php
+
+namespace App\Knockout;
+
+class AbstractData {
+
+    protected $root;
+
+    public function __construct()
+    {
+        $this->root = env('KNOCKOUT_API', 'https://api.knockout.chat');
+    }
+
+    private function encodeParameters($parameters = [])
+    {
+        $parameters = array_map(function($value, $key) {
+            return urlencode($key) . '=' . urlencode($value);
+        }, $parameters, array_keys($parameters));
+        return '?' . implode('&', $parameters);
+    }
+
+    private function curl($path, $parameters = [])
+    {
+        $ch = curl_init(implode(null, [
+            $this->root, $path, $this->encodeParameters($parameters)
+        ]));
+        curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
+        curl_setopt($ch, CURLOPT_HEADER, 0);
+        return $ch;
+    }
+
+    public function httpGet($path, $parameters = [])
+    {
+        $ch = $this->curl($path, $parameters);
+        $data = curl_exec($ch);
+        curl_close($ch);
+        return $data;
+    }
+
+    public function httpPost($path, $parameters = [], $properties = [])
+    {
+
+    }
+
+}

app/Knockout/Subforum.php

@@ -0,0 +1,39 @@
+<?php
+
+namespace App\Knockout;
+
+use Illuminate\Support\Facades\Cache;
+
+class Subforum {
+
+    private static function unwrap($subforum)
+    {
+        $s = new self();
+
+        $s->id              = $subforum->id;
+        $s->name            = $subforum->name;
+        $s->description     = $subforum->description;
+
+        return $s;
+    }
+
+    public static function getAll()
+    {
+        $data = (new AbstractData)->httpGet('/subforum');
+        $json = json_decode($data);
+        return array_map(function($subforum) {
+            return self::unwrap($subforum);
+        }, $json->list);
+    }
+
+    public static function updateCache()
+    {
+        Cache::forever('subforums', self::getAll());
+    }
+
+    public static function getCache()
+    {
+        return Cache::get('subforums', []);
+    }
+
+}

app/Listeners/ExampleListener.php

@@ -0,0 +1,31 @@
+<?php
+
+namespace App\Listeners;
+
+use App\Events\ExampleEvent;
+use Illuminate\Contracts\Queue\ShouldQueue;
+use Illuminate\Queue\InteractsWithQueue;
+
+class ExampleListener
+{
+    /**
+     * Create the event listener.
+     *
+     * @return void
+     */
+    public function __construct()
+    {
+        //
+    }
+
+    /**
+     * Handle the event.
+     *
+     * @param  \App\Events\ExampleEvent  $event
+     * @return void
+     */
+    public function handle(ExampleEvent $event)
+    {
+        //
+    }
+}

app/Models/User.php

@@ -0,0 +1,33 @@
+<?php
+
+namespace App\Models;
+
+use Illuminate\Auth\Authenticatable;
+use Illuminate\Contracts\Auth\Access\Authorizable as AuthorizableContract;
+use Illuminate\Contracts\Auth\Authenticatable as AuthenticatableContract;
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Model;
+use Laravel\Lumen\Auth\Authorizable;
+
+class User extends Model implements AuthenticatableContract, AuthorizableContract
+{
+    use Authenticatable, Authorizable, HasFactory;
+
+    /**
+     * The attributes that are mass assignable.
+     *
+     * @var array
+     */
+    protected $fillable = [
+        'name', 'email',
+    ];
+
+    /**
+     * The attributes excluded from the model's JSON form.
+     *
+     * @var array
+     */
+    protected $hidden = [
+        'password',
+    ];
+}

app/Providers/AppServiceProvider.php

@@ -0,0 +1,18 @@
+<?php
+
+namespace App\Providers;
+
+use Illuminate\Support\ServiceProvider;
+
+class AppServiceProvider extends ServiceProvider
+{
+    /**
+     * Register any application services.
+     *
+     * @return void
+     */
+    public function register()
+    {
+        //
+    }
+}

app/Providers/AuthServiceProvider.php

@@ -0,0 +1,39 @@
+<?php
+
+namespace App\Providers;
+
+use App\Models\User;
+use Illuminate\Support\Facades\Gate;
+use Illuminate\Support\ServiceProvider;
+
+class AuthServiceProvider extends ServiceProvider
+{
+    /**
+     * Register any application services.
+     *
+     * @return void
+     */
+    public function register()
+    {
+        //
+    }
+
+    /**
+     * Boot the authentication services for the application.
+     *
+     * @return void
+     */
+    public function boot()
+    {
+        // Here you may define how you wish users to be authenticated for your Lumen
+        // application. The callback which receives the incoming request instance
+        // should return either a User instance or null. You're free to obtain
+        // the User instance via an API token or any other method necessary.
+
+        $this->app['auth']->viaRequest('api', function ($request) {
+            if ($request->input('api_token')) {
+                return User::where('api_token', $request->input('api_token'))->first();
+            }
+        });
+    }
+}

app/Providers/EventServiceProvider.php

@@ -0,0 +1,19 @@
+<?php
+
+namespace App\Providers;
+
+use Laravel\Lumen\Providers\EventServiceProvider as ServiceProvider;
+
+class EventServiceProvider extends ServiceProvider
+{
+    /**
+     * The event listener mappings for the application.
+     *
+     * @var array
+     */
+    protected $listen = [
+        \App\Events\ExampleEvent::class => [
+            \App\Listeners\ExampleListener::class,
+        ],
+    ];
+}

artisan

@@ -0,0 +1,35 @@
+#!/usr/bin/env php
+<?php
+
+use Symfony\Component\Console\Input\ArgvInput;
+use Symfony\Component\Console\Output\ConsoleOutput;
+
+/*
+|--------------------------------------------------------------------------
+| Create The Application
+|--------------------------------------------------------------------------
+|
+| First we need to get an application instance. This creates an instance
+| of the application / container and bootstraps the application so it
+| is ready to receive HTTP / Console requests from the environment.
+|
+*/
+
+$app = require __DIR__.'/bootstrap/app.php';
+
+/*
+|--------------------------------------------------------------------------
+| Run The Artisan Application
+|--------------------------------------------------------------------------
+|
+| When we run the console application, the current CLI command will be
+| executed in this console and the response sent back to a terminal
+| or another output device for the developers. Here goes nothing!
+|
+*/
+
+$kernel = $app->make(
+    'Illuminate\Contracts\Console\Kernel'
+);
+
+exit($kernel->handle(new ArgvInput, new ConsoleOutput));

bootstrap/app.php

@@ -0,0 +1,119 @@
+<?php
+
+require_once __DIR__.'/../vendor/autoload.php';
+
+(new Laravel\Lumen\Bootstrap\LoadEnvironmentVariables(
+    dirname(__DIR__)
+))->bootstrap();
+
+date_default_timezone_set(env('APP_TIMEZONE', 'UTC'));
+
+/*
+|--------------------------------------------------------------------------
+| Create The Application
+|--------------------------------------------------------------------------
+|
+| Here we will load the environment and create the application instance
+| that serves as the central piece of this framework. We'll use this
+| application as an "IoC" container and router for this framework.
+|
+*/
+
+$app = new Laravel\Lumen\Application(
+    dirname(__DIR__)
+);
+
+$app->withFacades();
+
+// $app->withEloquent();
+
+/*
+|--------------------------------------------------------------------------
+| Register Container Bindings
+|--------------------------------------------------------------------------
+|
+| Now we will register a few bindings in the service container. We will
+| register the exception handler and the console kernel. You may add
+| your own bindings here if you like or you can make another file.
+|
+*/
+
+$app->singleton(
+    Illuminate\Contracts\Debug\ExceptionHandler::class,
+    App\Exceptions\Handler::class
+);
+
+$app->singleton(
+    Illuminate\Contracts\Console\Kernel::class,
+    App\Console\Kernel::class
+);
+
+/*
+|--------------------------------------------------------------------------
+| Register Config Files
+|--------------------------------------------------------------------------
+|
+| Now we will register the "app" configuration file. If the file exists in
+| your configuration directory it will be loaded; otherwise, we'll load
+| the default version. You may register other files below as needed.
+|
+*/
+
+$app->configure('app');
+
+/*
+|--------------------------------------------------------------------------
+| Register Middleware
+|--------------------------------------------------------------------------
+|
+| Next, we will register the middleware with the application. These can
+| be global middleware that run before and after each request into a
+| route or middleware that'll be assigned to some specific routes.
+|
+*/
+
+// $app->middleware([
+//     App\Http\Middleware\ExampleMiddleware::class
+// ]);
+
+// $app->routeMiddleware([
+//     'auth' => App\Http\Middleware\Authenticate::class,
+// ]);
+
+/*
+|--------------------------------------------------------------------------
+| Register Service Providers
+|--------------------------------------------------------------------------
+|
+| Here we will register all of the application's service providers which
+| are used to bind services into the container. Service providers are
+| totally optional, so you are not required to uncomment this line.
+|
+*/
+
+// $app->register(App\Providers\AppServiceProvider::class);
+// $app->register(App\Providers\AuthServiceProvider::class);
+// $app->register(App\Providers\EventServiceProvider::class);
+
+/*
+|--------------------------------------------------------------------------
+| Load The Application Routes
+|--------------------------------------------------------------------------
+|
+| Next we will include the routes file so that they can all be added to
+| the application. This will provide all of the URLs the application
+| can respond to, as well as the controllers that may handle them.
+|
+*/
+
+$app->router->group([
+    'namespace' => 'App\Http\Controllers',
+], function ($router) {
+    require __DIR__.'/../routes/web.php';
+});
+
+if (env('APP_DEBUG')) {
+    $app->register(Barryvdh\Debugbar\LumenServiceProvider::class);
+}
+
+return $app;

composer.json

@@ -0,0 +1,41 @@
+{
+    "name": "laravel/lumen",
+    "description": "The Laravel Lumen Framework.",
+    "keywords": ["framework", "laravel", "lumen"],
+    "license": "MIT",
+    "type": "project",
+    "require": {
+        "php": "^7.3|^8.0",
+        "laravel/lumen-framework": "^8.0"
+    },
+    "require-dev": {
+        "barryvdh/laravel-debugbar": "^3.5",
+        "fakerphp/faker": "^1.9.1",
+        "mockery/mockery": "^1.3.1",
+        "phpunit/phpunit": "^9.3"
+    },
+    "autoload": {
+        "psr-4": {
+            "App\\": "app/",
+            "Database\\Factories\\": "database/factories/",
+            "Database\\Seeders\\": "database/seeders/"
+        }
+    },
+    "autoload-dev": {
+        "classmap": [
+            "tests/"
+        ]
+    },
+    "config": {
+        "preferred-install": "dist",
+        "sort-packages": true,
+        "optimize-autoloader": true
+    },
+    "minimum-stability": "dev",
+    "prefer-stable": true,
+    "scripts": {
+        "post-root-package-install": [
+            "@php -r \"file_exists('.env') || copy('.env.example', '.env');\""
+        ]
+    }
+}

database/factories/UserFactory.php

@@ -0,0 +1,29 @@
+<?php
+
+namespace Database\Factories;
+
+use App\Models\User;
+use Illuminate\Database\Eloquent\Factories\Factory;
+
+class UserFactory extends Factory
+{
+    /**
+     * The name of the factory's corresponding model.
+     *
+     * @var string
+     */
+    protected $model = User::class;
+
+    /**
+     * Define the model's default state.
+     *
+     * @return array
+     */
+    public function definition()
+    {
+        return [
+            'name' => $this->faker->name,
+            'email' => $this->faker->unique()->safeEmail,
+        ];
+    }
+}

database/seeders/DatabaseSeeder.php

@@ -0,0 +1,18 @@
+<?php
+
+namespace Database\Seeders;
+
+use Illuminate\Database\Seeder;
+
+class DatabaseSeeder extends Seeder
+{
+    /**
+     * Run the database seeds.
+     *
+     * @return void
+     */
+    public function run()
+    {
+        // $this->call('UsersTableSeeder');
+    }
+}

phpunit.xml

@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<phpunit xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+         xsi:noNamespaceSchemaLocation="./vendor/phpunit/phpunit/phpunit.xsd"
+         bootstrap="vendor/autoload.php"
+         colors="true"
+>
+    <testsuites>
+        <testsuite name="Application Test Suite">
+            <directory suffix="Test.php">./tests</directory>
+        </testsuite>
+    </testsuites>
+    <php>
+        <env name="APP_ENV" value="testing"/>
+        <env name="CACHE_DRIVER" value="array"/>
+        <env name="QUEUE_CONNECTION" value="sync"/>
+    </php>
+</phpunit>

public/.htaccess

@@ -0,0 +1,21 @@
+<IfModule mod_rewrite.c>
+    <IfModule mod_negotiation.c>
+        Options -MultiViews -Indexes
+    </IfModule>
+
+    RewriteEngine On
+
+    # Handle Authorization Header
+    RewriteCond %{HTTP:Authorization} .
+    RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}]
+
+    # Redirect Trailing Slashes If Not A Folder...
+    RewriteCond %{REQUEST_FILENAME} !-d
+    RewriteCond %{REQUEST_URI} (.+)/$
+    RewriteRule ^ %1 [L,R=301]
+
+    # Handle Front Controller...
+    RewriteCond %{REQUEST_FILENAME} !-d
+    RewriteCond %{REQUEST_FILENAME} !-f
+    RewriteRule ^ index.php [L]
+</IfModule>

public/css/main.css

@@ -0,0 +1,256 @@
+html {
+    min-width: 240px;
+    background: #333;
+    color: #fff;
+    font-family: Arial, Helvetica, sans-serif;
+    text-align: center;
+}
+
+body {
+    max-width: 1000px;
+    padding: 15px;
+    margin: 0 auto;
+    line-height: 1.3;
+}
+
+p {
+    margin: 10px 0;
+}
+
+pre {
+    color: #a2a2a2;
+    margin: 10px 0;
+    word-break: break-all;
+    white-space: pre-line;
+}
+
+hr.textonly {
+    display: none;
+}
+
+.clearfix {
+    clear: both;
+}
+
+.wrapper {
+	position: relative;
+    margin: 0 auto;
+    width: 100%;
+    text-align: left;
+}
+
+.row {
+    padding: 10px 15px;
+    border: outset 1px #666;
+    background: #444;
+}
+
+.row.odd {
+    background-color: #3e3e3e;
+}
+
+.row.page {
+    padding: 0;
+}
+
+.row.spacer {
+    padding: 0;
+    height: 10px;
+    background: transparent !important;
+    border: none;
+}
+
+.row.pagination {
+    text-align: center;
+    padding: 5px 15px;
+}
+
+.row.breadcrumb {
+    padding: 5px 15px;
+    background: #545454;
+}
+
+.row.stats {
+    padding: 5px 0;
+    min-height: 20px;
+    background: #545454;
+}
+
+.row.stats span {
+    display: block;
+    float: left;
+    width: 25%;
+    text-align: center;
+    color: #aaa;
+}
+
+.row.titlebar {
+    position: relative;
+    display: table;
+    padding: 0;
+    height: 66px;
+}
+
+.titlebar a.inner {
+    position: relative;
+    display: table-cell;
+    min-width: 220px;
+    height: 66px;
+    text-decoration: none;
+    border: none;
+    outline: none;
+    padding: 15px 0 15px 15px;
+    margin: 0;
+}
+
+.titlebar img {
+    display: inline-block;
+    float: left;
+    margin-right: 15px;
+    border: none;
+}
+
+.titlebar .title {
+    display: inline-block;
+    float: left;
+    margin: 14px 0;
+    padding: 0;
+    max-width: 135px;
+    overflow: hidden;
+}
+
+.titlebar .title h1,
+.titlebar .title h2 {
+    display: block;
+    margin: 0;
+    padding: 0;
+    color: white;
+    text-align: left;
+    line-height: 1;
+}
+
+.titlebar .title h1 {
+    font-size: 27px;
+    font-weight: 600;
+    font-style: italic;
+}
+
+.titlebar .title h1 span {
+    color: #ec3737;
+}
+
+.titlebar .title h2 {
+    font-size: 11px;
+    text-transform: uppercase;
+}
+
+.titlebar .menu {
+    position: relative;
+    display: table-cell;
+    width: 100%;
+    padding: 15px;
+    margin: 8px 0;
+    vertical-align: middle;
+    text-align: right;
+}
+
+.titlebar a {
+    display: inline-block;
+    height: 25px;
+    line-height: 25px;
+    padding-left: 5px;
+    color: #aaa;
+    text-decoration: none;
+}
+
+.titlebar a:hover {
+    color: white;
+}
+
+.breadcrumb a {
+    display: inline;
+    color: white;
+    margin-right: 10px;
+    line-height: 1.3;
+    text-decoration: none;
+}
+
+.list {
+    position: relative;
+    border-collapse: collapse;
+    border: none;
+    margin: 0;
+}
+
+.list th,
+.list td {
+    padding: 5px 15px;
+    text-align: left;
+    vertical-align: middle;
+}
+
+.list th {
+    color: #aaa;
+    vertical-align: top;
+    padding-top: 5px;
+    padding-bottom: 5px;
+    font-weight: normal;
+    word-break: none;
+}
+
+.list tr.odd td,
+.list tr.odd th {
+    background-color: #3e3e3e;
+}
+
+.list th a {
+    color: inherit;
+    text-decoration: none;
+}
+
+.list th.center,
+.list td.center {
+    text-align: center !important;
+}
+
+.list th.right,
+.list td.right {
+    text-align: right !important;
+}
+
+.list a {
+    color: white;
+}
+
+.list a:hover {
+    color: #bbb;
+}
+
+.pagination a {
+    padding: 5px;
+    color: #aaa;
+}
+
+.pagination a.active {
+    color: white;
+}
+
+.footer {
+    margin-top: 10px;
+    min-height: 20px;
+}
+
+.footer a {
+    text-decoration: none;
+    color: #444;
+}
+
+.footer a.left {
+    float: left;
+    margin-right: 10px;
+}
+
+.footer a.right {
+    float: right;
+    margin-left: 10px;
+}

public/css/mobile.css

@@ -0,0 +1,91 @@
+@media only screen and (max-width: 600px) {
+
+	body {
+		font-size: 12px;
+		padding: 5px;
+	}
+
+	.wrapper > .row.titlebar {
+    	height: auto;
+    	padding: 5px 10px;
+	}
+
+	.titlebar a.inner {
+		position: relative;
+		float: none;
+		top: 0;
+		left: 0;
+		margin-left: auto;
+		margin-right: auto;
+	}
+
+	.titlebar .menu {
+		float: none;
+		max-width: unset;
+		margin-bottom: 0;
+	}
+
+	.titlebar ul {
+		height: auto;
+    	line-height: 20px;
+		margin: 0;
+		text-align: center;
+	}
+
+	.titlebar ul li {
+		display: inline;
+		float: none;
+		padding: 0 4px;
+		margin: 0;
+		font-size: 13px;
+	}
+
+	.cell {
+		width: auto;
+		float: none;
+	}
+
+	.cell.left .row,
+	.cell.right .row {
+		margin-right: 0;
+		margin-left: 0;
+	}
+
+	.row.spacer {
+		height: 5px;
+	}
+
+	.row.subforum,
+	.row.lastThread {
+		padding-top: 5px;
+		padding-bottom: 5px;
+	}
+
+	.row.lastThread {
+		margin-bottom: 5px;
+	}
+
+	.row.stats {
+		height: 30px;
+	}
+
+	.row.stats span {
+		width: 50%;
+	}
+
+	.row.thread a.left,
+	.row.thread a.right {
+		width: 100%;
+		text-align: left;
+	}
+
+	.post .postContent .quote {
+		width: auto;
+	}
+
+	.post .postContent .youtube {
+		width: auto;
+		height: auto;
+	}
+
+}

public/css/page/events.css

@@ -0,0 +1,14 @@
+.row.event p {
+	display: inline;
+	margin: 0;
+	padding: 0;
+}
+
+.row.event a {
+	color: #fff;
+}
+
+.row.event span {
+	display: block;
+	color: #aaa;
+}

public/css/page/highlights.css

@@ -0,0 +1,45 @@
+body.highlights {
+	max-width: unset;
+	min-height: 250px;
+	padding: 0;
+	margin: 0;
+	text-align: left;
+	background: url('../../img/highlights/bg.jpg');
+	background-position: center;
+}
+
+.details {
+	position: absolute;
+	top: 0;
+	left: 0;
+	bottom: 0;
+	width: 50%;
+	background: rgba(0,0,0,0.5);
+	border-right: solid 1px rgba(255,255,255,0.075);
+	overflow: hidden;
+}
+
+.details .inner {
+	padding: 10px 15px;
+}
+
+h2 {
+	margin: 0;
+	font-weight: normal;
+	font-size: 18px;
+	padding-bottom: 5px;
+	border-bottom: solid 1px #ccc;
+	color: #ccc;
+}
+
+h2 span {
+	float: right;
+}
+
+p {
+	color: #eee;
+}
+
+a {
+	color: #ec3737;
+}

public/css/page/index.css

@@ -0,0 +1,53 @@
+.row.highlights {
+	height: 250px;
+	padding: 0;
+	border-style: inset;
+}
+
+.row.highlights iframe {
+	width: 100%;
+	height: 100%;
+	border: none;
+}
+
+.row.subforums {
+	background: transparent !important;
+	padding: 0;
+	border: none;
+}
+
+.cell {
+	width: 50%;
+	float: left;
+}
+
+.cell.left .row {
+	margin-right: 5px;
+}
+
+.cell.right .row {
+	margin-left: 5px;
+}
+
+.row.subforum h3,
+.row.lastThread h4 {
+	margin: 0;
+	padding: 0;
+	font-weight: normal;
+}
+
+.row.subforum h3 a,
+.row.lastThread h4 a {
+	color: white;
+	text-decoration: none;
+}
+
+.row.subforum span,
+.row.lastThread span {
+	color: #aaa;
+}
+
+.row.lastThread {
+	background: #3a3a3a;
+	margin-bottom: 10px;
+}

public/css/page/login.css

@@ -0,0 +1,49 @@
+.querybox {
+	display: block;
+	max-width: 640px;
+	height: 32px;
+	margin: 0 auto;
+	border: outset 1px #333;
+}
+
+.querybox .inputwrapper,
+.querybox .buttonwrapper {
+	display: block;
+	float: left;
+	width: 80%;
+	height: 100%;
+	background: #bbb;
+}
+
+.querybox .buttonwrapper {
+	width: 20%;
+	background: #666;
+}
+
+.querybox .inputwrapper input,
+.querybox .buttonwrapper input {
+	display: block;
+	margin: 0;
+	padding: 0;
+	line-height: 32px;
+	height: 32px;
+	width: 100%;
+	border: none;
+	outline: none;
+	background: transparent;
+}
+
+.querybox .inputwrapper input {
+	color: #000;
+	text-indent: 10px;
+}
+
+.querybox .buttonwrapper input {
+	border-left: outset 1px #333;
+	color: #bbb;
+}
+
+.row.login.message {
+	text-align: center;
+	color: #aaa;
+}

public/css/page/lovelain.css

@@ -0,0 +1,20 @@
+html {
+	background: black !important;
+	background-image: none !important;
+}
+
+body {
+	margin: 0;
+	padding: 24px 0;
+	max-width: unset;
+	text-align: center;
+}
+
+a {
+	text-decoration: none;
+}
+
+img {
+	border: none;
+	outline: none;
+}

public/css/page/preferences.css

@@ -0,0 +1,3 @@
+.list td input[type=checkbox] {
+	margin: 3px 0;
+}

public/css/page/search.css

@@ -0,0 +1,53 @@
+.querybox {
+	display: block;
+	max-width: 640px;
+	height: 32px;
+	margin: 0 auto;
+	border: outset 1px #333;
+}
+
+.querybox .inputwrapper,
+.querybox .buttonwrapper {
+	display: block;
+	float: left;
+	width: 80%;
+	height: 100%;
+	background: #bbb;
+}
+
+.querybox .buttonwrapper {
+	width: 20%;
+	background: #666;
+}
+
+.querybox .inputwrapper input,
+.querybox .buttonwrapper input {
+	display: block;
+	margin: 0;
+	padding: 0;
+	line-height: 32px;
+	height: 32px;
+	width: 100%;
+	border: none;
+	outline: none;
+	background: transparent;
+}
+
+.querybox .inputwrapper input {
+	color: #000;
+	text-indent: 10px;
+}
+
+.querybox .buttonwrapper input {
+	border-left: outset 1px #333;
+	color: #bbb;
+}
+
+.row.search.message {
+	text-align: center;
+	color: #aaa;
+}
+
+.row.search.results a {
+	color: white;
+}

public/css/page/subforum.css

@@ -0,0 +1,51 @@
+.row.threads {
+	padding: 0;
+}
+
+.row.thread {
+	position: relative;
+	padding-top: 0;
+	padding-bottom: 0;
+	padding-left: 64px;
+	min-height: 64px;
+	border: none;
+}
+
+.row.thread img.icon {
+	position: absolute;
+	top: 10px;
+	left: 10px;
+	width: 44px;
+	height: 44px;
+}
+
+.row.thread a {
+	margin: 1px 0;
+	display: block;
+	color: #aaa;
+	text-decoration: none;
+}
+
+.row.thread a.main {
+	color: #fff;
+	width: 100%;
+	padding-top: 10px;
+}
+
+.row.thread .meta {
+	position: relative;
+	width: 100%;
+	padding-bottom: 10px;
+}
+
+.row.thread a.left,
+.row.thread a.right {
+	display: block;
+	float: left;
+	width: 49.5%;
+}
+
+.row.thread a.right {
+	float: right;
+	text-align: right;
+}

public/css/page/thread.css

@@ -0,0 +1,227 @@
+.row.postInfo {
+    position: relative;
+    height: 32px;
+    padding: 0 !important;
+    overflow: hidden;
+    color: #aaa;
+}
+
+.row.postInfo.show-avatar {
+    height: 45px !important;
+}
+
+.postInfo .userBackground {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 100%;
+    overflow: hidden;
+    background: #444;
+    z-index: 1;
+}
+
+.postInfo .userBackground img {
+    width: 100%;
+    height: auto;
+    margin-top: -40%;
+    opacity: 0.35;
+    filter: blur(5px);
+    filter: Alpha(Opacity=35, Style=0), Blur(Add=true, Dirrection=0, Strength=20);
+}
+
+.postInfo .userForeground {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    z-index: 5;
+}
+
+.postInfo .userForeground img.avatar {
+    float: left;
+    min-height: 32px;
+    max-height: 32px;
+    margin: 6px 15px;
+    margin-right: 10px;
+}
+
+.postInfo .userForeground .username {
+    float: left;
+    margin: 6px 15px;
+    color: white;
+    text-decoration: none;
+}
+
+.postInfo .userForeground .date {
+    color: #aaa;
+    text-decoration: none;
+    float: right;
+    margin: 6px 15px;
+    margin-right: 15px;
+}
+
+.postInfo.show-avatar .userForeground .username,
+.postInfo.show-avatar .userForeground .date {
+    margin-top: 12px;
+    margin-bottom: 12px;
+    margin-left: 0;
+}
+
+.postInfo.show-background .userForeground .username,
+.postInfo.show-background .userForeground .date {
+    color: #fff;
+}
+
+.postInfo.banned .userForeground .username,
+.postInfo.banned .userForeground .date {
+    color: #ff8f8f;
+}
+
+.post .postContent .marginBreak {
+    height: 1px;
+    clear: both;
+}
+
+.post .postContent a {
+    color: white;
+    word-wrap: break-word;
+}
+
+.post .postContent a.smart {
+    display: block;
+    width: 100%;
+    max-width: 480px;
+    margin: 5px auto;
+    background: #3e3e3e;
+    border: outset 1px #666;
+    text-decoration: none;
+}
+
+.post .postContent a.smart .title,
+.post .postContent a.smart .desc {
+    display: block;
+    margin: 0;
+    padding: 5px 15px;
+    color: #aaa;
+    background-color: #383838;
+    border-bottom: outset 1px #666;
+}
+
+.post .postContent a.smart .desc {
+    color: #fff;
+    border-bottom: none;
+    border-top: outset 1px #666;
+}
+
+.post .postContent img {
+    display: inline;
+    max-width: 100%;
+    outline: none;
+    border: none;
+    text-decoration: none;
+}
+
+.post .postContent a.image {
+    display: block;
+    text-align: center;
+    text-decoration: none;
+    color: white;
+}
+
+.post .postContent .quote {
+    width: 100%;
+    margin: 5px 0;
+    background: #3e3e3e;
+    border: outset 1px #666;
+}
+
+.post .postContent .quote a.user {
+    display: block;
+    margin: 0;
+    padding: 5px 15px;
+    color: #aaa;
+    background-color: #383838;
+    border-bottom: outset 1px #666;
+    text-decoration: none;
+}
+
+.post .postContent .quote .postContent {
+    padding: 0 15px;
+}
+
+.post .postContent .blockquote {
+    margin: 5px 0;
+    padding: 10px 15px;
+    background: #3e3e3e;
+    border: outset 1px #666;
+}
+
+.post .postContent .youtube {
+    position: relative;
+    display: block;
+    width: 480px;
+    height: 360px;
+    margin: 0 auto;
+    background: black;
+}
+
+.post .postContent .youtube h4 {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    margin: 0;
+    padding: 10px;
+    text-indent: 0;
+    color: white;
+    background: url('../../img/translucent.gif');
+}
+
+.post .postContent .youtube i {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 64px;
+    height: 45px;
+    margin-top: -23px;
+    margin-left: -32px;
+    background: url('../../img/youtube-play.gif');
+}
+
+.post .ratings td {
+    padding: 0;
+    padding-right: 5px;
+}
+
+.row.banInfo {
+    min-height: 32px;
+    padding-left: 62px;
+    color: #ff8f8f;
+    background-color: #854540 !important;
+    border-color: #bf6c66 !important;
+    background-image: url('/shared/img/ban-icon.gif');
+    background-position: 15px center;
+    background-repeat: no-repeat;
+}
+
+.row.banInfo p {
+    margin: 0;
+}
+
+.row.banInfo span {
+    color: #ffc7c7;
+}
+
+.row.reply textarea {
+    position: relative;
+    width: 100%;
+    min-height: 200px;
+    outline: none;
+    resize: none;
+}
+
+.row.reply .buttons {
+    margin-top: 10px;
+    text-align: center;
+}

public/css/page/user.css

@@ -0,0 +1,57 @@
+.row.userInfo {
+	position: relative;
+	height: 45px;
+	padding: 0 !important;
+	overflow: hidden;
+	color: #aaa;
+}
+
+.row.userInfo .userBackground {
+	position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 100%;
+    overflow: hidden;
+    background: #444;
+    z-index: 1;
+}
+
+.row.userInfo .userBackground img {
+    width: 100%;
+    height: auto;
+    margin-top: -40%;
+    opacity: 0.35;
+    filter: blur(5px);
+    filter: Alpha(Opacity=35, Style=0), Blur(Add=true, Dirrection=0, Strength=20);
+}
+
+.row.userInfo .userForeground {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    z-index: 5;
+}
+
+.row.userInfo .userForeground img.avatar {
+    float: left;
+    min-height: 32px;
+    max-height: 32px;
+    margin: 6px 15px;
+    margin-right: 10px;
+}
+
+.row.userInfo .userForeground .username {
+    float: left;
+    margin: 12px 15px 12px 0;
+    color: white;
+    text-decoration: none;
+}
+
+.row.userInfo .userForeground .link {
+	float: right;
+	margin: 12px 15px 12px 0;
+    color: white;
+    text-decoration: none;
+}

public/css/theme/light.css

@@ -0,0 +1,207 @@
+html {
+	color: #000000;
+	background-color: #cfcfcf;
+}
+
+.row {
+	background-color: #eee;
+	border-color: #969696;
+}
+
+.row.odd {
+    background-color: #ddd;
+}
+
+.row.breadcrumb {
+    background: #ddd;
+    border-top-color: #fff;
+}
+
+.row.stats {
+    background: #ddd;
+}
+
+.row.stats span {
+	color: #222;
+}
+
+.titlebar .title h1,
+.titlebar .title h2 {
+    color: #212320;
+}
+
+.titlebar {
+	border-bottom-color: #ddd;
+}
+
+.titlebar ul li a {
+    color: #222;
+    text-decoration: none;
+}
+
+.titlebar ul li a:hover {
+    color: #666;
+}
+
+.breadcrumb a {
+    color: #222;
+}
+
+.row.highlights {
+    border-color: #bbb;
+}
+
+body.highlights .details {
+    background: rgba(255,255,255,0.85);
+    border-right-color: #fff;
+}
+
+body.highlights h2 {
+    color: #111;
+    border-bottom-color: #333;
+}
+
+body.highlights p {
+    color: #111;
+}
+
+.row.subforum h3 a,
+.row.lastThread h4 a {
+    color: #222;
+}
+
+.row.subforum span,
+.row.lastThread span {
+    color: #444;
+}
+
+.row.subforum {
+    border-bottom-color: #eee;
+}
+
+.row.lastThread {
+    background: #ddd;
+    border-top-color: #fff;
+}
+
+.list th {
+    color: #222;
+}
+
+.list tr.odd td,
+.list tr.odd th {
+    background-color: #ddd;
+}
+
+.list a {
+    color: #222;
+}
+
+.list a:hover {
+    color: #666;
+}
+
+.pagination a {
+    color: #222;
+}
+
+.pagination a.active {
+    color: #666;
+}
+
+.row.thread a {
+    color: #000;
+}
+
+.row.thread a.main {
+    color: #222;
+}
+
+.post {
+	background: #eee;
+}
+
+.row.postInfo,
+.postInfo .userForeground .date {
+    color: #eee;
+}
+
+.row.postInfo.hide-backgrounds {
+    background-color: #eee;
+    border-bottom-color: #fff;
+}
+
+.row.postInfo.hide-backgrounds,
+.row.postInfo.hide-backgrounds .userForeground .date {
+    color: #333;
+}
+
+.post .postContent a {
+    color: #666;
+}
+
+.post .postContent a.smart {
+    background: #ddd;
+    border-color: #ccc;
+}
+
+.post .postContent a.smart .title,
+.post .postContent a.smart .desc {
+    background-color: #ddd;
+    border-color: #eee;
+    color: #222;
+}
+
+.post .postContent a.smart .desc {
+    color: #000;
+}
+
+.post .postContent .quote {
+    background: #ddd;
+    border-color: #ccc;
+}
+
+.post .postContent .quote a.user {
+    background-color: #ddd;
+    border-color: #eee;
+    color: #222;
+}
+
+.post .postContent .blockquote {
+    background-color: #ddd;
+    border-color: #ccc;
+}
+
+.querybox {
+	border-color: #ccc;
+}
+
+.querybox .inputwrapper,
+.querybox .buttonwrapper {
+	background: #eee;
+}
+
+.querybox .buttonwrapper input {
+	border-left-color: #ccc;
+	color: #222;
+}
+
+.row.search.message {
+	color: #222;
+}
+
+.row.search.results a {
+	color: #222;
+}
+
+.row.event a {
+    color: #666;
+}
+
+.row.event span {
+    color: #444;
+}
+
+.footer a {
+    color: #999;
+}

public/css/theme/oldpunch.css

@@ -0,0 +1,256 @@
+html {
+	color: #000;
+    background-image: url(../../img/theme/oldpunch/bg.png);
+	background-color: #bbb;
+}
+
+.row {
+	background-color: #fff;
+	border-color: #888;
+}
+
+.row.odd {
+    background-color: #eee;
+}
+
+.row.breadcrumb {
+    background: #f2f2f2;
+    border-top-color: #fff;
+}
+
+.row.stats {
+    background: #14f;
+}
+
+.row.stats span {
+	color: #fff;
+}
+
+.row.titlebar {
+    padding: 0;
+    padding-right: 15px;
+    height: 88px;
+    background-image: url(../../img/theme/oldpunch/navbg.gif);
+    background-repeat: repeat-x;
+    border-bottom-color: #eee;
+}
+
+.row.titlebar a.inner {
+    width: 240px;
+    height: 88px;
+    top: 0;
+    left: 0;
+}
+
+.row.titlebar img {
+    margin-right: 0;
+}
+
+.row.titlebar .title {
+    margin: 26px 0;
+}
+
+.row.titlebar .title h1,
+.row.titlebar .title h2 {
+    color: #333;
+}
+
+.titlebar .menu {
+    margin-top: 19px;
+    margin-bottom: 19px;
+}
+
+.titlebar ul li a {
+    color: #333;
+    font-size: 12px;
+    text-decoration: none;
+}
+
+.titlebar ul li a:hover {
+    color: #14f;
+    text-decoration: underline;
+}
+
+.breadcrumb a {
+    color: #333;
+}
+
+.row.highlights {
+    border-color: #bbb;
+}
+
+body.highlights .details {
+    background: #eee;
+    border-right-color: #fff;
+}
+
+body.highlights h2 {
+    color: #111;
+    border-bottom-color: #333;
+}
+
+body.highlights p {
+    color: #111;
+}
+
+.row.subforum {
+    border-bottom-color: #eee;
+}
+
+.row.lastThread {
+    border-top-color: #fff;
+}
+
+.row.subforum h3 a,
+.row.lastThread h4 a {
+    color: #333;
+}
+
+.row.subforum span,
+.row.lastThread span {
+    color: #666;
+}
+
+.row.lastThread {
+    background: #eee;
+}
+
+.list th {
+    background-color: #26f;
+    color: #fff;
+}
+
+.list tr.odd td,
+.list tr.odd th {
+    background-color: #f5f5f5;
+}
+
+.list a {
+    color: #333;
+}
+
+.list a:hover {
+    color: #14f;
+}
+
+.pagination a {
+    color: #417394;
+}
+
+.pagination a.active {
+    color: #444;
+}
+
+.row.thread a {
+    color: #666;
+}
+
+.row.thread a.main {
+    color: #222;
+}
+
+.row.postInfo {
+    border-bottom-color: #eee;
+}
+
+.row.postInfo.hide-backgrounds {
+    background-color: #26f;
+}
+
+.row.postInfo {
+    color: #fff;
+}
+
+.row.postInfo .userForeground .date {
+    color: #fff;
+}
+
+.row.post {
+	background: #fff;
+    border-top-color: #fff;
+}
+
+.post .postContent .quote {
+    background: #bdf;
+    border-color: #888;
+}
+
+.post .postContent .quote a.user {
+    background-color: #ace;
+    border: none;
+    color: #05a;
+}
+
+.post .postContent .blockquote {
+    background-color: #bdf;
+    border: none;
+}
+
+.post .postContent a {
+    color: #05a;
+}
+
+.post .postContent a.smart {
+    background: #bdf;
+    border-color: #888;
+}
+
+.post .postContent a.smart .title,
+.post .postContent a.smart .desc {
+    background-color: #bdf;
+    border-color: #888;
+    color: #05a;
+}
+
+.post .postContent a.smart .desc {
+    color: #000;
+}
+
+.querybox {
+	border-color: #ccc;
+}
+
+.querybox .inputwrapper,
+.querybox .buttonwrapper {
+	background: #eee;
+}
+
+.querybox .buttonwrapper input {
+	border-left-color: #ccc;
+	color: #333;
+}
+
+.row.search.message {
+	color: #333;
+}
+
+.row.search.results a {
+	color: #333;
+}
+
+.row.event a {
+    color: #05a;
+}
+
+.footer a {
+    color: #666;
+}
+
+@media only screen and (max-width: 635px) {
+    .titlebar {
+        padding: 0 !important;
+    }
+    .titlebar a.inner {
+        width: auto !important;
+        margin-top: 0 !important;
+        margin-bottom: 0 !important;
+    }
+    .titlebar .menu {
+        padding: 10px 0;
+        margin-top: 0 !important;
+        margin-right: 0 !important;
+        margin-bottom: 0 !important;
+        background-color: #f5f5f5;
+        border-top: solid 1px #ddd;
+    }
+}

public/css/theme/steam.css

@@ -0,0 +1,161 @@
+html {
+	color: #9eaa96;
+	background-color: #3e4637;
+}
+
+.row {
+	background-color: #4c5844;
+	border-color: #5c6d4e;
+}
+
+.row.odd {
+    background-color: #3e4838;
+}
+
+.row.breadcrumb {
+    background: #3e4838;
+    border-top-color: #4a583f;
+}
+
+.row.stats {
+    background: #3e4838;
+}
+
+.row.stats span {
+	color: #9eaa96;
+}
+
+.titlebar .title h1,
+.titlebar .title h2 {
+    color: #16231a;
+}
+
+.titlebar .title h1 span {
+	color: #313e34;
+}
+
+.titlebar {
+	border-bottom-color: #7b9069;
+}
+
+.titlebar ul li a {
+    color: #9eaa96;
+    text-decoration: none;
+}
+
+.titlebar ul li a:hover {
+    color: #fff;
+}
+
+.breadcrumb a {
+    color: #9eaa96;
+}
+
+.row.subforum h3 a,
+.row.lastThread h4 a {
+    color: #fff;
+}
+
+.row.subforum span,
+.row.lastThread span {
+    color: #9eaa96;
+}
+
+.row.lastThread {
+    background: #3e4838;
+}
+
+.list th {
+    color: #9eaa96;
+}
+
+.list tr.odd td,
+.list tr.odd th {
+    background-color: #3e4838;
+}
+
+.list a {
+    color: #9eaa96;
+}
+
+.list a:hover {
+    color: #fff;
+}
+
+.pagination a {
+    color: #9eaa96;
+}
+
+.pagination a.active {
+    color: #fff;
+}
+
+.row.thread a {
+    color: #9eaa96;
+}
+
+.row.thread a.main {
+    color: #fff;
+}
+
+.post {
+	background: #4c5844;
+}
+
+.post .postContent a.smart {
+    background: #44503e;
+    border-color: #58694e;
+}
+
+.post .postContent a.smart .title,
+.post .postContent a.smart .desc {
+    background-color: #44503e;
+    border-color: #58694e;
+    color: #9eaa96;
+}
+
+.post .postContent a.smart .desc {
+    color: #fff;
+}
+
+.post .postContent .quote {
+    background: #44503e;
+    border-color: #58694e;
+}
+
+.post .postContent .quote a.user {
+    background-color: #44503e;
+    border-color: #58694e;
+    color: #9eaa96;
+}
+
+.post .postContent .blockquote {
+    background-color: #44503e;
+    border-color: #58694e;
+}
+
+.querybox {
+	border-color: #ccc;
+}
+
+.querybox .inputwrapper,
+.querybox .buttonwrapper {
+	background: #eee;
+}
+
+.querybox .buttonwrapper input {
+	border-left-color: #ccc;
+	color: #9eaa96;
+}
+
+.row.search.message {
+	color: #9eaa96;
+}
+
+.row.search.results a {
+	color: #9eaa96;
+}
+
+.footer a {
+    color: #526542;
+}

public/css/theme/yotsuba.css

@@ -0,0 +1,162 @@
+html {
+	color: #9c0000;
+	background-color: #ffffee;
+}
+
+.row {
+	background-color: #f0e0d6;
+	border-color: #d9bfb7 !important;
+}
+
+.row.odd {
+	background: #ead4ce;
+}
+
+.row.breadcrumb,
+.row.pagination,
+.row.stats {
+	background: #ead4ce !important;
+}
+
+.row.stats span {
+	color: #9c0000 !important;
+}
+
+.titlebar .title h1,
+.titlebar .title h2 {
+	color: #9c0000;
+}
+
+.titlebar ul li a {
+	color: #9c0000;
+}
+
+.titlebar ul li a:hover {
+	color: purple;
+}
+
+.breadcrumb a,
+.pagination a {
+	color: navy;
+}
+
+.pagination a.active {
+	color: red;
+}
+
+
+.row.subforum h3 a,
+.row.lastThread h4 a {
+    color: #9c0000;
+}
+
+.row.subforum span,
+.row.lastThread span {
+    color: #984444;
+}
+
+.row.lastThread {
+    background: #ead4ce;
+}
+
+.list tr.odd td,
+.list tr.odd th {
+	background: #ead4ce;
+}
+
+.list th {
+	color: #9c0000;
+}
+
+.list a {
+	color: navy;
+}
+
+.list a:hover {
+	color: purple;
+}
+
+.row.thread a {
+    color: #9c0000;
+}
+
+.row.thread a.main {
+    color: navy;
+}
+
+.post .postInfo .username {
+	color: #117743;
+}
+
+.post .postInfo .date {
+	color: #9c0000;
+}
+
+.post .postContent a {
+	color: navy;
+}
+
+.post .postContent a.smart {
+    background: #f2e5dc;
+    border-color: #d9bfb7;
+}
+
+.post .postContent a.smart .title,
+.post .postContent a.smart .desc {
+    background-color: #f2e5dc;
+    border-color: #d9bfb7;
+    color: #117743;
+}
+
+.post .postContent a.smart .desc {
+    color: #9c0000;
+}
+
+.post .postContent .quote {
+	background: #f2e5dc !important;
+	border-color: #d9bfb7 !important;
+}
+
+.post .postContent .quote a.user {
+	background: #f0e0d6 !important;
+	color: #117743 !important;
+	border-color: transparent !important;
+}
+
+pre {
+	color: black;
+}
+
+.footer a {
+    color: #aaa !important;
+}
+
+.querybox {
+	border-color: #ccc;
+}
+
+.querybox .inputwrapper,
+.querybox .buttonwrapper {
+	background: #eee;
+}
+
+.querybox .buttonwrapper input {
+	border-left-color: #ccc;
+	color: #222;
+}
+
+.row.search.message {
+	color: #222;
+}
+
+.row.search.results a {
+	color: navy;
+}
+
+.row.event a {
+	color: navy;
+}
+
+.row.event span {
+	color: #984444;
+}