/* much of the basic design/ui of this website was referenced from the warbler twitter clone, as i had the same vision for my project before even seeing that code. Instead of writing it all from scratch, i referenced theirs to see how they did it, and tweaked it as necessary! I DO NOT CLAIM IT AS MY ORIGINAL IDEA AND CREDIT THE SPRINGBOARD DEV TEAM!*/ html, body { height: 100%; } h1 { font-family: 'Black Ops One', cursive; } h2.join-message { font-family: 'Black Ops One', cursive; } h3 { font-family: 'Black Ops One', cursive; } #get-swole { font-family: 'Black Ops One', cursive; } li.stat > h4 > a { color: #d9534f; } #posts .list-group-item { border-radius: 10px; } #anon-posts .list-group-item { border-radius: 15px; } .post-area > .post-heading > a { color: #d9534f; } .center-body { display: flex; align-items: center; padding-bottom: 40px; padding-top: 40px; } a#google-signin { display: inline-block; background: #4285f4; color: white; border-radius: 5px; box-shadow: 1px grey; white-space: nowrap; } a#google-signin:hover { background: #3063b5; } span#g-logo { font-family: serif; font-weight: normal; } span#g-logo { background: url('btn_google_light_pressed_ios.svg') 50% no-repeat; display: inline-block; vertical-align: middle; width: 42px; height: 42px; } span#g-text { display: inline-block; vertical-align: middle; padding-left: 42px; padding-right: 42px; font-size: 14px; font-weight: bold; /* Use the Roboto font that is loaded in the */ font-family: 'Roboto', sans-serif; } li.hidden { display: none; } @media only screen and (max-width: 992px) { #prof-pic, li.collapsed { display: none; } } @media only screen and (min-width: 992px) { a.to-hide { display: none; } } .text-primary { color: royalblue !important; } li.anon:hover { cursor: pointer; } .timeline-image { border-radius: 48px; height: 48px; width: 48px; margin-top: 2px; } #posts .post-link { position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: 1; } #all-posts .post-link { position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: 1; } #post .list-group-item a:not(.post-link) { position: relative; z-index: 2; } .post-area, .timeline-image { display: inline-block; } .post-area { margin-left: 10px; } @media only screen and (max-width: 375px) { .post-area { margin-left: 0; } } #posts .list-group-item { display: flex; align-items: flex-start; padding: 7px 10px 12px; border: 1px solid rgba(0, 0, 0, 0.125); } #posts { position: relative; } #posts:not(.no-hover) .list-group-item:hover { background-color: #535556; } #posts.no-hover .post-area { width: 100%; } #posts.no-hover { display: flex; justify-content: space-between; margin-top: 3px; } #swolemate-cover { height: 400px; margin-top: -16px; opacity: 0.7; background-size: cover; background-position-x: center; background-position-y: 25%; } #profile-avatar { width: 200px; height: 200px; border: 3px solid #2b3e50; margin-top: -120px; z-index: 1; position: relative; box-shadow: 0 1px 1px rgba(136, 153, 166, 0.15); } #profile-image, #profile-avatar { border-radius: 100%; display: block; margin-left: -15px; } #profile-image { margin: 0 auto 15px; width: 100%; } .full-width { width: 100vw; margin-right: -50vw !important; margin-left: -50vw !important; position: relative; left: 50%; right: 50%; } .row.full-width { margin-top: -80px; margin-bottom: 1rem; border-bottom: 1px solid rgba(0, 0, 0, 0.25); border-top: 1px solid rgba(0, 0, 0, 0.25); box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.25); height: 60px; align-items: center; } .user-stats > .ml-auto { display: flex; align-items: center; } .user-stats > .ml-auto .btn { min-width: 105px; padding: 6px 16px; } .stat { text-align: center; height: 60px; box-sizing: border-box; padding: 14px 15px 7px; line-height: 1; } .stat > .small { color: wheat; font-weight: bold; font-size: 12px; letter-spacing: 0.02em; margin-bottom: 0; } .stat > .small + h4 { font-size: 18px; font-weight: bold; padding-top: 3px; } nav + .container { margin-bottom: 1rem; } #sidebar-username { margin-top: 30px; font-size: 21px; font-weight: bold; line-height: 28px; word-wrap: break-word; } @media (max-width: 768px) { .full-width .user-stats .stat { position: relative; left: 85px; } } #posts .list-group-item a:not(.post-link) { position: relative; z-index: 2; } #posts .list-group-item img { position: relative; z-index: 2; } #all-posts .list-group-item a:not(.post-link) { position: relative; z-index: 2; } .post-area > a { color: #d9534f; } .post-area > a:hover { color: #dd7571; } .stat > h4 > a:hover { color: orange; } .post-lock { position: absolute; right: 4px; top: 87%; z-index: 3; } #posts.no-hover .post-heading { display: flex; justify-content: space-between; height: 47px; margin-top: 3px; } #like { position: absolute; top: 60px; right: 4px; border-radius: 50%; z-index: 5; } @media only screen and (max-width: 321px) { #like { top: 8px; } } @media only screen and (max-width: 767px) { #like { top: 60px; right: 2px; } } .single-post { font-size: 20px; letter-spacing: 0.01em; margin-bottom: 20px; } .navbar { border-bottom: 1px solid rgba(0, 0, 0, 0.25); margin-bottom: 1rem; position: relative; z-index: 9999; } .footer { position: absolute; bottom: 0; left: 0; right: 0; } #topBtn { position: fixed; bottom: 10px; right: 100px; z-index: 10; } @media only screen and (max-width: 767px) { #topBtn { position: fixed; right: 0; padding-left: 10px; } } .card-hero { width: 100%; position: absolute; top: 0; right: 0; bottom: 0; left: 0; } #home-aside > .user-card { margin-top: 0; overflow: hidden; } #home-aside > .user-card .card-link { display: flex; } #home-aside > .user-card .card-link > p { margin-left: 0.5rem; margin-top: 0.25rem; } #home-aside > .user-card .stat { padding: 14px 0 7px; } #home-aside > .user-card .user-stats { display: flex; justify-content: space-around; } #home-aside > .user-card > div { width: 100%; } #home-aside .card-link > p { position: relative; } #home-aside .stat h4 { text-align: left; } .card-image { border: 1px solid #fff; border-radius: 70px; height: 70px; width: 70px; margin-top: -35px; position: relative; z-index: 1; } .card-link { display: inline-block; margin-left: 10px; } .user-card { width: 100%; padding-bottom: 100%; border-radius: 5px !important; border: 1px solid #ccc; position: relative !important; background: white; margin-top: 20px; } @media only screen and (max-width: 767px) { .user-card { padding-bottom: 65%; width: 85%; margin-left: 10%; } } @media only screen and (min-width: 767px) { hr.to-hide { display: none; } h3.to-hide { display: none; } } .user-card > div { position: absolute; } .image-wrapper { width: 100%; padding-bottom: 36%; position: relative; overflow: hidden; } p.danger-hover:hover { text-decoration: underline; color: lightpink !important; } button#edit-post { border-radius: 50px; position: absolute; top: 8px; right: 2px; z-index: 5; } button#userlike { position: absolute; top: 10px; right: 4px; border-radius: 50%; z-index: 5; } .image-cropper { width: 32px; height: 32px; position: relative; overflow: hidden; border-radius: 50%; } img#nav-prof-pic { display: inline; margin: 0 auto; width: 100%; height: 100%; } div#pub-posts { width: auto; height: 50vh; overflow-y: auto; overflow-x: hidden; border-radius: 5px; } div#pub-posts::-webkit-scrollbar { width: 10px; height: 2px; background-color: #d9534f; /* or add it to the track */ margin: 0; border-radius: 5px; } div#pub-posts::-webkit-scrollbar-thumb { background: #fff; /* or add it to the track */ border-radius: 5px; } div#auth-posts { width: auto; height: 83vh; overflow-y: auto; overflow-x: hidden; border-radius: 5px; } div#auth-posts::-webkit-scrollbar { width: 15px; height: 2px; background-color: #d9534f; /* or add it to the track */ margin: 0; border-radius: 5px; } div#auth-posts::-webkit-scrollbar-thumb { background: #fff; /* or add it to the track */ border-radius: 5px; } @media only screen and (max-width: 767px) { div#pub-posts::-webkit-scrollbar { display: none; } div#auth-posts::-webkit-scrollbar { display: none; } }