_typography.scss 1.1 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495
  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. font-family: 'Poppins', sans-serif;
  65. font-weight: 600;
  66. }
  67. .linkedin_sec {
  68. display: inline-block;
  69. border: 1px solid $text-color;
  70. border-radius: 50%;
  71. width: 40px;
  72. height: 40px;
  73. margin-right: 1rem;
  74. }
  75. .linkedin_sec.line {
  76. font-size: .8rem;
  77. color: #777;
  78. font-weight: bold;
  79. }