Skip to content

Commit 76b5a33

Browse files
author
mrmrs
committed
Update to components source
1 parent 7888434 commit 76b5a33

File tree

7 files changed

+344
-1
lines changed

7 files changed

+344
-1
lines changed

‎src/components/articles/feature.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ <h1 class="f1 f-headline-l fw1 i white-60">The Chronicles</h1>
2020
<div class="center measure-wide f5 pv5 lh-copy ph2">
2121
<h1 class="f1 lh-title">The repercussion of ugliness is endless</h1>
2222
<p>
23-
The choice of paper size is one of the rst of any given work to be printed. There are two basic paper size systems in the world: the international A sizes, and the American sizes.
23+
The choice of paper size is one of the first of any given work to be printed. There are two basic paper size systems in the world: the international A sizes, and the American sizes.
2424
</p>
2525
<p>
2626
The international Standard paper sizes, called the A series, is based

‎src/components/definition-lists/simple.html

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
{{{
2+
"bodyClass" : "bg-white"
3+
}}}
4+
<dl class="lh-title pa4 mt0">
5+
<dt class="f6 b">Favorite Song</dt>
6+
<dd class="ml0">Devil Got My Woman - Skip James</dd>
7+
<dt class="f6 b mt2">Favorite Movie</dt>
8+
<dd class="ml0">Primer</dd>
9+
<dt class="f6 b mt2">Favorite Artist</dt>
10+
<dd class="ml0">Kanye West</dd>
11+
<dt class="f6 b mt2">Favorite Food</dt>
12+
<dd class="ml0">Cheese Pizza</dd>
13+
<dt class="f6 b mt2">Least Favorite Flavor</dt>
14+
<dd class="ml0">Cherry</dd>
15+
<dt class="f6 b mt2">Favorite Hobby</dt>
16+
<dd class="ml0">Eating Cheese Pizza</dd>
17+
</dl>

‎src/components/lists/follower-notifications-rounded-square-avatar.html

+117
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,117 @@
1+
{{{
2+
"bodyClass" : "bg-white"
3+
}}}
4+
<main class="mw6 center">
5+
<article class="dt w-100 bb b--black-05 pb2 mt2" href="#0">
6+
<div class="dtc w2 w3-ns v-mid">
7+
<img src="http://mrmrs.io/photos/p/2.jpg" class="ba b--black-10 db br2 w2 w3-ns h2 h3-ns"/>
8+
</div>
9+
<div class="dtc v-mid pl3">
10+
<h1 class="f6 f5-ns fw6 lh-title black mv0">Young Gatchell </h1>
11+
<h2 class="f6 fw4 mt0 mb0 black-60">@yg</h2>
12+
</div>
13+
<div class="dtc v-mid">
14+
<form class="w-100 tr">
15+
<button class="f6 button-reset bg-white ba b--black-10 dim pointer pv1 black-60" type="submit">+ Follow</button>
16+
</form>
17+
</div>
18+
</article>
19+
<article class="dt w-100 bb b--black-05 pb2 mt2" href="#0">
20+
<div class="dtc w2 w3-ns v-mid">
21+
<img src="http://mrmrs.io/photos/p/3.jpg" class="ba b--black-10 db br2 w2 w3-ns h2 h3-ns"/>
22+
</div>
23+
<div class="dtc v-mid pl3">
24+
<h1 class="f6 f5-ns fw6 lh-title black mv0">Arnoldo Degraff</h1>
25+
<h2 class="f6 fw4 mt0 mb0 black-60">@99xx88randomhandle</h2>
26+
</div>
27+
<div class="dtc v-mid">
28+
<form class="w-100 tr">
29+
<button class="f6 button-reset bg-white ba b--black-10 dim pointer pv1 black-60" type="submit">+ Follow</button>
30+
</form>
31+
</div>
32+
</article>
33+
<article class="dt w-100 bb b--black-05 pb2 mt2" href="#0">
34+
<div class="dtc w2 w3-ns v-mid">
35+
<img src="http://mrmrs.io/photos/p/4.jpg" class="ba b--black-10 db br2 w2 w3-ns h2 h3-ns"/>
36+
</div>
37+
<div class="dtc v-mid pl3">
38+
<h1 class="f6 f5-ns fw6 lh-title black mv0">Deirdre Lachance</h1>
39+
<h2 class="f6 fw4 mt0 mb0 black-60">@favfavfav</h2>
40+
</div>
41+
<div class="dtc v-mid">
42+
<form class="w-100 tr">
43+
<button class="f6 button-reset bg-white ba b--black-10 dim pointer pv1 black-60" type="submit">+ Follow</button>
44+
</form>
45+
</div>
46+
</article>
47+
<article class="dt w-100 bb b--black-05 pb2 mt2" href="#0">
48+
<div class="dtc w2 w3-ns v-mid">
49+
<img src="http://mrmrs.io/photos/p/5.jpg" class="ba b--black-10 db br2 w2 w3-ns h2 h3-ns"/>
50+
</div>
51+
<div class="dtc v-mid pl3">
52+
<h1 class="f6 f5-ns fw6 lh-title black mv0">Frederic Starner</h1>
53+
<h2 class="f6 fw4 mt0 mb0 black-60">@hungryhippofanatic</h2>
54+
</div>
55+
<div class="dtc v-mid">
56+
<form class="w-100 tr">
57+
<button class="f6 button-reset bg-white ba b--black-10 dim pointer pv1 black-60" type="submit">+ Follow</button>
58+
</form>
59+
</div>
60+
</article>
61+
<article class="dt w-100 bb b--black-05 pb2 mt2" href="#0">
62+
<div class="dtc w2 w3-ns v-mid">
63+
<img src="http://mrmrs.io/photos/p/6.jpg" class="ba b--black-10 db br2 w2 w3-ns h2 h3-ns"/>
64+
</div>
65+
<div class="dtc v-mid pl3">
66+
<h1 class="f6 f5-ns fw6 lh-title black mv0">Cleveland Ridout</h1>
67+
<h2 class="f6 fw4 mt0 mb0 black-60">@purethinking</h2>
68+
</div>
69+
<div class="dtc v-mid">
70+
<form class="w-100 tr">
71+
<button class="f6 button-reset bg-white ba b--black-10 dim pointer pv1 black-60" type="submit">+ Follow</button>
72+
</form>
73+
</div>
74+
</article>
75+
<article class="dt w-100 bb b--black-05 pb2 mt2" href="#0">
76+
<div class="dtc w2 w3-ns v-mid">
77+
<img src="http://mrmrs.io/photos/p/7.jpg" class="ba b--black-10 db br2 w2 w3-ns h2 h3-ns"/>
78+
</div>
79+
<div class="dtc v-mid pl3">
80+
<h1 class="f6 f5-ns fw6 lh-title black mv0">Leticia Fearon</h1>
81+
<h2 class="f6 fw4 mt0 mb0 black-60">@retrofeels</h2>
82+
</div>
83+
<div class="dtc v-mid">
84+
<form class="w-100 tr">
85+
<button class="f6 button-reset bg-white ba b--black-10 dim pointer pv1 black-60" type="submit">+ Follow</button>
86+
</form>
87+
</div>
88+
</article>
89+
<article class="dt w-100 bb b--black-05 pb2 mt2" href="#0">
90+
<div class="dtc w2 w3-ns v-mid">
91+
<img src="http://mrmrs.io/photos/p/10.jpg" class="ba b--black-10 db br2 w2 w3-ns h2 h3-ns"/>
92+
</div>
93+
<div class="dtc v-mid pl3">
94+
<h1 class="f6 f5-ns fw6 lh-title black mv0">Ahmad Backer</h1>
95+
<h2 class="f6 fw4 mt0 mb0 black-60">@ahmadBB</h2>
96+
</div>
97+
<div class="dtc v-mid">
98+
<form class="w-100 tr">
99+
<button class="f6 button-reset bg-white ba b--black-10 dim pointer pv1 black-60" type="submit">+ Follow</button>
100+
</form>
101+
</div>
102+
</article>
103+
<article class="dt w-100 bb b--black-05 pb2 mt2" href="#0">
104+
<div class="dtc w2 w3-ns v-mid">
105+
<img src="http://mrmrs.io/photos/p/11.jpg" class="ba b--black-10 db br2 w2 w3-ns h2 h3-ns"/>
106+
</div>
107+
<div class="dtc v-mid pl3">
108+
<h1 class="f6 f5-ns fw6 lh-title black mv0">Carlie Noakes</h1>
109+
<h2 class="f6 fw4 mt0 mb0 black-60">@carnoakes99</h2>
110+
</div>
111+
<div class="dtc v-mid">
112+
<form class="w-100 tr">
113+
<button class="f6 button-reset bg-white ba b--black-10 dim pointer pv1 black-60" type="submit">+ Follow</button>
114+
</form>
115+
</div>
116+
</article>
117+
</main>

‎src/components/lists/follower-notifications.html

+117
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,117 @@
1+
{{{
2+
"bodyClass" : "bg-white"
3+
}}}
4+
<main class="mw6 center">
5+
<article class="dt w-100 bb b--black-05 pb2 mt2" href="#0">
6+
<div class="dtc w2 w3-ns v-mid">
7+
<img src="http://mrmrs.io/photos/p/2.jpg" class="ba b--black-10 db br-100 w2 w3-ns h2 h3-ns"/>
8+
</div>
9+
<div class="dtc v-mid pl3">
10+
<h1 class="f6 f5-ns fw6 lh-title black mv0">Young Gatchell </h1>
11+
<h2 class="f6 fw4 mt0 mb0 black-60">@yg</h2>
12+
</div>
13+
<div class="dtc v-mid">
14+
<form class="w-100 tr">
15+
<button class="f6 button-reset bg-white ba b--black-10 dim pointer pv1 black-60" type="submit">+ Follow</button>
16+
</form>
17+
</div>
18+
</article>
19+
<article class="dt w-100 bb b--black-05 pb2 mt2" href="#0">
20+
<div class="dtc w2 w3-ns v-mid">
21+
<img src="http://mrmrs.io/photos/p/3.jpg" class="ba b--black-10 db br-100 w2 w3-ns h2 h3-ns"/>
22+
</div>
23+
<div class="dtc v-mid pl3">
24+
<h1 class="f6 f5-ns fw6 lh-title black mv0">Arnoldo Degraff</h1>
25+
<h2 class="f6 fw4 mt0 mb0 black-60">@99xx88randomhandle</h2>
26+
</div>
27+
<div class="dtc v-mid">
28+
<form class="w-100 tr">
29+
<button class="f6 button-reset bg-white ba b--black-10 dim pointer pv1 black-60" type="submit">+ Follow</button>
30+
</form>
31+
</div>
32+
</article>
33+
<article class="dt w-100 bb b--black-05 pb2 mt2" href="#0">
34+
<div class="dtc w2 w3-ns v-mid">
35+
<img src="http://mrmrs.io/photos/p/4.jpg" class="ba b--black-10 db br-100 w2 w3-ns h2 h3-ns"/>
36+
</div>
37+
<div class="dtc v-mid pl3">
38+
<h1 class="f6 f5-ns fw6 lh-title black mv0">Deirdre Lachance</h1>
39+
<h2 class="f6 fw4 mt0 mb0 black-60">@favfavfav</h2>
40+
</div>
41+
<div class="dtc v-mid">
42+
<form class="w-100 tr">
43+
<button class="f6 button-reset bg-white ba b--black-10 dim pointer pv1 black-60" type="submit">+ Follow</button>
44+
</form>
45+
</div>
46+
</article>
47+
<article class="dt w-100 bb b--black-05 pb2 mt2" href="#0">
48+
<div class="dtc w2 w3-ns v-mid">
49+
<img src="http://mrmrs.io/photos/p/5.jpg" class="ba b--black-10 db br-100 w2 w3-ns h2 h3-ns"/>
50+
</div>
51+
<div class="dtc v-mid pl3">
52+
<h1 class="f6 f5-ns fw6 lh-title black mv0">Frederic Starner</h1>
53+
<h2 class="f6 fw4 mt0 mb0 black-60">@hungryhippofanatic</h2>
54+
</div>
55+
<div class="dtc v-mid">
56+
<form class="w-100 tr">
57+
<button class="f6 button-reset bg-white ba b--black-10 dim pointer pv1 black-60" type="submit">+ Follow</button>
58+
</form>
59+
</div>
60+
</article>
61+
<article class="dt w-100 bb b--black-05 pb2 mt2" href="#0">
62+
<div class="dtc w2 w3-ns v-mid">
63+
<img src="http://mrmrs.io/photos/p/6.jpg" class="ba b--black-10 db br-100 w2 w3-ns h2 h3-ns"/>
64+
</div>
65+
<div class="dtc v-mid pl3">
66+
<h1 class="f6 f5-ns fw6 lh-title black mv0">Cleveland Ridout</h1>
67+
<h2 class="f6 fw4 mt0 mb0 black-60">@purethinking</h2>
68+
</div>
69+
<div class="dtc v-mid">
70+
<form class="w-100 tr">
71+
<button class="f6 button-reset bg-white ba b--black-10 dim pointer pv1 black-60" type="submit">+ Follow</button>
72+
</form>
73+
</div>
74+
</article>
75+
<article class="dt w-100 bb b--black-05 pb2 mt2" href="#0">
76+
<div class="dtc w2 w3-ns v-mid">
77+
<img src="http://mrmrs.io/photos/p/7.jpg" class="ba b--black-10 db br-100 w2 w3-ns h2 h3-ns"/>
78+
</div>
79+
<div class="dtc v-mid pl3">
80+
<h1 class="f6 f5-ns fw6 lh-title black mv0">Leticia Fearon</h1>
81+
<h2 class="f6 fw4 mt0 mb0 black-60">@retrofeels</h2>
82+
</div>
83+
<div class="dtc v-mid">
84+
<form class="w-100 tr">
85+
<button class="f6 button-reset bg-white ba b--black-10 dim pointer pv1 black-60" type="submit">+ Follow</button>
86+
</form>
87+
</div>
88+
</article>
89+
<article class="dt w-100 bb b--black-05 pb2 mt2" href="#0">
90+
<div class="dtc w2 w3-ns v-mid">
91+
<img src="http://mrmrs.io/photos/p/10.jpg" class="ba b--black-10 db br-100 w2 w3-ns h2 h3-ns"/>
92+
</div>
93+
<div class="dtc v-mid pl3">
94+
<h1 class="f6 f5-ns fw6 lh-title black mv0">Ahmad Backer</h1>
95+
<h2 class="f6 fw4 mt0 mb0 black-60">@ahmadBB</h2>
96+
</div>
97+
<div class="dtc v-mid">
98+
<form class="w-100 tr">
99+
<button class="f6 button-reset bg-white ba b--black-10 dim pointer pv1 black-60" type="submit">+ Follow</button>
100+
</form>
101+
</div>
102+
</article>
103+
<article class="dt w-100 bb b--black-05 pb2 mt2" href="#0">
104+
<div class="dtc w2 w3-ns v-mid">
105+
<img src="http://mrmrs.io/photos/p/11.jpg" class="ba b--black-10 db br-100 w2 w3-ns h2 h3-ns"/>
106+
</div>
107+
<div class="dtc v-mid pl3">
108+
<h1 class="f6 f5-ns fw6 lh-title black mv0">Carlie Noakes</h1>
109+
<h2 class="f6 fw4 mt0 mb0 black-60">@carnoakes99</h2>
110+
</div>
111+
<div class="dtc v-mid">
112+
<form class="w-100 tr">
113+
<button class="f6 button-reset bg-white ba b--black-10 dim pointer pv1 black-60" type="submit">+ Follow</button>
114+
</form>
115+
</div>
116+
</article>
117+
</main>

‎src/components/lists/hashtags.html

+55
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
{{{
2+
"bodyClass" : "bg-white"
3+
}}}
4+
<section class="bg-washed-blue pa2 pa4-ns">
5+
<article class="ba b--black-10 br2 bg-white pa4 mw6 center">
6+
<div>
7+
<h4 class="f5 fw4 black-60 dib v-mid mv0 mr3">Hashtags</h4>
8+
<a href="" class="f6 no-underline underline-hover blue dib v-mid mb0">Edit</a>
9+
</div>
10+
<ul class="list f6 pl0 mt3 mb0">
11+
<li class="pv2">
12+
<a href="#" class="link blue lh-title">
13+
<span class="fw7 underline-hover">#AmazingSerena</span>
14+
<span class="db black-60">134.5k mentions</span>
15+
</a>
16+
</li>
17+
<li class="pv2">
18+
<a href="#" class="link blue lh-title">
19+
<span class="fw7 underline-hover">#womenintech</span>
20+
<span class="db black-60">11k mentions</span>
21+
</a>
22+
</li>
23+
<li class="pv2">
24+
<a href="#" class="link blue lh-title">
25+
<span class="fw7 underline-hover">#SenWarrenRoastsWellsFargo</span>
26+
<span class="db black-60">99k mentions</span>
27+
</a>
28+
</li>
29+
<li class="pv2">
30+
<a href="#" class="link blue lh-title">
31+
<span class="fw7 underline-hover">#blackgirlmagic</span>
32+
<span class="db black-60">256.5k mentions</span>
33+
</a>
34+
</li>
35+
<li class="pv2">
36+
<a href="#" class="link blue lh-title">
37+
<span class="fw7 underline-hover">#becauseofthemwecan</span>
38+
<span class="db black-60">4.1k mentions</span>
39+
</a>
40+
</li>
41+
<li class="pv2">
42+
<a href="#" class="link blue lh-title">
43+
<span class="fw7 underline-hover">#gillscottheron</span>
44+
<span class="db black-60">20.11k mentions</span>
45+
</a>
46+
</li>
47+
<li class="pv2">
48+
<a href="#" class="link blue lh-title">
49+
<span class="fw7 underline-hover db">#trending</span>
50+
<span class="db black-60">4.1k mentions</span>
51+
</a>
52+
</li>
53+
</ul>
54+
</article>
55+
</section>

‎src/components/lists/links-animate-color.html

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
{{{
2+
"bodyClass": "bg-white"
3+
}}}
4+
5+
<section class="pa3 pa4-m pa5-l">
6+
<a class="f3 link hover-dark-blue b no-underline black dib ph2 pv1" href="http://mrmrs.io/gifolio">portfolio</a>
7+
<a class="f3 link b hover-blue no-underline black dib ph2 pv1" href="http://mrsjxn.com">music</a>
8+
<a class="f3 link b hover-light-blue no-underline black dib ph2 pv1" href="http://prnt.cc">print work</a>
9+
<a class="f3 link b hover-green no-underline black dib ph2 pv1" href="http://mrmrs.io">photography</a>
10+
<a class="f3 link b hover-light-green no-underline black dib ph2 pv1" href="http://mrmrs.io/writing">writing</a>
11+
<a class="f3 link b hover-yellow no-underline black dib ph2 pv1" href="http://cssstats.com">cssstats</a>
12+
<a class="f3 link b hover-gold no-underline black dib ph2 pv1" href="http://pesticide.io">pesticide</a>
13+
<a class="f3 link b hover-orange no-underline black dib ph2 pv1" href="http://gfffs.com">gifs</a>
14+
15+
<a class="f3 link b hover-light-red no-underline black dib ph2 pv1" href="http://github.com/mrmrs">github</a>
16+
<a class="f3 link b hover-red no-underline black dib ph2 pv1" href="http://dribbble.com/mrmrs">dribbble</a>
17+
<a class="f3 link b hover-hot-pink no-underline black dib ph2 pv1" href="http://dribbble.com/mrmrs">medium</a>
18+
<a class="f3 link b hover-pink no-underline black dib ph2 pv1" href="http://instagram.com/mrmrs_">instagram</a>
19+
<a class="f3 link b hover-light-purple no-underline black dib ph2 pv1" href="http://unsplash.com/mrmrs">unsplash</a>
20+
<a class="f3 link b hover-purple no-underline black dib ph2 pv1" href="http://twitter.com/mrmrs_">twitter</a>
21+
</section>

‎src/components/quotes/left-border.html

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
{{{
2+
"bodyClass": "bg-white"
3+
}}}
4+
<div class="pa4">
5+
<blockquote class="athelas ml0 mt0 pl4 black-90 bl bw2 b--blue">
6+
<p class="f5 f4-m f3-l lh-copy measure mt0">
7+
Discipline in typography is a prime virtue. Individuality
8+
must be secured by means that are rational. Distinction
9+
needs to be won by simplicity and restraint. It is equally
10+
true that these qualities need to be infused wiht a
11+
certain spirit and vitality, or they degenerate into
12+
dullness and mediocrity.
13+
</p>
14+
<cite class="f6 ttu tracked fs-normal">―Stanley Morison</cite>
15+
</blockquote>
16+
</div>

0 commit comments

Comments
 (0)