Base for a static organization website

style.css 2.7KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184
  1. html { height: 100%; }
  2. body { height: calc(100% - 60px); margin-top: 50px; padding-top: 20px; overflow-x: hidden}
  3. textarea { resize: vertical; }
  4. .pointmark {
  5. width: 100%;
  6. height: 100%;
  7. z-index: -42;
  8. position: absolute;
  9. top: 0;
  10. left: 0;
  11. transition: all 1s;
  12. background: url(http://lorempixel.com/g/1920/1080/) fixed center repeat;
  13. background-size: cover;
  14. }
  15. .pointmark-trigger {
  16. position: absolute;
  17. z-index: 42;
  18. bottom: 10px;
  19. right: 10px;
  20. color: rgba(255, 255, 255, 0.5);
  21. transition: all 0.5s;
  22. }
  23. .pointmark-trigger:hover {
  24. text-shadow: 0px 0px 20px #fff;
  25. color: rgba(255, 255, 255, 0.5);
  26. }
  27. #content {
  28. margin-bottom: 10px;
  29. padding: 20px 50px;
  30. min-height: calc(100% - 50px);
  31. background-color: rgba(10,10,10,0.9);
  32. color: #fff;
  33. }
  34. #header, #footer {
  35. width: 100%;
  36. height: 50px;
  37. color: #fff;
  38. }
  39. #header {
  40. position: fixed;
  41. top: 0px;
  42. }
  43. #header .navbar-brand {
  44. color: #fff;
  45. }
  46. #header .navbar-brand:hover {
  47. text-shadow: 1px 1px 5px #fff;
  48. }
  49. #header .navbar-inverse {
  50. background-color: rgba(34,34,34,0.9);
  51. }
  52. #header .navbar {
  53. border-radius: 0px;
  54. }
  55. #header .navbar li a {
  56. text-transform: uppercase;
  57. transition: color 0.5s;
  58. }
  59. #content h1 {
  60. font-size: 2em;
  61. text-align: center;
  62. text-transform: uppercase;
  63. }
  64. #content h1,
  65. #content h2,
  66. #content h3,
  67. #content h4,
  68. #content h5,
  69. #content h6 {
  70. margin-bottom: 20px;
  71. }
  72. #content h1::after {
  73. height: 2px;
  74. content: " ";
  75. display: block;
  76. margin-top: 5px;
  77. border-radius: 50%;
  78. background: rgba(255, 255, 255, 0.9);
  79. }
  80. #content h2 {
  81. font-size: 1.8em;
  82. }
  83. #content h3 {
  84. font-size: 1.6em;
  85. }
  86. #content h4 {
  87. font-size: 1.4em;
  88. }
  89. #content h5 {
  90. display: inline-block;
  91. font-size: 1.2em;
  92. }
  93. #content h5::after {
  94. height: 2px;
  95. content: " ";
  96. display: block;
  97. width: 120%;
  98. margin-top: 5px;
  99. border-top-right-radius: 50%;
  100. border-bottom-right-radius: 50%;
  101. background: rgba(255, 255, 255, 0.9);
  102. }
  103. .voffset {
  104. margin-top: 10px;
  105. margin-bottom: 10px;
  106. }
  107. .toffset {
  108. margin-top: 100px;
  109. }
  110. .right-policy {
  111. font-size: 0.7em;
  112. text-align: justify;
  113. }
  114. #header .navbar li a:hover,
  115. #header .navbar li a:focus {
  116. text-shadow: 2px 2px 3px #000;
  117. }
  118. #header .dropdown-menu {
  119. background-color: rgba(34, 34, 34, 0.95);
  120. }
  121. #header .dropdown-menu > li > a {
  122. color: #fff;
  123. }
  124. #header .dropdown-menu > li > a:hover,
  125. #header .dropdown-menu > li > a:focus {
  126. color: #333;
  127. }
  128. #header input.search-form {
  129. min-width: 300px;
  130. }
  131. #header .dropdown-menu .divider {
  132. background-color: #000;
  133. }
  134. #footer {
  135. background-color: rgba(10,10,10,0.9);
  136. border-top: 2px solid #333;
  137. text-align: center;
  138. line-height: 50px;
  139. }
  140. .scrollToTop {
  141. position: absolute;
  142. bottom: 10px;
  143. left: 10px;
  144. font-size: 30pt;
  145. right: 50px;
  146. color: #777;
  147. z-index: 10;
  148. display: none;
  149. cursor: pointer;
  150. }
  151. .scrollToTop:hover {
  152. color: #777;
  153. text-shadow: 0px 0px 5px #a8a8a8;
  154. }