styles/globals.css · urbit.org

git.iko.soy/urbit.org

207 lines 3.2 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.type-sub {

67 @apply text-sm;

68}

70.type-sub-bold {

71 @apply text-sm font-semibold;

72}

74code .type-code {

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

76}

78/* Utils */

80.layout-narrow {

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

82}

84.layout {

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

86}

88.measure {

89 max-width: 34em;

90}

92.flex-center {

93 display: flex;

94 align-items: center;

95 justify-content: center;

96}

98.bg-img {

99 background-repeat: no-repeat;

100 background-position: center center;

101 @apply bg-wall-100;

102}

103

104.button-sm {

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

106}

107

108.button-lg {

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

110}

111

112.badge-sm {

113 @apply flex-center text-base font-medium px-3 h-8 rounded-full;

114}

115

116.badge-lg {

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

118}

119

120.button-sm:hover,

121.button-text:hover,

122.button-lg:hover,

123a:hover {

124 opacity: 0.66;

125}

126

127/* BEM Classes - Use sparingly */

128

129.port-hero-card-height {

130 height: 36em;

131}

132

133.port-hero-image-height {

134 height: 32em;

135}

136

137.port-hero-image {

138 transform: translateX(8%);

139 background-image: linear-gradient(

140 to right,

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

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

143 ),

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

145 background-size: cover;

146}

147

148.tray-menu-open {

149 transform: translateX(0);

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

151}

152

153.tray-menu-closed {

154 transform: translateX(-110vw);

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

156}

157

158.tray-menu-width {

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

160}

161

162.mobile-search-button-width {

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

164}

165

166.tray-overlay-open {

167 opacity: 1;

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

169}

170

171.tray-overlay-closed {

172 opacity: 0;

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

174}

175

176.menu-open {

177 left: 0;

178 visibility: visible;

179 display: block;

180}

181

182.menu-closed {

183 left: -100vw;

184 visibility: hidden;

185 display: none;

186}

187

188.dot::before {

189 width: 0.5rem;

190 height: 0.5rem;

191 border-radius: 99px;

192 content: "";

193 position: absolute;

194 left: -0.75rem;

195 top: 0.4rem;

196 @apply bg-green-400;

197}

198

199.sidebar figure,

200.sidebar img {

201 width: auto !important;

202 margin: 0 auto !important;

203 left: 0 !important;

204 display: block !important;

205 position: static !important;

206 border-radius: 0 !important;

207}