Home.scss 2.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293
  1. .content-wrapper {
  2. padding: 0 !important;
  3. }
  4. .home {
  5. height: calc(100vh - 48px *2);
  6. overflow: hidden;
  7. display: flex;
  8. justify-content: center;
  9. align-items: center;
  10. .page {
  11. position: relative;
  12. background: hsla(0,0%,100%,.3);
  13. overflow: hidden;
  14. z-index: 0;
  15. &::before {
  16. content: '';
  17. position: absolute;
  18. top: 0;
  19. right: 0;
  20. bottom: 0;
  21. left: 0;
  22. /*filter: blur(5px);*/
  23. margin: -30px;
  24. z-index: -1;
  25. }
  26. margin: -120px auto 0;
  27. overflow: hidden;
  28. min-width: 70%;
  29. border-radius: 15px;
  30. .page-title, .page-title-sm {
  31. cursor: none;
  32. width: 100%;
  33. height: 80px;
  34. font-size: 35px;
  35. font-weight: 600;
  36. letter-spacing: 10px;
  37. padding-top: 0px;
  38. color: #eee;
  39. display: flex;
  40. align-items: center;
  41. justify-content: center;
  42. }
  43. .page-title-sm {
  44. font-size: 30px;
  45. color: #fff;
  46. span {
  47. border: 3px solid #fff;
  48. padding: 0px 10px 10px 20px;
  49. }
  50. }
  51. @media(min-width: 768px) {
  52. .page-title, .page-title-sm {
  53. height: 130px;
  54. font-size: 65px;
  55. letter-spacing: 10px;
  56. padding-top: 10px;
  57. }
  58. .page-title-sm {
  59. font-size: 50px;
  60. span {
  61. border-width: 4px;
  62. }
  63. }
  64. }
  65. @media(min-width: 1200px) {
  66. .page-title, .page-title-sm {
  67. height: 140px;
  68. font-size: 75px;
  69. letter-spacing: 10px;
  70. padding-top: 20px;
  71. }
  72. .page-title-sm {
  73. font-size: 60px;
  74. span {
  75. border-width: 5px;
  76. }
  77. }
  78. }
  79. }
  80. }