diff options
author | pacollins <thepatrickcollins@gmail.com> | 2017-08-12 08:40:43 +0300 |
---|---|---|
committer | pacollins <thepatrickcollins@gmail.com> | 2017-08-12 08:40:43 +0300 |
commit | 817cdd2c1f66129ef89c2a7ca9e9894cccdbd76d (patch) | |
tree | 43599b576cc238060fba7987bfbcd70a64a59486 /static | |
parent | 09e68ec61a1b344e268212c44c0550d29e05a737 (diff) |
Inclusion of "Itemized" Page Type, Dynamic Navbar Title, and CSS Updates
Diffstat (limited to 'static')
-rw-r--r-- | static/css/main.css | 310 |
1 files changed, 308 insertions, 2 deletions
diff --git a/static/css/main.css b/static/css/main.css index c974ae0..b753612 100644 --- a/static/css/main.css +++ b/static/css/main.css @@ -1923,7 +1923,8 @@ input[type="email"]:focus, input[type="tel"]:focus, select:focus, - textarea:focus { + textarea:focus, + button:focus { border-color: #2ebaae; box-shadow: inset 0 0 0 1px #2ebaae; } @@ -2872,6 +2873,305 @@ } + /* itemized */ + + .itemized { + padding: 1.5em 3em 1.5em 3em ; + background: #ffffff; + border: solid 1px rgba(160, 160, 160, 0.3); + margin: .5em 0em; + position: relative; + } + + .itemized > header { + display: -moz-flex; + display: -webkit-flex; + display: -ms-flex; + display: flex; + border-bottom: solid 1px rgba(160, 160, 160, 0.3); + left: -3em; + margin: -1.5em 0 -1.5em 0; + position: relative; + width: calc(100% + 6em); + } + + .itemized > header .title { + align-items: center; + -moz-flex-grow: 1; + -webkit-flex-grow: 1; + -ms-flex-grow: 1; + flex-grow: 1; + -m-flex: 1; + padding: 1.5em 2.25em 1.5em 2.25em; + } + + .itemized > header .title h2 { + font-weight: 900; + font-size: 1.25em; + } + + .itemized > header .title p { + text-transform: none; + line-height: 1.75; + } + .itemized > header .title > :last-child { + margin-bottom: 0; + } + + .itemized > header .meta { + align-items: center; + padding: 1.5em 3em 1.5em 3em; + border-left: solid 1px rgba(160, 160, 160, 0.3); + min-width: 17em; + text-align: right; + width: 17em; + } + + .itemized > header .meta > * { + margin: 0 0 1em 0; + } + + .itemized > header .meta > :last-child { + margin-bottom: 0; + } + + .itemized > header .meta .published { + color: #3c3b3b; + display: block; + font-family: "Raleway", Helvetica, sans-serif; + font-size: 0.7em; + font-weight: 800; + letter-spacing: 0.25em; + margin-top: 0.5em; + text-transform: uppercase; + white-space: nowrap; + } + + .itemized > .image.featured { + overflow: hidden; + } + + .itemized > .image.featured img { + -moz-transition: -moz-transform 0.2s ease-out; + -webkit-transition: -webkit-transform 0.2s ease-out; + -ms-transition: -ms-transform 0.2s ease-out; + transition: transform 0.2s ease-out; + } + + .itemized > .image.featured:hover img { + -moz-transform: scale(1.05); + -webkit-transform: scale(1.05); + -ms-transform: scale(1.05); + transform: scale(1.05); + } + + .itemized > footer { + display: -moz-flex; + display: -webkit-flex; + display: -ms-flex; + display: flex; + -moz-align-items: center; + -webkit-align-items: center; + -ms-align-items: center; + align-items: center; + } + + .itemized > footer .actions { + -moz-flex-grow: 1; + -webkit-flex-grow: 1; + -ms-flex-grow: 1; + flex-grow: 1; + } + + .itemized > footer .stats { + cursor: default; + list-style: none; + padding: 0; + } + + .itemized > footer .stats li { + border-left: solid 1px rgba(160, 160, 160, 0.3); + display: inline-block; + font-family: "Raleway", Helvetica, sans-serif; + font-size: 0.6em; + font-weight: 400; + letter-spacing: 0.25em; + line-height: 1; + margin: 0 0 0 2em; + padding: 0 0 0 2em; + text-transform: uppercase; + } + + .itemized > footer .stats li:first-child { + border-left: 0; + margin-left: 0; + padding-left: 0; + } + + .itemized > footer .stats li .icon { + border-bottom: 0; + } + + .itemized > footer .stats li .icon:before { + color: rgba(160, 160, 160, 0.3); + margin-right: 0.75em; + } + + @media screen and (max-width: 980px) { + + .itemized { + border-left: 0; + border-right: 0; + left: -3em; + width: calc(100% + (3em * 2)); + } + + .itemized > header { + -moz-flex-direction: column; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + padding: 1em ; + border-left: 0; + } + + .itemized > header .title { + -ms-flex: 0 1 auto; + margin: 0 0 1em 0; + padding: 0; + text-align: center; + } + + .itemized > header .meta { + -moz-align-items: center; + -webkit-align-items: center; + -ms-align-items: center; + align-items: center; + display: -moz-flex; + display: -webkit-flex; + display: -ms-flex; + display: flex; + -moz-justify-content: center; + -webkit-justify-content: center; + -ms-justify-content: center; + justify-content: center; + border-left: 0; + margin: 0 0 1em 0; + padding-top: 0; + padding: 0; + text-align: left; + width: 100%; + } + + .itemized > header .meta > * { + border-left: solid 1px rgba(160, 160, 160, 0.3); + margin-left: 2em; + padding-left: 2em; + } + + .itemized > header .meta > :first-child { + border-left: 0; + margin-left: 0; + padding-left: 0; + } + + .itemized > header .meta .published { + margin-bottom: 0; + margin-top: 0; + } + + .itemized > header .meta .author { + -moz-flex-direction: row-reverse; + -webkit-flex-direction: row-reverse; + -ms-flex-direction: row-reverse; + flex-direction: row-reverse; + margin-bottom: 0; + } + + .itemized > header .meta .author .name { + margin: 0 0 0 1.5em; + + } + + .itemized > header .meta .author img { + width: 3.5em; + } + + } + + @media screen and (max-width: 736px) { + + .itemized { + padding: 0; + left: -1.5em; + margin: 0 0 1em 0; + width: calc(100% + (1.5em * 2)); + } + + .itemized > header { + padding: 3em 1.5em 0.5em 1.5em ; + left: -1.5em; + margin: -1.5em 0 0 0; + width: calc(100% + 3em); + } + + .itemized > header .title h2 { + font-size: 1em; + } + + } + + @media screen and (max-width: 480px) { + + .itemized > header .meta { + -moz-align-items: center; + -webkit-align-items: center; + -ms-align-items: center; + align-items: center; + -moz-flex-direction: column; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + } + + .itemized > header .meta > * { + border-left: 0; + padding-left: 0; + margin-left: 0; + } + + .itemized > header .meta .author .name { + display: none; + } + + .itemized > .image.featured { + margin-left: -1.5em; + margin-top: calc(-1.5em - 1px); + width: calc(100% + 3em); + } + + .itemized > footer { + -moz-align-items: stretch; + -webkit-align-items: stretch; + -ms-align-items: stretch; + align-items: stretch; + -moz-flex-direction: column-reverse; + -webkit-flex-direction: column-reverse; + -ms-flex-direction: column-reverse; + flex-direction: column-reverse; + } + + .itemized > footer .stats { + text-align: center; + } + + .itemized > footer .stats li { + margin: 0 0 0 1.25em; + padding: 0 0 0 1.25em; + } + + } + /* Section/Article */ section.special, article.special { @@ -3003,6 +3303,7 @@ line-height: inherit; padding: 0 0 0 1.5em; white-space: nowrap; + min-width: 12.4em; } #header h1 a { @@ -3252,6 +3553,11 @@ /* Intro */ + #intro { + align-items: center; + text-align: center; + } + #intro .logo { border-bottom: 0; display: inline-block; @@ -3282,7 +3588,7 @@ } #intro header h2 { - font-size: 2em; + font-size: 1.5em; font-weight: 900; } |