_layout.scss 1.2 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677
  1. $header-height : 150px;
  2. $width-menu-slidedown : 550px;
  3. .layout-container {
  4. position: relative;
  5. width: 100vw;
  6. background-color: $background-home;
  7. font-family: $font-family-default;
  8. font-weight: 400;
  9. font-style: normal;
  10. top: 0%;
  11. left: 0%;
  12. // width: 100%;
  13. overflow: hidden;
  14. display: flex;
  15. flex-flow: row wrap;
  16. header{
  17. flex: 0 0 100%;
  18. }
  19. // main{
  20. // // position: relative;
  21. // // top: -7rem;
  22. // }
  23. footer{
  24. flex: 0 0 100%;
  25. }
  26. }
  27. .layout-content{
  28. order: 2;
  29. padding-top: 3rem;
  30. padding-bottom: 6rem;
  31. width: 70%;
  32. margin: auto;
  33. @media(max-width: 891px){
  34. width: 90%;
  35. }
  36. @media (max-width:500px) {
  37. padding-top: 0;
  38. }
  39. }
  40. aside{
  41. width: 20%;
  42. order: 1;
  43. margin-top: 5rem;
  44. margin-left: 10%;
  45. margin-right: 1rem;
  46. @media(max-width:891px){
  47. margin-left: 5%;
  48. margin-top: 9rem;
  49. }
  50. @media (max-width:500px) {
  51. width: 80%;
  52. margin-top: 3rem;
  53. }
  54. }
  55. main{
  56. width: 100%;
  57. display: flex;
  58. flex-direction: row;
  59. position: relative;
  60. @media (max-width:500px) {
  61. flex-direction: column;
  62. }
  63. }
  64. .main-content{
  65. margin-top: 7rem;
  66. }