blog-single.sass 3.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160
  1. @import ./themeStyle
  2. section
  3. padding: 2rem 0 1.5rem
  4. .page-title
  5. font-family: $fontInter
  6. margin-top: 2.5rem
  7. text-align: left
  8. font-weight: 600
  9. padding-bottom: 1.5rem
  10. border-bottom: 3px solid $thirdColor
  11. strong
  12. color: $primaryColor
  13. // item-details
  14. .item-details
  15. padding-bottom: 2rem
  16. font-family: $fontNotoBangla
  17. .item-title
  18. font-size: 1.5rem
  19. font-weight: 500
  20. margin-bottom: .25rem
  21. line-height: 1.4
  22. .item-date
  23. font-size: .7rem
  24. color: $greyColor
  25. margin-bottom: .5rem
  26. .social-links
  27. display: flex
  28. align-items: center
  29. gap: .5rem
  30. a
  31. color: $greyColor
  32. font-size: 1rem
  33. &:hover
  34. transform: scale(1.1)
  35. .img-container
  36. margin: 1.5rem 0
  37. .item-details
  38. line-height: 1.7
  39. color: $greyColor
  40. // related-items
  41. #related-items
  42. font-family: $fontNotoBangla
  43. .sec-title
  44. font-weight: 500
  45. .single-item
  46. display: flex
  47. flex-direction: column
  48. gap: .25rem
  49. .img-container
  50. height: 150px
  51. .details
  52. padding-top: .35rem
  53. .title
  54. display: block
  55. font-size: .8rem
  56. font-weight: 600
  57. line-height: 1.4
  58. color: $blackColor
  59. text-decoration: none
  60. &:hover
  61. opacity: .7
  62. // side-section
  63. #side-section
  64. padding-top: 0
  65. display: flex
  66. flex-direction: column
  67. gap: 1.5rem
  68. .side-item-title
  69. background-color: $thirdColor
  70. color: $blackColor
  71. text-align: left
  72. margin-bottom: .5rem
  73. padding: .25rem .75rem
  74. font-size: 1rem
  75. .single-item
  76. display: flex
  77. padding-bottom: .75rem
  78. border-bottom: 2px solid $thirdColor
  79. .img-container
  80. flex: 2
  81. img
  82. width: 100%
  83. .details
  84. flex: 4
  85. padding: .25rem .75rem
  86. .title
  87. display: block
  88. font-size: .8rem
  89. line-height: 1.4
  90. color: $blackColor
  91. font-weight: 500
  92. text-decoration: none
  93. &:hover
  94. opacity: .8
  95. .single-testimonial
  96. display: flex
  97. padding-bottom: .75rem
  98. border-bottom: 2px solid $thirdColor
  99. .img-container
  100. flex: 2
  101. img
  102. width: 100%
  103. .details
  104. flex: 4
  105. padding: .25rem .75rem
  106. .testimonial
  107. display: block
  108. font-size: .65rem
  109. line-height: 1.2
  110. color: $greyColor
  111. font-weight: 500
  112. text-decoration: none
  113. .name, .ocupation
  114. margin: unset
  115. margin-top: .15rem
  116. font-weight: 500
  117. font-size: .7rem
  118. text-align: right
  119. // add container
  120. .add-container
  121. width: 100%