Initial commit

* Skeleton layout
This commit is contained in:
squeek 2014-10-21 23:58:20 -07:00
commit 58a5f76b2c
3 changed files with 345 additions and 0 deletions

200
css/style.css Normal file
View file

@ -0,0 +1,200 @@
/*
Fluid Baseline Grid v1.0.0
Designed & Built by Josh Hopkins and 40 Horse, http://40horse.com
Licensed under Unlicense, http://unlicense.org/
Base stylesheet with CSS normalization, typographic baseline grid and progressive responsiveness
*/
/* HTML5 DECLARATIONS */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, dialog {display: block}
audio[controls],canvas,video {display: inline-block; *display: inline; zoom: 1}
/* BASE */
html {height: 100%; font-size: 100%; overflow-y: scroll; -webkit-text-size-adjust: 100%} /* Force scrollbar in non-IE and Remove iOS text size adjust without disabling user zoom */
body {margin: 0; min-height: 100%; -webkit-font-smoothing:antialiased; font-smoothing:antialiased; text-rendering:optimizeLegibility;} /* Improve default text rendering, handling of kerning pairs and ligatures */
/* DEFAULT FONT SETTINGS */
/* 16px base font size with 150% (24px) friendly, unitless line height and margin for vertical rhythm */
/* Font-size percentage is based on 16px browser default size */
body, button, input, select, textarea {font: 100%/1.5 Georgia,Palatino,"Palatino Linotype",Times,"Times New Roman",serif; *font-size: 1em; color: #333} /* IE7 and older can't resize px based text */
p, blockquote, q, pre, address, hr, code, samp, dl, ol, ul, form, table, fieldset, menu, img {margin: 0 0 1.5em; padding: 0}
/* TYPOGRAPHY */
/* Composed to a scale of 12px, 14px, 16px, 18px, 21px, 24px, 36px, 48px, 60px and 72px */
h1, h2, h3, h4, h5, h6 {font-family:Futura, "Century Gothic", AppleGothic, sans-serif;color:#222;text-shadow:1px 1px 1px rgba(0,0,0,.10)}
h1 {margin: 0; font-size: 3.75em; line-height: 1.2em; margin-bottom: 0.4em} /* 60px / 72px */
h2 {margin: 0; font-size: 3em; line-height: 1em; margin-bottom: 0.5em} /* 48px / 48px */
h3 {margin: 0; font-size: 2.25em; line-height: 1.3333333333333333333333333333333em; margin-bottom: 0.6667em} /* 36px / 48px */
h4 {margin: 0; font-size: 1.5em; line-height: 1em; margin-bottom: 1em} /* 24px / 24px */
h5 {margin: 0; font-size: 1.3125em; line-height: 1.1428571428571428571428571428571em; margin-bottom: 1.1428571428571428571428571428571em} /* 21px / 24px */
h6 {margin: 0; font-size: 1.125em; line-height: 1.3333333333333333333333333333333em; margin-bottom: 1.3333333333333333333333333333333em} /* 18px / 24px */
p, ul, blockquote, pre, td, th, label {margin: 0; font-size: 1em; line-height: 1.5em; margin-bottom: 1.5em} /* 16px / 24px */
small, p.small {margin: 0; font-size: 0.875em; line-height: 1.7142857142857142857142857142857em; margin-bottom: 1.7142857142857142857142857142857em} /* 14px / 24px */
/* CODE */
pre {white-space: pre; white-space: pre-wrap; word-wrap: break-word} /* Allow line wrapping of 'pre' */
pre, code, kbd, samp {font-size: 1em; line-height: 1.5em; margin-bottom: 1.5em; font-family: Menlo, Consolas, 'DejaVu Sans Mono', Monaco, monospace}
/* TABLES */
table {border-collapse: collapse; border-spacing: 0; margin-bottom: 1.5em}
th {text-align: left}
tr, th, td {padding-right: 1.5em; border-bottom: 0 solid #333}
/* FORMS */
form {margin: 0}
fieldset {border: 0;padding: 0}
textarea {overflow: auto; vertical-align: top}
legend {*margin-left: -.75em}
button, input, select, textarea {vertical-align: baseline; *vertical-align: middle} /* IE7 and older */
button, input {line-height: normal; *overflow: visible}
button, input[type="button"], input[type="reset"], input[type="submit"] {cursor: pointer;-webkit-appearance: button}
input[type="checkbox"], input[type="radio"] {box-sizing: border-box}
input[type="search"] {-webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box}
input[type="search"]::-webkit-search-decoration {-webkit-appearance: none}
button::-moz-focus-inner, input::-moz-focus-inner {border: 0; padding: 0}
/* QUOTES */
blockquote, q {quotes: none}
blockquote:before, blockquote:after, q:before, q:after {content: ''; content: none}
blockquote, q, cite {font-style: italic}
blockquote {padding-left: 1.5em; border-left: 3px solid #ccc}
blockquote > p {padding: 0}
/* LISTS */
ul, ol {list-style-position: inside; padding: 0}
li ul, li ol {margin: 0 1.5em}
dl dd {margin-left: 1.5em}
dt {font-family:Futura, "Century Gothic", AppleGothic, sans-serif}
/* HYPERLINKS */
a {text-decoration: none; color:#c47529}
a:hover {text-decoration: underline}
a:focus {outline: thin dotted}
a:hover, a:active {outline: none} /* Better CSS Outline Suppression */
/* MEDIA */
figure {margin: 0}
img, object, embed, video {max-width: 100%; _width: 100%} /* Fluid images */
img {border: 0; -ms-interpolation-mode: bicubic} /* Improve IE's resizing of images */
svg:not(:root) {overflow: hidden} /* Correct IE9 overflow */
/* ABBREVIATION */
abbr[title], dfn[title] {border-bottom: 1px dotted #333; cursor: help}
/* MARKED/INSERTED/DELETED AND SELECTED TEXT */
ins, mark {text-decoration: none}
mark {background: #c47529}
ins {background: #d49855}
del {text-decoration: line-through}
::-moz-selection {background: #c47529; color: #fff; text-shadow: none} /* selected text */
::selection {background: #c47529; color: #fff; text-shadow: none} /* selected text */
/* OTHERS */
strong, b, dt { font-weight: bold}
dfn {font-style: italic}
var, address {font-style: normal}
sub, sup {font-size: 75%; line-height: 0; position: relative; vertical-align: baseline} /* Position 'sub' and 'sup' without affecting line-height */
sup {top: -0.5em} /* Move superscripted text up */
sub {bottom: -0.25em} /* Move subscripted text down */
span.amp{font-family:Adobe Caslon Pro,Baskerville,"Goudy Old Style","Palatino","Palatino Linotype","Book Antiqua",Georgia,"Times New Roman",Times,serif;font-style:italic;font-size:110%;line-height:0;position:relative;vertical-align:baseline} /* Best available ampersand */
/* MICRO CLEARFIX HACK */
.cf:before, .cf:after {content:"";display:table} /* For modern browsers */
.cf:after {clear:both}
.cf {zoom:1} /* For IE 6/7 (trigger hasLayout) */
/* DEFAULT MOBILE STYLE */
body {width: 92%; margin: 0 auto} /* Center page without wrapper */
/* column grid */
.g1,.g2,.g3{display:block; position: relative; margin-left: 1%; margin-right: 1%}
/* 1 column grid */
.g1,.g2,.g3{width:98.0%}
/* media Queries
FOLDING FLUID GRID
< 767px - 1-Column Fluid Grid
768px - 1023px - 2-Column Fluid Grid
> 1024px - 3-Column Fluid Grid
Change widths as necessary
------------------------------------------- */
/* MOBILE PORTRAIT */
@media only screen and (min-width: 320px) {
body {
}
}
/* MOBILE LANDSCAPE */
@media only screen and (min-width: 480px) {
body {
}
}
/* SMALL TABLET */
@media only screen and (min-width: 600px) {
body {
}
}
/* TABLET/NETBOOK */
@media only screen and (min-width: 768px) {
body {
}
/* COLUMN GRID */
.g1,.g2,.g3 {display:inline; float: left}
/* 2 COLUMN GRID */
.g1 {width:48.0%}
.g2 {width:48.0%}
.g3 {width:98.0%}
}
/* LANDSCAPE TABLET/NETBOOK/LAPTOP */
@media only screen and (min-width: 1024px) {
body {
}
/* 3 COLUMN GRID */
.g1 {width:31.333%}
.g2 {width:64.667%;}
.g3 {width:98.0%}
}
@media only screen and (min-width: 1280px) {
/* DESKTOP */
body {
}
}
/* WIDESCREEN */
/* Increased body size for legibility */
@media only screen and (min-width: 1400px) {
body {max-width:1440px} /* 18.5px / 28px */
}
/* PRINT */
@media print {
* {background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important} /* Black prints faster */
a, a:visited {color: #444 !important; text-decoration: underline}
a[href]:after {content: " (" attr(href) ")"}
abbr[title]:after {content: " (" attr(title) ")"}
.ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after {content: ""} /* Don't print links for images, javascript or internal links */
pre, blockquote {border: 1px solid #999; page-break-inside: avoid; }
thead {display: table-header-group; } /* Repeat header row at top of each printed page */
tr, img {page-break-inside: avoid; }
img {max-width: 100% !important; }
@page {margin: 0.5cm}
p, h2, h3 {orphans: 3; widows: 3}
h2, h3{page-break-after: avoid}
}

139
index.html Normal file
View file

@ -0,0 +1,139 @@
<!DOCTYPE html>
<html>
<head>
<!--
*****************************************************************
Fluid Baseline Grid v1.0.0
Designed & Built by Josh Hopkins and 40 Horse, http://40horse.com
Licensed under Unlicense, http://unlicense.org/
*****************************************************************
-->
<title>Fortress Forever</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<meta name="description" content="" />
<meta name="author" content="">
<meta name="keywords" content="" />
<!-- Optimized mobile viewport -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Place favicon.ico and apple-touch-icon.png in root directory -->
<link href="css/style.css" rel="stylesheet" />
<style>
ul { margin-top: 1em; }
.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; height: auto; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
nav { position:relative; clear:both; margin-bottom: 1em; }
nav ul { list-style: none; background: #333; margin: 0; }
nav ul li { float: left; position: relative; margin:0 .5em; }
nav ul li a { display: block; padding:.55em .55em; }
header nav { font-size: 120%; margin-top: .25em; }
div.top { margin-bottom: 2em; }
div.bottom { }
.article h4 { margin-bottom: .25em; }
.article .author { margin-bottom: 1em; }
.article .info { margin-bottom: .25em; }
.pull-right { float:right; }
.pull-left { float:left; }
</style>
</head>
<body>
<div class="top cf">
<header>
<div class="g1">
<h1>Fortress Forever</h1>
<p>A free Team Fortress mod on the Source Engine</p>
<h3><a href="#">Download</a></h3>
<div class="embed-container" style="margin-bottom: 1.5em"><iframe src="http://www.youtube.com/embed/-0-6wdDyGLI" frameborder="0" allowfullscreen></iframe></div>
</div>
<div class="g2">
<nav class="cf">
<ul>
<li><a href="#">About</a></li>
<li><a href="#">Development</a></li>
<li><a href="#">Community</a></li>
<li><a href="#">Forums</a></li>
<li><a href="#">Wiki</a></li>
</ul>
</nav>
</div>
</header>
<div class="g2">
<div class="article">
<h4>A Long Overdue Update</h4>
<div class="author">
<span>Posted 4 days, 2 hours ago</span> <span class="pull-right">by Fortress Forever Team</span>
</div>
<div class="info">
It's been nearly a year since Fortress Forever was Greenlit, and there's been a total lack of updates since then. To remedy that, here are two things that will be happening in the coming weeks:
<ul>
<li>The current version of Fortress Forever will be released on Steam</li>
<li>The Fortress Forever code will be made open source on Github</li>
</ul>
<b>Why did it take a year for this to happen?</b>
<br />We didn't think it was possible to release the current version of FF on Steam because we thought that the version of the Source SDK that FF uses was too old. <a href="http://neotokyohq.com/" target="_blank">Neotokyo</a> proved otherwise, and we are able to follow their lead and finally release FF on Steam.
<br />
<br /><b>What does 'released on Steam' mean?</b>
<br />It means that you'll be able to install Fortress Forever directly through Steam and that you will receive updates automatically. As always, Fortress Forever will be completely free.
<br />
<br /><b>Why go open source?</b>
<br />Fortress Forever's development has been largely opaque for a huge majority of the playerbase for a very long time, and the reason for that opaqueness has not always been intentional; attempting to keep everyone informed can be pretty labor intensive. By moving our development entirely into public view, it will be easier for everyone to stay in the loop with what will be happening with the game, and will give everyone a chance to participate directly in the development process.
</div>
<a href="http://alpha.fortress-forever.com/forum/showthread.php?t=24485" class="pull-left">Discuss on the forums →</a>
<a href="http://www.fortress-forever.com/?a=archive" class="pull-right">View all news posts</a>
</div>
</div>
</div>
<div class="bottom cf">
<div class="g1">
<h3>Contribute</h3>
<ul>
<li>Our code is open source on Github. Submit a pull request!</li>
<li>Report any bugs you find</li>
<li>Suggest features</li>
</ul>
</div>
<div class="g2">
<h3>Activity</h3>
<ul>
<li>Github: Commit 'Fix everything' pushed to branch 'beta' by Darn <small>2 hours ago</small></li>
<li>Github: Issue 'Everything is broken' created by DumboJones <small>3 hours ago</small></li>
<li>Twitter: Thing and stuff <small>4 days ago</small></li>
<li>Dev Journal: squeek. <small>7 days ago</small></li>
</ul>
</div>
</div>
<footer class="g3 cf">
<nav class="cf">
<ul>
<li><a href="#">Github</a></li>
<li><a href="#">Youtube</a></li>
<li><a href="#">Twitter</a></li>
<li><a href="#">Facebook</a></li>
<li><a href="#">Steam</a></li>
</ul>
</nav>
</footer>
<!-- JavaScript at the bottom for fast page loading -->
<!-- Minimized jQuery from Google CDN -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<!-- HTML5 IE Enabling Script -->
<!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<!-- CSS3 Media Queries -->
<script src="js/respond.min.js"></script>
<!-- Optimized Google Analytics. Change UA-XXXXX-X to your site ID -->
<script>var _gaq=[['_setAccount','UA-XXXXX-X'],['_trackPageview']];(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];g.src='//www.google-analytics.com/ga.js';s.parentNode.insertBefore(g,s)}(document,'script'))</script>
</body>
</html>

6
js/respond.min.js vendored Normal file
View file

@ -0,0 +1,6 @@
/*! matchMedia() polyfill - Test a CSS media type/query in JS. Authors & copyright (c) 2012: Scott Jehl, Paul Irish, Nicholas Zakas. Dual MIT/BSD license */
/*! NOTE: If you're already including a window.matchMedia polyfill via Modernizr or otherwise, you don't need this part */
window.matchMedia=window.matchMedia||(function(e,f){var c,a=e.documentElement,b=a.firstElementChild||a.firstChild,d=e.createElement("body"),g=e.createElement("div");g.id="mq-test-1";g.style.cssText="position:absolute;top:-100em";d.appendChild(g);return function(h){g.innerHTML='&shy;<style media="'+h+'"> #mq-test-1 { width: 42px; }</style>';a.insertBefore(d,b);c=g.offsetWidth==42;a.removeChild(d);return{matches:c,media:h}}})(document);
/*! Respond.js v1.1.0: min/max-width media query polyfill. (c) Scott Jehl. MIT/GPLv2 Lic. j.mp/respondjs */
(function(e){e.respond={};respond.update=function(){};respond.mediaQueriesSupported=e.matchMedia&&e.matchMedia("only all").matches;if(respond.mediaQueriesSupported){return}var w=e.document,s=w.documentElement,i=[],k=[],q=[],o={},h=30,f=w.getElementsByTagName("head")[0]||s,g=w.getElementsByTagName("base")[0],b=f.getElementsByTagName("link"),d=[],a=function(){var D=b,y=D.length,B=0,A,z,C,x;for(;B<y;B++){A=D[B],z=A.href,C=A.media,x=A.rel&&A.rel.toLowerCase()==="stylesheet";if(!!z&&x&&!o[z]){if(A.styleSheet&&A.styleSheet.rawCssText){m(A.styleSheet.rawCssText,z,C);o[z]=true}else{if((!/^([a-zA-Z:]*\/\/)/.test(z)&&!g)||z.replace(RegExp.$1,"").split("/")[0]===e.location.host){d.push({href:z,media:C})}}}}u()},u=function(){if(d.length){var x=d.shift();n(x.href,function(y){m(y,x.href,x.media);o[x.href]=true;u()})}},m=function(I,x,z){var G=I.match(/@media[^\{]+\{([^\{\}]*\{[^\}\{]*\})+/gi),J=G&&G.length||0,x=x.substring(0,x.lastIndexOf("/")),y=function(K){return K.replace(/(url\()['"]?([^\/\)'"][^:\)'"]+)['"]?(\))/g,"$1"+x+"$2$3")},A=!J&&z,D=0,C,E,F,B,H;if(x.length){x+="/"}if(A){J=1}for(;D<J;D++){C=0;if(A){E=z;k.push(y(I))}else{E=G[D].match(/@media *([^\{]+)\{([\S\s]+?)$/)&&RegExp.$1;k.push(RegExp.$2&&y(RegExp.$2))}B=E.split(",");H=B.length;for(;C<H;C++){F=B[C];i.push({media:F.split("(")[0].match(/(only\s+)?([a-zA-Z]+)\s?/)&&RegExp.$2||"all",rules:k.length-1,hasquery:F.indexOf("(")>-1,minw:F.match(/\(min\-width:[\s]*([\s]*[0-9\.]+)(px|em)[\s]*\)/)&&parseFloat(RegExp.$1)+(RegExp.$2||""),maxw:F.match(/\(max\-width:[\s]*([\s]*[0-9\.]+)(px|em)[\s]*\)/)&&parseFloat(RegExp.$1)+(RegExp.$2||"")})}}j()},l,r,v=function(){var z,A=w.createElement("div"),x=w.body,y=false;A.style.cssText="position:absolute;font-size:1em;width:1em";if(!x){x=y=w.createElement("body")}x.appendChild(A);s.insertBefore(x,s.firstChild);z=A.offsetWidth;if(y){s.removeChild(x)}else{x.removeChild(A)}z=p=parseFloat(z);return z},p,j=function(I){var x="clientWidth",B=s[x],H=w.compatMode==="CSS1Compat"&&B||w.body[x]||B,D={},G=b[b.length-1],z=(new Date()).getTime();if(I&&l&&z-l<h){clearTimeout(r);r=setTimeout(j,h);return}else{l=z}for(var E in i){var K=i[E],C=K.minw,J=K.maxw,A=C===null,L=J===null,y="em";if(!!C){C=parseFloat(C)*(C.indexOf(y)>-1?(p||v()):1)}if(!!J){J=parseFloat(J)*(J.indexOf(y)>-1?(p||v()):1)}if(!K.hasquery||(!A||!L)&&(A||H>=C)&&(L||H<=J)){if(!D[K.media]){D[K.media]=[]}D[K.media].push(k[K.rules])}}for(var E in q){if(q[E]&&q[E].parentNode===f){f.removeChild(q[E])}}for(var E in D){var M=w.createElement("style"),F=D[E].join("\n");M.type="text/css";M.media=E;f.insertBefore(M,G.nextSibling);if(M.styleSheet){M.styleSheet.cssText=F}else{M.appendChild(w.createTextNode(F))}q.push(M)}},n=function(x,z){var y=c();if(!y){return}y.open("GET",x,true);y.onreadystatechange=function(){if(y.readyState!=4||y.status!=200&&y.status!=304){return}z(y.responseText)};if(y.readyState==4){return}y.send(null)},c=(function(){var x=false;try{x=new XMLHttpRequest()}catch(y){x=new ActiveXObject("Microsoft.XMLHTTP")}return function(){return x}})();a();respond.update=a;function t(){j(true)}if(e.addEventListener){e.addEventListener("resize",t,false)}else{if(e.attachEvent){e.attachEvent("onresize",t)}}})(this);