work on sample site
This commit is contained in:
parent
72bf8d9410
commit
e693abc079
|
|
@ -0,0 +1,6 @@
|
|||
<p>
|
||||
<strong>FOOTER</strong>
|
||||
</p>
|
||||
<p>
|
||||
Content here.
|
||||
</p>
|
||||
|
|
@ -0,0 +1 @@
|
|||
<h1>HEADER</h1>
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
|
||||
<p>
|
||||
Homepage blurb goes here.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<strong>PROJECTS</strong>
|
||||
</p>
|
||||
|
|
@ -0,0 +1,406 @@
|
|||
/*! normalize.css v2.1.3 | MIT License | git.io/normalize */
|
||||
|
||||
/* ==========================================================================
|
||||
HTML5 display definitions
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Correct `block` display not defined in IE 8/9.
|
||||
*/
|
||||
|
||||
article,
|
||||
aside,
|
||||
details,
|
||||
figcaption,
|
||||
figure,
|
||||
footer,
|
||||
header,
|
||||
hgroup,
|
||||
main,
|
||||
nav,
|
||||
section,
|
||||
summary {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/**
|
||||
* Correct `inline-block` display not defined in IE 8/9.
|
||||
*/
|
||||
|
||||
audio,
|
||||
canvas,
|
||||
video {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
/**
|
||||
* Prevent modern browsers from displaying `audio` without controls.
|
||||
* Remove excess height in iOS 5 devices.
|
||||
*/
|
||||
|
||||
audio:not([controls]) {
|
||||
display: none;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address `[hidden]` styling not present in IE 8/9.
|
||||
* Hide the `template` element in IE, Safari, and Firefox < 22.
|
||||
*/
|
||||
|
||||
[hidden],
|
||||
template {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Base
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* 1. Set default font family to sans-serif.
|
||||
* 2. Prevent iOS text size adjust after orientation change, without disabling
|
||||
* user zoom.
|
||||
*/
|
||||
|
||||
html {
|
||||
font-family: sans-serif; /* 1 */
|
||||
-ms-text-size-adjust: 100%; /* 2 */
|
||||
-webkit-text-size-adjust: 100%; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove default margin.
|
||||
*/
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Links
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Remove the gray background color from active links in IE 10.
|
||||
*/
|
||||
|
||||
a {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address `outline` inconsistency between Chrome and other browsers.
|
||||
*/
|
||||
|
||||
a:focus {
|
||||
outline: thin dotted;
|
||||
}
|
||||
|
||||
/**
|
||||
* Improve readability when focused and also mouse hovered in all browsers.
|
||||
*/
|
||||
|
||||
a:active,
|
||||
a:hover {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Typography
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Address variable `h1` font-size and margin within `section` and `article`
|
||||
* contexts in Firefox 4+, Safari 5, and Chrome.
|
||||
*/
|
||||
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
margin: 0.67em 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address styling not present in IE 8/9, Safari 5, and Chrome.
|
||||
*/
|
||||
|
||||
abbr[title] {
|
||||
border-bottom: 1px dotted;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome.
|
||||
*/
|
||||
|
||||
b,
|
||||
strong {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address styling not present in Safari 5 and Chrome.
|
||||
*/
|
||||
|
||||
dfn {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address differences between Firefox and other browsers.
|
||||
*/
|
||||
|
||||
hr {
|
||||
-moz-box-sizing: content-box;
|
||||
box-sizing: content-box;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address styling not present in IE 8/9.
|
||||
*/
|
||||
|
||||
mark {
|
||||
background: #ff0;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
/**
|
||||
* Correct font family set oddly in Safari 5 and Chrome.
|
||||
*/
|
||||
|
||||
code,
|
||||
kbd,
|
||||
pre,
|
||||
samp {
|
||||
font-family: monospace, serif;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
/**
|
||||
* Improve readability of pre-formatted text in all browsers.
|
||||
*/
|
||||
|
||||
pre {
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
/**
|
||||
* Set consistent quote types.
|
||||
*/
|
||||
|
||||
q {
|
||||
quotes: "\201C" "\201D" "\2018" "\2019";
|
||||
}
|
||||
|
||||
/**
|
||||
* Address inconsistent and variable font size in all browsers.
|
||||
*/
|
||||
|
||||
small {
|
||||
font-size: 80%;
|
||||
}
|
||||
|
||||
/**
|
||||
* Prevent `sub` and `sup` affecting `line-height` in all browsers.
|
||||
*/
|
||||
|
||||
sub,
|
||||
sup {
|
||||
font-size: 75%;
|
||||
line-height: 0;
|
||||
position: relative;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
sup {
|
||||
top: -0.5em;
|
||||
}
|
||||
|
||||
sub {
|
||||
bottom: -0.25em;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Embedded content
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Remove border when inside `a` element in IE 8/9.
|
||||
*/
|
||||
|
||||
img {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Correct overflow displayed oddly in IE 9.
|
||||
*/
|
||||
|
||||
svg:not(:root) {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Figures
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Address margin not present in IE 8/9 and Safari 5.
|
||||
*/
|
||||
|
||||
figure {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Forms
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Define consistent border, margin, and padding.
|
||||
*/
|
||||
|
||||
fieldset {
|
||||
border: 1px solid #c0c0c0;
|
||||
margin: 0 2px;
|
||||
padding: 0.35em 0.625em 0.75em;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct `color` not being inherited in IE 8/9.
|
||||
* 2. Remove padding so people aren't caught out if they zero out fieldsets.
|
||||
*/
|
||||
|
||||
legend {
|
||||
border: 0; /* 1 */
|
||||
padding: 0; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct font family not being inherited in all browsers.
|
||||
* 2. Correct font size not being inherited in all browsers.
|
||||
* 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome.
|
||||
*/
|
||||
|
||||
button,
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
font-family: inherit; /* 1 */
|
||||
font-size: 100%; /* 2 */
|
||||
margin: 0; /* 3 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Address Firefox 4+ setting `line-height` on `input` using `!important` in
|
||||
* the UA stylesheet.
|
||||
*/
|
||||
|
||||
button,
|
||||
input {
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address inconsistent `text-transform` inheritance for `button` and `select`.
|
||||
* All other form control elements do not inherit `text-transform` values.
|
||||
* Correct `button` style inheritance in Chrome, Safari 5+, and IE 8+.
|
||||
* Correct `select` style inheritance in Firefox 4+ and Opera.
|
||||
*/
|
||||
|
||||
button,
|
||||
select {
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
|
||||
* and `video` controls.
|
||||
* 2. Correct inability to style clickable `input` types in iOS.
|
||||
* 3. Improve usability and consistency of cursor style between image-type
|
||||
* `input` and others.
|
||||
*/
|
||||
|
||||
button,
|
||||
html input[type="button"], /* 1 */
|
||||
input[type="reset"],
|
||||
input[type="submit"] {
|
||||
-webkit-appearance: button; /* 2 */
|
||||
cursor: pointer; /* 3 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Re-set default cursor for disabled elements.
|
||||
*/
|
||||
|
||||
button[disabled],
|
||||
html input[disabled] {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Address box sizing set to `content-box` in IE 8/9/10.
|
||||
* 2. Remove excess padding in IE 8/9/10.
|
||||
*/
|
||||
|
||||
input[type="checkbox"],
|
||||
input[type="radio"] {
|
||||
box-sizing: border-box; /* 1 */
|
||||
padding: 0; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome.
|
||||
* 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome
|
||||
* (include `-moz` to future-proof).
|
||||
*/
|
||||
|
||||
input[type="search"] {
|
||||
-webkit-appearance: textfield; /* 1 */
|
||||
-moz-box-sizing: content-box;
|
||||
-webkit-box-sizing: content-box; /* 2 */
|
||||
box-sizing: content-box;
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove inner padding and search cancel button in Safari 5 and Chrome
|
||||
* on OS X.
|
||||
*/
|
||||
|
||||
input[type="search"]::-webkit-search-cancel-button,
|
||||
input[type="search"]::-webkit-search-decoration {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove inner padding and border in Firefox 4+.
|
||||
*/
|
||||
|
||||
button::-moz-focus-inner,
|
||||
input::-moz-focus-inner {
|
||||
border: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Remove default vertical scrollbar in IE 8/9.
|
||||
* 2. Improve readability and alignment in all browsers.
|
||||
*/
|
||||
|
||||
textarea {
|
||||
overflow: auto; /* 1 */
|
||||
vertical-align: top; /* 2 */
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Tables
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Remove most spacing between table cells.
|
||||
*/
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 233 B |
Binary file not shown.
|
After Width: | Height: | Size: 264 B |
|
|
@ -0,0 +1,46 @@
|
|||
(function() {
|
||||
"use strict";
|
||||
|
||||
var show_all = function() {
|
||||
var tr = document.querySelectorAll(".projtable tr");
|
||||
for (var i = 0, e = tr.length; i !== e; ++i) {
|
||||
tr[i].style.display = "table-row";
|
||||
}
|
||||
|
||||
var warn = document.querySelector(".tag-filter-warn");
|
||||
warn.parentNode.removeChild(warn);
|
||||
};
|
||||
|
||||
var show_tag = function(tag) {
|
||||
if (document.querySelector(".tag-filter-warn") !== null) {
|
||||
show_all();
|
||||
}
|
||||
|
||||
var tr = document.querySelectorAll(".projtable tr");
|
||||
for (var i = 0, e = tr.length; i !== e; ++i) {
|
||||
tr[i].style.display = (tr[i].className.split(" ").indexOf("taggedWith-"+tag) === -1) ? "none" : "table-row";
|
||||
}
|
||||
|
||||
var div = document.createElement("div");
|
||||
div.className = "tag-filter-warn";
|
||||
div.innerHTML = "Filtering by tag. <a>reset</a>";
|
||||
document.body.appendChild(div);
|
||||
|
||||
document.querySelector(".tag-filter-warn a").addEventListener('click', function() {
|
||||
show_all();
|
||||
return false;
|
||||
});
|
||||
};
|
||||
|
||||
var get_show_tag = function(tag) {
|
||||
return function() { show_tag(tag); return false; };
|
||||
};
|
||||
|
||||
window.addEventListener('load', function() {
|
||||
var taglinks = document.querySelectorAll(".tag-link");
|
||||
for (var i = 0, e = taglinks.length; i !== e; ++i) {
|
||||
var tag = taglinks[i].getAttribute("data-tag");
|
||||
taglinks[i].addEventListener('click', get_show_tag(tag));
|
||||
}
|
||||
});
|
||||
})();
|
||||
|
|
@ -0,0 +1,161 @@
|
|||
/* style.css */
|
||||
|
||||
html {
|
||||
overflow-y:scroll; /* always display scrollbar to prevent horizontal lurch */
|
||||
}
|
||||
img {
|
||||
border:0;
|
||||
}
|
||||
a {
|
||||
color:black;
|
||||
text-decoration:underline;
|
||||
}
|
||||
a:hover {
|
||||
color:blue;
|
||||
cursor:pointer;
|
||||
}
|
||||
h1 a {
|
||||
text-decoration:none;
|
||||
}
|
||||
h1 a:hover {
|
||||
color:black;
|
||||
}
|
||||
h1,h2,h3 {
|
||||
margin-top:0;
|
||||
}
|
||||
.code {
|
||||
background: #F8F8F8;
|
||||
font-family:Consolas,monospace;
|
||||
}
|
||||
|
||||
/* */
|
||||
|
||||
html, body {
|
||||
/* structural */
|
||||
height:100%;
|
||||
margin:0;
|
||||
border:0;
|
||||
padding:0;
|
||||
|
||||
/* cosmetic */
|
||||
font-family:"Helvetica Neue","Segoe UI",Arial,sans-serif;
|
||||
font-size:12px;
|
||||
background:#DDD url('pixel_weave.png'); /* thanks subtlepatterns.com ! */
|
||||
color:#333;
|
||||
}
|
||||
|
||||
#container {
|
||||
margin:0 auto;
|
||||
width:768px;
|
||||
position:relative;
|
||||
|
||||
height:auto !important;
|
||||
height:100%; /* oldIE */
|
||||
min-height:100%;
|
||||
|
||||
/* cosmetic */
|
||||
background:white;
|
||||
}
|
||||
|
||||
#content {
|
||||
padding:14px;
|
||||
background:white;
|
||||
}
|
||||
|
||||
/* */
|
||||
|
||||
.tag::before {
|
||||
content:"";
|
||||
|
||||
display:inline-block;
|
||||
width:7px;
|
||||
height:7px;
|
||||
|
||||
margin-right:2px;
|
||||
|
||||
background:transparent url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAZUlEQVQI12P4//8/Awyrqqp6KSkp/QdhFRWV7cgS+kDBN0B8RVlZuRikACahB+T8ger6BMTXwJJAiTwg4xvMOCj+ART3ZwCa3YYm8QcopgsyEWasDVT3W5AVMHcgO6gViNORXQ8A84NToxbSsJcAAAAASUVORK5CYII=') no-repeat 0 0;
|
||||
}
|
||||
|
||||
.tag-filter-warn {
|
||||
position:fixed;
|
||||
top:0;
|
||||
right:0;
|
||||
|
||||
padding:4px;
|
||||
|
||||
background:lightyellow;
|
||||
border-bottom: 1px solid #888;
|
||||
border-left:1px solid #888;
|
||||
}
|
||||
|
||||
/* */
|
||||
|
||||
.projtable {
|
||||
border-collapse: collapse;
|
||||
width:100%;
|
||||
}
|
||||
.projtable tr {
|
||||
transition:0.2s linear;
|
||||
}
|
||||
.projtable tr:hover {
|
||||
background:#F8F8F8;
|
||||
}
|
||||
.projtable td {
|
||||
padding: 2px 4px;
|
||||
}
|
||||
.projtable small {
|
||||
color:grey;
|
||||
font-style:italic;
|
||||
}
|
||||
.projtable tr td:first-child {
|
||||
width:95px;
|
||||
}
|
||||
|
||||
.projinfo {
|
||||
position:relative;
|
||||
}
|
||||
.projbody {
|
||||
position:absolute;
|
||||
left:0;
|
||||
}
|
||||
.projbody_halfw {
|
||||
right: 74px;
|
||||
}
|
||||
.projbody_fullw {
|
||||
right:0;
|
||||
}
|
||||
.projimg {
|
||||
position:absolute;
|
||||
right:0;
|
||||
|
||||
width:62px; /* 60px + 2px border */
|
||||
}
|
||||
|
||||
/* */
|
||||
|
||||
.homeimage {
|
||||
width:90px;
|
||||
height:32px;
|
||||
}
|
||||
|
||||
.homeimage-sprite {
|
||||
background: white url('logos.jpg') no-repeat 0 0;
|
||||
}
|
||||
|
||||
.thumbimage {
|
||||
width:60px;
|
||||
height:60px;
|
||||
opacity: 0.8;
|
||||
transition:0.2s opacity;
|
||||
border:1px solid lightgrey;
|
||||
}
|
||||
.thumbimage:hover {
|
||||
opacity:1.0;
|
||||
}
|
||||
|
||||
.no-image {
|
||||
width:90px;
|
||||
height:32px;
|
||||
display:block;
|
||||
background: white url('no_image.png') no-repeat 0 0;
|
||||
}
|
||||
Reference in New Issue