diff options
author | Athanasia Monika Mowinckel <a.m.mowinckel@psykologi.uio.no> | 2020-10-15 23:55:01 +0300 |
---|---|---|
committer | Athanasia Monika Mowinckel <a.m.mowinckel@psykologi.uio.no> | 2020-10-15 23:55:01 +0300 |
commit | 0d3159f30f00f747f45e40077a8b2d37a7a50699 (patch) | |
tree | 9c21797bfe95936dc134d78d4bb573fd25a7ea54 /static | |
parent | 47384d1d757d951af7714aa2e30f22524ab87d4b (diff) |
dynamic pages
Diffstat (limited to 'static')
-rw-r--r-- | static/css/styles.css | 1659 |
1 files changed, 834 insertions, 825 deletions
diff --git a/static/css/styles.css b/static/css/styles.css index ab3dbf6..fa48c90 100644 --- a/static/css/styles.css +++ b/static/css/styles.css @@ -1,825 +1,834 @@ -html {
- font-size: 100%;
-}
-body {
- font-size: 15px;
- font-size: 0.9375rem;
- font-family: "Open sans", Helvetica, Arial, sans-serif;
- color: #666666;
- padding: 0;
-}
-.topspace {
- margin-top: 40px;
-}
-/*********************************************************************
-
-
- Navigation in header
-
-
-**********************************************************************/
-.navbar {
- border-width: 1px 0;
- -webkit-border-radius: 0;
- -webkit-background-clip: padding-box;
- -moz-border-radius: 0;
- -moz-background-clip: padding;
- border-radius: 0;
- background-clip: padding-box;
- width: 100%;
-}
-.navbar.stick {
- position: fixed;
- top: 0;
- left: 0;
- background-color: rgba(255, 255, 255, .85);
-}
-.navbar-collapse {
- -webkit-border-radius: 0;
- -webkit-background-clip: padding-box;
- -moz-border-radius: 0;
- -moz-background-clip: padding;
- border-radius: 0;
- background-clip: padding-box;
- font-family: "Open sans", Helvetica, Arial, sans-serif;
- font-weight: 300;
- text-transform: uppercase;
-}
-.navbar-collapse .navbar-nav {
- float: none;
- margin: 0 auto;
- text-align: center;
-}
-.navbar-collapse .navbar-nav > li {
- float: none;
- display: inline-block;
-}
-.navbar-collapse .navbar-nav > li > a {
- padding: 20px 30px;
-}
-.dropdown ul.dropdown-menu {
- top: 85%;
- text-align: left;
-}
-.dropdown ul.dropdown-menu > li > a {
- padding: 5px 30px;
-}
-.navbar-default {
- background-color: #ffffff;
- border-color: #cccccc;
-}
-.navbar-default .navbar-nav > li > a {
- color: #333333;
-}
-.navbar-default .navbar-nav > li > a:hover,
-.navbar-default .navbar-nav > li > a:focus,
-.navbar-default .navbar-nav > .active > a,
-.navbar-default .navbar-nav > .active > a:hover,
-.navbar-default .navbar-nav > .active > a:focus {
- color: #000000;
-}
-.navbar-default .dropdown ul.dropdown-menu > li > a {
- color: #333333;
-}
-.navbar-default .dropdown ul.dropdown-menu > li > a:hover {
- background-color: #eeeeee;
- color: #000000;
-}
-.navbar-default .navbar-toggle {
- border-color: #666666;
-}
-.navbar-default .navbar-toggle:hover,
-.navbar-default .navbar-toggle:focus {
- background-color: #ffffff;
-}
-.navbar-default .navbar-toggle .icon-bar {
- background-color: #333333;
-}
-.navbar-default .navbar-collapse,
-.navbar-default .navbar-form {
- border-color: #cccccc;
-}
-.navbar-default .navbar-nav > .open > a,
-.navbar-default .navbar-nav > .open > a:hover,
-.navbar-default .navbar-nav > .open > a:focus {
- background-color: #ffffff;
- color: #000000;
-}
-/****************************************************************************************
-
-
- Sidebar special Nav
-
-
-*****************************************************************************************/
-.nav-side {
- font-size: 24px;
- font-size: 1.5rem;
- font-weight: 300;
- margin-top: -0.37em;
-}
-.nav-side > li > a {
- padding-top: 5px;
- padding-bottom: 5px;
- color: #f392b4;
-}
-.nav-side > li > a:hover {
- color: #bd1550;
- background: none;
-}
-.nav-side > li.active > a {
- color: #bd1550;
-}
-/*********************************************************************
-
-
- TYPOGRAPHY
-
-
-**********************************************************************/
-p {
- line-height: 1.6em;
- margin: 0 0 30px 0;
-}
-ul,
-ol {
- line-height: 1.6em;
- margin: 0 0 30px 0;
-}
-blockquote {
- padding: 10px 20px;
- margin: 0 0 30px;
- border-left: 5px solid #eee;
-}
-h1,
-h2,
-h3,
-h4,
-h5,
-h6,
-.h1,
-.h2,
-.h3,
-.h4,
-.h5,
-.h6 {
- font-family: "Open sans", Helvetica, Arial, sans-serif;
- font-weight: 400;
- color: #333333;
-}
-h1 {
- font-size: 40px;
- font-size: 2.5rem;
-}
-h2 {
- font-size: 36px;
- font-size: 2.25rem;
-}
-h3 {
- font-size: 30px;
- font-size: 1.875rem;
-}
-h4 {
- font-size: 24px;
- font-size: 1.5rem;
-}
-h5 {
- font-size: 20px;
- font-size: 1.25rem;
-}
-a {
- color: #bd1550;
-}
-a:hover {
- color: #e93675;
-}
-.lead {
- font-weight: 300;
- font-size: 21px;
- font-size: 1.3125rem;
-}
-.text-msg {
- line-height: 1.7em;
- color: #b3b3b3;
- font-weight: 300;
- text-transform: capitalize;
- margin-top: -0.23em;
-}
-.size-auto,
-.size-full,
-.size-large,
-.size-medium,
-.size-thumbnail {
- max-width: 100%;
- height: auto;
-}
-/*********************************************************************
-
-
- HEADER
-
-
-**********************************************************************/
-#head .banner {
- background-position: top center;
- background-size: cover;
- color: #7C7C7C;
- padding: 30px 0 35px 0;
-}
-#head img.img-circle {
- display: block;
- width: 140px;
- height: 140px;
- overflow: hidden;
- border: 9px solid rgba(0, 0, 0, 0.05);
- margin: 0 auto;
-}
-#head .title {
- font-family: Alice, Georgia, serif;
- font-size: 49px;
- font-size: 3.0625rem;
-}
-#head .title a {
- text-decoration: none;
- color: #333333;
-}
-#head .tagline {
- display: block;
- font-size: 14px;
- font-size: 0.875rem;
- line-height: 1.2em;
- color: #7C7C7C;
- margin: 5px 0 0;
-}
-#head .tagline b {
- font-weight: normal;
-}
-#head .tagline a {
- color: #5E5E5E;
-}
-.home #head {
- padding: 90px 0;
-}
-.home #head .title {
- font-size: 49px;
- font-size: 3.0625rem;
-}
-.home #head .tagline {
- font-size: 16px;
- font-size: 1rem;
- margin: 15px 0 0;
-}
-/*********************************************************************
-
-
- CONTENT
-
-
-**********************************************************************/
-img {
- max-width: 100%;
-}
-.btn {
- font-size: 12px;
- font-size: 0.75rem;
- text-decoration: none;
- text-transform: uppercase;
- font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
- color: #333;
- -webkit-border-radius: 0px;
- -webkit-background-clip: padding-box;
- -moz-border-radius: 0px;
- -moz-background-clip: padding;
- border-radius: 0px;
- background-clip: padding-box;
- -webkit-transition-property: all;
- -moz-transition-property: all;
- -o-transition-property: all;
- -ms-transition-property: all;
- transition-property: all;
- -webkit-transition-duration: 0.2s;
- -moz-transition-duration: 0.2s;
- -o-transition-duration: 0.2s;
- transition-duration: 0.2s;
- border: 0 none;
- padding: 12px 35px;
- text-shadow: 0 1px 0px #780d33;
-}
-.btn-primary {
- color: #fff;
- background-color: #bd1550;
-}
-.btn-primary:hover,
-.btn-primary:focus,
-.btn-primary:active,
-.btn-primary.active {
- color: #fff;
- background-color: #e61f65;
-}
-.btn-action {
- font-weight: bold;
- background: transparent!important;
- border: 1px solid #333;
- text-shadow: none;
-}
-.btn-action:hover,
-.btn-action:focus,
-.btn-action:active,
-.btn-action.active {
- color: #bd1550;
- border-color: #bd1550;
-}
-.btn-lg {
- padding: 15px 60px;
- font-size: 12px;
- line-height: 1.33;
- font-weight: bold;
-}
-.panel-cta {
- box-shadow: 0 0 0 1px #e1e1e1, 0 0 0 3px #fff, 0 0 0 4px #e1e1e1;
- background: #f3f3f3;
- -webkit-border-radius: 0;
- -webkit-background-clip: padding-box;
- -moz-border-radius: 0;
- -moz-background-clip: padding;
- border-radius: 0;
- background-clip: padding-box;
-}
-.panel-cta p,
-.panel-cta h3,
-.panel-cta h4,
-.panel-cta h5,
-.panel-cta h6 {
- margin: 0;
-}
-.panel-cta .panel-body {
- padding: 35px;
-}
-/* Section - Featured */
-.featured {
- font-size: 13px;
- font-size: 0.8125rem;
-}
-.featured h3 {
- font-weight: bold;
- font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
- font-size: 24px;
- font-size: 1.5rem;
- text-transform: uppercase;
- line-height: 1.4em;
- vertical-align: middle;
- margin: 0 0 25px 0;
-}
-/* Section - Recent works */
-.thumbnails {
- padding: 0;
-}
-.thumbnails li {
- margin-bottom: 30px;
-}
-.thumbnails .details {
- display: block;
- text-align: center;
- font-size: 12px;
- font-size: 0.75rem;
- margin-bottom: 40px;
-}
-.thumbnail {
- display: block;
- -webkit-border-radius: 0;
- -webkit-background-clip: padding-box;
- -moz-border-radius: 0;
- -moz-background-clip: padding;
- border-radius: 0;
- background-clip: padding-box;
- border: 0 none;
- margin-bottom: 10px;
- padding: 0;
- text-align: center;
- text-decoration: none;
- color: #333;
-}
-.thumbnail .img {
- display: block;
- width: 100%;
- overflow: hidden;
- height: 180px;
- margin: 0 0 20px;
- position: relative;
-}
-@media only screen and (max-width: 768px) {
- .thumbnail .img {
- width: calc(100% + 30px);
- height: 280px;
- margin-left: -15px;
- }
-}
-.thumbnail .title {
- text-transform: uppercase;
- margin: 0 2em;
- display: block;
- text-indent: 0;
-}
-.thumbnail .cover {
- position: absolute;
- display: block;
- opacity: 0;
- width: 100%;
- height: 180px;
- background-color: rgba(255, 255, 255, 0.8);
- -webkit-transition-property: all;
- -moz-transition-property: all;
- -o-transition-property: all;
- -ms-transition-property: all;
- transition-property: all;
- -webkit-transition-duration: 550ms;
- -moz-transition-duration: 550ms;
- -o-transition-duration: 550ms;
- transition-duration: 550ms;
-}
-@media only screen and (max-width: 768px) {
- .thumbnail .cover {
- height: 280px;
- }
-}
-.thumbnail .cover .more {
- position: absolute;
- bottom: 15px;
- right: 0;
- height: 32px;
- line-height: 32px;
- padding: 0 20px;
- -webkit-border-radius: 1px 0 0 1px;
- -webkit-background-clip: padding-box;
- -moz-border-radius: 1px 0 0 1px;
- -moz-background-clip: padding;
- border-radius: 1px 0 0 1px;
- background-clip: padding-box;
- font-size: 12px;
- font-size: 0.75rem;
- text-transform: uppercase;
- text-shadow: 0 1px 0px #780d33;
- background: #bd1550;
- color: white;
-}
-.thumbnail img {
- width: 100%;
- position: absolute;
- top: 0;
- left: 0;
-}
-.thumbnail:hover {
- color: #333;
- text-decoration: none;
-}
-.thumbnail:hover img {
- -webkit-filter: saturate(0%);
-}
-.thumbnail:hover .cover {
- opacity: 1;
-}
-/* pagination */
-.pagination > li > a {
- color: #808080;
- border: 0 none;
- font-size: 20px;
- font-size: 1.25rem;
- font-family: Georgia, serif;
-}
-.pagination > li > a:hover {
- color: #000000;
- background: none;
-}
-.pagination > li.active > a {
- color: #333333;
- background: none;
-}
-.pagination > li.active > a:hover {
- color: #000000;
- background: none;
-}
-/*********************************************************************
-
-
- BLOG
-
-
-**********************************************************************/
-.section-title,
-.entry-title {
- display: block;
- width: 100%;
- overflow: hidden;
- margin: 0px 0 25px;
- text-align: center;
- font-weight: 300;
- text-transform: uppercase;
- font-size: 36px;
- font-size: 2.25rem;
- letter-spacing: 1px;
-}
-.section-title a,
-.entry-title a {
- color: #333333;
-}
-.section-title span,
-.entry-title span {
- display: inline-block;
- position: relative;
-}
-.section-title span:before,
-.entry-title span:before,
-.section-title span:after,
-.entry-title span:after {
- content: "";
- position: absolute;
- height: 4px;
- top: .53em;
- width: 400%;
- border-bottom: 1px solid #ccc;
- border-top: 1px solid #ccc;
-}
-.section-title span:before,
-.entry-title span:before {
- right: 100%;
- margin-right: 45px;
-}
-.section-title span:after,
-.entry-title span:after {
- left: 100%;
- margin-left: 45px;
-}
-.entry-header .entry-meta {
- text-align: center;
- font-family: Georgia, serif;
- font-size: 18px;
- font-size: 1.125rem;
- font-style: italic;
- font-weight: normal;
- color: #a5a5a5;
- margin: 0 0 15px 0;
-}
-.entry-header .entry-meta a {
- color: #a5a5a5;
-}
-.entry-content {
- margin: 0 0 60px 0;
-}
-.entry-content h2 {
- line-height: 1.2;
- font-size: 30px;
- font-size: 1.875rem;
- padding-top: 20px;
- margin-bottom: 20px;
-}
-.meta-nav,
-.more-link {
- font-family: Georgia, serif;
- font-style: italic;
- font-weight: bold;
- color: #666666;
- text-decoration: none;
-}
-.meta-nav:hover,
-.more-link:hover {
- color: #333333;
- text-decoration: underline;
-}
-.more-link {
- display: block;
- width: 100%;
- text-align: right;
-}
-/* Posts navigation */
-#nav-below {
- position: fixed;
- top: 48%;
-}
-#nav-below .meta-nav {
- display: block;
- padding: 27px 7px;
- background: #444;
- color: #fff;
- -webkit-border-radius: 3px;
- -webkit-background-clip: padding-box;
- -moz-border-radius: 3px;
- -moz-background-clip: padding;
- border-radius: 3px;
- background-clip: padding-box;
- font-family: "Open sans", Helvetica, Arial, sans-serif;
- font-style: normal;
- font-weight: normal;
- text-decoration: none;
- opacity: 0.2;
-}
-#nav-below .meta-nav:hover {
- text-decoration: none;
- color: #333;
-}
-#nav-below .nav-next {
- position: fixed;
- right: -3px;
-}
-#nav-below .nav-previous {
- position: fixed;
- left: -3px;
-}
-#nav-below b {
- display: none;
-}
-footer.entry-meta {
- border-top: 1px solid #ccc;
- border-bottom: 1px solid #ccc;
- margin: 0 0 35px 0;
- padding: 2px 0;
- color: #888888;
- font-size: 12px;
- font-size: 0.75rem;
-}
-footer.entry-meta a {
- color: #333333;
-}
-footer.entry-meta .meta-in {
- border-top: 1px solid #ccc;
- border-bottom: 1px solid #ccc;
- padding: 10px 0;
-}
-.page-header {
- padding-bottom: 0;
- margin: 0;
- border-bottom: none;
- text-align: left;
-}
-.page-header .page-title {
- margin-top: 0;
- margin-bottom: 30px;
-}
-/*********************************************************************
-
-
- COMMENTS
-
-
-**********************************************************************/
-#comments {
- font-size: 13px;
- font-size: 0.8125rem;
-}
-#comments .comments-title {
- margin: 0 0 5px 0;
-}
-#comments .leave-comment {
- display: block;
- margin: 0 0 40px 0;
-}
-#comments ul,
-#comments ol {
- margin: 0;
- padding: 0;
-}
-#comments .comment {
- margin: 0;
- padding: 0;
- list-style: none;
- clear: both;
-}
-#comments .comments-title {
- text-shadow: none;
- margin-bottom: 0;
-}
-#comments .avatar {
- float: left;
- width: 70px;
- height: 70px;
- margin-bottom: 30px;
- border: 5px solid #eeeeee;
- -webkit-border-radius: 50%;
- -webkit-background-clip: padding-box;
- -moz-border-radius: 50%;
- -moz-background-clip: padding;
- border-radius: 50%;
- background-clip: padding-box;
-}
-#comments .children {
- margin: 0 0 0 90px;
-}
-#comments .comment-meta {
- margin: 0 0 0 90px;
-}
-#comments .comment-meta a {
- color: #333333;
-}
-#comments .comment-meta a:hover {
- color: #bd1550;
-}
-#comments .comment-meta .author {
- margin: 0 20px 0 0;
- font-weight: bold;
-}
-#comments .comment-meta .date {
- margin: 0 20px 0 0;
-}
-#comments .comment-meta .date a {
- color: #666666;
-}
-#comments .comment-meta .reply {
- float: right;
-}
-#comments .comment-body {
- margin: 0 0 35px 90px;
-}
-.comment-navigation {
- width: 100%;
- border-top: 1px solid #ccc;
- padding: 2px 0 0 0;
-}
-.comment-navigation .nav-content {
- border-top: 1px solid #ccc;
- width: 100%;
- padding: 10px 0 0 0;
-}
-.comment-navigation .nav-previous {
- float: left;
- width: 50%;
-}
-.comment-navigation .nav-next {
- float: right;
- width: 50%;
- text-align: right;
-}
-#respond {
- margin: 55px 0 0 0;
-}
-/*********************************************************************
-
-
- FOOTER
-
-
-**********************************************************************/
-#footer {
- background: #232323;
- padding: 30px 0 0 0;
- font-size: 12px;
- color: #999;
-}
-#footer a {
- color: #ccc;
-}
-#footer a:hover {
- color: #fff;
-}
-#footer h3.widget-title {
- font-size: 15px;
- font-size: 0.9375rem;
- text-transform: uppercase;
- color: #ccc;
- margin: 0 0 20px;
-}
-#underfooter {
- background: #191919;
- padding: 15px 0;
- color: #777;
- font-size: 12px;
-}
-#underfooter a {
- color: #aaa;
-}
-#underfooter a:hover {
- color: #fff;
-}
-#underfooter p {
- margin: 0;
-}
-.follow-me-icons {
- font-size: 30px;
-}
-.follow-me-icons i {
- padding: 15px 0;
- margin: 0 10px 0 0;
-}
-/* Max page width
-/////////////////////////////////////////////////////////////////////*/
-@media (min-width: 1200px) {
- .container {
- max-width: 1080px;
- }
-}
-/*********************************************************************
-
-
- SHARE THIS
-
-
-**********************************************************************/
-.st-custom-button[data-network] {
- background-color: #fff;
- display: inline-block;
- padding: 0px 5px 20px 5px;
- cursor: pointer;
- font-weight: bold;
- color: #666666;
- &:hover, &:focus {
- color: #004488;
- }
-}
+html { + font-size: 100%; +} +body { + font-size: 15px; + font-size: 0.9375rem; + font-family: "Open sans", Helvetica, Arial, sans-serif; + color: #666666; + padding: 0; +} +.topspace { + margin-top: 40px; +} +/********************************************************************* + + + Navigation in header + + +**********************************************************************/ +.navbar { + border-width: 1px 0; + -webkit-border-radius: 0; + -webkit-background-clip: padding-box; + -moz-border-radius: 0; + -moz-background-clip: padding; + border-radius: 0; + background-clip: padding-box; + width: 100%; +} +.navbar.stick { + position: fixed; + top: 0; + left: 0; + background-color: rgba(255, 255, 255, .85); +} +.navbar-collapse { + -webkit-border-radius: 0; + -webkit-background-clip: padding-box; + -moz-border-radius: 0; + -moz-background-clip: padding; + border-radius: 0; + background-clip: padding-box; + font-family: "Open sans", Helvetica, Arial, sans-serif; + font-weight: 300; + text-transform: uppercase; +} +.navbar-collapse .navbar-nav { + float: none; + margin: 0 auto; + text-align: center; +} +.navbar-collapse .navbar-nav > li { + float: none; + display: inline-block; +} +.navbar-collapse .navbar-nav > li > a { + padding: 20px 30px; +} +.dropdown ul.dropdown-menu { + top: 85%; + text-align: left; +} +.dropdown ul.dropdown-menu > li > a { + padding: 5px 30px; +} +.navbar-default { + background-color: #ffffff; + border-color: #cccccc; +} +.navbar-default .navbar-nav > li > a { + color: #333333; +} +.navbar-default .navbar-nav > li > a:hover, +.navbar-default .navbar-nav > li > a:focus, +.navbar-default .navbar-nav > .active > a, +.navbar-default .navbar-nav > .active > a:hover, +.navbar-default .navbar-nav > .active > a:focus { + color: #000000; +} +.navbar-default .dropdown ul.dropdown-menu > li > a { + color: #333333; +} +.navbar-default .dropdown ul.dropdown-menu > li > a:hover { + background-color: #eeeeee; + color: #000000; +} +.navbar-default .navbar-toggle { + border-color: #666666; +} +.navbar-default .navbar-toggle:hover, +.navbar-default .navbar-toggle:focus { + background-color: #ffffff; +} +.navbar-default .navbar-toggle .icon-bar { + background-color: #333333; +} +.navbar-default .navbar-collapse, +.navbar-default .navbar-form { + border-color: #cccccc; +} +.navbar-default .navbar-nav > .open > a, +.navbar-default .navbar-nav > .open > a:hover, +.navbar-default .navbar-nav > .open > a:focus { + background-color: #ffffff; + color: #000000; +} +/**************************************************************************************** + + + Sidebar special Nav + + +*****************************************************************************************/ +.nav-side { + font-size: 24px; + font-size: 1.5rem; + font-weight: 300; + margin-top: -0.37em; +} +.nav-side > li > a { + padding-top: 5px; + padding-bottom: 5px; + color: #f392b4; +} +.nav-side > li > a:hover { + color: #bd1550; + background: none; +} +.nav-side > li.active > a { + color: #bd1550; +} +/********************************************************************* + + + TYPOGRAPHY + + +**********************************************************************/ +p { + line-height: 1.6em; + margin: 0 0 30px 0; +} +ul, +ol { + line-height: 1.6em; + margin: 0 0 30px 0; +} +blockquote { + padding: 10px 20px; + margin: 0 0 30px; + border-left: 5px solid #eee; +} +h1, +h2, +h3, +h4, +h5, +h6, +.h1, +.h2, +.h3, +.h4, +.h5, +.h6 { + font-family: "Open sans", Helvetica, Arial, sans-serif; + font-weight: 400; + color: #333333; +} +h1 { + font-size: 40px; + font-size: 2.5rem; +} +h2 { + font-size: 36px; + font-size: 2.25rem; +} +h3 { + font-size: 30px; + font-size: 1.875rem; +} +h4 { + font-size: 24px; + font-size: 1.5rem; +} +h5 { + font-size: 20px; + font-size: 1.25rem; +} +a { + color: #bd1550; +} +a:hover { + color: #e93675; +} +.lead { + font-weight: 300; + font-size: 21px; + font-size: 1.3125rem; +} +.text-msg { + line-height: 1.7em; + color: #b3b3b3; + font-weight: 300; + text-transform: capitalize; + margin-top: -0.23em; +} +.size-auto, +.size-full, +.size-large, +.size-medium, +.size-thumbnail { + max-width: 100%; + height: auto; +} +/********************************************************************* + + + HEADER + + +**********************************************************************/ +#head .banner { + background-position: top center; + background-size: cover; + color: #7C7C7C; + padding: 30px 0 35px 0; +} + +#head img.img-circle { + display: block; + width: 140px; + height: 140px; + overflow: hidden; + margin: 0 auto; +} + +#head img.img-rounded { + display: block; + width: 140px; + height: 140px; + overflow: hidden; + margin: 0 auto; +} + +#head .title { + font-family: Alice, Georgia, serif; + font-size: 49px; + font-size: 3.0625rem; +} +#head .title a { + text-decoration: none; + color: #333333; +} +#head .tagline { + display: block; + font-size: 14px; + font-size: 0.875rem; + line-height: 1.2em; + color: #7C7C7C; + margin: 5px 0 0; +} +#head .tagline b { + font-weight: normal; +} +#head .tagline a { + color: #5E5E5E; +} +.home #head { + padding: 90px 0; +} +.home #head .title { + font-size: 49px; + font-size: 3.0625rem; +} +.home #head .tagline { + font-size: 16px; + font-size: 1rem; + margin: 15px 0 0; +} +/********************************************************************* + + + CONTENT + + +**********************************************************************/ +img { + max-width: 100%; +} +.btn { + font-size: 12px; + font-size: 0.75rem; + text-decoration: none; + text-transform: uppercase; + font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; + color: #333; + -webkit-border-radius: 0px; + -webkit-background-clip: padding-box; + -moz-border-radius: 0px; + -moz-background-clip: padding; + border-radius: 0px; + background-clip: padding-box; + -webkit-transition-property: all; + -moz-transition-property: all; + -o-transition-property: all; + -ms-transition-property: all; + transition-property: all; + -webkit-transition-duration: 0.2s; + -moz-transition-duration: 0.2s; + -o-transition-duration: 0.2s; + transition-duration: 0.2s; + border: 0 none; + padding: 12px 35px; + text-shadow: 0 1px 0px #780d33; +} +.btn-primary { + color: #fff; + background-color: #bd1550; +} +.btn-primary:hover, +.btn-primary:focus, +.btn-primary:active, +.btn-primary.active { + color: #fff; + background-color: #e61f65; +} +.btn-action { + font-weight: bold; + background: transparent!important; + border: 1px solid #333; + text-shadow: none; +} +.btn-action:hover, +.btn-action:focus, +.btn-action:active, +.btn-action.active { + color: #bd1550; + border-color: #bd1550; +} +.btn-lg { + padding: 15px 60px; + font-size: 12px; + line-height: 1.33; + font-weight: bold; +} +.panel-cta { + box-shadow: 0 0 0 1px #e1e1e1, 0 0 0 3px #fff, 0 0 0 4px #e1e1e1; + background: #f3f3f3; + -webkit-border-radius: 0; + -webkit-background-clip: padding-box; + -moz-border-radius: 0; + -moz-background-clip: padding; + border-radius: 0; + background-clip: padding-box; +} +.panel-cta p, +.panel-cta h3, +.panel-cta h4, +.panel-cta h5, +.panel-cta h6 { + margin: 0; +} +.panel-cta .panel-body { + padding: 35px; +} +/* Section - Featured */ +.featured { + font-size: 13px; + font-size: 0.8125rem; +} +.featured h3 { + font-weight: bold; + font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; + font-size: 24px; + font-size: 1.5rem; + text-transform: uppercase; + line-height: 1.4em; + vertical-align: middle; + margin: 0 0 25px 0; +} +/* Section - Recent works */ +.thumbnails { + padding: 0; +} +.thumbnails li { + margin-bottom: 30px; +} +.thumbnails .details { + display: block; + text-align: center; + font-size: 12px; + font-size: 0.75rem; + margin-bottom: 40px; +} +.thumbnail { + display: block; + -webkit-border-radius: 0; + -webkit-background-clip: padding-box; + -moz-border-radius: 0; + -moz-background-clip: padding; + border-radius: 0; + background-clip: padding-box; + border: 0 none; + margin-bottom: 10px; + padding: 0; + text-align: center; + text-decoration: none; + color: #333; +} +.thumbnail .img { + display: block; + width: 100%; + overflow: hidden; + height: 180px; + margin: 0 0 20px; + position: relative; +} +@media only screen and (max-width: 768px) { + .thumbnail .img { + width: calc(100% + 30px); + height: 280px; + margin-left: -15px; + } +} +.thumbnail .title { + text-transform: uppercase; + margin: 0 2em; + display: block; + text-indent: 0; +} +.thumbnail .cover { + position: absolute; + display: block; + opacity: 0; + width: 100%; + height: 180px; + background-color: rgba(255, 255, 255, 0.8); + -webkit-transition-property: all; + -moz-transition-property: all; + -o-transition-property: all; + -ms-transition-property: all; + transition-property: all; + -webkit-transition-duration: 550ms; + -moz-transition-duration: 550ms; + -o-transition-duration: 550ms; + transition-duration: 550ms; +} +@media only screen and (max-width: 768px) { + .thumbnail .cover { + height: 280px; + } +} +.thumbnail .cover .more { + position: absolute; + bottom: 15px; + right: 0; + height: 32px; + line-height: 32px; + padding: 0 20px; + -webkit-border-radius: 1px 0 0 1px; + -webkit-background-clip: padding-box; + -moz-border-radius: 1px 0 0 1px; + -moz-background-clip: padding; + border-radius: 1px 0 0 1px; + background-clip: padding-box; + font-size: 12px; + font-size: 0.75rem; + text-transform: uppercase; + text-shadow: 0 1px 0px #780d33; + background: #bd1550; + color: white; +} +.thumbnail img { + width: 100%; + position: absolute; + top: 0; + left: 0; +} +.thumbnail:hover { + color: #333; + text-decoration: none; +} +.thumbnail:hover img { + -webkit-filter: saturate(0%); +} +.thumbnail:hover .cover { + opacity: 1; +} +/* pagination */ +.pagination > li > a { + color: #808080; + border: 0 none; + font-size: 20px; + font-size: 1.25rem; + font-family: Georgia, serif; +} +.pagination > li > a:hover { + color: #000000; + background: none; +} +.pagination > li.active > a { + color: #333333; + background: none; +} +.pagination > li.active > a:hover { + color: #000000; + background: none; +} +/********************************************************************* + + + BLOG + + +**********************************************************************/ +.section-title, +.entry-title { + display: block; + width: 100%; + overflow: hidden; + margin: 0px 0 25px; + text-align: center; + font-weight: 300; + text-transform: uppercase; + font-size: 36px; + font-size: 2.25rem; + letter-spacing: 1px; +} +.section-title a, +.entry-title a { + color: #333333; +} +.section-title span, +.entry-title span { + display: inline-block; + position: relative; +} +.section-title span:before, +.entry-title span:before, +.section-title span:after, +.entry-title span:after { + content: ""; + position: absolute; + height: 4px; + top: .53em; + width: 400%; + border-bottom: 1px solid #ccc; + border-top: 1px solid #ccc; +} +.section-title span:before, +.entry-title span:before { + right: 100%; + margin-right: 45px; +} +.section-title span:after, +.entry-title span:after { + left: 100%; + margin-left: 45px; +} +.entry-header .entry-meta { + text-align: center; + font-family: Georgia, serif; + font-size: 18px; + font-size: 1.125rem; + font-style: italic; + font-weight: normal; + color: #a5a5a5; + margin: 0 0 15px 0; +} +.entry-header .entry-meta a { + color: #a5a5a5; +} +.entry-content { + margin: 0 0 60px 0; +} +.entry-content h2 { + line-height: 1.2; + font-size: 30px; + font-size: 1.875rem; + padding-top: 20px; + margin-bottom: 20px; +} +.meta-nav, +.more-link { + font-family: Georgia, serif; + font-style: italic; + font-weight: bold; + color: #666666; + text-decoration: none; +} +.meta-nav:hover, +.more-link:hover { + color: #333333; + text-decoration: underline; +} +.more-link { + display: block; + width: 100%; + text-align: right; +} +/* Posts navigation */ +#nav-below { + position: fixed; + top: 48%; +} +#nav-below .meta-nav { + display: block; + padding: 27px 7px; + background: #444; + color: #fff; + -webkit-border-radius: 3px; + -webkit-background-clip: padding-box; + -moz-border-radius: 3px; + -moz-background-clip: padding; + border-radius: 3px; + background-clip: padding-box; + font-family: "Open sans", Helvetica, Arial, sans-serif; + font-style: normal; + font-weight: normal; + text-decoration: none; + opacity: 0.2; +} +#nav-below .meta-nav:hover { + text-decoration: none; + color: #333; +} +#nav-below .nav-next { + position: fixed; + right: -3px; +} +#nav-below .nav-previous { + position: fixed; + left: -3px; +} +#nav-below b { + display: none; +} +footer.entry-meta { + border-top: 1px solid #ccc; + border-bottom: 1px solid #ccc; + margin: 0 0 35px 0; + padding: 2px 0; + color: #888888; + font-size: 12px; + font-size: 0.75rem; +} +footer.entry-meta a { + color: #333333; +} +footer.entry-meta .meta-in { + border-top: 1px solid #ccc; + border-bottom: 1px solid #ccc; + padding: 10px 0; +} +.page-header { + padding-bottom: 0; + margin: 0; + border-bottom: none; + text-align: left; +} +.page-header .page-title { + margin-top: 0; + margin-bottom: 30px; +} +/********************************************************************* + + + COMMENTS + + +**********************************************************************/ +#comments { + font-size: 13px; + font-size: 0.8125rem; +} +#comments .comments-title { + margin: 0 0 5px 0; +} +#comments .leave-comment { + display: block; + margin: 0 0 40px 0; +} +#comments ul, +#comments ol { + margin: 0; + padding: 0; +} +#comments .comment { + margin: 0; + padding: 0; + list-style: none; + clear: both; +} +#comments .comments-title { + text-shadow: none; + margin-bottom: 0; +} +#comments .avatar { + float: left; + width: 70px; + height: 70px; + margin-bottom: 30px; + border: 5px solid #eeeeee; + -webkit-border-radius: 50%; + -webkit-background-clip: padding-box; + -moz-border-radius: 50%; + -moz-background-clip: padding; + border-radius: 50%; + background-clip: padding-box; +} +#comments .children { + margin: 0 0 0 90px; +} +#comments .comment-meta { + margin: 0 0 0 90px; +} +#comments .comment-meta a { + color: #333333; +} +#comments .comment-meta a:hover { + color: #bd1550; +} +#comments .comment-meta .author { + margin: 0 20px 0 0; + font-weight: bold; +} +#comments .comment-meta .date { + margin: 0 20px 0 0; +} +#comments .comment-meta .date a { + color: #666666; +} +#comments .comment-meta .reply { + float: right; +} +#comments .comment-body { + margin: 0 0 35px 90px; +} +.comment-navigation { + width: 100%; + border-top: 1px solid #ccc; + padding: 2px 0 0 0; +} +.comment-navigation .nav-content { + border-top: 1px solid #ccc; + width: 100%; + padding: 10px 0 0 0; +} +.comment-navigation .nav-previous { + float: left; + width: 50%; +} +.comment-navigation .nav-next { + float: right; + width: 50%; + text-align: right; +} +#respond { + margin: 55px 0 0 0; +} +/********************************************************************* + + + FOOTER + + +**********************************************************************/ +#footer { + background: #232323; + padding: 30px 0 0 0; + font-size: 12px; + color: #999; +} +#footer a { + color: #ccc; +} +#footer a:hover { + color: #fff; +} +#footer h3.widget-title { + font-size: 15px; + font-size: 0.9375rem; + text-transform: uppercase; + color: #ccc; + margin: 0 0 20px; +} +#underfooter { + background: #191919; + padding: 15px 0; + color: #777; + font-size: 12px; +} +#underfooter a { + color: #aaa; +} +#underfooter a:hover { + color: #fff; +} +#underfooter p { + margin: 0; +} +.follow-me-icons { + font-size: 30px; +} +.follow-me-icons i { + padding: 15px 0; + margin: 0 10px 0 0; +} +/* Max page width +/////////////////////////////////////////////////////////////////////*/ +@media (min-width: 1200px) { + .container { + max-width: 1080px; + } +} +/********************************************************************* + + + SHARE THIS + + +**********************************************************************/ +.st-custom-button[data-network] { + background-color: #fff; + display: inline-block; + padding: 0px 5px 20px 5px; + cursor: pointer; + font-weight: bold; + color: #666666; + &:hover, &:focus { + color: #004488; + } +} |