styles/markdown.css · urbit.org

git.iko.soy/urbit.org

on 99bdb21 help sign in

urbit.org/styles/markdown.css

194 lines 3.3 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 li {

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

44}

46.markdown hr {

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

48}

50.markdown iframe {

51 min-height: 512px;

52}

54/* Technical Typography */

56.markdown.technical h1 {

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

58}

60.markdown.technical h2 {

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

62}

64.markdown.technical h3 {

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

66}

68.markdown.technical h4 {

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

70}

72.markdown.technical p {

73 @apply text-base leading-relaxed;

74}

76.markdown.technical p code {

77 white-space: pre-wrap;

78}

80.markdown.technical li {

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

82}

84/* Imagery */

86.markdown img {

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

88}

90.markdown figure {

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

92}

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

95 .markdown figure {

96 width: 125%;

97 left: -12.5%;

98 }

99}

100

101.markdown pre,

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

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

104}

105

106.markdown code,

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

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

109}

110

111.markdown a code,

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

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

114}

115

116.markdown ul {

117 list-style: outside;

118 list-style-type: disc;

119}

120

121.markdown ol {

122 list-style: outside;

123 list-style-type: decimal;

124}

125

126.markdown li a,

127.markdown h3 a,

128.markdown h2 a {

129 @apply text-green-400;

130}

131

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

133.markdown li a {

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

135}

136

137.markdown blockquote {

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

139}

140.markdown blockquote cite {

141 @apply not-italic font-semibold;

142}

143

144.markdown table {

145 border-collapse: separate;

146 border-spacing: 0;

147 min-width: 350px;

148}

149

150.markdown table tr th,

151.markdown table tr td {

152 border-right-width: 2px;

153 border-right-style: solid;

154 border-bottom-width: 2px;

155 border-bottom-style: solid;

156 padding: 8px !important;

157 @apply border-wall-100;

158}

159

160.markdown table tr th:first-child,

161.markdown table tr td:first-child {

162 border-left-width: 2px;

163 border-left-style: solid;

164 @apply border-wall-100;

165}

166

167.markdown table tr th {

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

169 border-top-width: 2px;

170 border-top-style: solid;

171 text-align: left;

172 vertical-align: middle;

173 @apply border-wall-100;

174}

175

176/* top-left border-radius */

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

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

179}

180

181/* top-right border-radius */

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

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

184}

185

186/* bottom-left border-radius */

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

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

189}

190

191/* bottom-right border-radius */

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

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

194}