/assets/styles.css
https://gitlab.com/chan18/website · CSS · 334 lines · 267 code · 63 blank · 4 comment · 0 complexity · de71a4aae80802a5b5275ac70d9b773c MD5 · raw file
- .navbar-brand {
- padding:0;
- height:70px;
- }
- .navbar-brand img {
- height:70px;
- }
- #campaigndropdown {
- background-color: #111111;
- }
- #campaigndropdown li a {
- color: #fff;
- }
- #campaigndropdown li a:hover {
- background: gray;
- }
- @media (min-width: 1200px) {
- nav{
- max-width: 970px;
- margin: auto;
- }
- }
- body{
- background-color: #1D2627;
- color:#fff;
- }
- #videoembed iframe {
- width:500px;
- height:281px;
- }
- @media (max-width: 500px) {
- #videoembed iframe {
- width:100%;
- height:auto;
- }
- }
- #home .main h2 {
- padding: 100px 0;
- line-height: 1.5;
- }
- #home .main h2 a {
- text-decoration: none;
- color: #ddd;
- }
- #quotes {
- background-color: #112222;
- padding: 30px 0 30px;
- }
- #links {
- background-color: #121212;
- padding: 50px 0 50px;
- }
- #whatpirates {
- padding:50px 0 50px;
- }
- @media (min-width: 768px) {
- #links {
- display: flex;
- }
- }
- #statements, #discussions {
- border: 1px solid white;
- border-radius: 5px;
- background-color: #1D3637;
- }
- .space {
- padding-top:50px;
- }
- #quotes blockquote {
- border-left: none;
- }
- #joinbutton{
- color:#fff;
- }
- #constitution iframe {
- width:100%;
- height:500px;
- }
- #loading {
- /* Size and position */
- font-size: 25px; /* 1em */
- width: 9em;
- height: 9em;
- margin: 100px auto;
- position: relative;
- /* Styles */
- border-radius: 50%;
- background: rgba(255,255,255,0.1);
- border: 1em dashed rgba(138,189,195,0.5);
- box-shadow:
- inset 0 0 2em rgba(255,255,255,0.3),
- 0 0 0 0.7em rgba(255,255,255,0.3);
- animation: rota 3.5s linear infinite;
- /* Font styles */
- font-family: 'Racing Sans One', sans-serif;
- color: #444;
- text-align: center;
- text-transform: uppercase;
- text-shadow: 0 .04em rgba(255,255,255,0.9);
- line-height: 6em;
- }
- #loading:before,
- #loading:after {
- content: "";
- position: absolute;
- z-index: -1;
- border-radius: inherit;
- box-shadow: inset 0 0 2em rgba(255,255,255,0.3);
- border: 1em dashed;
- }
- #loading:before {
- border-color: rgba(138,189,195,0.2);
- top: 0; right: 0; bottom: 0; left: 0;
- }
- #loading:after {
- border-color: rgba(138,189,195,0.4);
- top: 1em; right: 1em; bottom: 1em; left: 1em;
- }
- #loading .inner {
- width: 100%;
- height: 100%;
- animation: rota 3.5s linear reverse infinite;
- }
- #loading span {
- display: inline-block;
- animation: placeholder 1.5s ease-out infinite;
- }
- #loading span:nth-child(1) { animation-name: loading-1; }
- #loading span:nth-child(2) { animation-name: loading-2; }
- #loading span:nth-child(3) { animation-name: loading-3; }
- #loading span:nth-child(4) { animation-name: loading-4; }
- #loading span:nth-child(5) { animation-name: loading-5; }
- #loading span:nth-child(6) { animation-name: loading-6; }
- #loading span:nth-child(7) { animation-name: loading-7; }
- @keyframes rota {
- to { transform: rotate(360deg); }
- }
- @keyframes loading-1 {
- 14.28% { opacity: 0.3; }
- }
- @keyframes loading-2 {
- 28.57% { opacity: 0.3; }
- }
- @keyframes loading-3 {
- 42.86% { opacity: 0.3; }
- }
- @keyframes loading-4 {
- 57.14% { opacity: 0.3; }
- }
- @keyframes loading-5 {
- 71.43% { opacity: 0.3; }
- }
- @keyframes loading-6 {
- 85.71% { opacity: 0.3; }
- }
- @keyframes loading-7 {
- 100% { opacity: 0.3; }
- }
- @media screen and (min-width: 600px) {
- .sticky-container {
- padding: 0px;
- margin: 0px;
- position: fixed;
- right: -119px;
- top: 28vh;
- width: 200px;
- z-index: 10;
- }
- .sticky li {
- list-style-type: none;
- background-color: #333;
- color: #efefef;
- height: 43px;
- padding: 0px;
- margin: 0px 0px 1px 0px;
- -webkit-transition:all 0.25s ease-in-out;
- -moz-transition:all 0.25s ease-in-out;
- -o-transition:all 0.25s ease-in-out;
- transition:all 0.25s ease-in-out;
- }
- .sticky li:hover {
- margin-left: -90px;
- }
- .sticky li a {
- text-decoration: none;
- color: #ddd;
- }
- .sticky li a img {
- float: left;
- margin: 5px 5px;
- margin-right: 10px;
- }
- .sticky li a p {
- padding: 0px;
- margin: 0px;
- line-height: 43px;
- font-size: large;
- }
- .mobile-sticky-container {
- display: none;
- }
- }
- #sitefooter .featured {
- /*background: #333;*/
- background: #112222;
- padding-bottom: 20px;
- margin-top: 30px;
- }
- #sitefooter .featured h4 {
- padding: 20px 0 5px;
- color: #ccc;
- }
- #sitefooter .featured a {
- text-decoration: none;
- color: #ddd;
- }
- #sitefooter .featured img {
- height: 32px;
- width: auto;
- margin: 20px auto;
- }
- #sitefooter .featured h6 {
- margin-top: -12px;
- }
- #sitefooter .improve {
- padding-top:30px;
- padding-bottom:100px;
- background-color: #234345;
- }
- #sitefooter .improve img {
- width: 24px;
- height: 24px;
- margin-top: -4px;
- }
- @media screen and (max-width: 599px) {
- .sticky-container {
- display: none;
- }
- .mobile-sticky-container {
- position: fixed;
- left: 0;
- bottom: 0;
- width: 100%;
- z-index: 10;
- -webkit-box-shadow: 0px -1px 5px 0px rgba(0,0,0,0.75);
- -moz-box-shadow: 0px -1px 5px 0px rgba(0,0,0,0.75);
- box-shadow: 0px -1px 5px 0px rgba(0,0,0,0.75);
- }
- .mobile-sticky {
- width: 100%;
- }
- .mobile-sticky tr {
- text-align: center;
- }
- .sticky-bg {
- background: #333;
- }
- .mobile-sticky tr td a {
- text-decoration: none;
- color: #ddd;
- }
- .mobile-sticky tr td a img {
- margin: 10px 0;
- }
- .social-text {
- padding: 8px;
- }
- .table-2 {
- margin-top: -10px;
- }
- }