styles/markdown.css · urbit.org

git.iko.soy/urbit.org

on 30aa030 help sign in

urbit.org/styles/markdown.css

200 lines 3.4 kB history raw

1.markdown *:last-child {

2 @apply pb-0 mb-0;

5.markdown *:first-child {

6 @apply pt-0 mt-0;

9.markdown *:first-child figure {

10 @apply pt-0 mt-0;

11}

13.markdown p,

14.markdown ul,

15.markdown ol,

16.markdown blockquote {

17 @apply my-8;

18}

20/* Default Typography */

22.markdown h1 {

23 @apply text-4xl font-bold mt-32 mb-16;

24}

26.markdown h2 {

27 @apply text-3xl font-bold mt-24 mb-12;

28}

30.markdown h3 {

31 @apply text-2xl font-semibold mt-16 mb-8;

32}

34.markdown h4 {

35 @apply text-xl font-semibold mt-8 mb-4;

36}

38.markdown p {

39 @apply text-base md:text-lg leading-relaxed;

40}

42.markdown-callout p {

43 @apply mt-1;

44 @apply mb-2;

45 font-size: 1rem;

46}

48.markdown li {

49 @apply py-2 ml-6 text-base md:text-lg;

50}

52.markdown hr {

53 @apply my-16 border-t-2 border-wall-300;

54}

56.markdown iframe {

57 min-height: 512px;

58}

60/* Technical Typography */

62.markdown.technical h1 {

63 @apply text-3xl font-bold mt-32 mb-16;

64}

66.markdown.technical h2 {

67 @apply text-2xl font-bold mt-24 mb-12;

68}

70.markdown.technical h3 {

71 @apply text-xl font-semibold mt-16 mb-8;

72}

74.markdown.technical h4 {

75 @apply text-lg font-semibold mt-8 mb-4;

76}

78.markdown.technical p {

79 @apply text-base leading-relaxed;

80}

82.markdown.technical p code {

83 white-space: pre-wrap;

84}

86.markdown.technical li {

87 @apply py-2 ml-6 text-base;

88}

90/* Imagery */

92.markdown img {

93 @apply rounded-lg w-full h-auto;

94}

96.markdown figure {

97 @apply relative my-8 z-0 w-full left-0;

98}

100@media (min-width: 768px) {

101 .markdown figure {

102 width: 125%;

103 left: -12.5%;

104 }

105}

106

107.markdown pre,

108.markdown pre[class*="language-"] {

109 @apply block p-4 bg-wall-100 rounded-lg overflow-x-auto;

110}

111

112.markdown code,

113.markdown code[class*="language-"] {

114 @apply px-2 py-0.5 bg-wall-100 rounded-lg;

115}

116

117.markdown a code,

118.markdown a code[class*="language-"] {

119 @apply bg-green-100 text-green-400;

120}

121

122.markdown ul {

123 list-style: outside;

124 list-style-type: disc;

125}

126

127.markdown ol {

128 list-style: outside;

129 list-style-type: decimal;

130}

131

132.markdown li a,

133.markdown h3 a,

134.markdown h2 a {

135 @apply text-green-400;

136}

137

138/* Links in list item tags should be green */

139.markdown li a {

140 @apply text-green-400 font-semibold;

141}

142

143.markdown blockquote {

144 @apply border-l-4 border-wall-300 pl-6 italic;

145}

146.markdown blockquote cite {

147 @apply not-italic font-semibold;

148}

149

150.markdown table {

151 border-collapse: separate;

152 border-spacing: 0;

153 min-width: 350px;

154}

155

156.markdown table tr th,

157.markdown table tr td {

158 border-right-width: 2px;

159 border-right-style: solid;

160 border-bottom-width: 2px;

161 border-bottom-style: solid;

162 padding: 8px !important;

163 @apply border-wall-100;

164}

165

166.markdown table tr th:first-child,

167.markdown table tr td:first-child {

168 border-left-width: 2px;

169 border-left-style: solid;

170 @apply border-wall-100;

171}

172

173.markdown table tr th {

174 background: rgba(240, 239, 236, 0.33);

175 border-top-width: 2px;

176 border-top-style: solid;

177 text-align: left;

178 vertical-align: middle;

179 @apply border-wall-100;

180}

181

182/* top-left border-radius */

183.markdown table tr:first-child th:first-child {

184 border-top-left-radius: 8px;

185}

186

187/* top-right border-radius */

188.markdown table tr:first-child th:last-child {

189 border-top-right-radius: 8px;

190}

191

192/* bottom-left border-radius */

193.markdown table tr:last-child td:first-child {

194 border-bottom-left-radius: 8px;

195}

196

197/* bottom-right border-radius */

198.markdown table tr:last-child td:last-child {

199 border-bottom-right-radius: 8px;

200}