_typography.scss 1.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293
  1. /* typography */
  2. @import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap');
  3. body {
  4. line-height: 1.2;
  5. font-family: $primary-font;
  6. -webkit-font-smoothing: antialiased;
  7. font-size: 1rem;
  8. color: $text-color;
  9. }
  10. p,
  11. .paragraph {
  12. font-weight: 400;
  13. color: $text-color;
  14. font-size: 1.1rem;
  15. line-height: 1.7;
  16. font-family: $primary-font;
  17. }
  18. small {
  19. font-size: 88%;
  20. }
  21. h1,
  22. h2,
  23. h3,
  24. h4,
  25. h5,
  26. h6 {
  27. color: $text-color-dark;
  28. font-family: $primary-font;
  29. font-weight: 700;
  30. line-height: 1.2;
  31. }
  32. h1,
  33. .h1 {
  34. font-size: 48px;
  35. @include tablet {
  36. font-size: 40px;
  37. }
  38. }
  39. h2,
  40. .h2 {
  41. font-size: 38px;
  42. @include tablet {
  43. font-size: 30px;
  44. }
  45. }
  46. h3,
  47. .h3 {
  48. font-size: 24px;
  49. }
  50. h4,
  51. .h4 {
  52. font-size: 20px;
  53. }
  54. h5,
  55. .h5 {
  56. font-size: 16px;
  57. }
  58. h6,
  59. .h6 {
  60. font-size: 15px;
  61. }
  62. .display-3{
  63. font-size: 3.5rem;
  64. }
  65. .linkedin_sec {
  66. display: inline-block;
  67. border: 1px solid $text-color;
  68. border-radius: 50%;
  69. width: 40px;
  70. height: 40px;
  71. margin-right: 1rem;
  72. }
  73. .linkedin_sec.line {
  74. font-size: .8rem;
  75. color: #777;
  76. font-weight: bold;
  77. }