.main-content
.notebook
.notebook__inner
.title
h1 Week 18
h3 April 29 - May 6
.days
.days__item
.days__day Monday
.days__list
p Prepare gift
p Travel Day!
p Check ads
p Ad copy change
.days__item
.days__day Tuesday
.days__list
p SEO LP
p New ad creatives
.highlighted
.text
span 7pm: Waitress
.days__item
.days__day Wednesday
.days__list
p SEO LP
p Weekly Meet
.highlighted
.text
span 2pm: Anastasia
.days__item
.days__day Thursday
.days__list
p SEO LP
.highlighted
.text
span 2pm: Come From Away
.text
span 7pm: The Band's Visit
.days__item
.days__day Friday
.days__list
p Notion docs
p Ad report
.highlighted
.text
span 2pm: Dear Evan Hansen
.text
span 7pm: Frozen
.days__item
.days__day Weekend
.days__list
p Meet w/ Rina
.highlighted
.text
span 2pm: Chicago
.text
span 7pm: Mean Girls
.notes
span notes
.notes__list
| - Follow-up customer meet email
br
| - Flight BOS-JFK: 2pm on 29 Apr
.expenses
h4 Weekly Expenses
.expenses__box
span.expenses__title 🏠
span.expenses__amount $ 400
.expenses__box
span.expenses__title 📝
span.expenses__amount $ 120
.expenses__box
span.expenses__title 🍟
span.expenses__amount $ 175
.expenses__box
span.expenses__title 🚆
span.expenses__amount $ 42
.expenses__box
span.expenses__title 📽️
span.expenses__amount $ 520
.expenses__box
span.expenses__title 💸
span.expenses__amount $ 200
.savings
span.expenses__title Savings:
span.expenses__amount $ 145
.picture
.picture__border
img(src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/567707/TSNY.jpg")
figcaption
| Times Square,
br
| NYC ♥
.goals
span weekly
span goals
.goals__inner
.goals__list
.goals__item
.goals__item__checkbox
span ✔
.goals__item__desc One Codepen
.goals__item
.goals__item__checkbox
.goals__item__desc One Blog Post
.goals__item
.goals__item__checkbox
.goals__item__desc One Illustration
.music
.music__title Artist of the Week
.music__artist George Ezra
svg(viewBox="0 0 444.18 444.18")
path(d="M400.348,294.485c-8.014-20.093-24.798-33.091-46.049-35.662c-34.474-4.172-72.55,19.051-104.452,63.713 C178.301,422.701,110.164,429.493,90.976,429.168c-16.64-0.268-27.452-5.433-30.785-10.433 c-8.769-13.154,9.513-36.94,20.978-48.972c8.255,6.058,18.181,9.334,28.613,9.334c12.955,0,25.134-5.045,34.294-14.206 l106.461-106.46c2.786,0.3,5.602,0.467,8.444,0.467c20.7,0,40.162-8.062,54.801-22.7c14.638-14.638,22.699-34.1,22.699-54.801 c0-20.701-8.062-40.163-22.699-54.801c-30.219-30.217-79.385-30.215-109.602,0c-14.638,14.638-22.699,34.1-22.699,54.801 c0,2.842,0.167,5.658,0.467,8.444L75.488,296.304c-9.161,9.16-14.206,21.339-14.206,34.294c0,10.412,3.265,20.319,9.3,28.564 c-4.132,4.317-10.097,11.035-15.416,18.867c-16.741,24.653-13.295,40.269-7.456,49.027c6.927,10.392,23.011,16.788,43.023,17.11 c0.541,0.009,1.089,0.013,1.651,0.013c17.095,0,43.821-4.224,76.704-23.5c33.207-19.465,64.485-49.552,92.964-89.424 c28.193-39.471,62.012-60.985,90.444-57.541c15.637,1.891,27.999,11.487,33.918,26.327c10.44,26.179-0.117,62.094-28.242,96.072 c-8.815,10.649-16.981,21.185-24.273,31.314c-2.42,3.362-1.656,8.049,1.705,10.469s8.049,1.657,10.469-1.705 c7.096-9.856,15.054-20.123,23.654-30.513C401.406,367.408,412.853,325.841,400.348,294.485z M86.095,354.286 c-6.327-6.327-9.812-14.74-9.812-23.688c0-6.392,1.787-12.505,5.108-17.785l46.177,46.177c-5.28,3.322-11.394,5.108-17.785,5.108 C100.835,364.098,92.422,360.613,86.095,354.286z M214.788,225.593c-11.805-11.805-18.306-27.5-18.306-44.194 c0-3.396,0.283-6.747,0.811-10.036l71.725,71.725c-3.289,0.528-6.64,0.811-10.036,0.811 C242.288,243.899,226.593,237.397,214.788,225.593z M214.788,137.204c12.185-12.184,28.189-18.276,44.194-18.276 s32.01,6.092,44.193,18.276c11.806,11.805,18.307,27.5,18.307,44.194s-6.501,32.39-18.307,44.194 c-5.276,5.276-11.333,9.484-17.905,12.534l-83.017-83.017C205.304,148.537,209.512,142.48,214.788,137.204z M204.182,236.199 c8.337,8.337,18.243,14.533,29.047,18.329l-94.455,94.455l-47.376-47.376l94.455-94.456 C189.649,217.956,195.844,227.862,204.182,236.199z")
path(d="M71.404,156.771c3.832,0,7.727-0.683,11.515-2.124c8.114-3.085,14.542-9.146,18.097-17.065s3.815-16.75,0.729-24.864 L74.201,40.279l60.756-23.103l17.82,46.862c-5.879-1.236-12.163-0.87-18.183,1.419c-16.75,6.37-25.195,25.179-18.826,41.93 c4.929,12.961,17.306,20.95,30.414,20.95c3.832,0,7.727-0.683,11.515-2.124c8.114-3.085,14.542-9.146,18.097-17.065 s3.815-16.75,0.729-24.864l-30.211-79.45c-0.707-1.859-2.124-3.362-3.938-4.176s-3.879-0.875-5.738-0.168L61.859,28.924 c-3.872,1.472-5.817,5.804-4.345,9.676L78,92.472c-5.879-1.236-12.163-0.869-18.183,1.419c-16.75,6.37-25.195,25.179-18.826,41.93 C45.919,148.782,58.296,156.771,71.404,156.771z M162.109,103.004c-1.915,4.264-5.375,7.528-9.745,9.189 c-9.021,3.428-19.147-1.118-22.578-10.137c-3.429-9.02,1.118-19.148,10.137-22.578c2.041-0.776,4.137-1.144,6.201-1.144 c7.058,0,13.723,4.302,16.377,11.281C164.163,93.985,164.024,98.739,162.109,103.004z M65.148,107.912 c2.041-0.776,4.137-1.144,6.201-1.144c7.058,0,13.723,4.302,16.377,11.281c1.661,4.37,1.522,9.124-0.393,13.389 c-1.915,4.264-5.375,7.528-9.745,9.189c-9.021,3.429-19.147-1.118-22.578-10.137C51.582,121.47,56.129,111.342,65.148,107.912z")
.tracker
each val in ['M','T','W','T','F','S','S']
.tracker__day= val
.tracker__title 🏃♀️ Gym
- for (var i=0; i<7; i++)
.tracker__bubble
.tracker__title 📖 Read
- for (var i=0; i<7; i++)
.tracker__bubble
.tracker__title 🍺 No Alcohol
- for (var i=0; i<7; i++)
.tracker__bubble
aside.context
.explanation
| Continuation of this
a(href="https://codepen.io/oliviale/full/bLYQQE" target="_blank") Moleskine pen
| .
br
| Part of the
a(href="https://codepen.io/collection/DQvYpQ" target="_blank") CSS Grid collection here
| .
footer
a(href="https://twitter.com/meowlivia_" target="_blank")
i.icon-social-twitter.icons
a(href="https://github.com/oliviale" target="_blank")
i.icon-social-github.icons
a(href="https://dribbble.com/oliviale" target="_blank")
i.icon-social-dribbble.icons
View Compiled
$color-black: #111;
$color-red: #cc4b48;
$color-red2: #e4572e;
$color-vermilion: #f4442e;
$color-vermilion2: #d05b58;
$color-pink: #efb8ba;
$color-pink2: #e79598;
$color-pink3: #db6165;
@mixin text-shadow() {
text-shadow: 2px 1px 0 #fbfae8, 5px 4px 0 coral;
}
* {
box-sizing: border-box;
}
body {
background: #222;
font-family: "Gochi Hand", sans-serif;
color: #333;
}
aside.context {
text-align: center;
color: #fff;
line-height: 1.7;
font-size: 20px;
letter-spacing: .5px;
a {
text-decoration: none;
color: #fff;
padding: 3px 0;
border-bottom: 1px dashed;
&:hover {
border-bottom: 1px solid;
}
}
.explanation {
max-width: 700px;
margin: 4em auto 0;
}
}
footer {
text-align: center;
margin: 4em auto;
width: 100%;
a {
text-decoration: none;
display: inline-block;
width: 45px;
height: 45px;
border-radius: 50%;
background: transparent;
border: 1px dashed #fff;
color: #fff;
margin: 5px;
&:hover {
background: rgba(255, 255, 255, 0.1);
}
.icons {
margin-top: 12px;
display: inline-block;
font-size: 20px;
}
}
}
.main-content {
margin: 5em auto;
}
.notebook {
max-width: 800px;
min-width: 550px;
min-height: 570px;
margin: auto;
border-radius: 16px;
background: $color-red;
padding: 2px 4px 2.5px;
&__inner {
width: 100%;
height: 100%;
position: relative;
border-radius: 16px;
background: linear-gradient(90deg, #fbfae8 15px, transparent 1%) center,
linear-gradient(#fbfae8 15px, transparent 1%) center, #ccc;
background-size: 16px 16px;
display: grid;
padding: 30px 20px 25px;
grid-template-areas:
"title expenses picture"
"days expenses picture"
"days expenses picture"
"days goals quote"
"notes tracker tracker";
grid-template-columns: 50% 30% 20%;
grid-template-rows: 18% auto auto 30% 25%;
&:after {
content: "";
width: 100px;
height: 100%;
top: 0;
margin: auto;
left: 0;
right: 0;
position: absolute;
background: linear-gradient(
to right,
transparent 10%,
rgba(153, 153, 153, 0.05) 50%,
rgba(153, 153, 153, 0.4) 51%,
rgba(153, 153, 153, 0.15) 51.5%,
transparent 90%
);
}
}
}
.title {
grid-area: title;
text-align: center;
h1 {
font: 50px/1 "Lobster", cursive;
@include text-shadow();
margin: 0;
}
h3 {
font: 13px/1.2 "Rock Salt", cursive;
margin: 8px;
}
}
.days {
grid-area: days;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 1fr);
grid-gap: 15px;
margin-right: 22px;
&__item {
border: 2px solid $color-black;
position: relative;
&:nth-child(1) {
box-shadow: 3px 3px 0 0 rgba($color-vermilion2,0.4);
}
&:nth-child(2) {
box-shadow: 3px 3px 0 0 rgba($color-vermilion,0.5);
}
&:nth-child(3) {
box-shadow: 3px 3px 0 0 rgba($color-pink,0.6);
}
&:nth-child(4) {
box-shadow: 3px 3px 0 0 rgba($color-red,0.7);
}
&:nth-child(5) {
box-shadow: 3px 3px 0 0 rgba($color-pink2,0.7);
}
&:nth-child(6) {
box-shadow: 3px 3px 0 0 rgba($color-red2,0.5);
}
}
&__day {
padding: 5px 5px 2px;
font: 14px/1.5 "Special Elite", cursive;
border-bottom: 2px solid $color-black;
}
&__list {
padding: 8px;
font-size: 14px;
line-height: .9;
}
p {
padding-left: 8px;
position: relative;
margin: 5px 0;
&:after {
content: '-';
top: 0;
position: absolute;
left: 0;
}
}
.highlighted {
position: absolute;
width: 100%;
bottom: 0;
padding: 8px;
left: 0;
text-align: center;
.text {
margin-top: 5px;
position: relative;
span {
position: relative;
z-index: 2;
}
&:after {
content: '';
background: rgba($color-pink,0.3);
width: 95%;
height: 100%;
position: absolute;
left: 2px;
top: 0;
z-index: 1;
transform: rotate(-3deg);
}
}
}
}
.notes {
grid-area: notes;
border: 2px solid $color-black;
border-width: 0 2px 2px;
margin: 35px 20px 0 0;
position: relative;
span {
display: block;
margin: -25px 22px;
font: 32px "Lobster", cursive;
@include text-shadow;
&:before {
content: "";
position: absolute;
width: 100%;
height: 2px;
top: 0;
left: 0;
background: #111;
background: linear-gradient(
to right,
#111 15px,
transparent 15px,
transparent 95px,
#111 95px
);
}
}
&__list {
margin-top: 24px;
padding: 10px;
line-height: 1.2;
}
}
.expenses {
grid-area: expenses;
margin: 0 0 20px 20px;
display: grid;
grid-gap: 6px 10px;
align-items: center;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(6, auto);
h4 {
text-align: center;
margin: 0 0 10px;
font: 16px/1 "Rock Salt", cursive;
&:first-of-type {
grid-column: 1 / span 4;
}
}
&__box {
border: 2px solid $color-black;
grid-column: span 2;
padding: 7px 7px 5px;
}
&__title {
font: 4px;
}
&__amount {
font: 19px 'Gochi Hand', cursive;
display: inline-block;
margin-left: 10px;
}
.savings {
position: relative;
grid-column: 1 / span 4;
width: 99%;
padding: 10px 10px 5px;
background: rgba($color-pink, 0.4);
box-shadow: 3px 3px 0 0 rgba($color-pink2, 0.7);
font: 16px/1 "Rock Salt", cursive;
}
}
.picture {
grid-area: picture;
margin-left: 20px;
&__border {
width: 100%;
background: #f9f9f9;
padding: 20px 10px 50px;
height: 95%;
transform: rotate(5deg);
position: relative;
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.15);
&:after {
content: "";
width: 55%;
height: 20px;
top: -10px;
z-index: 5;
left: 25%;
transform: rotate(-2deg);
position: absolute;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
background: rgba(220, 220, 220, 0.4);
}
img {
width: 100%;
height: 100%;
object-fit: cover;
}
figcaption {
margin: 10px 0;
text-align: center;
display: block;
font: 14px/1 "Gochi Hand", cursive;
color: $color-vermilion;
}
}
}
.goals {
grid-area: goals;
margin: 25px 0 0 20px;
border: 2px solid $color-black;
border-width: 0 2px 2px;
position: relative;
&__item {
padding: 3px 12px;
&__checkbox {
border: 2px solid $color-black;
width: 20px;
height: 20px;
display: inline-block;
margin-right: 5px;
position: relative;
span {
font-size: 26px;
display: inline-block;
position: absolute;
top: -4px;
color: $color-pink3;
}
}
&__desc {
display: inline-block;
font: 18px "Gochi Hand", cursive;
vertical-align: top;
}
}
> span:nth-child(1) {
position: absolute;
text-transform: uppercase;
font: 700 9px "Rock Salt", cursive;
top: -30px;
transform: rotate(-15deg);
}
> span:nth-child(2) {
display: block;
margin: -25px 22px;
font: 32px "Lobster", cursive;
@include text-shadow;
&:before {
content: "";
position: absolute;
width: 100%;
height: 2px;
top: 0;
left: 0;
background: #111;
background: linear-gradient(
to right,
#111 15px,
transparent 15px,
transparent 95px,
#111 95px
);
}
}
&__inner {
margin-top: 40px;
}
}
.music {
grid-area: quote;
margin: 25px 0 10px 20px;
position: relative;
&__title {
font: 22px "Special Elite", cursive;
}
&__artist {
color: $color-red2;
margin: 15px 0;
transform: rotate(-10deg);
max-width: 50px;
font: 24px/.8 'Gochi Hand', cursive;
}
svg {
width: 65px;
position: absolute;
bottom: 0px;
right: -10px;
}
}
.tracker {
grid-area: tracker;
display: grid;
margin: 20px 0 0 20px;
grid-template-rows: repeat(4, 28px);
grid-template-columns: max-content repeat(7, 1fr);
align-items: center;
font: 18px/1 "Gochi Hand", cursive;
grid-auto-flow: row;
text-align: center;
&__title {
grid-column: 1;
text-align: left;
padding-right: 15px;
}
&__day {
text-align: center;
&:nth-child(1) {
grid-column-start: 2;
}
}
&__bubble {
border: 1.5px dashed;
margin: auto;
width: 20px;
height: 20px;
border-radius: 50%;
&:nth-child(10),&:nth-child(12),&:nth-child(13) {
background: rgba($color-vermilion,0.5);
}
&:nth-child(17),&:nth-child(18),&:nth-child(19),&:nth-child(22), &:nth-child(23) {
background: rgba($color-pink,0.5);
}
&:nth-child(27),&:nth-child(29),&:nth-child(30) {
background: rgba(coral,0.5);
}
}
}
View Compiled
