about.scss 1.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110
  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. }
  11. h1 {
  12. font: 46px/52px 'Roboto', sans-serif;
  13. font-weight: 600;
  14. margin-bottom: 20px;
  15. color: #2b90d9;
  16. padding: 20px 0;
  17. img {
  18. margin-bottom: -5px;
  19. margin-right: 5px;
  20. width: 46px;
  21. height: 46px;
  22. }
  23. }
  24. h2 {
  25. font: 24px/28px 'Judson', sans-serif;
  26. font-weight: 300;
  27. margin-bottom: 20px;
  28. color: #fff;
  29. }
  30. h3 {
  31. font: 20px/28px 'Judson', sans-serif;
  32. font-weight: 300;
  33. margin-bottom: 20px;
  34. color: #d9e1e8;
  35. }
  36. ul, ol {
  37. list-style: inherit;
  38. margin-left: 20px;
  39. &[type='a'] {
  40. list-style-type: lower-alpha;
  41. }
  42. &[type='i'] {
  43. list-style-type: lower-roman;
  44. }
  45. }
  46. li > ol, li > ul {
  47. margin-top: 20px;
  48. }
  49. p, li {
  50. font: 20px/28px 'Judson', sans-serif;
  51. font-weight: 300;
  52. margin-bottom: 26px;
  53. a {
  54. color: #2b90d9;
  55. text-decoration: underline;
  56. }
  57. }
  58. em {
  59. display: inline-block;
  60. padding: 7px 7px 5px 7px;
  61. background: #9baec8;
  62. color: #282c37;
  63. font: 16px/16px 'Montserrat', sans-serif;
  64. font-weight: 300;
  65. }
  66. .screenshot {
  67. box-shadow: 0 0 15px rgba(0, 0, 0, 0.4);
  68. margin-bottom: 26px;
  69. img {
  70. max-width: 100%;
  71. height: auto;
  72. display: block;
  73. }
  74. }
  75. .actions {
  76. overflow: hidden;
  77. .info {
  78. float: right;
  79. text-align: right;
  80. line-height: 36px;
  81. a {
  82. color: #9baec8;
  83. text-decoration: underline;
  84. }
  85. }
  86. }
  87. @media screen and (max-width: 360px) {
  88. .wrapper {
  89. padding: 20px;
  90. }
  91. }
  92. }