style.scss 1.7 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364
  1. @import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;600;700&display=swap');
  2. @import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;600;700&display=swap');
  3. @import url('https://fonts.googleapis.com/css2?family=Sassy+Frass&display=swap');
  4. @import './_assets.scss';
  5. @import '../components/menu/_menu.scss';
  6. @import '../components/button-green/button-green';
  7. @import '../components/modals/modal';
  8. @import '../components/modals/task-modal/task-modal';
  9. @import '../components/select-category/select-category';
  10. @import '../pages/upcoming/upcoming';
  11. @import '../pages/authorization/authorization';
  12. @import '../pages/authorization/login/login';
  13. @import '../pages/authorization/registration/registration';
  14. @import '../components/modals/category-modal/category-modal';
  15. @import '../pages/tasks/_tasks.scss';
  16. .wrapper {
  17. font-family: 'Oswald';
  18. min-height: 100vh;
  19. width: 100%;
  20. display: grid;
  21. grid-template-columns: minmax(320px, 370px) 1fr;
  22. grid-gap: 30px;
  23. background-color: $white;
  24. padding: 27px 30px 40px 30px;
  25. }
  26. .main {
  27. flex: 1 1 auto;
  28. max-height: calc(100vh - 67px);
  29. overflow-y: auto;
  30. overflow-x: hidden;
  31. }
  32. .welcome {
  33. width: 100%;
  34. height: 100%;
  35. border-radius: 50px;
  36. background-color: $background;
  37. display: flex;
  38. align-items: center;
  39. justify-content:center;
  40. flex-direction: column;
  41. grid-gap: 30px;
  42. }
  43. .welcome__title {
  44. font-family: "Oswald";
  45. font-weight: bold;
  46. font-size: 36px;
  47. text-align: center;
  48. }
  49. .welcome__text {
  50. max-width: 50%;
  51. font-family: 'Noto Sans';
  52. font-size: 14px;
  53. font-weight: 500;
  54. line-height: 1.4rem;
  55. text-align: center;
  56. }
  57. .welcome__button {
  58. display: flex;
  59. justify-content: center;
  60. }