Add new styling (thanks to bootswatch.com)

This commit is contained in:
Aldo Cortesi 2012-07-29 13:55:59 +12:00
parent d8c53cbc57
commit 483e8182ff
7 changed files with 430 additions and 21 deletions

171
.less/bootswatch.less Normal file
View File

@ -0,0 +1,171 @@
// Bootswatch.less
// Swatch: Journal
// Version: 2.0.4
// -----------------------------------------------------
// TYPOGRAPHY
// -----------------------------------------------------
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,700');
h1, h2, h3, h4, h5, h6, .navbar .brand {
font-weight: 700;
}
// SCAFFOLDING
// -----------------------------------------------------
a {
text-decoration: none;
}
.nav a, .navbar .brand, .subnav a, a.btn, .dropdown-menu a {
text-decoration: none;
}
// NAVBAR
// -----------------------------------------------------
.navbar {
.navbar-inner {
@shadow: 0 2px 4px rgba(0,0,0,.25), inset 0 -1px 0 rgba(0,0,0,.1);
.box-shadow(@shadow);
border-top: 1px solid #E5E5E5;
.border-radius(0);
}
.brand {
text-shadow: none;
&:hover {
background-color: #EEEEEE;
}
}
.navbar-text {
line-height: 68px;
}
.nav > li > a {
text-shadow: none;
}
.dropdown-menu {
.border-radius(0);
}
.nav li.dropdown.active > .dropdown-toggle,
.nav li.dropdown.active > .dropdown-toggle:hover,
.nav li.dropdown.open > .dropdown-toggle,
.nav li.dropdown.active.open > .dropdown-toggle,
.nav li.dropdown.active.open > .dropdown-toggle:hover {
background-color: @grayLighter;
color: @linkColor;
}
.nav li.dropdown .dropdown-toggle .caret,
.nav .open .caret,
.nav .open .dropdown-toggle:hover .caret {
border-top-color: @black;
opacity: 1;
}
.nav-collapse.in .nav li > a:hover {
background-color: @grayLighter;
}
.nav-collapse .nav li > a {
color: @textColor;
text-decoration: none;
font-weight: normal;
}
.nav-collapse .navbar-form,
.nav-collapse .navbar-search {
border-color: transparent;
}
.navbar-search .search-query,
.navbar-search .search-query:hover {
border: 1px solid @grayLighter;
color: @textColor;
.placeholder(@gray);
}
}
div.subnav {
background-color: @bodyBackground;
background-image: none;
@shadow: 0 1px 2px rgba(0,0,0,.25);
.box-shadow(@shadow);
.border-radius(0);
&.subnav-fixed {
top: @navbarHeight;
}
.nav > li > a:hover,
.nav > .active > a,
.nav > .active > a:hover {
color: @textColor;
text-decoration: none;
font-weight: normal;
}
.nav > li:first-child > a,
.nav > li:first-child > a:hover {
.border-radius(0);
}
}
// BUTTONS
// -----------------------------------------------------
.btn-primary {
.buttonBackground(lighten(@linkColor, 5%), @linkColor);
}
[class^="icon-"], [class*=" icon-"] {
vertical-align: -2px;
}
// MODALS
// -----------------------------------------------------
.modal {
.border-radius(0px);
background: @bodyBackground;
}
.modal-header {
border-bottom: none;
}
.modal-header .close {
text-decoration: none;
}
.modal-footer {
background: transparent;
.box-shadow(none);
border-top: none;
}
// MISC
// -----------------------------------------------------
code, pre, pre.prettyprint, .well {
background-color: @grayLighter;
}
.hero-unit {
.box-shadow(inset 0 1px 1px rgba(0,0,0,.05));
border: 1px solid rgba(0,0,0,.05);
.border-radius(0);
}
.table-bordered, .well, .prettyprint {
.border-radius(0);
}

208
.less/variables.less Normal file
View File

@ -0,0 +1,208 @@
// Variables.less
// Variables to customize the look and feel of Bootstrap
// Swatch: Journal
// Version: 2.0.4
// -----------------------------------------------------
// GLOBAL VALUES
// --------------------------------------------------
// Grays
// -------------------------
@black: #000;
@grayDarker: #222;
@grayDark: #333;
@gray: #888;
@grayLight: #999;
@grayLighter: #eee;
@white: #fff;
// Accent colors
// -------------------------
@blue: #4380D3;
@blueDark: darken(@blue, 15%);
@green: #22B24C;
@red: #C00;
@yellow: #FCFADB;
@orange: #FF7F00;
@pink: #CC99CC;
@purple: #7a43b6;
@tan: #FFCA73;
// Scaffolding
// -------------------------
@bodyBackground: #FCFBFD;
@textColor: @grayDarker;
// Links
// -------------------------
@linkColor: @blue;
@linkColorHover: @red;
// Typography
// -------------------------
@sansFontFamily: 'Open Sans', "Helvetica Neue", Helvetica, Arial, sans-serif;
@serifFontFamily: Georgia, "Times New Roman", Times, serif;
@monoFontFamily: Menlo, Monaco, Consolas, "Courier New", monospace;
@baseFontSize: 14px;
@baseFontFamily: @sansFontFamily;
@baseLineHeight: 18px;
@altFontFamily: @serifFontFamily;
@headingsFontFamily: inherit; // empty to use BS default, @baseFontFamily
@headingsFontWeight: bold; // instead of browser default, bold
@headingsColor: inherit; // empty to use BS default, @textColor
// Tables
// -------------------------
@tableBackground: transparent; // overall background-color
@tableBackgroundAccent: @grayLighter; // for striping
@tableBackgroundHover: #f5f5f5; // for hover
@tableBorder: #ddd; // table and cell border
// Buttons
// -------------------------
@btnBackground: @white;
@btnBackgroundHighlight: darken(@white, 10%);
@btnBorder: darken(@white, 20%);
@btnPrimaryBackground: @linkColor;
@btnPrimaryBackgroundHighlight: spin(@btnPrimaryBackground, 15%);
@btnInfoBackground: #5bc0de;
@btnInfoBackgroundHighlight: #2f96b4;
@btnSuccessBackground: #62c462;
@btnSuccessBackgroundHighlight: #51a351;
@btnWarningBackground: lighten(@orange, 10%);
@btnWarningBackgroundHighlight: @orange;
@btnDangerBackground: #ee5f5b;
@btnDangerBackgroundHighlight: #bd362f;
@btnInverseBackground: @linkColor;
@btnInverseBackgroundHighlight: darken(@linkColor, 5%);
// Forms
// -------------------------
@inputBackground: @white;
@inputBorder: #ccc;
@inputBorderRadius: 3px;
@inputDisabledBackground: @grayLighter;
@formActionsBackground: @grayLighter;
// Dropdowns
// -------------------------
@dropdownBackground: @bodyBackground;
@dropdownBorder: rgba(0,0,0,.2);
@dropdownLinkColor: @textColor;
@dropdownLinkColorHover: @textColor;
@dropdownLinkBackgroundHover: #eee;
@dropdownDividerTop: #e5e5e5;
@dropdownDividerBottom: @white;
// COMPONENT VARIABLES
// --------------------------------------------------
// Z-index master list
// -------------------------
// Used for a bird's eye view of components dependent on the z-axis
// Try to avoid customizing these :)
@zindexDropdown: 1000;
@zindexPopover: 1010;
@zindexTooltip: 1020;
@zindexFixedNavbar: 1030;
@zindexModalBackdrop: 1040;
@zindexModal: 1050;
// Sprite icons path
// -------------------------
@iconSpritePath: "../img/glyphicons-halflings.png";
@iconWhiteSpritePath: "../img/glyphicons-halflings-white.png";
// Input placeholder text color
// -------------------------
@placeholderText: @grayLight;
// Hr border color
// -------------------------
@hrBorder: @grayLighter;
// Navbar
// -------------------------
@navbarHeight: 50px;
@navbarBackground: @bodyBackground;
@navbarBackgroundHighlight: @bodyBackground;
@navbarText: @textColor;
@navbarLinkColor: @linkColor;
@navbarLinkColorHover: @linkColor;
@navbarLinkColorActive: @navbarLinkColorHover;
@navbarLinkBackgroundHover: @grayLighter;
@navbarLinkBackgroundActive: @grayLighter;
@navbarSearchBackground: lighten(@navbarBackground, 25%);
@navbarSearchBackgroundFocus: @white;
@navbarSearchBorder: darken(@navbarSearchBackground, 30%);
@navbarSearchPlaceholderColor: #ccc;
@navbarBrandColor: @blue;
// Hero unit
// -------------------------
@heroUnitBackground: @grayLighter;
@heroUnitHeadingColor: inherit;
@heroUnitLeadColor: inherit;
// Form states and alerts
// -------------------------
@warningText: #c09853;
@warningBackground: #fcf8e3;
@warningBorder: darken(spin(@warningBackground, -10), 3%);
@errorText: #b94a48;
@errorBackground: #f2dede;
@errorBorder: darken(spin(@errorBackground, -10), 3%);
@successText: #468847;
@successBackground: #dff0d8;
@successBorder: darken(spin(@successBackground, -10), 5%);
@infoText: #3a87ad;
@infoBackground: #d9edf7;
@infoBorder: darken(spin(@infoBackground, -10), 7%);
// GRID
// --------------------------------------------------
// Default 940px grid
// -------------------------
@gridColumns: 12;
@gridColumnWidth: 60px;
@gridGutterWidth: 20px;
@gridRowWidth: (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));
// Fluid grid
// -------------------------
@fluidGridColumnWidth: 6.382978723%;
@fluidGridGutterWidth: 2.127659574%;

File diff suppressed because one or more lines are too long

View File

@ -1,4 +1,21 @@
.fronttable {
}
.bigtitle {
font-weight: bold;
font-size: 50px;
line-height: 55px;
text-align: center;
display: table;
height: 300px;
}
.bigtitle>div {
display: table-cell;
vertical-align: middle;
}
section {
margin-top: 50px;
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 106 KiB

View File

@ -26,6 +26,7 @@
</head>
<body>
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
@ -69,8 +70,8 @@
</div>
<hr>
<footer>
<p>&copy; Aldo Cortesi 2012</p>
<p class="pull-right">[served by pathod]</p>
<span>&copy; Aldo Cortesi 2012</span>
<span class="pull-right">[served by pathod]</span>
</footer>
</div>
</body>

View File

@ -1,20 +1,44 @@
{% extends "frame.html" %}
{% block body %}
<div class="hero-unit">
<h1>Testing and torturing HTTP clients and servers.</h1>
<div class="row">
<div class="span6 bigtitle">
<div>
<img src="/static/torture.png">
</div>
</div>
<div class="span6 bigtitle">
<div>Tormenting HTTP clients and servers</div>
</div>
</div>
<br>
<div class="row">
<div class="span6">
<div class="well">
<h1> <a href="/docs/pathod">pathod</a> </h1>
A pathological web daemon.
<p>A pathological web daemon.</p>
{% include "response_previewform.html" %}
</div>
</div>
<div class="span6">
<div class="well">
<h1> <a href="/docs/pathoc">pathoc</a> </h1>
<p>A perverse HTTP client.</p>
{% include "request_previewform.html" %}
</div>
</div>
</div>
<div class="row">
<div class="span6">
<div class="well">
<h1>public pathod server</h1>
<p>http://p.pathod.org/<input
@ -30,6 +54,7 @@
<p>Please use responsibly. There are some restrictions on the
public server.</p>
<script>
$(function(){
$("#submitspec").click(function(){
@ -40,23 +65,10 @@
</div>
</div>
<div class="span6">
<div class="well">
<h1> <a href="/docs/pathoc">pathoc</a> </h1>
A perverse HTTP client.
{% include "request_previewform.html" %}
</div>
</div>
</div>
<div class="row">
<div class="span12">
<div class="well">
<h1> <a href="/docs/test">libpathod.test</a> </h1>
Using pathod and pathoc in your unit tests.
<p>Using pathod and pathoc in your unit tests.</p>
</div>
</div>