styles/globals.css · urbit.org

git.iko.soy/urbit.org

219 lines 3.4 kB history raw

1@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Source+Code+Pro:wght@400;500;600;700;800&display=swap");

3@tailwind base;

4@tailwind components;

5@tailwind utilities;

7:root {

8 --tray-time: 0ms;

11html,

12body {

13 padding: 0;

14 margin: 0;

15 /* Make all text wall-600 by default */

16 @apply text-wall-600;

17}

19/* Reset a tags */

20a {

21 color: inherit;

22 text-decoration: none;

23 cursor: pointer;

24}

26/* Links in p tags should be green */

27p a {

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

29}

31/* Reduce b and strong tag weight default */

32b,

33strong {

34 @apply font-semibold;

35}

37/* Typography */

39h1,

40.type-h1 {

41 @apply text-4xl lg:text-5xl font-extrabold leading-tight text-wall-600;

42}

44h2,

45.type-h2 {

46 @apply text-3xl lg:text-4xl font-bold leading-tight;

47}

49h3,

50.type-h3 {

51 @apply text-xl font-semibold;

52}

54h4,

55.type-ui {

56 @apply text-lg font-semibold;

57}

59h5,

60.type-h5,

61.type-bold {

62 @apply text-base font-semibold leading-relaxed;

63}

65p,

66.type-p {

67 @apply text-base leading-relaxed;

68}

70.lead {

71 font-size: 1.3rem;

72}

74.type-sub {

75 @apply text-sm;

76}

78.type-sub-bold {

79 @apply text-sm font-semibold;

80}

82code .type-code {

83 @apply bg-wall-100 p-4 font-mono;

84}

86.font-bold {

87 @apply antialiased;

88}

89/* Utils */

91.layout-narrow {

92 @apply w-full md:w-8/12 lg:w-6/12;

93}

95.layout {

96 @apply w-full md:w-10/12 lg:w-8/12;

97}

99.measure {

100 max-width: 34em;

101}

102

103.flex-center {

104 display: flex;

105 align-items: center;

106 justify-content: center;

107}

108

109.bg-img {

110 background-repeat: no-repeat;

111 background-position: center center;

112 @apply bg-wall-100;

113}

114

115.button-sm {

116 @apply flex-center px-3 h-10 rounded-lg type-ui;

117}

118

119.button-lg {

120 @apply flex-center px-6 py-1 rounded-xl h-14 type-ui;

121}

122

123.badge-sm {

124 min-height: 2rem;

125 @apply flex-center text-base font-medium px-3 rounded-full;

126}

127

128.badge-lg {

129 @apply flex-center type-ui px-5 h-12 rounded-full;

130}

131

132.button-sm:hover,

133.button-text:hover,

134.button-lg:hover,

135a:hover {

136 opacity: 0.66;

137}

138

139/* BEM Classes - Use sparingly */

140

141.port-hero-card-height {

142 height: 36em;

143}

144

145.port-hero-image-height {

146 height: 32em;

147}

148

149.port-hero-image {

150 transform: translateX(8%);

151 background-image: linear-gradient(

152 to right,

153 rgba(255, 255, 255, 0) 85%,

154 rgba(255, 255, 255, 1) 100%

155 ),

156 url("https://media.urbit.org/port.svg");

157 background-size: cover;

158}

159

160.tray-menu-open {

161 transform: translateX(0);

162 transition: transform var(--tray-time);

163}

164

165.tray-menu-closed {

166 transform: translateX(-110vw);

167 transition: transform var(--tray-time);

168}

169

170.tray-menu-width {

171 width: calc(100vw - 4rem - 1rem - 1rem);

172}

173

174.mobile-search-button-width {

175 width: calc(100vw - 4rem - 1rem - 1rem - 1rem - 1rem);

176}

177

178.tray-overlay-open {

179 opacity: 1;

180 transition: opacity var(--tray-time);

181}

182

183.tray-overlay-closed {

184 opacity: 0;

185 transition: opacity var(--tray-time);

186}

187

188.menu-open {

189 left: 0;

190 visibility: visible;

191 display: block;

192}

193

194.menu-closed {

195 left: -100vw;

196 visibility: hidden;

197 display: none;

198}

199

200.dot::before {

201 width: 0.5rem;

202 height: 0.5rem;

203 border-radius: 99px;

204 content: "";

205 position: absolute;

206 left: -0.75rem;

207 top: 0.4rem;

208 @apply bg-green-400;

209}

210

211.sidebar figure,

212.sidebar img {

213 width: auto !important;

214 margin: 0 auto !important;

215 left: 0 !important;

216 display: block !important;

217 position: static !important;

218 border-radius: 0 !important;

219}