Skip to content
Permalink
Browse files

Add assets

  • Loading branch information...
BrettJay committed May 16, 2019
1 parent 3f93b8f commit 2b42be0b16f7fc13047e9f70aa75cd715aab4536
@@ -0,0 +1,153 @@
@import "../../styles/_tools.respond_to.sass";

.canvas {
background: #FAF9FA;
min-height: 100vh;
}

.body {
@include respond-to(840px, 0) {
display: flex;
flex-direction: column;
justify-content: center;
height: calc(100vh - 60px);
}
}

.post {
background: #FFFFFF;
max-width: 840px;
height: 420px;
display: grid;
margin-left: auto;
margin-right: auto;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: 80px 1fr 80px;
grid-template-areas:
"photo header"
"photo body"
"photo footer";
box-shadow: 0 3px 12px 0 rgba(128,0,128,0.11), 0 1px 3px 0 rgba(128,0,128,0.11);
@include respond-to(0, 839px) {
grid-template-columns: 1fr;
grid-template-rows: auto 1fr auto 80px;
height: auto;
grid-template-areas:
"header"
"photo"
"body"
"footer";
}
}

.chart {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 33%;
background-image: linear-gradient(180deg, rgba(0,0,0,0.00) 0%, rgba(0,0,0,0.66) 100%);
z-index: 1;
padding: 30px;
}

.legend {
display: grid;
grid-template-columns: repeat(5, 1fr);
position: absolute;
bottom: 10px;
left: 0;
right: 0;
}

.tick {
text-align: center;
color: #fff;
font-size: 11px;
text-shadow: 0 1px 3px rgba(0,0,0,0.50);
}

.photo {
grid-area: photo;
position: relative;
img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
}
}

.avatar {
height: 30px;
width: 30px;
display: block;
border-radius: 15px;
overflow: hidden;
float: left;
margin-right: 10px;
}

.account {
grid-area: header;
font-size: 14px;
font-weight: bold;
padding: 30px 0 20px;
box-shadow: inset 0 -1px 0 hsla(300,100,50,0.05);
margin: 0 30px;
line-height: 30px;
}

.timeline {
background: url(../../images/brewing-print/sparks.svg) 0 100% repeat-x;
}

.caption {
grid-area: body;
padding: 30px;
color: #3C173C;
}

.stats {
grid-area: footer;
background: #FDF1FD;
display: grid;
grid-template-columns: repeat(3, 1fr);
place-items: center;
dl {
margin: 10px 0;
padding: 0;
vertical-align: middle;
width: 100%;
text-align: center;
}
dt,
dd {
margin: 0;
padding: 0;
display: inline-block;
vertical-align: middle;
}
dt {
text-indent: -9999em;
user-select: none;
}

dt {
margin-right: 5px;
width: 30px;
height: 30px;
}
}

.iconCoffee {
background: url(../../images/brewing-print/coffee.svg) 50% 50% no-repeat;
}

.iconWater {
background: url(../../images/brewing-print/water.svg) 50% 50% no-repeat;
}

.iconTimer {
background: url(../../images/brewing-print/timer.svg) 50% 50% no-repeat;
}
@@ -8,24 +8,34 @@ function MilligramHeader(props) {
<React.Fragment>
<div className={Menu.header}/>
<nav className={Menu.navigation}>
<a className={active === 'home' && `${Menu.active}`}>
<div className={`${Menu.icon} ${Menu.home}`}/>
<a className={active === 'home' ? `${Menu.active}` : ''}>
<div className={Menu.icon}>
<svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><g fill="#000"><path d="m23 11h-22c-.55228475 0-1-.4477153-1-1 0-.33643382.16614033-.63406348.42085195-.81531995l10.88470315-8.90422733c.1798765-.17363969.424687-.28045272.6944449-.28045272s.5145684.10681303.6944449.28045272l6.3055551 5.158257v-1.43870972c0-.552.448-1 1-1h1c.552 0 1 .448 1 1v3.89285858l1.579148 1.29182147c.2547117.18125647.420852.47888613.420852.81531995 0 .5522847-.4477153 1-1 1z"/><path d="m2 10v12c0 1.105.895 2 2 2h16c1.105 0 2-.895 2-2v-12zm17 11h-14v-8h14z"/></g></svg>
</div>
<div className={Menu.label}>Feed</div>
</a>
<a>
<div className={`${Menu.icon} ${Menu.search}`}/>
<div className={Menu.icon}>
<svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><g fill="none" fillRule="evenodd" stroke="#000" strokeWidth="2" transform="translate(1 1)"><circle cx="9" cy="9" r="9"/><path d="m22 22-6.563-6.563" strokeLinecap="round"/></g></svg>
</div>
<div className={Menu.label}>Search</div>
</a>
<a>
<div className={`${Menu.icon} ${Menu.add}`}/>
<div className={Menu.icon}>
<svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="m12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm5 13h-4v4c0 .553-.448 1-1 1s-1-.447-1-1v-4h-4c-.552 0-1-.447-1-1s.448-1 1-1h4v-4c0-.553.448-1 1-1s1 .447 1 1v4h4c.552 0 1 .447 1 1s-.448 1-1 1z"/></svg>
</div>
<div className={Menu.label}>New</div>
</a>
<a>
<div className={`${Menu.icon} ${Menu.notifications}`}/>
<div className={Menu.icon}>
<svg height="24" viewBox="0 0 26 24" width="26" xmlns="http://www.w3.org/2000/svg"><path d="m12 22c-.452 0-.865-.156-1.2-.409 0 0-10.8-8.705-10.8-15.046 0-3.615 2.93-6.545 6.545-6.545 3.455 0 5.455 3 5.455 3 .0091921-.01376088 2.0079331-3 5.455-3 3.615 0 6.545 2.93 6.545 6.545 0 6.341-10.8 15.046-10.8 15.046-.335.253-.748.409-1.2.409z" fill="none" stroke="#000" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" transform="translate(1 1)"/></svg>
</div>
<div className={Menu.label}>Notifications</div>
</a>
<a className={active === 'profile' && `${Menu.active}`}>
<div className={`${Menu.icon} ${Menu.profile}`}/>
<a className={active === 'profile' ? `${Menu.active}` : ''}>
<div className={Menu.icon}>
<svg height="23" viewBox="0 0 22 23" width="22" xmlns="http://www.w3.org/2000/svg"><path d="m17 6c0-3.314-2.686-6-6-6s-6 2.686-6 6v1c0 3.314 2.686 6 6 6s6-2.686 6-6c0-.169 0-.831 0-1zm4.625 14.09c-1.479-1.922-6.621-4.09-10.627-4.09s-9.146 2.167-10.625 4.09c-.914 1.189-.043 2.91 1.456 2.91h18.34c1.499 0 2.37-1.721 1.456-2.91z"/></svg>
</div>
<div className={Menu.label}>Profile</div>
</a>
</nav>
@@ -66,6 +66,7 @@
.icon {
width: 30px;
height: 30px;
padding: 3px 0;
margin-left: auto;
margin-right: auto;
}
@@ -75,26 +76,6 @@
transition: color 0.2s ease;
}

.home {
background: url(../../images/responsive-menu/home.svg) 50% 50% no-repeat;
}

.search {
background: url(../../images/responsive-menu/search.svg) 50% 50% no-repeat;
}

.add {
background: url(../../images/responsive-menu/add.svg) 50% 50% no-repeat;
}

.notifications {
background: url(../../images/responsive-menu/notifications.svg) 50% 50% no-repeat;
}

.profile {
background: url(../../images/responsive-menu/profile.svg) 50% 50% no-repeat;
}

@include respond-to(ipad-up) {
.navigation a {
display: flex;
@@ -120,4 +101,8 @@
.label {
color: #800080;
}
.icon svg,
.icon g {
fill: #800080;
}
}
@@ -0,0 +1 @@
<svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><g fill="#5a265a"><path d="m22.028 7.972c-3.105-3.105-8.768-2.476-12.65 1.406s-4.51 9.545-1.406 12.65 8.768 2.476 12.65-1.406 4.511-9.545 1.406-12.65zm-10.251 11.268c-.013.548-.468.983-1.017.97-.266-.007-.505-.117-.679-.291-.185-.185-.298-.443-.291-.726.032-1.381 1.116-4.239 4.983-5.164 3.32-.795 3.446-3.17 3.45-3.27.02-.544.474-.976 1.018-.963.545.014.977.456.969 1-.017 1.38-1.08 4.235-4.975 5.166-3.361.805-3.457 3.253-3.458 3.278z"/><path d="m4.068 15.773c.305-2.742 1.614-5.419 3.683-7.579.726-2.159-.417-3.442-.475-3.505-.373-.4-.358-1.031.039-1.409.397-.377 1.02-.371 1.401.021.522.536 1.129 1.595 1.252 2.992 1.423-.981 2.986-1.671 4.584-2.023-1.448-2.579-3.84-4.27-6.552-4.27-4.418 0-8 4.477-8 10 0 3.784 1.682 7.077 4.163 8.775-.171-.954-.211-1.959-.095-3.002z"/></g></svg>
Binary file not shown.
@@ -0,0 +1 @@
<svg height="79" viewBox="0 0 353 79" width="353" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><linearGradient id="a" x1="50%" x2="50%" y1=".338%" y2="100%"><stop offset="0" stop-color="#cddaff"/><stop offset="1" stop-color="#38a5ff"/></linearGradient><path id="b" d="m338.25 648.644068 1.466511-.241029c4.383282-.720416 8.375596-2.953872 11.283119-6.312216l7.649244-8.835285c.898108-1.037363 1.905946-1.974387 3.005877-2.794674l3.51945-2.624675c3.140272-2.341897 6.927658-3.6559 10.843589-3.762095l43.656966-1.183918c.216819-.00588.433709-.00882.650608-.00882h24.037659c3.707539 0 7.364667-.858964 10.684533-2.509519l24.145657-12.004621c.537669-.267315 1.08518-.514359 1.641378-.740609l5.227728-2.126533c1.038593-.422479 2.135048-.685641 3.252255-.780579l.67118-.057035c.67586-.057433 1.353851-.086189 2.032148-.086189h25.482098 2.03272c2.292589 0 4.566253-.414917 6.711068-1.224692l12.387607-4.676941c.880748-.332526 1.784992-.599133 2.705261-.797616l3.835921-.827331c.83636-.180386 1.697607-.214837 2.545703-.101831l.400383.053349c.586131.0781 1.178533.098246 1.768616.060145l17.522208-1.131377c1.69251-.109283 3.319695-.694583 4.694021-1.688446l11.564569-8.363078c.880665-.636865 1.8694-1.108955 2.91833-1.393411l12.448453-3.375851c.640598-.173722 1.301404-.261733 1.96514-.261733h24.948278c1.350491 0 2.683668-.303924 3.900724-.889245l4.768665-2.293405c.914959-.440033 1.897777-.72208 2.90684-.834198l52.475493-5.83061v79h-351.639315c-.376925 0-.682484-.305558-.682484-.682484 0-.334205.242018-.619247.571799-.673448z"/><filter id="c" height="102.5%" width="98.4%" x="1.9%" y="-1.3%"><feGaussianBlur in="SourceAlpha" result="shadowBlurInner1" stdDeviation=".5"/><feOffset dy="1" in="shadowBlurInner1" result="shadowOffsetInner1"/><feComposite in="shadowOffsetInner1" in2="SourceAlpha" k2="-1" k3="1" operator="arithmetic" result="shadowInnerInner1"/><feColorMatrix in="shadowInnerInner1" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.158298733 0"/></filter></defs><g fill="none" fill-rule="evenodd" transform="translate(-337 -571)"><use fill="url(#a)" fill-opacity=".86" xlink:href="#b"/><use fill="#000" filter="url(#c)" xlink:href="#b"/></g></svg>
@@ -0,0 +1 @@
<svg height="61" viewBox="0 0 1 61" width="1" xmlns="http://www.w3.org/2000/svg"><path d="m292 569h1v1h-1zm0 20h1v1h-1zm0 20h1v1h-1zm0 20h1v1h-1z" fill="#fff" fill-opacity=".3" fill-rule="evenodd" transform="translate(-292 -569)"/></svg>
@@ -0,0 +1 @@
<svg height="24" viewBox="0 0 22 24" width="22" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd" transform="translate(1)"><path d="m12 3h-4v-2c0-.552.448-1 1-1h2c.552 0 1 .448 1 1z" fill="#5a265a" fill-rule="nonzero"/><path d="m0 13c0 5.523 4.477 10 10 10s10-4.477 10-10-4.477-10-10-10-10 4.477-10 10zm18-10 1 1" stroke="#5a265a" stroke-linecap="round" stroke-width="2"/><path d="m0 13c0 5.486 4.514 10 10 10 2.35 0 4.627-.829 6.428-2.34l-6.428-7.66v-10c-5.486 0-10 4.514-10 10z" fill="#5a265a" fill-rule="nonzero"/></g></svg>
@@ -0,0 +1 @@
<svg height="24" viewBox="0 0 20 24" width="20" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="m14 5c0-1.94 0-4 0-4 0-.552-.448-1-1-1h-10c-.488 0-.999.319-.999 1 0 .982 1.999 1.873 1.999 4 0 2.966-4 4.972-4 8v9c0 1.105.895 2 2 2h14c1.105 0 2-.895 2-2v-9c0-2.98-4-5.011-4-8zm-12 8c0-.821.766-1.779 1.578-2.794 1.135-1.42 2.422-3.029 2.422-5.206 0-1.271-.443-2.254-.935-3h5.935c.552 0 1 .448 1 1v2c0 1.261.484 2.387.898 3.121.223.393-.074.879-.525.879h-4.19c-.632 0-1.233.296-1.604.808-1.18 1.627-2.544 3.032-2.544 4.555v3.619c0 .562-.456 1.017-1.017 1.017-.562.001-1.018-.455-1.018-1.016z" fill="#5a265a" fill-rule="nonzero"/><path d="m18.121 7.502c.55-.685.879-1.555.879-2.502 0-2.209-1.791-4-4-4h-3" stroke="#5a265a" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/></g></svg>
@@ -1,7 +1,53 @@
import Menu from "../components/responsive-menu/menu.module.scss"
import BrewingPrint from "../components/brewing-print/print.module.scss"
import Header from "../components/responsive-menu/header"

<div className={Menu.container}>
<Header active={'profile'} />
import Profile from "../images/markdown/avatar.jpg"
import Photo from "../images/brewing-print/photo.jpg"
import PourChart from "../images/brewing-print/pour.svg"

<div className={BrewingPrint.canvas}>
<div className={Menu.container}>
<Header active={'profile'} />
</div>
<div className={BrewingPrint.body}>
<div className={BrewingPrint.post}>
<div className={BrewingPrint.photo}>
<div className={BrewingPrint.chart}>
<div className={BrewingPrint.timeline}>
<img src={PourChart} alt="Pour chart"/>
</div>
<div className={BrewingPrint.legend}>
<div className={BrewingPrint.tick}>0:00</div>
<div className={BrewingPrint.tick}>0:35</div>
<div className={BrewingPrint.tick}>1:10</div>
<div className={BrewingPrint.tick}>1:35</div>
<div className={BrewingPrint.tick}>2:20</div>
</div>
</div>
<img src={Photo} alt="Coffee"/>
</div>
<div className={BrewingPrint.account}>
<img src={Profile} alt="brettjay" className={BrewingPrint.avatar}/>
brettjay
</div>
<div className={BrewingPrint.caption}>
A pretty good caff, 10/10 would drink again!
</div>
<div className={BrewingPrint.stats}>
<dl>
<dt className={BrewingPrint.iconCoffee}>Coffee</dt>
<dd>13.5g</dd>
</dl>
<dl>
<dt className={BrewingPrint.iconWater}>Water</dt>
<dd>202.5g</dd>
</dl>
<dl>
<dt className={BrewingPrint.iconTimer}>Time</dt>
<dd>02:17</dd>
</dl>
</div>
</div>
</div>
</div>

0 comments on commit 2b42be0

Please sign in to comment.
You can’t perform that action at this time.