news.sass 1.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869
  1. @import ../../includes/_colors
  2. @import ../../includes/_fonts
  3. @import ../../includes/_mixins
  4. body
  5. margin: 0
  6. font-family: Montserrat, sans-serif
  7. p
  8. margin: 0
  9. .aio-news-wrapper
  10. background-color: $color-rot
  11. width: 100vw
  12. height: 100vh
  13. display: flex
  14. justify-content: center
  15. gap: 60px
  16. @include mobile
  17. flex-direction: column
  18. .news-element
  19. background-color: $color-gruen
  20. display: flex
  21. flex-direction: column
  22. justify-content: center
  23. width: 40%
  24. @include tablet
  25. width: 30%
  26. @include mobile
  27. width: 80%
  28. height: 40%
  29. align-self: center
  30. p
  31. margin-left: 30px
  32. p:nth-child(1)
  33. font-weight: 300
  34. font-size: 20px
  35. @include mobile
  36. font-size: 30px
  37. padding-bottom: 0px
  38. p:nth-child(2)
  39. font-weight: 500
  40. font-size: 60px
  41. line-height: 60px
  42. padding-bottom: 20px
  43. p:nth-child(3)
  44. font-weight: 400
  45. font-size: 20px
  46. padding-bottom: 20px
  47. width: 80%
  48. a
  49. align-self: flex-end
  50. margin-right: 30px
  51. background-color: $color-weiss
  52. color: $color-rot
  53. text-decoration: none
  54. font-weight: 500
  55. padding: 8px
  56. a:hover
  57. background-color: $color-rot
  58. color: $color-weiss
  59. @include tablet
  60. background-color: $color-weiss
  61. color: $color-rot