styles/globals.css · urbit.org

git.iko.soy/urbit.org

212 lines 3.3 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:root {

4 --tray-time: 0ms;

7html,

8body {

9 padding: 0;

10 margin: 0;

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

12 @apply text-wall-600;

13}

15/* Reset a tags */

16a {

17 color: inherit;

18 text-decoration: none;

19 cursor: pointer;

20}

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

23p a {

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

25}

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

28b,

29strong {

30 @apply font-semibold;

31}

33/* Typography */

35h1,

36.type-h1 {

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

38}

40h2,

41.type-h2 {

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

43}

45h3,

46.type-h3 {

47 @apply text-xl font-semibold;

48}

50h4,

51.type-ui {

52 @apply text-lg font-semibold;

53}

55h5,

56.type-h5,

57.type-bold {

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

59}

61p,

62.type-p {

63 @apply text-base leading-relaxed;

64}

66.lead {

67 font-size: 1.3rem;

68}

70.type-sub {

71 @apply text-sm;

72}

74.type-sub-bold {

75 @apply text-sm font-semibold;

76}

78code .type-code {

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

80}

82/* Utils */

84.layout-narrow {

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

86}

88.layout {

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

90}

92.measure {

93 max-width: 34em;

94}

96.flex-center {

97 display: flex;

98 align-items: center;

99 justify-content: center;

100}

101

102.bg-img {

103 background-repeat: no-repeat;

104 background-position: center center;

105 @apply bg-wall-100;

106}

107

108.button-sm {

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

110}

111

112.button-lg {

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

114}

115

116.badge-sm {

117 min-height: 2rem;

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

119}

120

121.badge-lg {

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

123}

124

125.button-sm:hover,

126.button-text:hover,

127.button-lg:hover,

128a:hover {

129 opacity: 0.66;

130}

131

132/* BEM Classes - Use sparingly */

133

134.port-hero-card-height {

135 height: 36em;

136}

137

138.port-hero-image-height {

139 height: 32em;

140}

141

142.port-hero-image {

143 transform: translateX(8%);

144 background-image: linear-gradient(

145 to right,

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

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

148 ),

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

150 background-size: cover;

151}

152

153.tray-menu-open {

154 transform: translateX(0);

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

156}

157

158.tray-menu-closed {

159 transform: translateX(-110vw);

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

161}

162

163.tray-menu-width {

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

165}

166

167.mobile-search-button-width {

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

169}

170

171.tray-overlay-open {

172 opacity: 1;

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

174}

175

176.tray-overlay-closed {

177 opacity: 0;

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

179}

180

181.menu-open {

182 left: 0;

183 visibility: visible;

184 display: block;

185}

186

187.menu-closed {

188 left: -100vw;

189 visibility: hidden;

190 display: none;

191}

192

193.dot::before {

194 width: 0.5rem;

195 height: 0.5rem;

196 border-radius: 99px;

197 content: "";

198 position: absolute;

199 left: -0.75rem;

200 top: 0.4rem;

201 @apply bg-green-400;

202}

203

204.sidebar figure,

205.sidebar img {

206 width: auto !important;

207 margin: 0 auto !important;

208 left: 0 !important;

209 display: block !important;

210 position: static !important;

211 border-radius: 0 !important;

212}