git.iko.soy/urbit.org
on master help sign in
Urbit.org: Flattening to 16px
a0c0d95Matilde Park
sass/_main.scss+58−6
compare with master
unifiedsplit
@@ -4,13 +4,20 @@
4// layout
4// layout
5
5
6body {
6body {
7− @extend .sans, .f4, .grid12;
7+ @extend .sans, .grid12;
8+ font-size: 1rem;
8 margin: 0 32px;
9 margin: 0 32px;
9 color: #000;
10 color: #000;
10}
11}
11
12
12nav {
13nav {
13− grid-area: auto / 1 / auto / 3;
14+ grid-area: auto / 1 / auto / 4;
15+ // If you need to flush the nav to break
16+ // the body's margin, use this:
17+ &.full-left {
18+ margin-left: -32px;
19+ padding-left: 32px;
20+ }
14}
21}
15
22
16article {
23article {
@@ -27,6 +34,9 @@ article {
27 &.post-list {
34 &.post-list {
28 grid-area: auto / 4 / auto / 12;
35 grid-area: auto / 4 / auto / 12;
29 }
36 }
37+ li {
38+ margin: 1rem;
39+ }
30}
40}
31
41
32// components
42// components
@@ -37,25 +47,67 @@ ul {
37 padding-inline-start: 0;
47 padding-inline-start: 0;
38 padding-inline-end: 0;
48 padding-inline-end: 0;
39}
49}
50+
40− // images
51+ // images for posts
41img {
52img {
42 max-width: 100%;
53 max-width: 100%;
43}
54}
55+
44 // flatten headers
56 // flatten headers
45h1, h2, h3, h4, h5 {
57h1, h2, h3, h4, h5 {
46− @extend .f4, .fw-bold;
58+ @extend .fw-bold;
59+ font-size: 1rem;
47}
60}
61+
48 // author and ship styling
62 // author and ship styling
49span[rel=author] {
63span[rel=author] {
50 font-weight: 600;
64 font-weight: 600;
51 margin-right: 5px;
65 margin-right: 5px;
52}
66}
67+
53address {
68address {
54 display: inline;
69 display: inline;
55 font-style: normal;
70 font-style: normal;
56}
71}
57
72
58− // post lists
73+ // post and nav lists
59−ul.posts {
74+ul.posts, nav ul {
60 list-style-type: none;
75 list-style-type: none;
76+}
77+
78+ul.posts li {
79+ margin: 2rem 0 2rem 0;
80+}
81+
82+nav ul.docs {
83+ line-height: 30px;
84+}
85+
86+ // search button
87+#js-search-window-toggle {
88+ position: relative;
89+ display: block;
90+ width: calc(100% - 64px);
91+ text-align: left;
92+ background: transparent;
93+ span#search-icon {
94+ display: inline-block;
95+ transform: rotate(-45deg);
96+ }
97+ span.search-slash {
98+ font-size: 0.75em;
99+ position: absolute;
100+ right: 0px;
101+ top: 2px;
102+ padding: 6px;
103+ border: 1px solid #b1b2b3;
104+ border-radius: 3px;
105+ }
106+}
107+ // tooltipping
108+.tippy-tooltip {
109+ border-radius: 0px;
110+}
111+.tippy-content {
112+ color: white;
61}
113}
templates/posts/single.html+1−1
@@ -14,7 +14,7 @@
14 <h1 class="fw-regular mt8 mb8">{{ term.name }}</h1>
14 <h1 class="fw-regular mt8 mb8">{{ term.name }}</h1>
15 <ul class="posts">
15 <ul class="posts">
16 {% for page in term.pages %}
16 {% for page in term.pages %}
17− <li class="mb5 mt5">
17+ <li class="mb6 mt6">
18 <h2 class="mb1"><a class="bb0" href="{{ page.permalink }}">{{ page.title }}</a></h2>
18 <h2 class="mb1"><a class="bb0" href="{{ page.permalink }}">{{ page.title }}</a></h2>
19 <p class="mb2 mt2">{{ page.description }}</p>
19 <p class="mb2 mt2">{{ page.description }}</p>
20 <span class="mono f5">&#126;{{ page.date | date(format="%Y.%m.%d") }}</span>
20 <span class="mono f5">&#126;{{ page.date | date(format="%Y.%m.%d") }}</span>