_layout.scss 1.9 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394
  1. $side-padding:3em;
  2. body, html{
  3. position: relative;
  4. width: 100%;
  5. height:100%;
  6. font-family: sans-serif;
  7. font-style: normal;
  8. margin:0;
  9. padding:0;
  10. }
  11. body{
  12. overflow:hidden;
  13. }
  14. #root{
  15. display: flex;
  16. flex-direction: column;
  17. width: 100vw;
  18. height:100vh;
  19. %layout-element{
  20. width:100vw;
  21. box-sizing:border-box;
  22. }
  23. header[role="banner"]{
  24. z-index:10;
  25. flex: 0 0 auto;
  26. @extend %layout-element;
  27. padding:1em $side-padding 1em $side-padding;
  28. @media only screen and (max-width: $small-bp) {
  29. padding:1em $side-padding/2 0 $side-padding/2;
  30. }
  31. }
  32. section[role="main-content"]{
  33. display: flex;
  34. flex:1 1 auto;
  35. @extend %layout-element;
  36. overflow: hidden;
  37. position: relative;
  38. >.wrapper{
  39. position: relative;
  40. padding:0 $side-padding 0 $side-padding;
  41. // height:100%; max-height:100%;
  42. display: flex;
  43. flex: 1;
  44. overflow-y: hidden;
  45. overflow-x: hidden;
  46. >*{
  47. @include fade-transition;
  48. }
  49. @media only screen and (max-width: $small-bp) {
  50. overflow-y: auto;
  51. padding:0 $side-padding/2 0 $side-padding/2;
  52. }
  53. }
  54. .main-content-layout{
  55. position: relative;
  56. // https://stackoverflow.com/a/33644245
  57. display: flex;
  58. flex: 1;
  59. >section{
  60. max-height: 100%;
  61. }
  62. >header,
  63. >section>.wrapper,
  64. >nav{
  65. box-sizing: border-box;
  66. max-height: 100%;
  67. padding-top:$base-line;
  68. }
  69. >section>.wrapper,
  70. >nav{
  71. overflow-x: hidden;
  72. overflow-y: auto;
  73. -webkit-overflow-scrolling: touch;
  74. }
  75. }
  76. @media only screen and (max-width: $small-bp) {
  77. .main-content-layout{
  78. display: flex;
  79. flex-direction: column;
  80. }
  81. }
  82. }
  83. footer[role="tools"]{
  84. flex:0 0 auto;
  85. @extend %layout-element;
  86. // padding-bottom: 1em;
  87. // >*{
  88. // padding:0.5em 1em;
  89. // }
  90. }
  91. }