You are here

layout-default.twig in Open Social 8.2

<div class="browser-window">
  <div class="top-bar">
    <div class="circles">
      <div class="circle" id="close-circle"></div>
      <div class="circle" id="minimize-circle"></div>
      <div class="circle" id="maximize-circle"></div>
    </div>
  </div>
  <div class="content">
    <div>
      <div style="padding: 20px;background-color:#E57373; min-height: 80px">
        <p>Header</p>
      </div>
    </div>
    <div class="hidden-xs">
      <div style="padding: 20px;background-color:#E6EE9C; min-height: 30px">
        <p>Breadcrumbs</p>
      </div>
    </div>
    <div>
      <div style="padding: 20px;background-color:#9575CD; min-height: 220px">
        <p>Hero</p>
        <p class="flat-text inline25"></p>
        <p class="flat-text inline25"></p>
      </div>
    </div>
    <div>
      <div style="padding: 20px;background-color:#FFE082; min-height: 40px">
        <p>Secondary navigation</p>
        <p class="flat-text inline25"></p>
        <p class="flat-text inline25"></p>
        <p class="flat-text inline25"></p>
      </div>
    </div>
    <div>
      <div style="padding: 20px;background-color:#FF8A65; min-height: 100px">
        <p>Content top</p>
        <p class="flat-text inline25"></p>
        <p class="flat-text inline25"></p>
        <p class="flat-text inline25"></p>
      </div>
    </div>
    <div class="row layout--with-complementary">
      <div class="region--complementary">
        <div class="region--complementary-top" style="padding: 20px; background-color:#4DD0E1; min-height: 150px">
          <p>Complementary top</p>
          <p class="flat-text small"></p>
          <p class="flat-text"></p>
          <p class="flat-text"></p>
        </div>
        <div class="region--complementary-bottom" style="padding: 20px;background-color:#81C784; min-height: 150px">
          <p>Complementary bottom</p>
          <p class="flat-text small"></p>
          <p class="flat-text"></p>
          <p class="flat-text"></p>
        </div>
      </div>
      <div class="region--content" style="padding: 20px; background-color:#4DB6AC; min-height: 400px">
        <p>Page title</p>
        <p>Main content</p>
        <p class="flat-text-header"></p>
        <p class="flat-text"></p>
        <p class="flat-text"></p>
        <p class="flat-text"></p>
        <p class="flat-text"></p>
      </div>
    </div>
    <div>
      <div style="background-color:#DCE775; min-height: 100px">
        <p>Content bottom</p>
        <p class="flat-text inline25"></p>
        <p class="flat-text inline25"></p>
        <p class="flat-text inline25"></p>
      </div>
    </div>
    <div>
      <div style="background-color:#64b5f6; min-height: 50px">
        <p>Footer</p>
      </div>
    </div>
  </div>
</div>

File

themes/socialbase/components/05-templates/layout/layout-default.twig
View source
  1. <div class="browser-window">
  2. <div class="top-bar">
  3. <div class="circles">
  4. <div class="circle" id="close-circle"></div>
  5. <div class="circle" id="minimize-circle"></div>
  6. <div class="circle" id="maximize-circle"></div>
  7. </div>
  8. </div>
  9. <div class="content">
  10. <div>
  11. <div style="padding: 20px;background-color:#E57373; min-height: 80px">
  12. <p>Header</p>
  13. </div>
  14. </div>
  15. <div class="hidden-xs">
  16. <div style="padding: 20px;background-color:#E6EE9C; min-height: 30px">
  17. <p>Breadcrumbs</p>
  18. </div>
  19. </div>
  20. <div>
  21. <div style="padding: 20px;background-color:#9575CD; min-height: 220px">
  22. <p>Hero</p>
  23. <p class="flat-text inline25"></p>
  24. <p class="flat-text inline25"></p>
  25. </div>
  26. </div>
  27. <div>
  28. <div style="padding: 20px;background-color:#FFE082; min-height: 40px">
  29. <p>Secondary navigation</p>
  30. <p class="flat-text inline25"></p>
  31. <p class="flat-text inline25"></p>
  32. <p class="flat-text inline25"></p>
  33. </div>
  34. </div>
  35. <div>
  36. <div style="padding: 20px;background-color:#FF8A65; min-height: 100px">
  37. <p>Content top</p>
  38. <p class="flat-text inline25"></p>
  39. <p class="flat-text inline25"></p>
  40. <p class="flat-text inline25"></p>
  41. </div>
  42. </div>
  43. <div class="row layout--with-complementary">
  44. <div class="region--complementary">
  45. <div class="region--complementary-top" style="padding: 20px; background-color:#4DD0E1; min-height: 150px">
  46. <p>Complementary top</p>
  47. <p class="flat-text small"></p>
  48. <p class="flat-text"></p>
  49. <p class="flat-text"></p>
  50. </div>
  51. <div class="region--complementary-bottom" style="padding: 20px;background-color:#81C784; min-height: 150px">
  52. <p>Complementary bottom</p>
  53. <p class="flat-text small"></p>
  54. <p class="flat-text"></p>
  55. <p class="flat-text"></p>
  56. </div>
  57. </div>
  58. <div class="region--content" style="padding: 20px; background-color:#4DB6AC; min-height: 400px">
  59. <p>Page title</p>
  60. <p>Main content</p>
  61. <p class="flat-text-header"></p>
  62. <p class="flat-text"></p>
  63. <p class="flat-text"></p>
  64. <p class="flat-text"></p>
  65. <p class="flat-text"></p>
  66. </div>
  67. </div>
  68. <div>
  69. <div style="background-color:#DCE775; min-height: 100px">
  70. <p>Content bottom</p>
  71. <p class="flat-text inline25"></p>
  72. <p class="flat-text inline25"></p>
  73. <p class="flat-text inline25"></p>
  74. </div>
  75. </div>
  76. <div>
  77. <div style="background-color:#64b5f6; min-height: 50px">
  78. <p>Footer</p>
  79. </div>
  80. </div>
  81. </div>
  82. </div>