443 _sass/_base.scss
View file

Large diffs are not rendered by default.

151 _sass/_mixins.scss
View file

This file was deleted.

5 _sass/components/_button.scss
View file
@@ -0,0 +1,5 @@
.button{

@include button;

}
27 _sass/components/_client-list.scss
View file
@@ -0,0 +1,27 @@
.client-list {
padding: 20px 0;
display: flex;
flex-wrap: wrap;
justify-content: center;
}

.client-list__logo {
flex: 0 0 50%;
padding: 10%;

@media screen and (min-width: 580px) {
flex-basis: 33.33%;
padding: 8%;
}

@media screen and (min-width: 768px) {
flex-basis: 25%;
padding: 6%;
}
}

.client-list__logo-image {
display: block;
width: 100%;
height: auto;
}
19 _sass/components/_content-wrapper.scss
View file
@@ -0,0 +1,19 @@
.content-wrapper {

.body--home & {
padding: 30px;
text-align: center;
border-top: solid 1px darken($white, 7%);
border-bottom: solid 1px darken($white, 7%);

@media screen and (min-width: 768px) {
border: none;
padding: 55px;
position: fixed;
width: 100%;
top: 50%;
text-align: center;
transform: translateY(-60%);
}
}
}
20 _sass/components/_homepage-background.scss
View file
@@ -0,0 +1,20 @@
.body--home{

&::before {

@include absoluteFull(0);
content: '';
display: none;
position: fixed;
background: $white url('../img/background.png') 0 0 repeat scroll;
background-size: 450px;
z-index: 0;
opacity: 0.5;

@media screen and (min-width: 768px) {
display: block;
}

}

}
78 _sass/components/_modal.scss
View file
@@ -0,0 +1,78 @@
.modal_overlay{
background: rgba(0,0,0,0.85);
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1000;
display: none;
}

.modal{
display: none;
position: fixed;
background: $white;
color: $black;
top: 50%;
left: 50%;
width: 50%;
max-width: 630px;
min-width: 320px;
height: auto;
z-index: 2000;
visibility: hidden;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
transform: translateX(-50%) translateY(-50%);
}

.modal_content{

h3{
margin: 0;
background: #f8f8f8;
padding: 20px;
}

> div{ padding: 20px; }

p{
margin-top: 0;
}

}

button.close_modal{

}

.modal-show {
visibility: visible;
}

.modal-show ~ .modal_overlay {
opacity: 1;
visibility: visible;
}

//fade effect
.modal_content {
-webkit-transform: scale(0.7);
-moz-transform: scale(0.7);
-ms-transform: scale(0.7);
transform: scale(0.7);
opacity: 0;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
}

.modal-show .modal_content {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
opacity: 1;
}
56 _sass/components/_site-footer.scss
View file
@@ -0,0 +1,56 @@
.site-footer {
color: $gray;
padding: 30px;
font-family: $primaryFont;
display: flex;
justify-content: space-between;

@media screen and (min-width: 768px) {
padding: 55px;
font-size: 0.85em;
}

@media screen and (min-width: 1024px) {
font-size: 1.15em;
}

.body--home & {
@media screen and (min-width: 768px) {
position: fixed;
width: 100%;
bottom: 0;
left: 0;
}
}

}

.site-footer__links {}

.site-footer__link,
.site-footer__text {
display: inline-block;
margin: 0;
padding: 8px;
color: $gray;
}

.site-footer__link {
text-decoration: underline;

@media screen and (min-width: 768px) {
text-decoration: none;
}

&:hover{
@media screen and (min-width: 768px) {
color: $black;
}
}
}

.site-footer__info {
text-align: right;
}

.site-footer__text {}
52 _sass/components/_site-header.scss
View file
@@ -7,7 +7,7 @@
padding: 55px;
}

body.home & {
.body--home & {
@media screen and (min-width: 768px) {
position: fixed;
width: 100%;
@@ -21,7 +21,7 @@
display: block;
padding: 8px;
float: left;
@include transition(opacity, 0.15s, ease-in-out);
transition: opacity 0.15s ease-in-out;

@media screen and (min-width: 768px) {
width: 45px;
@@ -43,8 +43,48 @@

.site-header__nav {

ul {}
li {}
a {}
button {}
float: right;
margin-top: 8px;

@media screen and (min-width: 768px) {
font-size: 1.2em;
margin-top: 6px;
}

@media screen and (min-width: 1024px) {
font-size: 1.3em;
}

ul {
margin: 0;
padding: 0;
}
li {
list-style-type: none;
display: inline-block;

@media screen and (min-width: 768px) {
margin-left: 16px;
}

@media screen and (min-width: 1024px) {
margin-left: 30px;
}
}
a,
button {
border: none;
background: none;
outline: none;
display: block;
padding: 6px 8px;
}

li.current_page a,
li.current_page button,
a:hover,
button:hover{
text-decoration: none;
color: $gray;
}
}
52 _sass/components/_typography.scss
View file
@@ -0,0 +1,52 @@
a{

color: $black;
text-decoration: none;

&:hover{
text-decoration: underline;
}

}

h1,
h2,
h3,
h4,
h5,
h6{
font-weight: 700;
font-family: $primaryFont;
}

.page-title {
font-weight: 300;
font-size: 1.5rem;
padding: 20px;
text-align: center;
margin: 0;

.body--home & {
font-size: 2rem;
font-weight: 700;
padding: 0 0 18px;

@media screen and (min-width: 768px) {
font-size: 3em;
}

@media screen and (min-width: 1024px) {
font-size: 3.8em;
}
}
}

.page-subtitle {
color: $gray;
font-weight: 300;
margin: 0;

@media screen and (min-width: 1024px) {
font-size: 2rem;
}
}
60 _sass/components/_work-item.scss
View file
@@ -0,0 +1,60 @@
.work-items {
margin-top: 2em;
display: flex;
flex-wrap: wrap;
}

.work-item {
flex: 0 0 100%;
padding-bottom: 52px;
position: relative;

@media screen and (min-width: 768px) {
flex-basis: 50%;
}
}

.work-item__image {
display: block;
width: 100%;
height: auto;
}

.work-item__titleblock {
font-weight: 300;
font-size: 1rem;
background: $black;
color: $white;
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
height: 52px;
padding: 10px;
position: absolute;
bottom: 0;
left: 0;
right: 0;
}

.work-item__info {

}

.work-item__client,
.work-item__category {
display: inline-block;
font-size: 1rem;
}

.work-item__client {
margin: 0 6px 0 0;
}

.work-item__category {

}

.work-item__link {
@include button($color: $white, $background: $black);
}
7 _sass/mixins/_absolute-full.scss
View file
@@ -0,0 +1,7 @@
@mixin absoluteFull($size){
position: absolute;
top: $size;
right: $size;
bottom: $size;
left: $size;
}
30 _sass/mixins/_branberg-logo.scss
View file
@@ -0,0 +1,30 @@
@mixin branberg-logo( $height: '100px', $color: '#000' ) {

display: block;
width: $height;
height: $height;
position: relative;
overflow: hidden;

&::before,
&::after {
position: absolute;
left: 0;
content: '';
display: block;
width: 0.77 * $height;
height: 0;
border-top: solid #{$height * 0.46} $color;
border-bottom: solid #{$height * 0.46} rgba(255,255,255,0);
border-right: solid #{$height * 0.23} rgba(255,255,255,0);
}

&::before {
top: 0;
}

&::after {
top: $height * 0.54;
}

}
16 _sass/mixins/_button.scss
View file
@@ -0,0 +1,16 @@
@mixin button($color: $black, $background: $white) {
display: inline-block;
color: $color;
position: relative;
background-color: $background;
border: solid 1px $color;
padding: 6px 10px;
text-align: center;
border-radius: 4px;
transition: opacity 0.15s ease-in-out;

&:hover{
text-decoration: none;
opacity: 0.85;
}
}
7 _sass/mixins/_clearfix.scss
View file
@@ -0,0 +1,7 @@
@mixin clearfix() {
&::after {
clear: both;
content: "";
display: table;
}
}
17 assets/css/styles.scss
View file
@@ -5,11 +5,26 @@
@import "../vendor/normalize.css";
@import "grid";
@import "variables";
@import "mixins";

// mixins
@import 'mixins/absolute-full';
@import 'mixins/button';
@import 'mixins/branberg-logo';
@import 'mixins/clearfix';


@import "modal";

//main site styles
@import 'base';

// components
@import 'components/button';
@import 'components/client-list';
@import 'components/content-wrapper';
@import 'components/homepage-background';
@import 'components/modal';
@import 'components/site-footer';
@import 'components/site-header';
@import 'components/typography';
@import 'components/work-item';
20 index.html
View file
@@ -4,19 +4,7 @@
id : "home"
---

<div id="homepage_background"></div>

<div id="wrapper">

{% include header.html %}

<section id="homepage_content">
<h1>We craft digital experiences.</h1>
<h2>A studio committed to great ideas.</h2>
</section>

{% include footer.html %}

</div><!-- end #wrapper -->

{% include contact_modal.html %}
<section class="content-wrapper">
<h1 class="page-title">We craft digital experiences.</h1>
<h2 class="page-subtitle">A studio committed to great ideas.</h2>
</section>
77 work.html
View file
@@ -4,61 +4,36 @@
id : "work"
---

<div id="wrapper">
<div class="content-wrapper">
<div class="wrap">

{% include header.html %}

<div id="content">
<div class="wrap">

<h1>From concept to creation and beyond, we work with incredible people to make great digital products.</h1>

<ul id="client_list" class="clearfix">
<li><img src="./assets/img/clients/tcf.png" alt="TCF Bank" /></li>
<li><img src="./assets/img/clients/umn.png" alt="University of Minnesota" /></li>
<li><img src="./assets/img/clients/mayo.png" alt="Mayo Clinic" /></li>
<li><img src="./assets/img/clients/deltadental.png" alt="Delta Dental" /></li>
<li><img src="./assets/img/clients/crazeinteractive.png" alt="Craze Interactive" /></li>
<li><img src="./assets/img/clients/hoodieallen.png" alt="Hoodie Allen" /></li>
<li><img src="./assets/img/clients/nexmo.png" alt="Nexmo" /></li>
<li><img src="./assets/img/clients/mikeshard.png" alt="Mike's" /></li>
</ul>
<h1 class="page-title">From concept to creation and beyond, we work with incredible people to make great digital products.</h1>

</div>

<div id="work_container">
<ul class="clearfix">
<li>
<img src="./assets/img/work/mayo01.jpg" alt="Mayo Clinic iOS App" />
<div class="work_label" style="background-color:#d9af82;color:#ffffff;"><div class="label"><span>Mayo Clinic</span> Patient App</div></div>
</li>
<li>
<img src="./assets/img/work/mikes01.jpg" alt="Mike's Hard Lemonade Graphics" />
<div class="work_label" style="background-color:#bb224a;color:#ffffff;"><div class="label"><span>Mike's Hard Lemonade</span> Graphics</div></div>
</li>
<li>
<img src="./assets/img/work/uofm_hockey.jpg" alt="University of Minnesota hockey logo" />
<div class="work_label" style="background-color:#3f0f17;color:#ffffff;"><div class="label"><span>University of Minnesota</span> Graphics</div></div>
</li>
<li>
<img src="./assets/img/work/conte-01.jpg" alt="Jack Conte tour poster" />
<div class="work_label" style="background-color:#1f050e;color:#ffffff;"><div class="label"><span>Jack Conte</span> Tour Poster</div></div>
</li>
<li>
<img src="./assets/img/work/boombox.jpg" alt="Boombox Wordpress Theme" />
<div class="work_label" style="background-color:#1a1a1a;color:#ffffff;"><div class="label"><span>Boombox</span> Premium Wordpress Theme</div><a href="http://demos.branberg.com/?theme=Boombox" target="_blank" class="button">website</a></div>
</li>
<li>
<img src="./assets/img/work/cameraslice01.jpg" alt="Camera Slice Web App" />
<div class="work_label" style="background-color:#222222;color:#ffffff;"><div class="label"><span>Camera Slice</span> Web App</div></div>
</li>
</ul>
<div class="client-list">
{% for client in site.data.client-list %}
<div class="client-list__logo">
<img class="client-list__logo-image" src="{{ site.url }}/assets/img/clients/{{ client.src }}" alt="{{ client.alt }}" />
</div>
{% endfor %}
</div>

</div>

{% include footer.html %}

</div><!-- end #wrapper -->
<div class="work-items">
{% for item in site.data.work-items %}
<div class="work-item">
<img class="work-item__image" src="{{ site.url }}/assets/img/work/{{ item.image }}" alt="{{ item.alt }}" />
<div class="work-item__titleblock" style="background-color:{{ item.background }};">
<div class="work-item__info">
<h3 class="work-item__client">{{ item.client }}</h3>
<span class="work-item__category">{{ item.category }}</span>
</div>
{% if item.link != nil %}
<a class="work-item__link" href="{{ item.link }}">Website</a>
{% endif %}
</div>
</div>
{% endfor %}
</div>

{% include contact_modal.html %}
</div>