structure.css 1.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596
  1. /*First, we start off with specifying what parts of the DOM we want hidden*/
  2. #leftbar, #rightbar, #footbar, #midtitle {
  3. display: none;
  4. }
  5. /*Now, on to positioning of the elements*/
  6. body {
  7. position: relative;
  8. margin: 0;
  9. width: 100%;
  10. min-height: 100vh;
  11. max-height: 100%;
  12. }
  13. #topkek {
  14. display: table;
  15. position: fixed;
  16. z-index: 2;
  17. top: 0;
  18. width: 100%;
  19. height: 2rem;
  20. }
  21. .toplel {
  22. display: table-cell;
  23. }
  24. #lefttitle {
  25. padding-left: .5em;
  26. max-width: 50%;
  27. min-width: 33%;
  28. }
  29. #midtitle {
  30. width: 33%;
  31. }
  32. #righttitle {
  33. min-width: 33%;
  34. max-width: 50%;
  35. padding-right: .5em;
  36. }
  37. #righttitle a, #configbar a {
  38. display: inline-block;
  39. }
  40. #menubutton {
  41. display: none;
  42. min-width: 2%;
  43. max-width: 33%;
  44. padding-right: .5em;
  45. }
  46. #littlemenu {
  47. display: none;
  48. position: fixed;
  49. z-index: 3;
  50. top: 1.5em;
  51. right: 0px;
  52. padding: 0px .5em .5em .5em;
  53. }
  54. #littlemenu a {
  55. display: block;
  56. }
  57. #kontainer {
  58. display: table;
  59. width: 100%;
  60. padding-bottom: 2.5em;
  61. }
  62. .kontained {
  63. display: table-cell;
  64. }
  65. #leftbar {
  66. width: 6em;
  67. padding-right: .5em;
  68. }
  69. #kontent {
  70. padding: 3em .5em .5em .5em;
  71. min-height: 50%;
  72. max-width: 100%;
  73. margin-top: 0px;
  74. width:100%;
  75. }
  76. #rightbar {
  77. width: 6em;
  78. padding-left: .5em;
  79. }
  80. #footbar {
  81. position: absolute;
  82. bottom: 0;
  83. width: 100%;
  84. height: 1.5em;
  85. }
  86. #stories {
  87. padding: 0px .5em .5em .5em;
  88. width: 80%;
  89. display: table-cell;
  90. }
  91. /*Some CSS rules below that I actually want to load on both print and screen views*/
  92. blockquote {
  93. font-style: italic;
  94. }