闭社主体 forked from https://github.com/tootsuite/mastodon
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

342 lines
5.3 KiB

  1. .about-body {
  2. .wrapper {
  3. max-width: 600px;
  4. margin: 0 auto;
  5. color: $color3;
  6. padding-top: 50px;
  7. padding-bottom: 50px;
  8. &.thicc {
  9. max-width: 700px;
  10. }
  11. }
  12. h1 {
  13. font: 46px/52px 'Roboto', sans-serif;
  14. font-weight: 600;
  15. margin-bottom: 20px;
  16. color: $color4;
  17. padding: 20px 0;
  18. img {
  19. margin-bottom: -5px;
  20. margin-right: 5px;
  21. width: 46px;
  22. height: 46px;
  23. }
  24. }
  25. h2 {
  26. font-family: 'Montserrat', sans-serif;
  27. font-size: 24px;
  28. line-height: 28px;
  29. font-weight: 400;
  30. margin-bottom: 20px;
  31. color: $color5;
  32. }
  33. h3 {
  34. font-family: 'Montserrat', sans-serif;
  35. font-size: 20px;
  36. line-height: 28px;
  37. font-weight: 400;
  38. margin-bottom: 20px;
  39. color: $color2;
  40. }
  41. ul, ol {
  42. list-style: inherit;
  43. margin-left: 20px;
  44. &[type='a'] {
  45. list-style-type: lower-alpha;
  46. }
  47. &[type='i'] {
  48. list-style-type: lower-roman;
  49. }
  50. }
  51. li > ol, li > ul {
  52. margin-top: 20px;
  53. }
  54. p, li {
  55. font: 16px/28px 'Montserrat', sans-serif;
  56. font-weight: 400;
  57. margin-bottom: 26px;
  58. a {
  59. color: $color4;
  60. text-decoration: underline;
  61. }
  62. }
  63. em {
  64. display: inline-block;
  65. padding: 7px 7px 5px 7px;
  66. margin: 0 2px;
  67. background: $color3;
  68. color: $color1;
  69. font: 16px/16px 'Montserrat', sans-serif;
  70. font-weight: 300;
  71. }
  72. .screenshot {
  73. box-shadow: 0 0 15px rgba($color8, 0.4);
  74. margin-bottom: 26px;
  75. img {
  76. max-width: 100%;
  77. height: auto;
  78. display: block;
  79. }
  80. }
  81. .actions {
  82. overflow: hidden;
  83. margin-bottom: 20px;
  84. .info {
  85. float: right;
  86. text-align: right;
  87. line-height: 36px;
  88. a {
  89. color: $color3;
  90. text-decoration: underline;
  91. }
  92. }
  93. }
  94. @media screen and (max-width: 625px) {
  95. .wrapper {
  96. padding: 20px;
  97. }
  98. .screenshot-with-signup .mascot {
  99. display: none;
  100. }
  101. .features-list {
  102. display: block;
  103. }
  104. }
  105. }
  106. .information-board {
  107. margin: 20px 0;
  108. display: flex;
  109. justify-content: space-between;
  110. border-top: 1px solid lighten($color1, 10%);
  111. border-bottom: 1px solid lighten($color1, 10%);
  112. padding-right: 14px;
  113. .section {
  114. flex: 1 0 0;
  115. padding: 14px;
  116. text-align: right;
  117. font: 16px/28px 'Montserrat', sans-serif;
  118. span, strong {
  119. display: block;
  120. }
  121. span {
  122. font-size: 16px;
  123. &:last-child {
  124. color: $color2;
  125. font-size: 14px;
  126. }
  127. }
  128. strong {
  129. font-weight: 500;
  130. font-size: 32px;
  131. line-height: 48px;
  132. color: $color5;
  133. }
  134. }
  135. }
  136. .owner {
  137. text-align: center;
  138. .avatar {
  139. width: 80px;
  140. height: 80px;
  141. margin: 0 auto;
  142. margin-bottom: 15px;
  143. img {
  144. display: block;
  145. width: 80px;
  146. height: 80px;
  147. border-radius: 48px;
  148. }
  149. }
  150. .name {
  151. font-size: 14px;
  152. a {
  153. display: block;
  154. color: $color5;
  155. text-decoration: none;
  156. &:hover {
  157. .display_name {
  158. text-decoration: underline;
  159. }
  160. }
  161. }
  162. .username {
  163. display: block;
  164. color: $color3;
  165. }
  166. }
  167. }
  168. .contact-email {
  169. text-align: center;
  170. margin: 40px 0;
  171. strong {
  172. display: block;
  173. color: $color5;
  174. }
  175. }
  176. .sidebar-layout {
  177. display: flex;
  178. .main {
  179. flex: 1 1 auto;
  180. padding: 14px 0;
  181. .panel {
  182. padding-right: 14px;
  183. }
  184. }
  185. .sidebar {
  186. border-left: 1px solid lighten($color1, 10%);
  187. width: 180px;
  188. flex: 0 0 auto;
  189. }
  190. .panel {
  191. .panel-header {
  192. background: lighten($color1, 10%);
  193. padding: 7px 14px;
  194. text-transform: uppercase;
  195. font-size: 12px;
  196. font-weight: 500;
  197. }
  198. .panel-body {
  199. padding: 14px;
  200. }
  201. .panel-list {
  202. ul {
  203. list-style: none;
  204. margin: 0;
  205. li {
  206. margin: 0;
  207. font-family: inherit;
  208. font-size: 13px;
  209. line-height: 18px;
  210. a {
  211. display: block;
  212. padding: 7px 14px;
  213. color: rgba($color5, 0.7);
  214. text-decoration: none;
  215. transition: all 200ms linear;
  216. i.fa {
  217. margin-right: 5px;
  218. }
  219. &:hover {
  220. color: $color5;
  221. background-color: darken($color1, 5%);
  222. transition: all 100ms linear;
  223. }
  224. &.selected {
  225. color: $color5;
  226. background-color: $color4;
  227. &:hover {
  228. background-color: lighten($color4, 5%);
  229. }
  230. }
  231. }
  232. }
  233. }
  234. }
  235. }
  236. }
  237. .features-list {
  238. display: flex;
  239. margin-bottom: 20px;
  240. .features-list__column {
  241. flex: 1 1 0;
  242. ul {
  243. list-style: none;
  244. }
  245. li {
  246. margin: 0;
  247. }
  248. }
  249. }
  250. .screenshot-with-signup {
  251. display: flex;
  252. margin-bottom: 20px;
  253. .mascot {
  254. flex: 1 1 auto;
  255. display: flex;
  256. align-items: center;
  257. justify-content: center;
  258. flex-direction: column;
  259. img {
  260. display: block;
  261. margin: 0 auto;
  262. max-width: 100%;
  263. height: auto;
  264. }
  265. }
  266. .simple_form {
  267. width: 300px;
  268. flex: 0 0 auto;
  269. background: rgba(darken($color1, 7%), 0.5);
  270. padding: 14px;
  271. border-radius: 4px;
  272. box-shadow: 0 0 15px rgba($color8, 0.4);
  273. .actions {
  274. margin-bottom: 0;
  275. }
  276. .info {
  277. text-align: center;
  278. a {
  279. color: $color2;
  280. }
  281. }
  282. }
  283. }