styles/globals.css · urbit.org

git.iko.soy/urbit.org

163 lines 2.5 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}

20/* * {

21 box-sizing: border-box;

22} */

24.layout-narrow {

25 @apply w-full md:w-8/12 px-4 md:px-8 pb-20 md:pb-32 lg:pb-48;

26}

28.layout-wide {

29 @apply w-full md:w-10/12 px-4 md:px-8 pb-20 md:pb-32 lg:pb-48;

30}

32h1,

33.type-h1 {

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

35}

37h2,

38.type-h2 {

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

40}

42h3,

43.type-h3 {

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

45}

47h4,

48.type-ui {

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

50}

52.type-ui-small {

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

54}

56p,

57.type-p {

58 @apply text-base md:text-lg lg:text-xl;

59}

61.type-sub {

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

63}

65caption,

66.type-caption {

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

68}

70code .type-code {

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

72}

74button {

75 border: none;

76}

78.button-sm {

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

80}

82.button-lg {

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

84}

86.badge-sm {

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

88}

90.badge-lg {

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

92}

94.tab-button-lg {

95 @apply type-h2 h-16;

96 overflow: visible;

97}

99.tab-button-sm {

100 @apply type-ui h-12;

101 overflow: visible;

102}

103

104.button-sm:hover {

105 opacity: 0.66;

106}

107

108.button-lg:hover {

109 opacity: 0.66;

110}

111

112a:hover {

113 opacity: 0.66;

114}

115

116.hero-card-height {

117 height: 750px;

118}

119

120.hero-image-height {

121 height: 686px;

122}

123

124.hero-image {

125 transform: translateX(8%);

126}

127

128.measure {

129 max-width: 34rem;

130}

131

132.flex-center {

133 display: flex;

134 align-items: center;

135 justify-content: center;

136}

137

138.bg-img {

139 background-repeat: no-repeat;

140 background-position: center center;

141 @apply bg-wall;

142}

143

144.tray-menu-open {

145 transform: translateX(0);

146 transition: transform 200ms;

147}

148

149.tray-menu-closed {

150 transform: translateX(100vw);

151 transition: transform 200ms;

152}

153

154.dot::before {

155 width: 0.5rem;

156 height: 0.5rem;

157 border-radius: 99px;

158 content: "";

159 position: absolute;

160 left: -1.25rem;

161 top: 0.4rem;

162 @apply bg-green;

163}