styles/globals.css · urbit.org

git.iko.soy/urbit.org

205 lines 3.3 kB history raw

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

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

4html,

5body {

6 padding: 0;

7 margin: 0;

10a {

11 color: inherit;

12 text-decoration: none;

13 cursor: pointer;

14}

16p a {

17 @apply text-green;

18}

20h1,

21.type-h1 {

22 @apply text-4xl md:text-5xl lg:text-6xl font-bold leading-tight;

23}

25h2,

26.type-h2 {

27 @apply text-3xl md:text-4xl lg:text-5xl font-bold leading-tight;

28}

30h3,

31.type-h3 {

32 @apply text-xl md:text-2xl lg:text-3xl font-bold;

33}

35h4,

36.type-ui {

37 @apply text-base md:text-lg lg:text-xl font-semibold;

38}

40.type-ui-small {

41 @apply text-sm lg:text-base font-medium;

42}

44p,

45.type-p {

46 @apply text-base md:text-lg lg:text-xl leading-relaxed;

47}

49.type-sub {

50 @apply text-sm lg:text-base font-semibold;

51}

53caption,

54.type-caption {

55 @apply text-sm lg:text-base font-medium block text-left;

56}

58code .type-code {

59 @apply bg-wall p-4 font-mono;

60}

62button {

63 border: none;

64}

66.tile-height {

67 height: 38rem;

68}

70.preview-tile-height {

71 @apply h-96;

72}

74.button-sm {

75 @apply flex px-4 py-1 rounded-lg type-ui;

76}

78.button-lg {

79 @apply flex px-4 lg:px-6 py-2 rounded-xl h-12 md:h-16 flex-center type-ui;

80}

82.badge-sm {

83 @apply flex type-ui-small px-3 lg:px-4 items-center justify-center h-8 md:h-10 rounded-full;

84}

86.badge-lg {

87 @apply flex type-ui px-4 lg:px-6 items-center justify-center h-10 md:h-14 rounded-full;

88}

90.tab-button-lg {

91 @apply type-h2 h-16;

92 overflow: visible;

93}

95.tab-button-sm {

96 @apply type-ui h-12;

97 overflow: visible;

98}

100.button-sm:hover,

101.button-text:hover,

102.button-lg:hover,

103a:hover {

104 opacity: 0.66;

105}

106

107.hero-card-height {

108 height: 750px;

109}

110

111.hero-image-height {

112 height: 686px;

113}

114

115.hero-image {

116 transform: translateX(8%);

117 background-image: linear-gradient(

118 to right,

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

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

121 ),

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

123 background-size: cover;

124}

125

126.measure {

127 max-width: 34rem;

128}

129

130.flex-center {

131 display: flex;

132 align-items: center;

133 justify-content: center;

134}

135

136.bg-img {

137 background-repeat: no-repeat;

138 background-position: center center;

139 @apply bg-wall;

140}

141

142:root {

143 --tray-time: 0ms;

144}

145

146.tray-menu-open {

147 transform: translateX(0);

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

149}

150

151.tray-menu-closed {

152 transform: translateX(-110vw);

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

154}

155

156.tray-menu-width {

157 width: calc(100vw - 64px - 16px - 16px);

158}

159

160.mobile-search-button-width {

161 width: calc(100vw - 64px - 16px - 16px - 16px - 16px);

162}

163

164.tray-overlay-open {

165 opacity: 1;

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

167}

168

169.tray-overlay-closed {

170 opacity: 0;

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

172}

173

174.menu-open {

175 left: 0;

176 visibility: visible;

177 display: block;

178}

179

180.menu-closed {

181 left: -100vw;

182 visibility: hidden;

183 display: none;

184}

185

186.dot::before {

187 width: 0.5rem;

188 height: 0.5rem;

189 border-radius: 99px;

190 content: "";

191 position: absolute;

192 left: -0.75rem;

193 top: 0.4rem;

194 @apply bg-green;

195}

196

197.sidebar figure,

198.sidebar img {

199 width: auto !important;

200 margin: 0 auto !important;

201 left: 0 !important;

202 display: block !important;

203 position: static !important;

204 border-radius: 0 !important;

205}