diff --git a/static/stylesheet/style.less b/static/stylesheet/style.less index c1e0dec..af4237d 100644 --- a/static/stylesheet/style.less +++ b/static/stylesheet/style.less @@ -59,8 +59,8 @@ a:hover { } hr { - color: @light-grey; - background-color: @light-grey; + color: @base00; + background-color: @base00; height: 1px; border: none; margin-top: 40px; diff --git a/static/stylesheet/style.min.css b/static/stylesheet/style.min.css index 7ae85b0..5f55067 100644 --- a/static/stylesheet/style.min.css +++ b/static/stylesheet/style.min.css @@ -1 +1,388 @@ -body,html{width:100%;height:100%}h1,h2,h3,h4,h5,h6{font-weight:300;line-height:1.1}h1{font-size:2.4em}h2{font-size:2em}h3{font-size:1.6em}h4{font-size:1.36em}h5{font-size:1.2em}h6{font-size:1.1em}body{margin:0;padding:0;background-color:#fff;color:#242121;font-family:Source Sans Pro,Verdana,sans-serif;font-size:1.02em;line-height:1.2em}a{color:#d9411e;text-decoration:none}a:hover{color:#ff5a09}hr{color:#eee;background-color:#eee;height:1px;border:none;margin-top:40px;margin-bottom:40px}img{max-width:100%}aside{background-color:#333;text-align:center}aside,aside a{color:#fff}aside a:hover{color:#eee}aside div{padding:20px;margin:0}aside div img{border-radius:50%;max-width:140px}aside div h1{margin:15px 0 5px}aside div p{margin:0 0 15px;font-size:.92em}aside nav ul li{display:inline;line-height:1.6em;font-size:1.28em;text-transform:lowercase}main nav{text-align:center;text-transform:uppercase;font-size:.72em;padding:14px 0;border-bottom:1px solid #eee}main nav a{padding:0 4px;border-right:1px solid #eee}main nav :first-child{border-left:1px solid #eee}main .pagination{margin:4% 8%;height:20px}main .social-share p{font-size:.8em}main article{margin:0 8% 2%}main article header h1,main article header h2{margin-bottom:0}main article header p{color:#999;font-size:.86em}main article code,main article kbd,main article pre,main article samp{font-family:Source Code Pro,Consolas,monospace}main article blockquote,main article pre{background-color:hsla(0,0%,50%,.05);border-top-right-radius:5px;border-bottom-right-radius:5px;border-left:8px solid hsla(0,0%,50%,.075);border-left-width:10px}main article blockquote{padding:10px 20px;font-weight:300;font-size:1.1em}main article pre{padding:4px;font-size:.9em;overflow-x:auto}main article samp{white-space:pre;display:block;overflow-x:auto}main article kbd{padding:.1em .6em;border:1px solid rgba(63,63,63,.25);box-shadow:0 1px 0 rgba(63,63,63,.25);background-color:#fff;color:#333;border-radius:3px;display:inline-block;margin:0 .1em;white-space:nowrap;font-size:.78em}main article code{font-size:.8em;white-space:nowrap;color:#c25;padding:1px 3px;background-color:#f7f7f9;border:1px solid #e1e1e8;border-radius:3px}main article .comment-count{font-size:.8em}main article table{border-collapse:collapse;border-spacing:0}main article table thead:first-child tr:first-child th{border-top:0}main article table td,main article table th{padding:8px;line-height:20px;vertical-align:top;border-top:1px solid #ddd}main footer{padding-top:4px;border-top:1px solid #eee}main footer p{margin:2px;text-align:center;padding:0 40px;color:#999;font-size:11px}.tag-cloud a{background-color:#d9411e;padding:.2em .6em;font-size:.74em;line-height:1;color:#fff;text-align:center;white-space:nowrap;vertical-align:baseline;border-radius:.25em}.tag-cloud a:hover{background-color:#ff5a09}a.btn{background-color:#d9411e;padding:.6em;font-size:.8em;line-height:1;color:#fff;text-align:center;white-space:nowrap;vertical-align:baseline;border-radius:.25em}a.btn:hover{background-color:#ff5a09}.center,.text-center{text-align:center}.img-center{margin-left:auto;margin-right:auto;display:block}.float-left{float:left}.float-right{float:right}div.related-posts{margin:15px 0;padding-bottom:20px;border-top:1px solid #eee;border-bottom:1px solid #eee}div.related-posts h4{margin:20px 0 25px}div.related-posts ul{font-size:1.1em;padding-left:12px}div.related-posts ul li{padding:4px 0}ul.list,ul.related-posts,ul.social{list-style-type:none;margin:0;padding:0}ul.list{padding:1em 0}ul.list li{padding:4px}ul.social{font-size:1.6em;padding-top:20px}ul.social li{display:inline}ul.social a:hover{z-index:1;-webkit-transform:translateY(-5px);transform:translateY(-5px)}ul.social a{display:inline-block;width:36px;height:36px;border-radius:100%;text-align:center;font-size:.8em;line-height:36px}ul.social a.sc-facebook{background-color:#3e5b98}ul.social a.sc-google{background-color:#d93e2d}ul.social a.sc-pinterest{background-color:#c92619}ul.social a.sc-linkedin{background-color:#3371b7}ul.social a.sc-rss{background-color:#f26109}ul.social a.sc-stack-overflow{background-color:#f90}ul.social a.sc-twitter{background-color:#4da7de}ul.social a.sc-youtube{background-color:#e02a20}ul.social a.sc-github,ul.social a.sc-github-alt{background-color:#111010}ul.social a.sc-envelope-o{background-color:#578ad6}ul.social a.sc-reddit{background-color:#ff4500}ul.social a.sc-soundcloud{background-color:#f50}ul.social a.sc-gitlab{background-color:#fca326}ul.social a.sc-xing{background-color:#007575}.ads-aside{display:inline-block;height:90px;width:70%}.ads-responsive{display:inline-block;margin:6px 0;width:90%;height:70px;margin-left:5%}@media screen and (min-width:768px){aside{width:25%;height:100%;position:fixed;top:0;left:0;overflow-y:auto}aside div{padding:36px 18px}aside div nav ul li{padding:0!important;display:block}aside div ul.social{padding-top:32px}main{width:75%;height:100%;position:absolute;top:0;left:25%}main article.single{min-height:80%}main article ul.list li{padding:2px}.ads-aside{height:250px}.ads-responsive{height:90px}} \ No newline at end of file +html, +body { + width: 100%; + height: 100%; +} +h1, +h2, +h3, +h4, +h5, +h6 { + font-weight: 300; + line-height: 1.1; +} +h1 { + font-size: 2.4em; +} +h2 { + font-size: 2em; +} +h3 { + font-size: 1.6em; +} +h4 { + font-size: 1.36em; +} +h5 { + font-size: 1.2em; +} +h6 { + font-size: 1.1em; +} +body { + margin: 0; + padding: 0; + background-color: #fdf6e3; + color: #002b36; + font-family: 'Source Sans Pro', 'Verdana', sans-serif; + font-size: 1.02em; + line-height: 1.2em; +} +a { + color: #073642; + text-decoration: none; +} +a:hover { + color: #93a1a1; +} +hr { + color: #657b83; + background-color: #657b83; + height: 1px; + border: none; + margin-top: 40px; + margin-bottom: 40px; +} +img { + max-width: 100%; +} +aside { + background-color: #586e75; + color: #fdf6e3; + text-align: center; +} +aside a { + color: #fdf6e3; +} +aside a:hover { + color: #657b83; +} +aside div { + padding: 20px; + margin: 0; +} +aside div img { + border-radius: 50%; + max-width: 140px; +} +aside div h1 { + margin: 15px 0 5px 0; +} +aside div p { + margin: 0 0 15px 0; + font-size: .92em; +} +aside nav ul li { + display: inline; + line-height: 1.6em; + font-size: 1.28em; + text-transform: lowercase; +} +main nav { + text-align: center; + text-transform: uppercase; + font-size: .72em; + padding: 14px 0 14px 0; + border-bottom: #657b83 1px solid; +} +main nav a { + padding: 0 4px 0 4px; + border-right: #657b83 1px solid; +} +main nav :first-child { + border-left: #657b83 1px solid; +} +main .pagination { + margin: 4% 8% 4% 8%; + height: 20px; +} +main .social-share p { + font-size: .8em; +} +main article { + margin: 0 8% 2% 8%; +} +main article header h1, +main article header h2 { + margin-bottom: 0; +} +main article header p { + color: #073642; + font-size: 0.86em; +} +main article code, +main article kbd, +main article samp, +main article pre { + font-family: 'Source Code Pro', 'Consolas', monospace; +} +main article blockquote, +main article pre { + background-color: rgba(128, 128, 128, 0.05); + border-top-right-radius: 5px; + border-bottom-right-radius: 5px; + border-left: 8px solid rgba(128, 128, 128, 0.075); + border-left-width: 10px; +} +main article blockquote { + padding: 10px 20px; + font-weight: 300; + font-size: 1.1em; +} +main article pre { + padding: 4px; + font-size: .9em; + overflow-x: auto; +} +main article samp { + white-space: pre; + display: block; + overflow-x: auto; +} +main article kbd { + padding: .1em .6em; + border: 1px solid rgba(63, 63, 63, 0.25); + box-shadow: 0 1px 0 rgba(63, 63, 63, 0.25); + background-color: #fff; + color: #333; + border-radius: 3px; + display: inline-block; + margin: 0 .1em; + white-space: nowrap; + font-size: .78em; +} +main article code { + font-size: .8em; + white-space: nowrap; + color: #c25; + padding: 1px 3px; + background-color: #f7f7f9; + border: 1px solid #e1e1e8; + border-radius: 3px; +} +main article .comment-count { + font-size: .8em; +} +main article table { + border-collapse: collapse; + border-spacing: 0; +} +main article table thead:first-child tr:first-child th { + border-top: 0; +} +main article table th, +main article table td { + padding: 8px; + line-height: 20px; + vertical-align: top; + border-top: 1px solid #ddd; +} +main footer { + padding-top: 4px; + border-top: #657b83 1px solid; +} +main footer p { + margin: 2px; + text-align: center; + padding: 0 40px 0 40px; + color: #073642; + font-size: 11px; +} +.tag-cloud a { + background-color: #073642; + padding: .2em .6em .2em; + font-size: .74em; + line-height: 1; + color: #fdf6e3; + text-align: center; + white-space: nowrap; + vertical-align: baseline; + border-radius: .25em; +} +.tag-cloud a:hover { + background-color: #93a1a1; +} +a.btn { + background-color: #073642; + padding: .6em .6em; + font-size: .8em; + line-height: 1; + color: #fdf6e3; + text-align: center; + white-space: nowrap; + vertical-align: baseline; + border-radius: .25em; +} +a.btn:hover { + background-color: #93a1a1; +} +.center, +.text-center { + text-align: center; +} +.img-center { + margin-left: auto; + margin-right: auto; + display: block; +} +.float-left { + float: left; +} +.float-right { + float: right; +} +div.related-posts { + margin: 15px 0 15px 0; + padding-bottom: 20px; + border-top: #657b83 1px solid; + border-bottom: #657b83 1px solid; +} +div.related-posts h4 { + margin: 20px 0 25px 0; +} +div.related-posts ul { + font-size: 1.1em; + padding-left: 12px; +} +div.related-posts ul li { + padding: 4px 0 4px 0; +} +ul.list, +ul.social, +ul.related-posts { + list-style-type: none; + margin: 0; + padding: 0; +} +ul.list { + padding: 1em 0 1em 0; +} +ul.list li { + padding: 4px; +} +ul.social { + font-size: 1.6em; + padding-top: 20px; +} +ul.social li { + display: inline; +} +ul.social a:hover { + z-index: 2; + -webkit-transform: translateY(-5px); + transform: translateY(-5px); +} +ul.social a { + display: inline-block; + width: 36px; + height: 36px; + border-radius: 100%; + text-align: center; + font-size: .8em; + line-height: 36px; +} +ul.social a.sc-facebook { + background-color: #3e5b98; +} +ul.social a.sc-google { + background-color: #d93e2d; +} +ul.social a.sc-pinterest { + background-color: #c92619; +} +ul.social a.sc-linkedin { + background-color: #3371b7; +} +ul.social a.sc-rss { + background-color: #f26109; +} +ul.social a.sc-stack-overflow { + background-color: #ff9900; +} +ul.social a.sc-twitter { + background-color: #4da7de; +} +ul.social a.sc-youtube { + background-color: #e02a20; +} +ul.social a.sc-github, +ul.social a.sc-github-alt { + background-color: #111010; +} +ul.social a.sc-envelope-o { + background-color: #578AD6; +} +ul.social a.sc-reddit { + background-color: #ff4500; +} +ul.social a.sc-soundcloud { + background-color: #ff5500; +} +ul.social a.sc-gitlab { + background-color: #fca326; +} +ul.social a.sc-xing { + background-color: #007575; +} +.ads-aside { + display: inline-block; + height: 90px; + width: 70%; +} +.ads-responsive { + display: inline-block; + margin: 6px 0 6px 0; + width: 90%; + height: 70px; + margin-left: 5%; +} +@media screen and (min-width: 768px) { + aside { + width: 25%; + height: 100%; + position: fixed; + top: 0; + left: 0; + overflow-y: auto; + } + aside div { + padding: 36px 18px; + } + aside div nav ul li { + padding: 0 !important; + display: block; + } + aside div ul.social { + padding-top: 32px; + } + main { + width: 75%; + height: 100%; + position: absolute; + top: 0; + left: 25%; + } + main article.single { + min-height: 80%; + } + main article ul.list li { + padding: 2px; + } + .ads-aside { + height: 250px; + } + .ads-responsive { + height: 90px; + } +} diff --git a/static/stylesheet/variables.less b/static/stylesheet/variables.less index be729de..b2bbdb4 100644 --- a/static/stylesheet/variables.less +++ b/static/stylesheet/variables.less @@ -1,52 +1,52 @@ -// Flex colors -@orange: #D9411E; -@light-orange: #FF5A09; -@white: #ffffff; -@grey: #333333; -@light-grey: #eeeeee; -@med-grey: #999999; -@dark-grey: #242121; +// solarized colors +@base02: #073642; +@base1: #93a1a1; +@base3: #fdf6e3; +@base01: #586e75; +@base00: #657b83; +@base02: #073642; +@base03: #002b36; // Font family @sans: 'Source Sans Pro', 'Verdana', sans-serif; @mono: 'Source Code Pro', 'Consolas', monospace; // Body -@body-bg: @white; -@text-color: @dark-grey; +@body-bg: @base3; +@text-color: @base03; // Links -@link-color: @orange; -@link-hover-color: @light-orange; +@link-color: @base02; +@link-hover-color: @base1; // Sidebar (aside) -@sidebar-bg: @grey; -@sidebar-text-color: @white; -@sidebar-link-color: @white; -@sidebar-link-hover-color: @light-grey; +@sidebar-bg: @base01; +@sidebar-text-color: @base3; +@sidebar-link-color: @base3; +@sidebar-link-hover-color: @base00; // Buttons -@btn-bg: @orange; -@btn-text-color: @white; -@btn-hover-color: @light-orange; +@btn-bg: @base02; +@btn-text-color: @base3; +@btn-hover-color: @base1; // Tag cloud -@tag-bg: @orange; -@tag-text-color: @white; -@tag-hover-color: @light-orange; +@tag-bg: @base02; +@tag-text-color: @base3; +@tag-hover-color: @base1; // Header -@header-text-color: @med-grey; +@header-text-color: @base02; // Footer -@footer-text-color: @med-grey; -@footer-border-color: @light-grey; +@footer-text-color: @base02; +@footer-border-color: @base00; // Relativer posts -@rel-post-border-color: @light-grey; +@rel-post-border-color: @base00; // Nav -@nav-border-color: @light-grey; +@nav-border-color: @base00; // Social buttons