Skip to content
Permalink
Browse files

Update note component

  • Loading branch information...
dandevri committed Aug 9, 2019
1 parent 68ce415 commit 2f4d6878d3f342f8a2c692f1b695745c4f69de0a
@@ -10,3 +10,4 @@ trim_trailing_whitespace = true

[*.md]
trim_trailing_whitespace = false
insert_final_newline = false
@@ -26,13 +26,19 @@

{% macro list(url, title, content, date, type) %}
<li class="card card-list">
<a href="{{ url }}">{{ title }}</a>
<p>{{ content }}</p>
<span class="list-type">{{ type }}</span>
<div class="list-content content">
{% if title %}
<span href="{{ url }}">{{ title }}</span>
{% endif %}
{{ content }}
</div>
<div class="list-meta">
<img class="list-avatar" src="/static/img/avatar.jpg" alt="Profile Picture of Danny de Vries">
<span>Danny de Vries</span>
<time datetime="{{ date | htmlDateString }}"> ▪ {{ date | readableDate }}</time><br>
<small>Danny de Vries</small>
<span class="divider">·</span>
<time datetime="{{ date | htmlDateString }}"> {{ date | readableDate }}</time>
<span class="list-type">{{ type }}</span>
<a href="{{ url }}"></a>
</div>
</li>
{% endmacro %}
@@ -1,6 +1,7 @@
.card {
display: inline-block;
padding: $s2;
width: 40em;
background: $cm;

&-item {
background: $cm;
@@ -14,27 +15,43 @@
}

&-list {
@mixin reset-list;
border: $b1;
padding: $s2;
position: relative;

.list-meta {
display: flex;
align-items: center;
background: $cn;
padding: $s0 $s4 $s0 $s4;
}

.list-content {
padding: $s4 $s4 $s0 $s4;
}

.list-type {
position: absolute;
top: 0;
right: 0;
padding: $s-2 $s-1;
padding: $s-3 $s-1;
background: $cc;
color: $cn;
font-size: $s-1;
position: absolute;
bottom: 0;
right: 0;
}

.list-avatar {
width: $s4;
border-radius: 100%;
margin-right: $s1;
}

a {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
display: block;
}
}
}
@@ -1,5 +1,5 @@
header {
padding: calc($s6 * 2);
padding: $s6 calc($s6 * 2) ;
color: $cc;
border-bottom: $b1;
background: $cm;
@@ -7,7 +7,7 @@ header > * + * {
}

main {
padding: calc($s6 * 2);
padding: $s6 calc($s6 * 2);
}

p,
@@ -33,3 +33,15 @@ h2 {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(30em, 1fr));
}

.container {
width: $width;
}

.container > * + * {
margin-top: $s4;
}

.content > * + * {
margin-top: $s2;
}
@@ -37,10 +37,13 @@ h4 { font-size: $s3; }
h5 { font-size: $s2; }
h6 { font-size: $s1; }

small { font-size: $s0; }
time { font-size: $s0; }
small {
font-size: $s-1;
font-weight: 700;
}

time { font-size: $s-1; }

time {
text-transform: uppercase;
letter-spacing: 0.1rem;
}
@@ -20,3 +20,21 @@
ul {
list-style-image: url(/static/img/marker-dark.svg);
}

.divider {
margin: $s-2 $s-2;
}

.line {
position: relative;
&:before {
content: '';
display: block;
width: 1px;
background-color: $cc;
position: absolute;
top: 0;
bottom: 0;
left: 2.5rem;
}
}
@@ -20,6 +20,7 @@ $width: 45rem;

$s-1: calc($base / $ratio);
$s-2: calc($base / $ratio / $ratio);
$s-3: calc($base / $ratio / $ratio / $ratio);

/* Scale */
$s0: calc($base);

Some generated files are not rendered by default. Learn more.

@@ -5,7 +5,7 @@ permalink: notes/
---
{% import 'components/atoms/card.njk' as card %}

<ol class="note-list">
<ol class="container line">
{%- for note in collections.note | reverse -%}
{{ card.list
(
@@ -3,6 +3,7 @@ title: First link
description: First link description
date: 2019-07-21
tags: link
type: link
layout: layouts/default.njk
permalink: /link/1/index.html
---
@@ -1,10 +1,9 @@
---
title: This is my first note
date: 2019-05-31
tags: note
type: learning
layout: layouts/default.njk
permalink: /notes/1/index.html
---

Strategy monetization vesting period startup incubator. [Incubator focus](#) iPhone business-to-consumer seed round responsive web design growth hacking niche market angel investor.
Traction scrum project product management android assets handshake mass market branding iPhone business model canvas value proposition influencer. Partnership rockstar freemium advisor release market. Vesting period buzz entrepreneur twitter long tail business model canvas validation influencer bandwidth channels iPhone.

0 comments on commit 2f4d687

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