/assets/css/style.css

https://gitlab.com/piratemovin/piratesite · CSS · 321 lines · 264 code · 57 blank · 0 comment · 0 complexity · 40fe3c1b2d3df12e7d133603684724b5 MD5 · raw file

  1. .navbar-brand {
  2. padding:0;
  3. height:70px;
  4. }
  5. .navbar-brand img {
  6. height:70px;
  7. }
  8. .dropdown-menu {
  9. background-color: #111111;
  10. }
  11. .dropdown-menu li a {
  12. color: #fff;
  13. }
  14. .dropdown-menu li a:hover {
  15. background: gray;
  16. }
  17. @media (min-width: 1200px) {
  18. nav{
  19. max-width: 970px;
  20. margin: auto;
  21. }
  22. }
  23. #joinbutton:hover {
  24. background-color: #ec971f;
  25. }
  26. body{
  27. background-color: #1D2627;
  28. color:#fff;
  29. }
  30. #home .main h2 {
  31. padding-top: 35px;
  32. line-height: 1.5;
  33. }
  34. #home .main h2 a {
  35. text-decoration: none;
  36. color: #ddd;
  37. }
  38. #home .main h3 {
  39. padding-bottom: 50px;
  40. }
  41. #whatpirates button {
  42. margin-top: 5px;
  43. }
  44. @media screen and (max-width: 478px) {
  45. #whatpirates button {
  46. width: 175px !important;
  47. }
  48. }
  49. #home .recent, #statement .note {
  50. max-width: 970px;
  51. color: #ddd;
  52. background: #112222;
  53. line-height: 1.5;
  54. padding: 10px;
  55. border: solid 1px #080808;
  56. border-radius: 5px;
  57. margin: 25px auto 10px;
  58. }
  59. #quotes {
  60. background-color: #112222;
  61. padding: 30px 0 30px;
  62. }
  63. #links {
  64. background-color: #121212;
  65. padding: 50px 0 50px;
  66. }
  67. #links ul {
  68. padding-bottom: 20px;
  69. }
  70. #whatpirates {
  71. padding:50px 0 50px;
  72. }
  73. @media (min-width: 768px) {
  74. #links {
  75. display: flex;
  76. }
  77. }
  78. #statements, #discussions {
  79. border: 1px solid white;
  80. border-radius: 5px;
  81. background-color: #1D3637;
  82. }
  83. .space {
  84. padding-top:50px;
  85. }
  86. #quotes blockquote {
  87. border-left: none;
  88. }
  89. #joinbutton{
  90. color:#fff;
  91. }
  92. #constitution iframe {
  93. width:100%;
  94. height:500px;
  95. }
  96. @media (min-width: 600px) {
  97. #constitution iframe {
  98. width:75%;
  99. height:500px;
  100. padding-left: 25%;
  101. }
  102. }
  103. @media screen and (min-width: 600px) {
  104. .sticky-container {
  105. padding: 0px;
  106. margin: 0px;
  107. position: fixed;
  108. right: -119px;
  109. top: 25vh;
  110. width: 200px;
  111. z-index: 10;
  112. }
  113. .sticky li {
  114. list-style-type: none;
  115. background-color: #333;
  116. color: #efefef;
  117. height: 43px;
  118. padding: 0px;
  119. margin: 0px 0px 1px 0px;
  120. -webkit-transition:all 0.25s ease-in-out;
  121. -moz-transition:all 0.25s ease-in-out;
  122. -o-transition:all 0.25s ease-in-out;
  123. transition:all 0.25s ease-in-out;
  124. }
  125. .sticky li:hover {
  126. margin-left: -90px;
  127. }
  128. .sticky li a {
  129. text-decoration: none;
  130. color: #ddd;
  131. }
  132. .sticky li a img {
  133. float: left;
  134. margin: 5px 5px;
  135. margin-right: 10px;
  136. }
  137. .sticky li a p {
  138. padding: 0;
  139. margin: 0;
  140. line-height: 43px;
  141. font-size: 14px;
  142. }
  143. .mobile-sticky-container {
  144. display: none;
  145. }
  146. }
  147. #sitefooter .featured {
  148. background: #112222;
  149. padding-bottom: 20px;
  150. margin-top: 30px;
  151. }
  152. #sitefooter .featured h4 {
  153. padding: 20px 0 5px;
  154. color: #ccc;
  155. }
  156. #sitefooter .featured a {
  157. text-decoration: none;
  158. color: #ddd;
  159. }
  160. #sitefooter .featured img {
  161. height: 32px;
  162. width: auto;
  163. margin: 20px auto;
  164. }
  165. #sitefooter .featured h6 {
  166. margin-top: -12px;
  167. }
  168. #sitefooter .improve {
  169. padding: 30px;
  170. background-color: #234345;
  171. }
  172. #sitefooter .improve img {
  173. width: 24px;
  174. height: 24px;
  175. margin-top: -4px;
  176. }
  177. @media screen and (max-width: 599px) {
  178. #sitefooter {
  179. padding-bottom: 50px;
  180. }
  181. .sticky-container {
  182. display: none;
  183. }
  184. .mobile-sticky-container {
  185. position: fixed;
  186. left: 0;
  187. bottom: 0;
  188. width: 100%;
  189. z-index: 10;
  190. -webkit-box-shadow: 0px -1px 5px 0px rgba(0,0,0,0.75);
  191. -moz-box-shadow: 0px -1px 5px 0px rgba(0,0,0,0.75);
  192. box-shadow: 0px -1px 5px 0px rgba(0,0,0,0.75);
  193. }
  194. .mobile-sticky {
  195. width: 100%;
  196. }
  197. .mobile-sticky tr {
  198. text-align: center;
  199. }
  200. .sticky-bg {
  201. background: #333;
  202. }
  203. .mobile-sticky tr td a {
  204. text-decoration: none;
  205. color: #ddd;
  206. }
  207. .mobile-sticky tr td a img {
  208. margin: 10px 0;
  209. }
  210. .social-text {
  211. padding: 8px;
  212. }
  213. .table-2 {
  214. margin-top: -10px;
  215. }
  216. }
  217. @media (min-width: 1200px) {
  218. .page {
  219. max-width: 960px;
  220. margin: auto;
  221. }
  222. }
  223. .page {
  224. font-size: large;
  225. margin-bottom: 50px;
  226. }
  227. .page h2 {
  228. margin-top: 50px;
  229. }
  230. .page h3 {
  231. margin: 50px 0 30px;
  232. }
  233. .page h4 {
  234. margin: 25px 0 15px;
  235. }
  236. .page .content {
  237. margin: 50px 0;
  238. }
  239. .page .citations {
  240. list-style: none;
  241. }
  242. .chatroom {
  243. margin-top: 0;
  244. }
  245. .chatroom h2 {
  246. margin-top: 0 !important;
  247. }
  248. .chatroom p {
  249. margin-top: 30px;
  250. }
  251. @media screen and (min-width: 600px) {
  252. .page {
  253. padding-right: 50px;
  254. }
  255. }
  256. @media screen and (max-width: 767px) {
  257. .page .candidates div:not(:first-child) {
  258. margin-top: 50px;
  259. }
  260. }
  261. #template h1 {
  262. margin: 120px auto;
  263. text-align: center;
  264. }