/assets/styles.css

https://gitlab.com/chan18/website · CSS · 334 lines · 267 code · 63 blank · 4 comment · 0 complexity · de71a4aae80802a5b5275ac70d9b773c MD5 · raw file

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