structure.css 1.4 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495
  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. }
  75. #rightbar {
  76. width: 6em;
  77. padding-left: .5em;
  78. }
  79. #footbar {
  80. position: absolute;
  81. bottom: 0;
  82. width: 100%;
  83. height: 1.5em;
  84. }
  85. #stories {
  86. padding: 0px .5em .5em .5em;
  87. width: 80%;
  88. display: table-cell;
  89. }
  90. /*Some CSS rules below that I actually want to load on both print and screen views*/
  91. blockquote {
  92. font-style: italic;
  93. }