styles/globals.css · urbit.org

git.iko.soy/urbit.org

204 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");

4:root {

5 --tray-time: 0ms;

8html,

9body {

10 padding: 0;

11 margin: 0;

12}

14a {

15 color: inherit;

16 text-decoration: none;

17 cursor: pointer;

18}

20p a {

21 @apply text-green;

22}

24button {

25 border: none;

26}

28/* Typography */

30h1,

31.type-h1 {

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

33}

35h2,

36.type-h2 {

37 @apply text-2xl md:text-3xl lg:text-4xl font-bold leading-tight;

38}

40h3,

41.type-h3 {

42 @apply text-lg md:text-xl lg:text-2xl font-semibold;

43}

45h4,

46.type-ui {

47 @apply text-sm md:text-base lg:text-lg font-semibold;

48}

50.type-ui-small {

51 @apply text-xs lg:text-base font-medium;

52}

54p,

55.type-p {

56 @apply text-sm md:text-base lg:text-base leading-relaxed;

57}

59.type-bold {

60 @apply text-sm md:text-base lg:text-base font-semibold leading-relaxed;

61}

63.type-sub {

64 @apply text-xs md:text-sm;

65}

67.type-sub-bold {

68 @apply text-xs md:text-sm font-semibold;

69}

71code .type-code {

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

73}

75/* Utils */

77.layout-narrow {

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

79}

81.layout {

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

83}

85.measure {

86 max-width: 34em;

87}

89.flex-center {

90 display: flex;

91 align-items: center;

92 justify-content: center;

93}

95.bg-img {

96 background-repeat: no-repeat;

97 background-position: center center;

98 @apply bg-wall;

99}

100

101.button-sm {

102 @apply flex-center px-2 h-6 rounded-lg type-ui;

103}

104

105.button-lg {

106 @apply flex-center px-4 lg:px-6 py-1 rounded-xl h-10 md:h-14 type-ui;

107}

108

109.badge-sm {

110 @apply flex-center type-ui-small px-2 lg:px-2 h-6 md:h-10 rounded-full;

111}

112

113.badge-lg {

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

115}

116

117.button-sm:hover,

118.button-text:hover,

119.button-lg:hover,

120a:hover {

121 opacity: 0.66;

122}

123

124/* BEM Classes - Use sparingly */

125

126.port-hero-card-height {

127 height: 36em;

128}

129

130.port-hero-image-height {

131 height: 32em;

132}

133

134.port-hero-image {

135 transform: translateX(8%);

136 background-image: linear-gradient(

137 to right,

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

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

140 ),

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

142 background-size: cover;

143}

144

145.tray-menu-open {

146 transform: translateX(0);

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

148}

149

150.tray-menu-closed {

151 transform: translateX(-110vw);

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

153}

154

155.tray-menu-width {

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

157}

158

159.mobile-search-button-width {

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

161}

162

163.tray-overlay-open {

164 opacity: 1;

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

166}

167

168.tray-overlay-closed {

169 opacity: 0;

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

171}

172

173.menu-open {

174 left: 0;

175 visibility: visible;

176 display: block;

177}

178

179.menu-closed {

180 left: -100vw;

181 visibility: hidden;

182 display: none;

183}

184

185.dot::before {

186 width: 0.5rem;

187 height: 0.5rem;

188 border-radius: 99px;

189 content: "";

190 position: absolute;

191 left: -0.75rem;

192 top: 0.4rem;

193 @apply bg-green;

194}

195

196.sidebar figure,

197.sidebar img {

198 width: auto !important;

199 margin: 0 auto !important;

200 left: 0 !important;

201 display: block !important;

202 position: static !important;

203 border-radius: 0 !important;

204}