@@ -22,12 +22,12 @@
list-style: none;

.work_image {
height: 200px;
height: 300px;
background-size: cover;
background-position: center center;
transition: opacity .5s ease;

@include bp (tablet) {
@include bp (medium) {
height: 300px;

&:hover {
@@ -36,7 +36,7 @@
}
}
}
.teaser li {
.teaser .project {
margin-bottom: 1.5em;
list-style: none;
//height: 350px;
@@ -55,13 +55,21 @@
&:nth-child(2n+1){
clear: left;
}

li:first-child {
height: 160px;

@include bp ( medium ) {
height: 200px;
}
}
}
@include bp (tablet) {
.teaser li {
@include bp (medium) {
.teaser .project {
float: left;
width: 47%;
margin-left: 5%;
border-bottom: none;
margin-bottom: 4em;
}
.teaser li:first-child {
margin-left: 0;
@@ -85,9 +93,29 @@
}

body.project {
.main {
main {

.text, img {
margin: 2em 0;
}

img {
width: 100%;
}

a {
border-bottom: 2px solid $black;

&:hover {
border-bottom: 2px solid $green;
}
}

h5 {
margin-bottom: 2em;
display: inline-block;

}
}

}
@@ -8,11 +8,15 @@ $green: #00FF66;
// assume that the default is 'small'
// usage: @include bp(large) { ... }
@if $point == tablet { // 641px, 1024px
@media only screen and (min-width: 700px) { @content; }
@media only screen and (min-width: 500px) { @content; }
}
@if $point == medium { // 641px, 1024px
@media only screen and (min-width: 950px) { @content; }
}
@else if $point == large { // 1025px, 1440px
@media only screen and (min-width: 1000px) { @content; }
@media only screen and (min-width: 1200px) { @content; }
}

@else if $point == retina {
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min--moz-device-pixel-ratio: 1.5),
@@ -41,12 +41,12 @@ h1 a, h2 a, h3 a, h4 a {

blockquote {
max-width: 90%;
margin: 1.5em auto 0 auto;
font-size: 2em;
color: $green;
font-family: "Source Sans Pro", sans-serif;
font-style: italic;
text-decoration: underline;
margin-top: 2em;
}

hr {
@@ -55,4 +55,5 @@ hr {

p {
font-size: 1.125em;
line-height: 1.3;
}
@@ -121,35 +121,12 @@ html {
.outer-container {
padding: 1em;

@include bp (tablet) {
@include bp (medium) {
padding: 2em;
}
}


/* Header
-------------------------------------------------- */
.header {
//border-bottom: 2px solid red;
margin-bottom: 1.5em;

.toggle {
color: $green;
}
}
.logo {
display: block;
margin-bottom: 1.5em;
float: left;
svg {
width: 60px;
height: 100%;
@include bp (tablet) {
width: 100px;
}
}
}


/* Navigation
-------------------------------------------------- */
@@ -229,10 +206,11 @@ html {
/* Main
-------------------------------------------------- */
.main {
padding-bottom: 3em;
padding-bottom: 5em;
margin: 0 auto;

}

.main hr {
margin: 3em 0;
height: 2px;
@@ -241,13 +219,13 @@ html {
.main figure,
.main ul,
.main ol {
margin-bottom: 1.5em;
margin-bottom: 2em;
}
.main a {
border-bottom: 2px solid #ddd;
border-bottom: 2px solid $black;
}
.main a:hover {
border-color: #222;
border-color: $green;
}

/* Text blocks */
@@ -0,0 +1,12 @@
<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
<msapplication>
<tile>
<square70x70logo src="/mstile-70x70.png"/>
<square150x150logo src="/mstile-150x150.png"/>
<square310x310logo src="/mstile-310x310.png"/>
<wide310x150logo src="/mstile-310x150.png"/>
<TileColor>#2b5797</TileColor>
</tile>
</msapplication>
</browserconfig>
BIN +1.04 KB favicon-16x16.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN +981 Bytes favicon-32x32.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN +2.04 KB favicon-96x96.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN +14.7 KB favicon.ico
Binary file not shown.
@@ -0,0 +1,41 @@
{
"name": "My app",
"icons": [
{
"src": "\/android-chrome-36x36.png",
"sizes": "36x36",
"type": "image\/png",
"density": "0.75"
},
{
"src": "\/android-chrome-48x48.png",
"sizes": "48x48",
"type": "image\/png",
"density": "1.0"
},
{
"src": "\/android-chrome-72x72.png",
"sizes": "72x72",
"type": "image\/png",
"density": "1.5"
},
{
"src": "\/android-chrome-96x96.png",
"sizes": "96x96",
"type": "image\/png",
"density": "2.0"
},
{
"src": "\/android-chrome-144x144.png",
"sizes": "144x144",
"type": "image\/png",
"density": "3.0"
},
{
"src": "\/android-chrome-192x192.png",
"sizes": "192x192",
"type": "image\/png",
"density": "4.0"
}
]
}
BIN +2.41 KB mstile-144x144.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN +2.43 KB mstile-150x150.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN +2.72 KB mstile-310x150.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN +4.52 KB mstile-310x310.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN +2.03 KB mstile-70x70.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
@@ -903,7 +903,7 @@
.fa-laptop:before {
content: "\f109";
}
.fa-tablet:before {
.fa-medium:before {
content: "\f10a";
}
.fa-mobile-phone:before,

Large diffs are not rendered by default.

@@ -34,8 +34,8 @@
<div class="footer-text">
<p>thanks for stopping by</p>
<a href="mailto:hello@gholtz.com"><p>drop me a line</p></a>
<p>thanks for stopping by.</p>
<a href="mailto:hello@gholtz.com"><p>drop me a line.</p></a>
</div>
</div>
@@ -18,6 +18,24 @@
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<?php echo js('assets/js/app.min.js') ?>

<link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.png">
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="/android-chrome-192x192.png" sizes="192x192">
<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96">
<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16">
<link rel="manifest" href="/manifest.json">
<meta name="msapplication-TileColor" content="#2b5797">
<meta name="msapplication-TileImage" content="/mstile-144x144.png">
<meta name="theme-color" content="#ffffff">

<!--
@@ -39,9 +57,10 @@

<div class="outer-container">

<?php snippet('menu') ?>
<div class="toggle">&#215</div>

<div class="toggle">&#215</div>

<?php snippet('menu') ?>

</div>

@@ -1,14 +1,19 @@
<ul class="teaser cf">
<?php foreach(page('work')->children() as $project): ?>
<li>
<h3><a href="<?php echo $project->url() ?>"><?php echo $project->title()->html() ?></a></h3>
<p><?php echo $project->text()->excerpt(80) ?> <a href="<?php echo $project->url() ?>">read&nbsp;more&nbsp;→</a></p>
<?php if($image = $project->images()->sortBy('sort', 'asc')->first()): ?>
<a href="<?php echo $project->url() ?>">
<div class="work_image" style="background-image: url('<?php echo $image->url() ?>');">
</div>
</a>
<?php endif ?>
</li>
<div class="project">
<li>
<h3><a href="<?php echo $project->url() ?>"><?php echo $project->title()->html() ?></a></h3>
<p><?php echo $project->text()->excerpt(150) ?>
<a href="<?php echo $project->url() ?>">read&nbsp;more&nbsp;→</a></p>
</li>
<li>
<?php if($image = $project->images()->sortBy('sort', 'asc')->first()): ?>
<a href="<?php echo $project->url() ?>">
<div class="work_image" style="background-image: url('<?php echo $image->url() ?>');">
</div>
</a>
<?php endif ?>
</li>
</div>
<?php endforeach ?>
</ul>
@@ -19,11 +19,11 @@

</div>

<div id="philosophy">
<div class="green_block">

<div class="text">

<h2>Part UI/UX Designer. Part Developer. Part Copywriter.</h2>
<h2>Part Designer. Part Developer. Part Copywriter.</h2>
<h2>All about the story.</h2>

</div>
@@ -34,30 +34,86 @@

<div class="text">

<h2>Say it soft and slow</h2>
<h2>
Interdisciplinary Turbo Nerd. Truly Real Dude. Low Art/High Concept.
</h2>

<p>
You've got something really important to say, right? Well, go ahead—out with it. Spit it out.

Every design has a story. Never content to just create something beautiful, I am always trying to strengthen the concepts and narratives behind my designs, in order to give them a solid foundation to rest on.
</p>

<p>
What's that? You want to make sure you say it correctly? To make sure there's no doubt about what you mean?
That there's no mistaking the emotions you are trying to convey?
For me, a design is more than a pretty skin drawn tight across an empty shell. It is a living, breathing experience that requires care, consideration, and, above all, thought.
Design can be playful, but still very seriously considered and planned. It can be nostalgic without delusion. It can takes risks and experiment without sacrificing the
simplicity and usefulness we expect from it.
</p>
<p>
Design is alive and I’m trying my damnedest to help it
stay that way.
</p>

</div>

</div>

<div class="green_block">

<div class="text">

<h2>
I want to help you find your story—let's tell it the way it needs to be told.

</h2>

</div>

</div>

<div id="concept_block">

<div class="text">

<h2>It can get messy, but concept is always king.</h2>

<p>
Each new design problem requires a tailor-made solution. There are so many facets to consider. Who is this design going to benefit?
What sort of platform will it live on? Who is going to buy it? Is it even for sale? Is it permanent or time-based? These are all important
questions to consider when starting to plan a living, breathing design.

</p>

<p>
Ultimately, the most important question is this: is there a good enough reason for this thing to exist in the first place? Without a solid conceptual foundation,
things start looking shaky at best. It's an old screenwriter's cliché but it also rings true for design: <span>concept is king</span>. If what you are trying to communicate through design
isn't clear, concise, and contextually appropriate then your story isn't being told properly. Let's work together and figure it out!
</p>

<img src="<?php echo url('assets/images/concept.png') ?>">

</div>

</div>

<div class="green_block featured">

<div class="text">

<h2>Featured Work</h2>

</div>

</div>

<div id="project_blocks">

<a href="work/sigmunds-quest">
<div class="project" style="background-image: url('<?php echo url('content/2-work/1-sigmunds-quest/swordup_main.png') ?>');">
<div class="caption">
<h4>Sigmund's Quest</h4>
<a href="work/sigmunds-quest">
<div class="project" style="background-image: url('<?php echo url('content/2-work/1-sigmunds-quest/swordup_main.png') ?>');">
<div class="caption">
<h4>Sigmund's Quest</h4>
</div>
</div>
</div>
</a>
</a>

<a href="work/polybius">
<div class="project" style="background-image: url('<?php echo url('content/2-work/2-polybius/polybius.jpg') ?>');">
@@ -75,45 +131,27 @@
</div>
</a>

<a href="work/fuckin-booze">
<div class="project" style="background-image: url('<?php echo url('content/2-work/5-fuckin-booze/booklet2.jpg') ?>');">
<a href="work/psu-college-of-the-arts-promos">
<div class="project" style="background-image: url('<?php echo url('content/2-work/6-psu-college-of-the-arts-promos/psucota.png') ?>');">
<div class="caption">
<h4>Fuckin' Booze</h4>
<h4>PSU College of the Arts Promo Videos</h4>
</div>
</div>
</a>

</div>

<div id="concept_block">

<div class="text">
<div class="text bottom">

<h2>It can get messy, but concept is always king.</h2>
<p>
Each new design problem requires a tailor-made solution. There are so many facets to consider. Who is this design going to benefit?
What sort of platform will it live on? Who is going to buy it? Is it even for sale? Is it permanent or time-based? These are all important
questions to consider when starting to plan a living, breathing design.
<h2>

</p>
<a href="/work">See more work.</a>

<p>
Ultimately, the most important question is this: is there a good enough reason for this thing to exist in the first place? Without a solid conceptual foundation,
things start looking shaky at best. It's an old screenwriter's cliché but it also rings true for design: <span>concept is king</span>. If what you are trying to communicate through design
isn't clear, concise, and contextually appropriate then your story isn't being told properly. Let's work together and
</p>

<blockquote>
<p>
I want to help you find your story—and then I want to help you tell it the way it needs to be told.
</p>
</blockquote>

<img src="<?php echo url('assets/images/concept.png') ?>">
</h2>

</div>

</div>

</main>

@@ -4,6 +4,8 @@

<main class="main" role="main">

<a href="/work"><h5>&larr; more work</h5></a>

<h1><?php echo $page->title()->html() ?></h1>

<div class="text">