diff options
Diffstat (limited to 'site/static/styles/scss/_blog.scss')
| -rw-r--r-- | site/static/styles/scss/_blog.scss | 290 |
1 files changed, 290 insertions, 0 deletions
diff --git a/site/static/styles/scss/_blog.scss b/site/static/styles/scss/_blog.scss new file mode 100644 index 0000000..23d5097 --- /dev/null +++ b/site/static/styles/scss/_blog.scss @@ -0,0 +1,290 @@ +.blog { + .blogHeader { + color: #b58733; + font-size: 30pt; + padding-top: 10px; + padding-bottom: 30px; + .rss { + a { + font-size: 12pt; + padding-left: 4px; + font-weight: lighter; + color: $brand-primary; + vertical-align: middle; + } + } + } + + /* landing page */ + .blog-list { + max-width: 700px; + ul.posts { + list-style: none; + padding-left: 30px; + + li .newBlog { + background-color: #3992ab; + } + + header { + .title, .details { + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + } + .adorner { + height: 50px; + width: 5px; + background-color: #f2f2f2; + position: absolute; + left: 18px; + } + .title { + font-size: 24px; + font-weight: 400; + margin: 0px; + width: 100%; + color: $brand-primary-darker; + } + .details { + color: #999; + font-size: 18px; + .date { + color: #2f2f2f; + } + .author { + } + .comment { + float: right; + font-size: 15px; + } + } + } + section { + padding-bottom: 100px; + } + } + } + + .social-container{ + max-width: 360px; + padding-top: 40px; + + .container{ + background-color: #f2f2f2; + width: 330px; + height: 868px; + + .header{ + position: relative; + padding-top: 24px; + padding-bottom: 20px; + + div{ + float:left; + color: #808080; + font-size: 18px; + padding-left:2px; + } + + img{ + padding-left:18px; + } + + } + + .feed{ + background-color: white; + height: 730px; + padding: 14px; + + ul { + list-style-type: none; + padding: 0; + + li{ + position: relative; + + img{ + top: 0px; + float: left; + } + .name{ + color: black; + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + font-weight: bold; + font-size: 110%; + padding-left: 8px; + } + .handle{ + color:gray; + font-weight: lighter; + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + font-size: 90%; + padding-left: 7px; + margin-top: -3px; + } + .date{ + color: gray; + font-weight: bold; + float: right; + } + .content{ + color: black; + padding-top: 4px; + padding-left: 1px; + } + } + + } + } + .promo{ + color: gray; + background-color: white; + height: 42px; + padding-top: 10px; + margin-top: 12px; + text-align: center; + font-size: 110%; + } + + } + + } + + /* blog post page */ + .post { + header { + margin-bottom: 20px; + .title{ + color: #3992ab; + font-size: 30pt; + } + .author, .date{ + font-size: 14pt; + color: #999; + padding: 0 4px; + } + .date{ + float:right; + position: relative; + top:-20pt; + } + } + section > div.content{ + padding: 40px 0; + color: black; + } + footer{ + background-color: #FFF; + margin: 100px 0; + + .title{ + color: #3992ab; + font-size: 12pt; + margin-top: 20px; + } + .author, .date{ + font-size: 10pt; + color: #999; + padding: 0 2px; + } + .content{ + margin-bottom: 20px; + } + } + } + .disqus{ + margin: 10px 0; + } + + section.nextprev-posts{ + div{ + .header{ + padding: 10px 0; + } + .title{ + color: #3992ab; + font-size: 14pt; + } + span{ + font-size: 9pt; + color: #999; + padding: 0 4px; + } + } + .next , .prev{ + padding: 10px 15px; + } + } + + section.nextprev-controls{ + + div{ + position: fixed; + top:37%; + .title{ + color: white; + font-size: 12pt; + } + span{ + font-size: 9pt; + color: #999; + padding: 0 2px; + } + div{ + position: relative; + top: 64px; + left: 20px; + z-index:10; + width: 240px; + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + } + } + + .next { + right: 0px; + height:90px; + width: 321px; + top:calc(37% - 38px); + img{ + position: fixed; + right: 0px; + } + } + .prev{ + left:0px; + } + + + @media (max-width: 1800px) { + .next { + img{ + clip: rect(0px, 321px, 89px, 262px); + top:37%; + } + } + div{ + .title{ + display:none; + } + span{ + display:none; + } + } + } + @media (max-width: 1300px) { + .next, .prev { + img{ + display:none; + } + } + } + } +} |