From e03b899fb09cb9bde78f84576d70004a29999ee2 Mon Sep 17 00:00:00 2001 From: Danang Probo Sayekti Date: Fri, 10 Jan 2014 21:48:50 +0700 Subject: [PATCH] Change the default theme style Change the default theme style. --- system/includes/functions.php | 1 - themes/clean/404-search.html.php | 26 ++ themes/clean/404.html.php | 19 + themes/clean/css/style.css | 744 ++++++++++++++++++++++++++++++ themes/clean/layout.html.php | 45 ++ themes/clean/main.html.php | 41 ++ themes/clean/post.html.php | 53 +++ themes/clean/profile.html.php | 36 ++ themes/default/404-search.html.php | 6 +- themes/default/404.html.php | 2 +- themes/default/css/style.css | 902 +++++++++++++++++-------------------- themes/default/layout.html.php | 62 ++- 12 files changed, 1427 insertions(+), 510 deletions(-) create mode 100644 themes/clean/404-search.html.php create mode 100644 themes/clean/404.html.php create mode 100644 themes/clean/css/style.css create mode 100644 themes/clean/layout.html.php create mode 100644 themes/clean/main.html.php create mode 100644 themes/clean/post.html.php create mode 100644 themes/clean/profile.html.php diff --git a/system/includes/functions.php b/system/includes/functions.php index 66c9546..a4b342c 100644 --- a/system/includes/functions.php +++ b/system/includes/functions.php @@ -349,7 +349,6 @@ function archive_list() { $name = date('F', mktime(0,0,0,$month,1,2010)); echo '
  • ' . $name . ''; echo ' (' . $count . ')
    • '; - echo ''; } echo ''; diff --git a/themes/clean/404-search.html.php b/themes/clean/404-search.html.php new file mode 100644 index 0000000..5749ea9 --- /dev/null +++ b/themes/clean/404-search.html.php @@ -0,0 +1,26 @@ + + + + + + + + Search results not found! - <?php echo config('blog.title') ?> + + + + + +
    +

    Search results not found!

    +
    +
    + + +
    + +
    +

    Please search again, or would you like to try our homepage instead?

    +
    + + \ No newline at end of file diff --git a/themes/clean/404.html.php b/themes/clean/404.html.php new file mode 100644 index 0000000..665519c --- /dev/null +++ b/themes/clean/404.html.php @@ -0,0 +1,19 @@ + + + + + + + + 404 Not Found - <?php echo config('blog.title') ?> + + + + + +
    +

    This page doesn't exist!

    +

    Would you like to try our homepage instead?

    +
    + + \ No newline at end of file diff --git a/themes/clean/css/style.css b/themes/clean/css/style.css new file mode 100644 index 0000000..3084728 --- /dev/null +++ b/themes/clean/css/style.css @@ -0,0 +1,744 @@ +/*------------------------- + Simple reset +--------------------------*/ + +*{ + margin:0; + padding:0; +} + +/*------------------------- + General Styles +--------------------------*/ + +html{ + +} + +body{ + font:16px/1.6 Georgia, Arial, sans-serif; + color: #4f4f4f; +} + +a, a:visited { + outline:none; + color:#389dc1; + text-decoration:none; +} + +a:hover{ + text-decoration:underline; +} + +section, footer, header, aside{ + display: block; +} + +img { + border: 0 none; + height: auto; + max-width: 100%; + outline: 0 none; +} + +.hide { + position: absolute; + top: -9999em; + left: -9999em; +} +/*---------------------------- + Headings +-----------------------------*/ + +h1{ + font: 28px 'Open Sans Condensed', sans-serif; + line-height: 1.2; + margin: 0.5em 0; +} + +h1.blog-title { + text-transform:uppercase; + font: 20px 'Open Sans Condensed', sans-serif; + margin-bottom: 1em; + line-height: 1.3; +} + +h1.blog-title a { + color:#4f4f4f; + text-decoration: none; +} + +h1.blog-title a:hover { + color: #389dc1; +} + +h1.title-post, h2.title-index{ + font: 28px 'Open Sans Condensed', sans-serif; + line-height: 1.2; + text-transform:normal; + margin:0 0 20px 0; +} + +h1.title-post a, h2.title-index a{ + color:#4f4f4f; + text-decoration: none; +} + +h1.title-post a:hover, h2.title-index a:hover { + color: #389dc1; +} + +h2{ + font: 22px 'Open Sans Condensed', sans-serif; + line-height: 1.2; + margin: 0.5em 0; +} + +h2.title-index{ + font: 28px 'Open Sans Condensed', sans-serif; + line-height: 1.2; + text-transform:normal; + margin:0 0 20px 0; +} + +h3{ + font: 18px 'Open Sans Condensed', sans-serif; + line-height: 1.2; + margin: 0.5em 0; +} + +h4{ + font: 16px 'Open Sans Condensed', sans-serif; + line-height: 1.2; + margin: 0.5em 0; +} + +h5{ + font: 14px 'Open Sans Condensed', sans-serif; + line-height: 1.2; + margin: 0.5em 0; +} + +h6{ + font: 12px 'Open Sans Condensed', sans-serif; + line-height: 1.2; + margin: 0.5em 0; +} + +/*---------------------------- + Content & Posts +-----------------------------*/ + +#content{ + position: absolute; + width: 580px; + left: 50%; + margin-left: -100px; +} + +#content p, +#content ul{ + margin:1em 0; +} + +#content ul{ + padding-left:20px; +} + +#content li{ + margin-bottom:5px; +} + +#content div.actions{ + margin-top:25px; + font-size:14px; + font-family:'Open Sans Condensed', sans-serif; +} + +#content div.actions .readmore{ + text-decoration: none !important; + padding:0 2px; +} + +#content div.actions .readmore:hover{ + background-color:#389dc1; + color:#fff; +} + +#content div.actions .comments{ + color:#ccc; + margin-left:10px; + text-decoration:none; +} + +.infront .post, .intag .post, .inarchive .post, .insearch .post, .inprofile .post{ + border-bottom: 1px solid #dfdfdf; + padding: 30px 0 10px 0; +} + +.infront .post.first { + padding-top:50px; +} + +.intag .post.first, .inarchive .post.first, .insearch .post.first , .inprofile .post.first{ + padding-top: 0px; +} + +.post .date{ + font: bold 12px 'Open Sans Condensed', sans-serif; + text-transform: uppercase; + color: #a7a7a7; + margin: 0 0 20px 20px; + position: relative; +} + +.post .date:before{ + width:18px; + height:18px; + position:absolute; + content:''; + left: -22px; + top: -1px; + background:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2RpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDoyNjZDQjA1OTM1ODZFMjExQUUwM0IwQzQwMjlEOTczMyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpENjYzQjI4QjhCNDYxMUUyQjNENkFGQ0NCRUExRDM1NSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpENjYzQjI4QThCNDYxMUUyQjNENkFGQ0NCRUExRDM1NSIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M1IFdpbmRvd3MiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo4NjA1NUJCNzUzOEFFMjExQUUwM0IwQzQwMjlEOTczMyIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDoyNjZDQjA1OTM1ODZFMjExQUUwM0IwQzQwMjlEOTczMyIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PhTXJRoAAADXSURBVHjaYvz//z8DNQDL7t27sYmDTGfEoQdDztXVlYEJyg4B4rdA/AGLJhjGJgfS4wfiwAyaCcRCQMwGxMxQMTY0jdjkQHqmwQzihwqAACcQ50CdXoRmEC45aXAYYQmDCVDMQIocskGMZEbYB+QwQokBEAaCzch8dDF0wMRAJcC4a9cufqjzYF7bTKReX5jXgC4UYMHiNbACYEJ9AaQkkL2BLIaekIeA15AUbEZiM+ARo67XQAZ9BOJ3eFxGSOwFcspOBOLnoBgh0SEgQ+LAgU2tgg0gwACqTkAIjemp4gAAAABJRU5ErkJggg==') +} + +pre { + margin: 1em 0; + overflow: auto; + background: #F1F1FF; +} + +pre code { + color: #333333; + display: block; + font-family: Consolas,Menlo,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New,monospace,serif; + font-size: 14px; + padding: 5px 10px; +} + +.comments { + position:relative; + display:block; + font-size:16px; + float:left; + width:100%; +} + +.border { + border-top: 1px solid #DFDFDF; + padding-bottom: 15px; + margin-bottom: 15px; + margin-top: 10px; +} + +.border #disqus_thread { + padding-top: 1.2em; +} + +#disqus_thread { + font-family: Georgia, Times, Cambria, serif; + float:left; + width:100%; +} + +.breadcrumb { + padding-top: 50px; + padding-bottom: 10px; + font: normal 14px 'Open Sans Condensed', sans-serif; +} + +.thumbnail { + float: left; + height: 80px; + width: 80px; + margin: 5px 15px 0 0; + overflow: hidden; + display: block; + background-repeat: no-repeat; + background-position: center; + background-size: cover; +} + +blockquote:before { + color: #BBBBBB; + content: "“"; + font-size: 3em; + line-height: 0.1em; + margin-right: 0.2em; + vertical-align: -0.4em; +} + +blockquote:after { + color: #BBBBBB; + content: "”"; + font-size: 3em; + line-height: 0.1em; + vertical-align: -0.45em; +} + +blockquote { + font-style: italic; + margin-left: 1em; +} + +.credit { + font-size:12px; + text-align:center; + padding: 10px 0; +} + +/*---------------------------- + The left bar +-----------------------------*/ + +aside{ + position: absolute; + width: 250px; + height: auto; + top: 0; + left: 50%; + bottom: 0; + margin-left: -460px; + padding-top: 65px; +} + +aside .description p{ + font-size: 14px; + margin-bottom: 1.2em; + color:#787878; +} + +aside .social { + margin-bottom: 1.2em; +} + +.gsc-control-searchbox-only { + width:220px; +} + +aside .menu { + margin-bottom: 1.2em; +} + +aside h3 { + font: normal 16px 'Open Sans Condensed', sans-serif; + text-transform: uppercase; +} + +aside .menu ul{ + font: bold 18px 'Open Sans Condensed', sans-serif; + text-transform: uppercase; + list-style:none; +} + +aside .menu ul li a{ + text-decoration:none !important; + display:inline-block; + padding:0 3px; + margin:2px 0 2px 10px; +} + +aside .archive, aside .tagcloud { + font-size: 14px; + font-family: Georgia, sans-serif; + margin-bottom: 1.2em; + margin-left: 10px; +} + +aside .archive ul li, aside .tagcloud ul li { + margin-left:30px; +} + +aside .menu ul li a:hover{ + background-color:#389dc1; + color:#fff; +} + +aside .copyright { + padding:1.2em 0 65px 0; + color: #888; + font: 11px Georgia, sans-serif; + font-weight: normal; + font-style: italic; +} + +aside .copyright p{ + margin: 5px 0; +} + +/*---------------------------- + Pagination buttons +-----------------------------*/ + +.postnav{ + width:100%; + float:left; + padding: 0 0 30px 0; +} + +.postnav .pagination-arrow{ + display: inline-block; + font: bold 12px/1 'Open Sans Condensed', sans-serif; + border: 1px solid #ccc; + border-radius: 3px; + color: #555 !important; + padding: 8px 12px; + text-decoration: none !important; + text-transform: none; + position: relative; +} + +.postnav .pagination-arrow.newer{ + padding-left: 20px; +} + +.postnav .pagination-arrow.older{ + padding-right: 20px; + float:right; +} + +.postnav .pagination-arrow.newer:before, +.postnav .pagination-arrow.older:before{ + content: ''; + border: 5px solid #555; + border-color: transparent #555 transparent transparent; + width: 0; + height: 0; + position: absolute; + left: 3px; + top: 10px; +} + +.postnav .pagination-arrow.older:before{ + left:auto; + right:3px; + border-color: transparent transparent transparent #555; +} + +.pager { + width:100%; + float:left; + padding: 30px 0 30px 0; +} + +.pager .pagination-arrow{ + display: inline-block; + font: bold 16px/1 'Open Sans Condensed', sans-serif; + border: 1px solid #ccc; + border-radius: 3px; + color: #555 !important; + padding: 8px 12px; + text-decoration: none !important; + text-transform: uppercase; + position: relative; +} + +.pager .pagination-arrow.newer{ + padding-left: 20px; +} + +.pager .pagination-arrow.older{ + padding-right: 20px; + float:right; +} + +.pager .pagination-arrow.newer:before, +.pager .pagination-arrow.older:before{ + content: ''; + border: 5px solid #555; + border-color: transparent #555 transparent transparent; + width: 0; + height: 0; + position: absolute; + left: 3px; + top: 12px; +} + +.pager .pagination-arrow.older:before{ + left:auto; + right:3px; + border-color: transparent transparent transparent #555; +} + +/*---------------------------- + The 404 page +-----------------------------*/ + +.message{ + padding-top:50px; +} + +.message h1{ + font-size:36px; + margin-bottom: 18px; +} + +.message p{ + font-size:13px; +} + +.center{ + text-align:center; +} + +/*---------------------------- + Search form +-----------------------------*/ + +.search { + position:relative; + float:left; + width:100%; + margin-bottom: 1.2em; +} + +.search-input{ + margin: 0; + padding: 5px 15px; + font-family: Arial, Helvetica, sans-serif; + font-size:14px; + border:1px solid #0076a3; + border-top-left-radius: 5px 5px; + border-bottom-left-radius: 5px 5px; + width: 120px; + color: #888888; +} +.search-button { + margin: 0; + padding: 5px; + font-family: Arial, Helvetica, sans-serif; + font-size:14px; + outline: none; + cursor: pointer; + text-align: center; + text-decoration: none; + color: #ffffff; + border: solid 1px #0076a3; + border-right:0px; + background: #0095cd; + background: -webkit-gradient(linear, left top, left bottom, from(#00adee), to(#0078a5)); + background: -moz-linear-gradient(top, #00adee, #0078a5); + border-top-right-radius: 5px 5px; + border-bottom-right-radius: 5px 5px; + width: 60px; +} +.search-button:hover { + text-decoration: none; + background: #007ead; + background: -webkit-gradient(linear, left top, left bottom, from(#0095cc), to(#00678e)); + background: -moz-linear-gradient(top, #0095cc, #00678e); +} +/* Fixes submit button height problem in Firefox */ +.search-button::-moz-focus-inner { + border: 0; +} + +/*---------------------------- + Profile +-----------------------------*/ + +.profile { + font-size: 12px; + font-style:italic; + border-bottom: solid 1px #dfdfdf; + margin-bottom: 2em; + padding-bottom: 1em; +} + +.post-list { + padding-bottom:2em; + border-bottom: solid 1px #dfdfdf; + font-size: 12px; +} + +/*---------------------------- + Share + Author info +-----------------------------*/ + +.separator { + text-align:left; + font-size: 18px; + line-height: 1; +} + +.share-box { + margin-bottom: 0.75em; +} + +.author-info { + font-size: 12px; + font-style:italic; + float:left; + width: 430px; + margin-right: 2em; +} + +.share { + font-size: 12px; + font-style:italic; + width:120px; +} + +.share a { + display: inline-block; + width: 18px; + height: 18px; + margin: 0; + padding: 0 5px; + vertical-align: middle; + -o-transition: all .3s; + -moz-transition: all .3s; + -webkit-transition: all .3s; + -ms-transition: all .3s; + text-indent: -9999em; +} + +.share a.twitter { background: url(../img/share-twitter.png) left top no-repeat; } +.share a.facebook { background: url(../img/share-facebook.png) left top no-repeat; } +.share a.googleplus { background: url(../img/share-googleplus.png) left top no-repeat; } + +.share a:hover { background-position: left -26px; } + +/*---------------------------- + Media queries +-----------------------------*/ + +@media all and (max-width: 1024px) { + aside{ + left: 5%; + margin-left: 0; + width: 25%; + } + + #content{ + left: 35%; + margin-left: 0; + width: 60%; + } +} + +@media all and (max-width: 840px) { + + h2{ + font-size:22px; + } + + h1.title-post, h2.title-index{ + font-size:26px; + } + + aside{ + margin-left: 0; + position: static; + width: 90%; + padding: 5% 5% 0 5%; + text-align: center; + } + + aside .description{ + margin-bottom: 25px; + } + + aside li { + display: inline-block; + } + + aside ul{ + text-align: center; + } + + aside .archive, aside .tagcloud, aside .copyright{ + display: none; + } + + #content{ + position: static; + padding: 5%; + padding-top: 0; + width: 90%; + } + .gsc-control-searchbox-only { + width:auto; + } + .infront .post.first { + padding-top:0px; + } + .breadcrumb { + padding-top: 0px; + } + .infront .post, .intag .post, .inarchive .post, .insearch .post{ + padding: 30px 0 20px 0; + } + + .search { + text-align:center; + } + + .author-info { + width: 100%; + } + + .share { + float:left; + width:100%; + padding-bottom: 1em; + } +} + +/*---------------------------- + Video +-----------------------------*/ + +.video-wrapper { + margin-bottom:1em; +} + +@media all and (min-width: 420px) { + .video-wrapper { + padding-top:315px!important; + position:relative; + width:100%; + max-width:420px!important; + max-height:315px!important; + } + + .video-wrapper iframe, .video-wrapper object, .video-wrapper embed { + height: 100%; + left: 0; + position: absolute; + top: 0; + width: 100%; + max-width:420px!important; + max-height:315px!important; + } + +} + +@media all and (max-width: 420px) { + .postnav .pagination-arrow.newer{ + padding-left: 20px; + float:none; + margin-bottom: 20px; + } + + .postnav .pagination-arrow.older{ + padding-right: 20px; + float:none; + } + .video-wrapper { + position: relative; + padding-bottom: 56.25%; + padding-top: 30px; + height: 0; + overflow: hidden; + } + + .video-wrapper iframe, .video-wrapper object, .video-wrapper embed { + height: 100%; + left: 0; + position: absolute; + top: 0; + width: 100%; + } + +} diff --git a/themes/clean/layout.html.php b/themes/clean/layout.html.php new file mode 100644 index 0000000..b77871d --- /dev/null +++ b/themes/clean/layout.html.php @@ -0,0 +1,45 @@ + + + + <?php echo isset($title) ? _h($title) : config('blog.title') ?> + + + + + + + + + + + + + +
    + + +
    + +
    + +
    + + + \ No newline at end of file diff --git a/themes/clean/main.html.php b/themes/clean/main.html.php new file mode 100644 index 0000000..03a7535 --- /dev/null +++ b/themes/clean/main.html.php @@ -0,0 +1,41 @@ +
    + + + +
    +
    +

    title ?>

    +
    - Posted in tag ?> by - Comments
    +
    + + body)?> + + body, $p->url)?> +
    +
    +
    + + +
    + + + + + + +
    + + + + \ No newline at end of file diff --git a/themes/clean/post.html.php b/themes/clean/post.html.php new file mode 100644 index 0000000..7223f09 --- /dev/null +++ b/themes/clean/post.html.php @@ -0,0 +1,53 @@ +
    +
    +
    + + + +

    title ?>

    + +
    - Posted in tag ?> by - Permalink
    + +
    + body; ?> +
    +
    + +
    →
    + + +
    + + +
    + + +
    + +
    + + + + + + + +
    + + + + title, $p->url) ?> + + +
    \ No newline at end of file diff --git a/themes/clean/profile.html.php b/themes/clean/profile.html.php new file mode 100644 index 0000000..edff022 --- /dev/null +++ b/themes/clean/profile.html.php @@ -0,0 +1,36 @@ +
    +
    +

    +
    +
    +

    Posts by this author

    + + +
    + + + + + + +
    + \ No newline at end of file diff --git a/themes/default/404-search.html.php b/themes/default/404-search.html.php index ceab6f6..87193b1 100644 --- a/themes/default/404-search.html.php +++ b/themes/default/404-search.html.php @@ -8,13 +8,13 @@ Search results not found! - <?php echo config('blog.title') ?> - +

    Search results not found!

    -
    -
    +
    + diff --git a/themes/default/404.html.php b/themes/default/404.html.php index 664a3db..08bf682 100644 --- a/themes/default/404.html.php +++ b/themes/default/404.html.php @@ -8,7 +8,7 @@ 404 Not Found - <?php echo config('blog.title') ?> - +
    diff --git a/themes/default/css/style.css b/themes/default/css/style.css index 3084728..1248f71 100644 --- a/themes/default/css/style.css +++ b/themes/default/css/style.css @@ -7,682 +7,619 @@ padding:0; } -/*------------------------- - General Styles ---------------------------*/ - -html{ +body { + font-family: Georgia, sans-serif, Arial; + font-size: 16px; + line-height: 1.6; + color: #343A3F; + padding: 0; + margin: 0; + font-weight:500; } -body{ - font:16px/1.6 Georgia, Arial, sans-serif; - color: #4f4f4f; -} +/*------------------------- + Heading +--------------------------*/ -a, a:visited { - outline:none; - color:#389dc1; - text-decoration:none; +h1, h2, h3, h4, h5, h6 { + font-family: 'Open Sans',sans-serif; + line-height: 1.3; + margin: 0.5em 0; } -a:hover{ - text-decoration:underline; +h1 { + font-size: 28px; } -section, footer, header, aside{ - display: block; +h2 { + font-size: 24px; } -img { - border: 0 none; - height: auto; - max-width: 100%; - outline: 0 none; +h3 { + font-size: 18px; } -.hide { - position: absolute; - top: -9999em; - left: -9999em; +h4 { + font-size: 16px; } -/*---------------------------- - Headings ------------------------------*/ -h1{ - font: 28px 'Open Sans Condensed', sans-serif; - line-height: 1.2; - margin: 0.5em 0; +h5 { + font-size: 14px; } -h1.blog-title { - text-transform:uppercase; - font: 20px 'Open Sans Condensed', sans-serif; - margin-bottom: 1em; - line-height: 1.3; +h6 { + font-size: 12px; } -h1.blog-title a { - color:#4f4f4f; - text-decoration: none; -} +/*------------------------- + Layout +--------------------------*/ -h1.blog-title a:hover { - color: #389dc1; +#outer-wrapper { + margin:0; + padding:0; + float:left; + width: 100%; } -h1.title-post, h2.title-index{ - font: 28px 'Open Sans Condensed', sans-serif; - line-height: 1.2; - text-transform:normal; - margin:0 0 20px 0; +#inner-wrapper { + padding: 0 10px; } -h1.title-post a, h2.title-index a{ - color:#4f4f4f; - text-decoration: none; +.container { + padding: 0 20px; } -h1.title-post a:hover, h2.title-index a:hover { - color: #389dc1; +#header-wrapper { + background: #546673; + position:relative; + padding: 1em 0; + float:left; + width: 100%; + color: #ffffff; + font-family: Georgia, sans-serif; + font-style:italic; } -h2{ - font: 22px 'Open Sans Condensed', sans-serif; - line-height: 1.2; - margin: 0.5em 0; +#content-wrapper { + float:left; + width: 100%; + padding: 3em 0; } -h2.title-index{ - font: 28px 'Open Sans Condensed', sans-serif; - line-height: 1.2; - text-transform:normal; - margin:0 0 20px 0; +#menu, #header, #content, #footer { + width: 700px; + margin: 0 auto; } -h3{ - font: 18px 'Open Sans Condensed', sans-serif; - line-height: 1.2; - margin: 0.5em 0; +#header { + text-align:center; } -h4{ - font: 16px 'Open Sans Condensed', sans-serif; - line-height: 1.2; - margin: 0.5em 0; -} +/*------------------------- + Link +--------------------------*/ -h5{ - font: 14px 'Open Sans Condensed', sans-serif; - line-height: 1.2; - margin: 0.5em 0; +a, a:visited { + outline:none; + color:#2E9FFF; + text-decoration:none; } -h6{ - font: 12px 'Open Sans Condensed', sans-serif; - line-height: 1.2; - margin: 0.5em 0; +a:hover{ + text-decoration:underline; } -/*---------------------------- - Content & Posts ------------------------------*/ +/*------------------------- + Text element +--------------------------*/ -#content{ - position: absolute; - width: 580px; - left: 50%; - margin-left: -100px; +blockquote:before { + color: #BBBBBB; + content: "“"; + font-size: 3em; + line-height: 0.1em; + margin-right: 0.2em; + vertical-align: -0.4em; } -#content p, -#content ul{ - margin:1em 0; +blockquote:after { + color: #BBBBBB; + content: "”"; + font-size: 3em; + line-height: 0.1em; + vertical-align: -0.45em; } -#content ul{ - padding-left:20px; +blockquote { + font-style: italic; + margin-left: 1em; } -#content li{ - margin-bottom:5px; +pre { + margin: 1em 0; + overflow: auto; + background: #F1F1FF; } -#content div.actions{ - margin-top:25px; - font-size:14px; - font-family:'Open Sans Condensed', sans-serif; +pre code { + color: #333333; + display: block; + font-family: Consolas,Menlo,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New,monospace,serif; + font-size: 14px; + padding: 5px 10px; } -#content div.actions .readmore{ - text-decoration: none !important; - padding:0 2px; +.thumbnail { + float: left; + height: 80px; + width: 80px; + margin: 5px 15px 0 0; + overflow: hidden; + display: block; + background-repeat: no-repeat; + background-position: center; + background-size: cover; } -#content div.actions .readmore:hover{ - background-color:#389dc1; - color:#fff; +ul, ol { + padding-left: 30px; + margin: 1em 0; } -#content div.actions .comments{ - color:#ccc; - margin-left:10px; - text-decoration:none; +ul li, ol li{ + margin: 0.25em 0; } -.infront .post, .intag .post, .inarchive .post, .insearch .post, .inprofile .post{ - border-bottom: 1px solid #dfdfdf; - padding: 30px 0 10px 0; -} +/*------------------------- + Menu +--------------------------*/ -.infront .post.first { - padding-top:50px; +#menu-wrapper { + font-weight:bold; + font-family: 'Open Sans',sans-serif; + color: #7E909D; + padding: 10px 0; + float:left; + width:100%; } -.intag .post.first, .inarchive .post.first, .insearch .post.first , .inprofile .post.first{ - padding-top: 0px; +#menu { + font-weight:bold; + font-family: 'Open Sans',sans-serif; + color: #7E909D; } -.post .date{ - font: bold 12px 'Open Sans Condensed', sans-serif; - text-transform: uppercase; - color: #a7a7a7; - margin: 0 0 20px 20px; - position: relative; +#menu ul { + margin:0; + padding:0; } -.post .date:before{ - width:18px; - height:18px; - position:absolute; - content:''; - left: -22px; - top: -1px; - background:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2RpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDoyNjZDQjA1OTM1ODZFMjExQUUwM0IwQzQwMjlEOTczMyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpENjYzQjI4QjhCNDYxMUUyQjNENkFGQ0NCRUExRDM1NSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpENjYzQjI4QThCNDYxMUUyQjNENkFGQ0NCRUExRDM1NSIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M1IFdpbmRvd3MiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo4NjA1NUJCNzUzOEFFMjExQUUwM0IwQzQwMjlEOTczMyIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDoyNjZDQjA1OTM1ODZFMjExQUUwM0IwQzQwMjlEOTczMyIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PhTXJRoAAADXSURBVHjaYvz//z8DNQDL7t27sYmDTGfEoQdDztXVlYEJyg4B4rdA/AGLJhjGJgfS4wfiwAyaCcRCQMwGxMxQMTY0jdjkQHqmwQzihwqAACcQ50CdXoRmEC45aXAYYQmDCVDMQIocskGMZEbYB+QwQokBEAaCzch8dDF0wMRAJcC4a9cufqjzYF7bTKReX5jXgC4UYMHiNbACYEJ9AaQkkL2BLIaekIeA15AUbEZiM+ARo67XQAZ9BOJ3eFxGSOwFcspOBOLnoBgh0SEgQ+LAgU2tgg0gwACqTkAIjemp4gAAAABJRU5ErkJggg==') +#menu a { + color: #7E909D; } -pre { - margin: 1em 0; - overflow: auto; - background: #F1F1FF; +#menu ul li { + float:left; + margin:0 20px 0 0; + list-style:none; + padding-top:2px; } -pre code { - color: #333333; - display: block; - font-family: Consolas,Menlo,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New,monospace,serif; - font-size: 14px; - padding: 5px 10px; -} +/*---------------------------- + Search form +-----------------------------*/ -.comments { +#search-form { position:relative; - display:block; - font-size:16px; - float:left; - width:100%; + float:right; } -.border { - border-top: 1px solid #DFDFDF; - padding-bottom: 15px; - margin-bottom: 15px; - margin-top: 10px; +.search-input{ + margin: 0; + padding: 4px 15px; + font-family: Arial, Helvetica, sans-serif; + font-size:14px; + border:1px solid #0076a3; + border-top-left-radius: 5px 5px; + border-bottom-left-radius: 5px 5px; + width: 120px; + color: #888888; +} +.search-button { + margin: 0; + padding: 4px; + font-family: Arial, Helvetica, sans-serif; + font-size:14px; + outline: none; + cursor: pointer; + text-align: center; + text-decoration: none; + color: #ffffff; + border: solid 1px #546673; + border-right:0px; + background: #0095cd; + background: -webkit-gradient(linear, left top, left bottom, from(#2E9FFF), to(#2E9CCC)); + background: -moz-linear-gradient(top, #2E9FFF, #2E9CCC); + border-top-right-radius: 5px 5px; + border-bottom-right-radius: 5px 5px; + width: 60px; +} +.search-button:hover { + text-decoration: none; + background: #007ead; + background: -webkit-gradient(linear, left top, left bottom, from(#0095cc), to(#00678e)); + background: -moz-linear-gradient(top, #0095cc, #00678e); +} +/* Fixes submit button height problem in Firefox */ +.search-button::-moz-focus-inner { + border: 0; } -.border #disqus_thread { - padding-top: 1.2em; +/*------------------------- + Post +--------------------------*/ + +.post { + border-bottom: 1px solid #EBF2F6; + padding: 1em 0; + float: left; + width: 100%; } -#disqus_thread { - font-family: Georgia, Times, Cambria, serif; - float:left; - width:100%; +.inpost .post { + padding-bottom: 0; } -.breadcrumb { - padding-top: 50px; - padding-bottom: 10px; - font: normal 14px 'Open Sans Condensed', sans-serif; +p, ul { + margin :1em 0; } -.thumbnail { - float: left; - height: 80px; - width: 80px; - margin: 5px 15px 0 0; - overflow: hidden; - display: block; - background-repeat: no-repeat; - background-position: center; - background-size: cover; +.breadcrumb { + font-family: 'Open Sans',sans-serif; + font-size: 14px; + font-weight:normal; } -blockquote:before { - color: #BBBBBB; - content: "“"; - font-size: 3em; - line-height: 0.1em; - margin-right: 0.2em; - vertical-align: -0.4em; +.date { + font-family: 'Open Sans',sans-serif; + font-size: 14px; + color: #A7A7A7; + font-weight:normal; } -blockquote:after { - color: #BBBBBB; - content: "”"; - font-size: 3em; - line-height: 0.1em; - vertical-align: -0.45em; +h1.blog-title { + font-style:normal; } -blockquote { - font-style: italic; - margin-left: 1em; +h1.title-post a, h2.title-index a{ + color:#4f4f4f; + text-decoration: none; } -.credit { - font-size:12px; - text-align:center; - padding: 10px 0; +h1.title-post a:hover, h2.title-index a:hover { + color: #2E9FFF; } -/*---------------------------- - The left bar ------------------------------*/ +.inpost .post { + padding-top:0; + border: none; +} -aside{ - position: absolute; - width: 250px; - height: auto; - top: 0; - left: 50%; - bottom: 0; - margin-left: -460px; - padding-top: 65px; +.inpage .border { + padding:0; + margin:0; + border:0; } -aside .description p{ - font-size: 14px; - margin-bottom: 1.2em; - color:#787878; +.inpage .post { + padding-top:0; } -aside .social { - margin-bottom: 1.2em; +.infront .first, .inpost .post, .intag .first, .inarchive .first, .insearch .first { + padding-top:0; } -.gsc-control-searchbox-only { - width:220px; +.infront .first h2.title-index { + margin-top:0; } -aside .menu { - margin-bottom: 1.2em; +.post-list { + font-size: 14px; } -aside h3 { - font: normal 16px 'Open Sans Condensed', sans-serif; - text-transform: uppercase; +/*------------------------- + Share box +--------------------------*/ + +.share-box { + font-size: 14px; + float:left; } -aside .menu ul{ - font: bold 18px 'Open Sans Condensed', sans-serif; - text-transform: uppercase; - list-style:none; +.author-info { + width: 540px; + float:left; } -aside .menu ul li a{ - text-decoration:none !important; - display:inline-block; - padding:0 3px; - margin:2px 0 2px 10px; +.share { + width:140px; + margin-right: 1em; } -aside .archive, aside .tagcloud { - font-size: 14px; - font-family: Georgia, sans-serif; - margin-bottom: 1.2em; - margin-left: 10px; +.share a { + display: inline-block; + width: 18px; + height: 18px; + margin: 0; + padding: 0 5px; + vertical-align: middle; + -o-transition: all .3s; + -moz-transition: all .3s; + -webkit-transition: all .3s; + -ms-transition: all .3s; + text-indent: -9999em; } -aside .archive ul li, aside .tagcloud ul li { - margin-left:30px; +.share a.twitter { background: url(../img/share-twitter.png) left top no-repeat; } +.share a.facebook { background: url(../img/share-facebook.png) left top no-repeat; } +.share a.googleplus { background: url(../img/share-googleplus.png) left top no-repeat; } + +.share a:hover { background-position: left -26px; } + +/*------------------------- + Comments +--------------------------*/ + +.comments { + position:relative; + display:block; + font-size:16px; + float:left; + width:100%; } -aside .menu ul li a:hover{ - background-color:#389dc1; - color:#fff; +.border { + border-top: 1px solid #DFDFDF; + margin-bottom: 15px; + margin-top: 10px; + padding-bottom: 15px; + width: 100%; + float:left; } -aside .copyright { - padding:1.2em 0 65px 0; - color: #888; - font: 11px Georgia, sans-serif; - font-weight: normal; - font-style: italic; +.border #disqus_thread { + padding-top: 1.2em; } -aside .copyright p{ - margin: 5px 0; +#disqus_thread { + font-family: Georgia, Times, Cambria, serif; + float:left; + width:100%; } -/*---------------------------- - Pagination buttons ------------------------------*/ +/*------------------------- + Pagination + Postnav +--------------------------*/ .postnav{ width:100%; float:left; - padding: 0 0 30px 0; -} - -.postnav .pagination-arrow{ - display: inline-block; - font: bold 12px/1 'Open Sans Condensed', sans-serif; - border: 1px solid #ccc; - border-radius: 3px; - color: #555 !important; - padding: 8px 12px; - text-decoration: none !important; - text-transform: none; - position: relative; + padding-bottom:1em; + font-family: 'Open Sans',sans-serif; + font-size: 12px; + font-weight:bold; } -.postnav .pagination-arrow.newer{ - padding-left: 20px; +.postnav a { + background: none repeat scroll 0 0 #E4E7EE; + border-radius: 3px; + color: #555555; + line-height: 1; + padding: 10px 20px; + text-align: center; } -.postnav .pagination-arrow.older{ - padding-right: 20px; - float:right; +.postnav a:hover { + text-decoration:none; + color:#333333; } -.postnav .pagination-arrow.newer:before, -.postnav .pagination-arrow.older:before{ - content: ''; - border: 5px solid #555; - border-color: transparent #555 transparent transparent; - width: 0; - height: 0; - position: absolute; - left: 3px; - top: 10px; +.postnav .newer { + float:left; } -.postnav .pagination-arrow.older:before{ - left:auto; - right:3px; - border-color: transparent transparent transparent #555; +.postnav .older { + float:right; } .pager { width:100%; float:left; - padding: 30px 0 30px 0; + padding: 30px 0 1em 0; + font-family: 'Open Sans',sans-serif; + font-size: 12px; + font-weight:bold; } -.pager .pagination-arrow{ - display: inline-block; - font: bold 16px/1 'Open Sans Condensed', sans-serif; - border: 1px solid #ccc; - border-radius: 3px; - color: #555 !important; - padding: 8px 12px; - text-decoration: none !important; - text-transform: uppercase; - position: relative; +.pager a { + background: none repeat scroll 0 0 #E4E7EE; + border-radius: 3px; + color: #555555; + line-height: 1; + padding: 10px 20px; + text-align: center; } -.pager .pagination-arrow.newer{ - padding-left: 20px; +.pager .newer { + float:left; } -.pager .pagination-arrow.older{ - padding-right: 20px; +.pager .older { float:right; } -.pager .pagination-arrow.newer:before, -.pager .pagination-arrow.older:before{ - content: ''; - border: 5px solid #555; - border-color: transparent #555 transparent transparent; - width: 0; - height: 0; - position: absolute; - left: 3px; - top: 12px; -} - -.pager .pagination-arrow.older:before{ - left:auto; - right:3px; - border-color: transparent transparent transparent #555; +.pager a:hover { + text-decoration:none; + color:#333333; } -/*---------------------------- - The 404 page ------------------------------*/ +/*------------------------- + Footer +--------------------------*/ -.message{ - padding-top:50px; +#footer-wrapper { + background: #546673; + position:relative; + padding: 20px 0; + float:left; + width: 100%; + color: #ABB6C5; + font-family: 'Open Sans', sans-serif; } -.message h1{ - font-size:36px; - margin-bottom: 18px; +#footer { + font-size: 14px; } -.message p{ - font-size:13px; +#footer a { + color: #CBD2DC; + font-weight:bold; } -.center{ - text-align:center; +#footer ul { + margin:0.5em 0; } -/*---------------------------- - Search form ------------------------------*/ - -.search { - position:relative; +.footer-column { + padding-bottom: 1.5em; float:left; width:100%; - margin-bottom: 1.2em; } -.search-input{ - margin: 0; - padding: 5px 15px; - font-family: Arial, Helvetica, sans-serif; - font-size:14px; - border:1px solid #0076a3; - border-top-left-radius: 5px 5px; - border-bottom-left-radius: 5px 5px; - width: 120px; - color: #888888; +.column { + float: left; + width: 33%; } -.search-button { - margin: 0; - padding: 5px; - font-family: Arial, Helvetica, sans-serif; - font-size:14px; - outline: none; - cursor: pointer; - text-align: center; - text-decoration: none; - color: #ffffff; - border: solid 1px #0076a3; - border-right:0px; - background: #0095cd; - background: -webkit-gradient(linear, left top, left bottom, from(#00adee), to(#0078a5)); - background: -moz-linear-gradient(top, #00adee, #0078a5); - border-top-right-radius: 5px 5px; - border-bottom-right-radius: 5px 5px; - width: 60px; + +.social { + float:right; } -.search-button:hover { - text-decoration: none; - background: #007ead; - background: -webkit-gradient(linear, left top, left bottom, from(#0095cc), to(#00678e)); - background: -moz-linear-gradient(top, #0095cc, #00678e); + +.social .inner { + padding-left:30px; } -/* Fixes submit button height problem in Firefox */ -.search-button::-moz-focus-inner { - border: 0; + +.tagcloud ul { + padding:0; + margin:0; } -/*---------------------------- - Profile ------------------------------*/ +.tagcloud ul li { + float:left; + list-style:none; + margin-right: 10px; +} -.profile { +.copyright { font-size: 12px; - font-style:italic; - border-bottom: solid 1px #dfdfdf; - margin-bottom: 2em; - padding-bottom: 1em; + float:left; + width: 100%; + border-top: 1px solid #ABB6C5; + padding-top:1em; } -.post-list { - padding-bottom:2em; - border-bottom: solid 1px #dfdfdf; - font-size: 12px; +.copyright p { + margin: 0.5em 0; + line-height: 1.2; } /*---------------------------- - Share + Author info + The 404 page -----------------------------*/ -.separator { - text-align:left; - font-size: 18px; - line-height: 1; +.message{ + padding:50px 20px 20px 20px; } -.share-box { - margin-bottom: 0.75em; +.message h1{ + font-size:36px; + margin-bottom: 18px; } -.author-info { - font-size: 12px; - font-style:italic; - float:left; - width: 430px; - margin-right: 2em; +.message p{ + font-size:13px; } -.share { - font-size: 12px; - font-style:italic; - width:120px; +.center{ + text-align:center; } -.share a { - display: inline-block; - width: 18px; - height: 18px; - margin: 0; - padding: 0 5px; - vertical-align: middle; - -o-transition: all .3s; - -moz-transition: all .3s; - -webkit-transition: all .3s; - -ms-transition: all .3s; - text-indent: -9999em; +.search-404 { + position:relative; + float:left; + width:100%; + margin-bottom: 1.2em; } -.share a.twitter { background: url(../img/share-twitter.png) left top no-repeat; } -.share a.facebook { background: url(../img/share-facebook.png) left top no-repeat; } -.share a.googleplus { background: url(../img/share-googleplus.png) left top no-repeat; } - -.share a:hover { background-position: left -26px; } +#search-form-404 { + float:none; +} /*---------------------------- Media queries -----------------------------*/ -@media all and (max-width: 1024px) { - aside{ - left: 5%; - margin-left: 0; - width: 25%; - } - - #content{ - left: 35%; - margin-left: 0; - width: 60%; - } -} - -@media all and (max-width: 840px) { +@media all and (max-width: 700px) { - h2{ - font-size:22px; + #menu, #header, #content, #footer { + margin: 0 auto; + width: 100%; } - h1.title-post, h2.title-index{ - font-size:26px; - } - - aside{ - margin-left: 0; - position: static; - width: 90%; - padding: 5% 5% 0 5%; - text-align: center; - } - - aside .description{ - margin-bottom: 25px; - } - - aside li { - display: inline-block; - } - - aside ul{ - text-align: center; - } - - aside .archive, aside .tagcloud, aside .copyright{ - display: none; - } - - #content{ - position: static; - padding: 5%; - padding-top: 0; - width: 90%; - } - .gsc-control-searchbox-only { - width:auto; - } - .infront .post.first { - padding-top:0px; - } - .breadcrumb { - padding-top: 0px; + #menu-wrapper { + text-align:center; } - .infront .post, .intag .post, .inarchive .post, .insearch .post{ - padding: 30px 0 20px 0; + + #menu ul li { + float:none; + display:inline-block; } - .search { - text-align:center; + #search-form { + float:none; } .author-info { width: 100%; + float:left; } - + .share { - float:left; width:100%; + margin-right: 0; padding-bottom: 1em; } + + .column { + float:left; + width:100%; + } + + .postnav .newer { + float:left; + margin-bottom:1em; + } + + .postnav .older { + float:left; + } + + .social .inner { + padding-left:0px; + } + } /*---------------------------- @@ -694,6 +631,7 @@ aside .copyright p{ } @media all and (min-width: 420px) { + .video-wrapper { padding-top:315px!important; position:relative; @@ -715,16 +653,7 @@ aside .copyright p{ } @media all and (max-width: 420px) { - .postnav .pagination-arrow.newer{ - padding-left: 20px; - float:none; - margin-bottom: 20px; - } - - .postnav .pagination-arrow.older{ - padding-right: 20px; - float:none; - } + .video-wrapper { position: relative; padding-bottom: 56.25%; @@ -742,3 +671,4 @@ aside .copyright p{ } } + diff --git a/themes/default/layout.html.php b/themes/default/layout.html.php index ce3fda2..7d2ce93 100644 --- a/themes/default/layout.html.php +++ b/themes/default/layout.html.php @@ -10,7 +10,7 @@ - +