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.

279 lines
4.6 KiB

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