--- /dev/null
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, user-scalable=no" />
+ <link rel="icon" href="data:;base64,=">
+ <title></title>
+ </head>
+ <body>
+ <div class="siteOuter siteLayoutFull">
+ <div class="siteLogo" style="background-color: #666;">LOGO<br>LOGO<br>LOGO</div>
+ <div class="siteNav" style="background-color: #abc;">
+ <div class="navItem">Home</div>
+ <div class="navItem">About</div>
+ <div class="navItem">Contact Us</div>
+ </div>
+ <div class="siteContent" style="background-color: #457;">
+ <h1>Content</h1>
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
+ do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+ Ut enim ad minim veniam, quis nostrud exercitation ullamco
+ laboris nisi ut aliquip ex ea commodo consequat. Duis aute
+ irure dolor in reprehenderit in voluptate velit esse cillum
+ dolore eu fugiat nulla pariatur. Excepteur sint occaecat
+ cupidatat non proident, sunt in culpa qui officia deserunt
+ mollit anim id est laborum.
+
+ <p>Curabitur pretium tincidunt lacus. Nulla gravida orci a
+ odio. Nullam varius, turpis et commodo pharetra, est eros
+ bibendum elit, nec luctus magna felis sollicitudin mauris.
+ Integer in mauris eu nibh euismod gravida. Duis ac tellus et
+ risus vulputate vehicula. Donec lobortis risus a elit. Etiam
+ tempor. Ut ullamcorper, ligula eu tempor congue, eros est
+ euismod turpis, id tincidunt sapien risus a quam. Maecenas
+ fermentum consequat mi. Donec fermentum. Pellentesque malesuada
+ nulla a mi. Duis sapien sem, aliquet nec, commodo eget,
+ consequat quis, neque. Aliquam faucibus, elit ut dictum
+ aliquet, felis nisl adipiscing sapien, sed malesuada diam lacus
+ eget erat. Cras mollis scelerisque nunc. Nullam arcu. Aliquam
+ consequat. Curabitur augue lorem, dapibus quis, laoreet et,
+ pretium ac, nisi. Aenean magna nisl, mollis quis, molestie eu,
+ feugiat in, orci. In hac habitasse platea dictumst.
+ </div>
+ <div class="siteFooter" style="background-color: #89a">
+ Footer
+ </div>
+ </div>
+ </body>
+</html>
--- /dev/null
+$bodyBg: #fff;
+$textColor: #000;
+$desktopMinWidth: 700px;
+$siteMaxWidth: 1100px;
+
+html, body {
+ margin: 0;
+ padding: 0;
+}
+html {
+ overflow-y: scroll;
+}
+body {
+ background: $bodyBg;
+ color: $textColor;
+}
+
+h1:first-child, h2:first-child, h3:first-child {
+ margin-top: 0;
+}
+
+.siteOuter {
+ box-sizing: border-box;
+ //min-height: 100vh;
+ padding: 2vmin;
+ max-width: $siteMaxWidth;
+ margin: 0 auto;
+}
+
+.siteAdminHeader {
+ padding: 2vmin 2vmin 0 2vmin;
+ max-width: $siteMaxWidth;
+ margin: 0 auto;
+}
+
+.siteOuter.siteLayoutFull {
+ grid-kiss:
+ "+-----------+ +--------------+ "
+ "| .siteLogo | | .siteContent | 0fr "
+ "+-----------+ | | "
+ " | | 2vmin"
+ "+-----------+ | | "
+ "| .siteNav | | | 1fr "
+ "+-----------+ +--------------+ "
+ " 2vmin"
+ "+----------------------------------+ "
+ "| .siteFooter | 0fr "
+ "+----------------------------------+ "
+ " 200px 2vmin 2fr ";
+}
+.siteOuter.siteLayoutSidebar {
+ grid-kiss:
+ "+-----------+ +--------------+ +--------------+ "
+ "| .siteLogo | | .siteContent | | .siteSidebar | 0fr "
+ "+-----------+ | | | | "
+ " | | | | 2vmin"
+ "+-----------+ | | | | "
+ "| .siteNav | | | | | 1fr "
+ "+-----------+ +--------------+ +--------------+ "
+ " 2vmin"
+ "+---------------------------------------------------------+ "
+ "| .siteFooter | 0fr "
+ "+---------------------------------------------------------+ "
+ " 200px 2vmin 2fr 2vmin 2fr ";
+}
+
+@media (max-width: $desktopMinWidth) {
+ .siteOuter {
+ grid-kiss:
+ "+--------------+ "
+ "| .siteLogo | 0fr "
+ "+--------------+ "
+ " 2vmin"
+ "+--------------+ "
+ "| .siteContent | 1fr "
+ "+--------------+ "
+ " 2vmin"
+ "+--------------+ "
+ "| .siteFooter | 1fr "
+ "+--------------+ "
+ " 1fr ";
+ }
+ .siteNav {
+ display: none;
+ }
+}
+
+
+// from back in the day (the rest of the file from here down)
+.icon {
+ display: inline-block;
+ width: 40%;
+}
+.top_button {
+ display: inline-block;
+ width: 30%;
+}
+html {
+ overflow-y: scroll;
+}
+header,
+hgroup,
+section,
+footer,
+aside,
+nav,
+article,
+figure,
+img {
+ display: block;
+}
+code.html {
+ display: block;
+ font: 12px monospace;
+ border: 1px solid #000;
+ background: #ccc;
+}
+.caption {
+ font-weight: bold;
+}
+* + .caption {
+ margin-top: 15px;
+}
+.field {
+ padding-top: 3px;
+}
+div.field_notes {
+ font-size: 12px;
+ line-height: 16px;
+}
+fieldset {
+ border: 1px dotted #000;
+ padding: 0 15px 15px 15px;
+ margin: 15px 0;
+ position: relative;
+}
+legend {
+ padding: 0 6px;
+ font-weight: bold;
+}
+div.error {
+ border: 2px solid #f00;
+ padding: 13px;
+ margin: 20px;
+ background: #fdd;
+}
+h1 {
+ font-size: 26px;
+ margin: 20px 0 10px;
+}
+h1 + h4.tagline {
+ margin: -10px 0 10px;
+}
+h1 + h2 {
+ margin-top: -6px;
+}
+h2 {
+ font-size: 20px;
+ margin: 16px 0px 8px;
+}
+h2 + h4.tagline {
+ margin: -8px 0 8px;
+}
+h3 {
+ font-size: 18px;
+ margin: 12px 0 5px;
+}
+h3 + h4.tagline {
+ margin: -5px 0 5px;
+}
+h4 {
+ font-size: 14px;
+ margin: 10px 0 3px;
+}
+h4 + h4.tagline {
+ margin: -3px 0 3px;
+}
+h1, h2, h3, h4 {
+ font-weight: bold;
+}
+h4.tagline {
+ font-weight: normal;
+}
+p.quote {
+ font-size: 14px;
+ font-weight: bold;
+ padding-bottom: 1px;
+ margin: 15px 15px 0 15px;
+}
+p.quote:before,
+p.quote:after {
+ font-size: 40px;
+ line-height: 0;
+ color: #777;
+ font-weight: bold;
+ display: inline-block;
+ height: 10px;
+ position: relative;
+}
+p.quote:before {
+ content: '“';
+ top: 10px;
+}
+p.quote:after {
+ content: '”';
+ top: 20px;
+ width: 0;
+}
+p.attrib,
+p.attribution {
+ margin: 0 0 15px 20px;
+ margin-top: 1px;
+ padding-left: 30px;
+ font-size: 12px;
+ font-weight: normal;
+}
+p.attrib:before,
+p.attribution:before {
+ content: "— ";
+}
+body {
+ margin: 0;
+ padding: 0;
+ background: #fff;
+ color: #000;
+ font: 15px Arimo, Arial, sans-serif;
+ line-height: 1.2;
+}
+#admin_pages_body #cke_content {
+ width: 980px;
+ margin-right: -30px;
+}
+#admin_pages_wysiwyg_content_full_main {
+ background: #fff;
+ width: 950px;
+ margin: 0 auto;
+ min-width: 0;
+ width: 950px;
+ margin: 0 auto;
+ border: 5px solid #eee;
+ min-height: 50px;
+}
+#admin_pages_wysiwyg_content_with_sidebar_main {
+ background: #fff;
+ width: 670px;
+ margin: 0 auto;
+ min-width: 0;
+ width: 670px;
+ margin: 0 auto;
+ border: 5px solid #eee;
+ min-height: 50px;
+}
+#admin_pages_body #cke_sidebar_content {
+ width: 980px;
+ margin-right: -30px;
+}
+#admin_pages_wysiwyg_content_with_sidebar_sidebar_plain {
+ background: #fff;
+ width: 250px;
+ margin: 0 auto;
+ min-width: 0;
+ width: 250px;
+ margin: 0 auto;
+ border: 5px solid #eee;
+ min-height: 50px;
+}
+#admin_pages_wysiwyg_content_with_sidebar_sidebar_bordered {
+ background: #fff;
+ width: 218px;
+ margin: 0 auto;
+ min-width: 0;
+ width: 218px;
+ margin: 0 auto;
+ border: 5px solid #eee;
+ min-height: 50px;
+}
+body > .centerer {
+ position: relative;
+}
+#site_header {
+ margin: 0 auto 15px auto;
+ position: relative;
+}
+#site_header:before {
+ display: block;
+ background-size: 100%;
+}
+#site_header:after {
+ display: block;
+ position: absolute;
+ bottom: 0;
+ right: 0;
+ padding: 4px;
+ text-align: right;
+}
+.siteNav {
+ margin-bottom: 15px;
+}
+.siteNav ul {
+ margin: 0;
+ padding: 0;
+ list-style: none;
+ text-align: justify;
+}
+.siteNav ul > * {
+ display: inline-block;
+ position: relative;
+ top: 1.2em;
+}
+.siteNav ul:before {
+ content: '';
+ display: block;
+ width: 100%;
+ margin-bottom: -1.2em;
+}
+.siteNav ul:after {
+ content: '';
+ display: inline-block;
+ width: 100%;
+}
+footer#site_footer {
+ clear: both;
+ padding-top: 40px;
+ font-size: 13px;
+}
+#wfpl_messages {
+ background: #ffd;
+ padding: 5px 12px;
+ margin: 0 0 20px 0;
+ -webkit-box-shadow: 2px 2px 6px rgba(0,0,0,0.4);
+ box-shadow: 2px 2px 6px rgba(0,0,0,0.4);
+ -webkit-border-radius: 4px;
+ border-radius: 4px;
+}
+#wfpl_messages p {
+ font-size: 120%;
+ padding: 5px 0;
+ margin: 0px;
+}
+#wfpl_messages hr {
+ display: block;
+ height: 1px;
+ border: 0;
+ border-top: 1px dotted #ddc;
+ margin: 0;
+ padding: 0;
+}
+#admin_links {
+ font-size: 13px;
+ background: rgba(255,244,244,0.5);
+ border: 1px dotted #000;
+ padding: 3px;
+ text-align: right;
+}
+span.wfpl_ifl {
+ display: block;
+ float: left;
+ clear: left;
+ font-size: 10px;
+ color: #000;
+ text-align: right;
+ background-repeat: no-repeat;
+ background-position: left top;
+ margin: 0 10px 2px 0;
+}
+span.wfpl_ifr {
+ display: block;
+ float: right;
+ clear: right;
+ font-size: 10px;
+ color: #000;
+ font-weight: normal;
+ text-align: right;
+ background-repeat: no-repeat;
+ background-position: left top;
+ margin: 0 0 2px 10px;
+}
+div.wfpl_ic {
+ margin: 15px auto;
+ font-size: 10px;
+ font-weight: normal;
+ text-align: right;
+ background-repeat: no-repeat;
+ background-position: center top;
+}
+td > :first-child,
+th > :first-child,
+legend + *,
+article > :first-child,
+aside > :first-child,
+section > :first-child,
+nav > :first-child,
+div > :first-child,
+.first {
+ margin-top: 0px;
+}
+td > :last-child,
+th > :last-child,
+fieldset > :last-child,
+article > :last-child,
+aside > :last-child,
+section > :last-child,
+nav > :last-child,
+div > :last-child,
+.last {
+ margin-bottom: 0px;
+}
+table.evenodd td,
+table.evenodd th {
+ padding: 6px 12px;
+ text-align: left;
+}
+table.evenodd > thead > tr:nth-child(2n+1) > td,
+table.evenodd > tbody > tr:nth-child(2n+1) > td,
+table.evenodd > tr:nth-child(2n+1) > td,
+table.evenodd > thead > tr:nth-child(2n+1) > th,
+table.evenodd > tbody > tr:nth-child(2n+1) > th,
+table.evenodd > tr:nth-child(2n+1) > th {
+ background: rgba(0,0,0,0.04);
+}
+table.evenodd > thead > tr:nth-child(2n+1):hover > td,
+table.evenodd > tbody > tr:nth-child(2n+1):hover > td,
+table.evenodd > tr:nth-child(2n+1):hover > td,
+table.evenodd > thead > tr:nth-child(2n+1):hover > th,
+table.evenodd > tbody > tr:nth-child(2n+1):hover > th,
+table.evenodd > tr:nth-child(2n+1):hover > th {
+ background: rgba(0,0,0,0.07);
+}
+table.evenodd > thead > tr:nth-child(2n+0) > td,
+table.evenodd > tbody > tr:nth-child(2n+0) > td,
+table.evenodd > tr:nth-child(2n+0) > td,
+table.evenodd > thead > tr:nth-child(2n+0) > th,
+table.evenodd > tbody > tr:nth-child(2n+0) > th,
+table.evenodd > tr:nth-child(2n+0) > th {
+ background: rgba(0,0,0,0.02);
+}
+table.evenodd > thead > tr:nth-child(2n+0):hover > td,
+table.evenodd > tbody > tr:nth-child(2n+0):hover > td,
+table.evenodd > tr:nth-child(2n+0):hover > td,
+table.evenodd > thead > tr:nth-child(2n+0):hover > th,
+table.evenodd > tbody > tr:nth-child(2n+0):hover > th,
+table.evenodd > tr:nth-child(2n+0):hover > th {
+ background: rgba(0,0,0,0.09);
+}
+.field_error input {
+ border: 1px solid #f00;
+}
+.password_suggestion + .password_suggestion {
+ margin-left: 10px;
+}
+.wfpl_li,
+.wfpl_ci,
+.wfpl_ri,
+.wfpl_fi {
+ display: block;
+ margin-bottom: 1%;
+ clear: both;
+ font-size: 80%;
+ text-align: right;
+}
+.wfpl_li .wfpl_i,
+.wfpl_ci .wfpl_i,
+.wfpl_ri .wfpl_i,
+.wfpl_fi .wfpl_i {
+ display: block;
+ width: 100%;
+ background-size: 100% auto;
+ background-repeat: no-repeat;
+ background-position: 50% top;
+ margin-bottom: 3px;
+ height: 0;
+ overflow: hidden;
+}
+.wfpl_li,
+.wfpl_ci,
+.wfpl_ri {
+ width: 38.19660112501052%;
+}
+.wfpl_li {
+ float: left;
+ margin-right: 2%;
+}
+.wfpl_ci,
+.wfpl_fi {
+ margin-left: auto;
+ margin-right: auto;
+}
+.wfpl_ri {
+ float: right;
+ margin-left: 2%;
+}
+.wfpl_thumb {
+ display: inline-block;
+ width: 70px;
+ height: 70px;
+ background-size: contain;
+ background-position: 50% 50%;
+ background-repeat: no-repeat;
+}
+.wfpl_li,
+.wfpl_ci,
+.wfpl_ri,
+.wfpl_fi,
+.wfpl_thumb {
+ max-width: 100%;
+}
+body > .centerer {
+ margin: 15px;
+ width: 950px;
+}
+body > .centerer.with_sidebar > .main {
+ float: left;
+ width: 670px;
+}
+body > .centerer.with_sidebar > .gap {
+ width: 30px;
+}
+body > .centerer.with_sidebar > .gap .wfpl_li,
+body > .centerer.with_sidebar > .gap .wfpl_ri {
+ width: 50%;
+}
+body > .centerer.with_sidebar > .gap .wfpl_ci {
+ width: 70%;
+}
+body > .centerer.with_sidebar > .sidebar.plain {
+ float: right;
+ width: 250px;
+}
+body > .centerer.with_sidebar > .sidebar.plain .wfpl_li,
+body > .centerer.with_sidebar > .sidebar.plain .wfpl_ri {
+ width: 50%;
+}
+body > .centerer.with_sidebar > .sidebar.plain .wfpl_ci {
+ width: 70%;
+}
+body > .centerer.with_sidebar > .sidebar.bordered {
+ border-width: 1px;
+ border-style: solid;
+ border-color: #f00;
+ padding: 15px;
+ float: right;
+ width: 218px;
+}
+body > .centerer.with_sidebar > .sidebar.bordered .wfpl_li,
+body > .centerer.with_sidebar > .sidebar.bordered .wfpl_ri {
+ width: 50%;
+}
+body > .centerer.with_sidebar > .sidebar.bordered .wfpl_ci {
+ width: 70%;
+}
+body > .centerer {
+ margin-left: auto;
+ margin-right: auto;
+}
+@media screen and (max-width: 980px) {
+ body > .centerer {
+ margin: 1.5306%;
+ width: 96.9387%;
+ }
+ body > .centerer.with_sidebar > .main {
+ width: 70.5263%;
+ }
+ body > .centerer.with_sidebar > .gap {
+ width: 3.1578%;
+ }
+ body > .centerer.with_sidebar > .sidebar.plain {
+ width: 26.3157%;
+ }
+ body > .centerer.with_sidebar > .sidebar.bordered {
+ padding: 1.5789%;
+ width: 22.9473%;
+ }
+ body > .centerer {
+ width: auto;
+ }
+ body > .centerer .wfpl_li,
+ body > .centerer .wfpl_ri {
+ width: calc(71.5326673199794px + 30.666846670275838%);
+ }
+ body > .centerer .wfpl_ci {
+ width: 362.86771068759987px;
+ }
+ body > .centerer.full > .main .wfpl_li,
+ body > .centerer.full > .main .wfpl_ri {
+ width: calc(71.5326673199794px + 30.666846670275838%);
+ }
+ body > .centerer.full > .main .wfpl_ci {
+ width: 362.86771068759987px;
+ }
+ body > .centerer.with_sidebar > .main .wfpl_li,
+ body > .centerer.with_sidebar > .main .wfpl_ri {
+ width: calc(97.53541937032978px + 23.63907584585682%);
+ }
+ body > .centerer.with_sidebar > .main .wfpl_ci {
+ width: 255.91722753757045px;
+ }
+}
+body {
+ color: #001;
+ background-position: 980px 670px;
+ background-position: 370px 541.1940298507462px;
+}
+@media screen and (max-width: 541.1940298507462px) {
+ body > .centerer.full > .main {
+ border: none;
+ float: none;
+ width: auto;
+ margin-left: 0;
+ margin-right: 0;
+ padding-left: 0;
+ padding-right: 0;
+ margin-top: 1.5306%;
+ }
+ body > .centerer.full > .main .wfpl_li,
+ body > .centerer.full > .main .wfpl_ri {
+ width: calc(71.5326673199794px + 30.666846670275838%);
+ }
+ body > .centerer.full > .main .wfpl_ci {
+ width: 362.86771068759987px;
+ }
+ body > .centerer.with_sidebar > .main {
+ border: none;
+ float: none;
+ width: auto;
+ margin-left: 0;
+ margin-right: 0;
+ padding-left: 0;
+ padding-right: 0;
+ margin-top: 1.5306%;
+ }
+ body > .centerer.with_sidebar > .main .wfpl_li,
+ body > .centerer.with_sidebar > .main .wfpl_ri {
+ width: calc(71.5326673199794px + 30.666846670275838%);
+ }
+ body > .centerer.with_sidebar > .main .wfpl_ci {
+ width: 362.86771068759987px;
+ }
+ body > .centerer.with_sidebar > .gap {
+ border: none;
+ float: none;
+ width: auto;
+ margin-left: 0;
+ margin-right: 0;
+ padding-left: 0;
+ padding-right: 0;
+ margin-top: 1.5306%;
+ }
+ body > .centerer.with_sidebar > .gap .wfpl_li,
+ body > .centerer.with_sidebar > .gap .wfpl_ri {
+ width: calc(71.5326673199794px + 30.666846670275838%);
+ }
+ body > .centerer.with_sidebar > .gap .wfpl_ci {
+ width: 362.86771068759987px;
+ }
+ body > .centerer.with_sidebar > .sidebar.plain {
+ display: none;
+ }
+ body > .centerer.with_sidebar > .sidebar.bordered {
+ display: none;
+ }
+}
+@media screen and (max-width: 381.68421052631584px) {
+ body > .centerer .wfpl_li,
+ body > .centerer .wfpl_ci,
+ body > .centerer .wfpl_ri {
+ float: none;
+ width: 362.86771068759987px;
+ margin-right: auto;
+ margin-left: auto;
+ }
+}
+@media screen and (max-width: 381.68421052631584px) {
+ body > .centerer.full > .main .wfpl_li,
+ body > .centerer.full > .main .wfpl_ci,
+ body > .centerer.full > .main .wfpl_ri {
+ float: none;
+ width: 362.86771068759987px;
+ margin-right: auto;
+ margin-left: auto;
+ }
+}
+@media screen and (max-width: 381.68421052631584px) {
+ body > .centerer.with_sidebar > .main .wfpl_li,
+ body > .centerer.with_sidebar > .main .wfpl_ci,
+ body > .centerer.with_sidebar > .main .wfpl_ri {
+ float: none;
+ width: 255.91722753757045px;
+ margin-right: auto;
+ margin-left: auto;
+ }
+}
+#mobile_menu_button {
+ display: none;
+}
+#mobile_menu_check {
+ display: none;
+}
+@media screen and (max-width: 600px) {
+ .siteNav > form {
+ margin-top: 0;
+ }
+ #mobile_menu_check:not(:checked) + div {
+ display: none;
+ }
+ #mobile_menu_check:checked + div {
+ display: block;
+ position: relative;
+ }
+ #mobile_menu_check:checked + div > ul {
+ z-index: 1000;
+ background: #fff;
+ background: rgba(255,255,255,0.95);
+ display: block;
+ position: absolute;
+ top: 100%;
+ width: 96%;
+ left: 2%;
+ margin: 0;
+ padding: 0;
+ border-bottom-left-radius: 4px;
+ border-bottom-right-radius: 4px;
+ -webkit-box-shadow: 0px 3px 3px rgba(0,0,0,0.1);
+ box-shadow: 0px 3px 3px rgba(0,0,0,0.1);
+ }
+ #mobile_menu_check:checked + div > ul li {
+ padding: 15px;
+ white-space: nowrap;
+ }
+ #mobile_menu_check:checked + div > ul li + li {
+ padding-top: 0;
+ }
+ #mobile_menu_check:checked + div > ul li a {
+ font-size: 18px;
+ }
+ #mobile_menu_check:checked + div > ul:before,
+ #mobile_menu_check:checked + div > ul:after {
+ display: none;
+ content: none;
+ margin: 0;
+ padding: 0;
+ }
+ #mobile_menu_check:checked + div > ul > * {
+ position: static;
+ top: 0;
+ }
+ .siteNav ul > li,
+ #mobile_menu_button {
+ display: block;
+ padding: 0px 10px 0px 17px;
+ font-size: 18px;
+ }
+}
+#admin_images_body .th_toggle_buttons {
+ font-weight: normal;
+ color: #777;
+ text-align: justify;
+}
+#admin_images_body .th_toggle_buttons > * {
+ display: inline-block;
+ position: relative;
+ top: 1.2em;
+}
+#admin_images_body .th_toggle_buttons:before {
+ content: '';
+ display: block;
+ width: 100%;
+ margin-bottom: -1.2em;
+}
+#admin_images_body .th_toggle_buttons:after {
+ content: '';
+ display: inline-block;
+ width: 100%;
+}
Got questions, comments, patches, etc.? Contact Jason Woofenden