diff options
Diffstat (limited to 'syte/static/less/styles.less')
| -rw-r--r-- | syte/static/less/styles.less | 253 |
1 files changed, 253 insertions, 0 deletions
diff --git a/syte/static/less/styles.less b/syte/static/less/styles.less new file mode 100644 index 0000000..6a999c1 --- /dev/null +++ b/syte/static/less/styles.less @@ -0,0 +1,253 @@ +@import 'reset.less'; +@import 'mixins.less'; + +@import 'variables.less'; + +@import 'base.less'; +@import 'buttons.less'; +@import 'modals.less'; +@import 'profiles.less'; +@import 'code.less'; + + +// Specific styles +.main-header { + position: fixed; + z-index: 1100; + top: 0; + left: 0; + width: 240px; + height: 100%; + min-height: 700px; + float: left; + border-right: 1px solid #c2c2c2; + background: #E9E9E9 url('/static/imgs/b.png'); + + + hgroup { + .picture a { + display: inline-block; + .square(84px); + margin: 60px 35px 20px 35px; + border: 3px solid @adjacent-color; + background: #00000 url('https://twimg0-a.akamaihd.net/profile_images/1149409097/20101018060848_samrat94_6HR8FZ5V2JQDPU34ENIKCWBL0STAMO91XG7Y.jpg'); + + @pic-shadow:0 1px 1px #f9f9f9, inset 0 0 6px #000000; + .box-shadow(@pic-shadow); + } + + h1 { + font-size: 24px; + margin: 0 35px; + text-shadow: 0 1px 1px #f9f9f9; + } + h2 { + margin: 10px 35px; + font-size: 14px; + font-weight: normal; + line-height: 25px; + color: @alternate-text-color; + } + } + + nav { + margin: 65px 0; + + ul { border-top: 1px solid #d2d2d2; list-style: none; margin-left: 0; } + li { margin-bottom: 0; } + a, a:hover { border-bottom: 1px solid #d2d2d2; } + a { + position: relative; + padding: 15px 30px; + color: @text-color; + display: block; + font-weight: 500; + text-shadow: 0 1px 1px #f9f9f9; + } + a:hover { + color: #fff; + background: @adjacent-color; + border-right: 0; + text-shadow: none; + } + .sel { border-right: 6px solid @adjacent-color; } + } + + .spinner { + position: absolute !important; + right: 30px; + top: 23px; + } + + .fork-me { + position: absolute; + left: 30px; + bottom: 20px; + font-size: 13px; + color: @alternate-text-color; + border-bottom: none; + } + .fork-me:hover { + color: @adjacent-color; + } +} + +.main-section { + position: relative; + overflow: hidden; + margin-left: 241px; + padding: 35px; +} + +.main-section h3.date { + width: 100%; + display: block; + margin-left: -34px; + padding: 20px 35px 30px 75px; + border-bottom: 1px solid #C2C2C2; + border-top: 1px solid #C2C2C2; + font-size: 16px; + font-weight: bold; + .alpha-background(#ffffff, 0.8); + color: @adjacent-color; +} + +a.button_accent { + margin:40px 50px; + padding:10px 20px; + display:inline-block; + border:3px solid @adjacent-color; + border-radius:70px; + -moz-border-radius:70px; + -webkit-border-radius:70px; + text-transform:uppercase; + color:@adjacent-color; + font-size:17px; + font-weight:400;} + +a.button_accent:link{color:#0e94ec;} +a.button_accent:hover{color:#ffffff; + background-color:@adjacent-color; + outline:0;} +a.button_accent:active{ + color:#ffffff; + background-color:#333399; + outline:0;} + +.blog-section { + padding: 0; + + hgroup { + h2, h1 { .h1; line-height: 40px; margin: 50px 0 25px 0;} + h2 a { + border-bottom: 0; + font-weight: 500; + } + h3 a { + display: none; + } + + h3 a.active { + position: fixed; + top: 0; + bottom: auto; + margin-top: 0; + } + } + + article { + width: 700px; + overflow: hidden; + line-height: 25px; + padding: 5px 35px 50px 34px; + + img { + padding: 2px; + border: 1px solid #C2C2C2; + margin: 0px 15px 5px 0px; + } + + a.img-link { + border-bottom: 0; + + &:hover img { border-color: @adjacent-color; } + } + } + + footer { + padding-top: 10px; + + h4 { + float: left; + text-transform: uppercase; + font-size: 13px; + line-height: 28px; + padding: 0px 15px 0px 0; + } + } +} + +.tags { + list-style: none; + margin: 0; + + li { + display: inline-block; + + //ie7 inline-block hack + zoom: 1; + *display: inline; + } + + a { + padding: 3px 10px; + font-size: 13px; + text-shadow: 0 1px 1px #F9F9F9; + background: #E9E9E9; + border: 1px solid #C2C2C2; + } + a:hover { + background: @adjacent-color; + color: #fff; + text-shadow: none; + border: 1px solid @adjacent-color; + } +} + +.mobile-nav { + display: none; +} + +.load-more-button { + display: inline-block; + margin: 0 20px 50px 20px; + padding: 10px 30px; + background-color: @adjacent-color; + color: #fff; + + &:hover { + border: 1px solid @adjacent-color; + background: #fff; + color: @adjacent-color; + } + + .spinner { + left: 140px; + top: -8px; + } +} + +@media (max-width: 767px) { + + header.main-header { + hgroup .picture a, nav { margin-top: 30px; } + } + + .blog-section article { + width: 400px; + + img { max-width: 400px; } + } +} + +@import 'styles-mobile.less'; |