template optimization

public/default/css/index.css

@@ -1,247 +1,65 @@
-#moell-header {
-    position: absolute;
-    z-index: 99;
-    width: 100%;
-    opacity: 1;
-    top: 0;
-}
-@media screen and (max-width: 768px) {
-    #moell-header {
-        margin-top: 0;
-        background: #fff;
-        -webkit-box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.1);
-        -moz-box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.1);
-        -ms-box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.1);
-        box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.1);
-    }
-    #moell-header .navbar-brand {
-        color: #00CCCC  !important;
-    }
-    #moell-header #navbar li a {
-        color: rgba(0, 0, 0, 0.5) !important;
-        -webkit-transition: 0.3s;
-        -o-transition: 0.3s;
-        transition: 0.3s;
-    }
-    #moell-header #navbar li a:hover {
-        color: #00CCCC  !important;
-    }
-    #moell-header #navbar li a span:before {
-        background: transparent !important;
-    }
-    #moell-header #navbar li.active a {
-        background: transparent;
-        background: none;
-        color: #00CCCC  !important;
-    }
-    #moell-header #navbar li.active a span:before {
-        visibility: visible;
-        -webkit-transform: scaleX(1);
-        transform: scaleX(1);
-    }
-}
-#moell-header .navbar {
-    padding-bottom: 0;
+.navbar {
     margin-bottom: 0;
 }
-#moell-header #navbar li a {
-    font-family: "Source Sans Pro", Arial, sans-serif;
-    color: #00CCCC ;
-    position: relative;
-    font-size: 19px;
-    font-weight: 300;
-}
-#moell-header #navbar li a span {
-    position: relative;
-    display: block;
-    padding-bottom: 2px;
-}
-#moell-header #navbar li a span:before {
-    content: "";
-    position: absolute;
-    width: 100%;
-    height: 2px;
-    bottom: 0;
-    left: 0;
-    background-color: #999999;
-    visibility: hidden;
-    -webkit-transform: scaleX(0);
-    -moz-transform: scaleX(0);
-    -ms-transform: scaleX(0);
-    -o-transform: scaleX(0);
-    transform: scaleX(0);
-    -webkit-transition: all 0.3s ease-in-out 0s;
-    -moz-transition: all 0.3s ease-in-out 0s;
-    -ms-transition: all 0.3s ease-in-out 0s;
-    -o-transition: all 0.3s ease-in-out 0s;
-    transition: all 0.3s ease-in-out 0s;
-}
-#moell-header #navbar li a:hover {
-    color: #999999;
-}
-#moell-header #navbar li a:hover span:before {
-    visibility: visible;
-    -webkit-transform: scaleX(1);
-    -moz-transform: scaleX(1);
-    -ms-transform: scaleX(1);
-    -o-transform: scaleX(1);
-    transform: scaleX(1);
-}
-#moell-header #navbar li.active a {
-    background: transparent;
-    background: none;
-    color: #999999;
-}
-#moell-header #navbar li.active a span:before {
-    visibility: visible;
-    -webkit-transform: scaleX(1);
-    transform: scaleX(1);
-}
-#moell-header .navbar-brand {
-    float: left;
-    display: block;
-    font-size: 30px;
-    font-weight: 700;
-    padding-left: 0;
-    color: #00CCCC ;
-}
-#moell-header.navbar-fixed-top {
-    position: fixed !important;
-    background: #fff;
-    -webkit-box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.1);
-    -moz-box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.1);
-    -ms-box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.1);
-    box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.1);
-    margin-top: 0px;
-    top: 0;
-}
-#moell-header.navbar-fixed-top .navbar-brand {
-    color: #00CCCC ;
-}
-#moell-header.navbar-fixed-top #navbar li a {
-    color: rgba(0, 0, 0, 0.5);
-    -webkit-transition: 0.3s;
-    -o-transition: 0.3s;
-    transition: 0.3s;
-}
-#moell-header.navbar-fixed-top #navbar li a:hover {
-    color: #00CCCC ;
-}
-#moell-header.navbar-fixed-top #navbar li.active a {
-    background: transparent;
-    background: none;
-    color: #00CCCC ;
-}
-#moell-header.navbar-fixed-top #navbar li.active a span:before {
-    visibility: visible;
-    -webkit-transform: scaleX(1);
-    transform: scaleX(1);
-    background-color: #00CCCC ;
-}
-#moell-header .navbar-default {
-    border: transparent;
-    background: transparent;
-    -webkit-border-radius: 0px;
-    -moz-border-radius: 0px;
-    -ms-border-radius: 0px;
-    border-radius: 0px;
-}
-@media screen and (max-width: 768px) {
-    #moell-header .navbar-default {
-        margin-top: 0px;
-        padding-right: 0px;
-        padding-left: 0px;
-    }
-}
-#moell-header .navbar-default .brand-slogan {
-    margin: 28px 0 0 15px;
-    float: left;
-    letter-spacing: 2px;
-    color: #adadad;
-}
-#moell-header .navbar-default .brand-slogan em {
-    color: #00CCCC ;
-    font-style: normal;
-}
-#moell-header a {
-    -webkit-transition: 0s;
-    -o-transition: 0s;
-    transition: 0s;
+.navbar-default, .jumbotron {
+    background-color: #3D93A3;
 }
 
-#moell-home, #moell-home .text-wrap {
-    height: 290px;
+.navbar-default .navbar-nav>li>a {
+    color: white;
 }
-#moell-home .text-wrap {
-    display: table;
-    width: 100%;
-    position: relative;
-    z-index: 4;
+
+.navbar-default .navbar-brand {
+    color: white;
 }
-#moell-home .text-inner {
-    display: table-cell;
-    vertical-align: middle;
-    word-break:break-all;
+
+.navbar-default .navbar-brand:focus,.navbar-default .navbar-brand:hover {
+    color: white;
+    background-color: transparent;
 }
 
 
-#moell-home .text-inner h1 {
-    font-size: 40px;
-    color: white;
+.navbar-static-top {
+    border-width: 0 0 0;
 }
-#moell-home .text-inner h2 {
-    font-size: 28px;
-    line-height: 30px;
-    font-weight: 300;
-    color: rgba(255, 255, 255, 0.8);
-    margin: 0;
+
+.panel {
+    border-radius: 0;
 }
-#moell-home .text-inner h3 {
-    font-size: 24px;
-    line-height: 30px;
-    font-weight: 200;
-    color: rgba(255, 255, 255, 0.8);
-    margin: 0;
+
+.panel-heading {
+    background-color: #fff;
 }
-#moell-home .text-inner .article-info {
-    color: rgba(255, 255, 255, 0.8);
+
+.panel-default>.panel-heading {
+    color: #3D93A3;
+    background-color: white;
+    border-color: #ddd
 }
-#moell-home .gradient {
-    position: absolute;
-    height:220px;
-    top: 50px;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    z-index: 2;
-    opacity: .9;
-    -webkit-backface-visibility: hidden;
-    background-color: #00CCCC ;
-    /* IE9, iOS 3.2+ */
-    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxsaW5lYXJHcmFkaWVudCBpZD0idnNnZyIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMTAwJSIgeTI9IjEwMCUiPjxzdG9wIHN0b3AtY29sb3I9IiMzZjk1ZWEiIHN0b3Atb3BhY2l0eT0iMSIgb2Zmc2V0PSIwIi8+PHN0b3Agc3RvcC1jb2xvcj0iIzUyZDNhYSIgc3RvcC1vcGFjaXR5PSIxIiBvZmZzZXQ9IjEiLz48L2xpbmVhckdyYWRpZW50PjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjdnNnZykiIC8+PC9zdmc+);
-    background-image: -webkit-gradient(linear, 0% 0%, 100% 100%, color-stop(0, #00CCCC ), color-stop(1, #999999));
-    /* Android 2.3 */
-    background-image: -webkit-repeating-linear-gradient(top left, #00CCCC  0%, #999999 100%);
-    /* IE10+ */
-    background-image: repeating-linear-gradient(to bottom right, #00CCCC  0%, #999999 100%);
-    background-image: -ms-repeating-linear-gradient(top left, #00CCCC  0%, #999999 100%);
+
+.color-white {
+    color:white;
 }
+
 .article-list {
     padding-left: 0px;
     list-style: none;
 }
-.article-list-item {
-    border-bottom: 1px solid #ddd;
-    padding:30px 0px;
+
+.m-t-25 {
+    margin-top:25px;
 }
-.article-list-item .title {
-    margin-top:10px;
+
+
+.article-list .desc {
+    margin-top:25px;
     word-break:break-all;
+    color:#34495e;
 }
 
-.article-list-item .desc {
-    margin-top:10px;
-    word-break:break-all;
+.article-list .info {
+    margin-top:25px;
+    color:#3D93A3;
 }
 .icon-github {
     background: url('/default/icons/github.png') no-repeat;
@@ -272,6 +90,7 @@
     max-width:150px;
 }
 
-.author .author-footer a {
-    color: #000000;
+
+a {
+    color: #34495e;
 }

resources/views/default/article.blade.php

@@ -2,7 +2,7 @@
     <ol class="article-list">
         @inject('catePresenter', 'App\Presenters\CategoryPresenter')
         @foreach ($articles as $article)
-            <li class="article-list-item">
+            <li>
                 <h4 class='title'>
                     <a href="{{ route('article',['id' => $article->id]) }}" target="_blank">
                         {{$article->title}}
@@ -11,7 +11,7 @@
                 <p class="desc">
                    {{$article->desc}}
                 </p>
-                <p style="margin-top:15px;">
+                <p class="info">
                     <span>
                         <i class="glyphicon glyphicon-calendar"></i>{{ date('Y-m-d', strtotime($article->created_at)) }}
                     </span>
@@ -19,11 +19,12 @@
                     <span>
                         {!! $catePresenter->getIdLink($article->cate_id) !!}
                     </span>
-                    <span style="float:right">
+                    <span>
                         <i class="glyphicon glyphicon-eye-open"></i> {{ $article->read_count }} views
                     </span>
                 </p>
             </li>
+            <hr/>
         @endforeach
     </ol>
     {!! $articles->links() !!}

resources/views/default/author.blade.php

@@ -4,7 +4,7 @@
         $author = isset($user->id) ? $user : $userPresenter->getUserInfo();
     ?>
     <div class="panel-heading">
-        <h3 class="panel-title">作者:&nbsp;{{ $author->name }}</h3>
+        <h3 class="panel-title">{{ $author->name }}</h3>
     </div>
     <div class="panel-body">
         <div class="row text-center">

resources/views/default/category_article.blade.php

@@ -11,8 +11,8 @@
 @section('header-text')
     <div class="text-inner">
         <div class="row">
-            <div class="col-md-12 article-info">
-                <h3 class="to-animate fadeInUp animated">
+            <div class="col-md-12">
+                <h3 class="to-animate fadeInUp animated color-white">
                     <i class="glyphicon glyphicon-th-list"></i>
                     &nbsp;{{ $category->name }}
                 </h3>

resources/views/default/home.blade.php

@@ -12,9 +12,9 @@
     <div class="text-inner">
         <div class="row">
             <div class="col-md-12">
-                <h1 class="to-animate fadeInUp animated">
+                <h2 class="to-animate fadeInUp animated color-white">
                     {{ $systemPresenter->getKeyValue('motto') }}
-                </h1>
+                </h2>
             </div>
         </div>
     </div>

resources/views/default/navigation.blade.php

@@ -1,6 +1,6 @@
 <div id="navbar" class="navbar-collapse collapse">
     @inject('navPresenter', 'App\Presenters\NavigationPresenter')
-    <ul class="nav navbar-nav navbar-right">
+    <ul class="nav navbar-nav navbar-left">
         <?php $navigations = $navPresenter->simpleNavList(); ?>
         @if ($navigations)
             @foreach ($navigations as $navigation)
@@ -8,4 +8,14 @@
             @endforeach
         @endif
     </ul>
+    <form class="navbar-form navbar-right" action="{{ route('search') }}" method="get">
+        <div class="input-group">
+            <input type="search" class="search-field form-control" value="" name="keyword" placeholder="Search">
+            <span class="input-group-btn">
+                <button type="submit" class="btn btn-default">
+                    <span class="glyphicon glyphicon-search"></span>
+                </button>
+            </span>
+        </div>
+    </form>
 </div>

resources/views/default/search.blade.php

@@ -1,22 +0,0 @@
-<div class="panel panel-default">
-    <div class="panel-heading">
-        <h3 class="panel-title">搜索</h3>
-    </div>
-    <div class='panel-body'>
-        <div class='row'>
-            <div class='col-md-12'>
-                <form action={{ route('search') }} class="form-inline" role="form">
-                    <div class="input-group">
-                        <input type="search" class="search-field form-control" value="" name="keyword" placeholder="请输入关键字">
-                        <span class="input-group-btn">
-                            <button type="submit" class="btn btn-default">
-                                <span class="glyphicon glyphicon-search"></span>
-                            </button>
-                        </span>
-                    </div>
-                </form>
-            </div>
-        </div>
-    </div>
-
-</div>

resources/views/default/search_article.blade.php

@@ -9,8 +9,8 @@
 @section('header-text')
     <div class="text-inner">
         <div class="row">
-            <div class="col-md-12 article-info">
-                <h3 class="to-animate fadeInUp animated">
+            <div class="col-md-12">
+                <h3 class="to-animate fadeInUp animated color-white">
                     <i class="glyphicon glyphicon-search"></i>
                     &nbsp;
                     {{ $keyword }}

resources/views/default/show_article.blade.php

@@ -16,57 +16,39 @@
 @section('header-text')
     <div class="text-inner">
         <div class="row">
-            <div class="col-md-12 article-info">
-                <h3 class="to-animate fadeInUp animated">
+            <div class="col-md-12 to-animate fadeInUp animated">
+                <h3 class="color-white">
                     {{ $article->title }}
                 </h3>
 
-                <p class="to-animate fadeInUp animated" style="margin-top:10px;">
-                    {{ $article->desc }}
-                </p>
-
-                <p class="to-animate fadeInUp animated">
+                <p class=" m-t-25 color-white">
                     <i class="glyphicon glyphicon-calendar"></i>{{ $article->created_at }}
                     &nbsp;
-                    <i class="glyphicon glyphicon-user"></i>{{ $user->name }}
-                </p>
-            </div>
-        </div>
-    </div>
-@endsection
-
-@section('content')
-    <div class="markdown-body editormd-html-preview" style="padding:0;">
-        {!! $article->html_content !!}
-    </div>
-
-    <div class="panel panel-default" style="margin-top:10px;">
-        <div>
-            <div id="share" class="social-share"></div>
-        </div>
-        <div class="panel-body">
-            @if($category)
-                <p>分类:
                     <i class="glyphicon glyphicon-th-list"></i>
-
                     <a href="{{ route('category', ['id' => $category->id]) }}" target="_blank">
                         {{ $category->name }}
                     </a>
-
                 </p>
-            @endif
-            @if ($tags)
-                <p>标签:
+                <p class="color-white">
                     <i class="glyphicon glyphicon-tags"></i>&nbsp;
                     @foreach ($tags as $tag)
                         <a href="{{ route('tag', ['id' => $tag->id]) }}" target="_blank">
-                            {{ $tag->tag_name }} &nbsp;
+                            {{ $tag->tag_name }}
                         </a>
+                        &nbsp;
                     @endforeach
                 </p>
-            @endif
+            </div>
         </div>
     </div>
+@endsection
+
+@section('content')
+    <div class="markdown-body editormd-html-preview" style="padding:0;">
+        {!! $article->html_content !!}
+    </div>
+
+    <div id="share" class="social-share m-t-25"></div>
     <!-- 评论插件 -->
     @include('default.comment.index', [
         'commentId' => $article->id,

resources/views/default/tag_article.blade.php

@@ -11,8 +11,8 @@
 @section('header-text')
     <div class="text-inner">
         <div class="row">
-            <div class="col-md-12 article-info">
-                <h3 class="to-animate fadeInUp animated">
+            <div class="col-md-12">
+                <h3 class="to-animate fadeInUp animated color-white">
                     <i class="glyphicon glyphicon-tags"></i>
                     &nbsp;{{ $tag->tag_name }}
                 </h3>

resources/views/layouts/app.blade.php

@@ -1,8 +1,4 @@
 <!DOCTYPE html>
-<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
-<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
-<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
-<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
 <head>
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
@@ -15,67 +11,76 @@
     <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
     <link rel="shortcut icon" href="{{ asset('favicon.ico') }}">
 
-    <!-- Animate.css -->
-    <link rel="stylesheet" href="{{ asset('default/css/animate.css') }}">
-
     <!-- Bootstrap  -->
     <link rel="stylesheet" href="{{ asset('default/css/bootstrap.min.css') }}">
 
+    <!-- Animate.css -->
+    <link rel="stylesheet" href="{{ asset('default/css/animate.css') }}">
+
     @yield('style')
 
     <link rel="stylesheet" href="{{ asset('default/css/index.css') }}">
 
+
+    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
+    <link href="../../assets/css/ie10-viewport-bug-workaround.css" rel="stylesheet">
+
+    <!-- Custom styles for this template -->
+    <link href="jumbotron.css" rel="stylesheet">
+
+    <!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
+    <!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
+    <script src="../../assets/js/ie-emulation-modes-warning.js"></script>
+
+    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
+    <!--[if lt IE 9]>
+    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
+    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
+    <![endif]-->
 </head>
+
 <body>
 @inject('systemPresenter', 'App\Presenters\SystemPresenter')
-<header id='moell-header'>
-    <nav class='navbar navbar-default'>
-        <div class='container'>
-            <div class="navbar-header">
-                <!-- Mobile Toggle Menu Button -->
-                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
-                    <span class="sr-only">Toggle navigation</span>
-                    <span class="icon-bar"></span>
-                    <span class="icon-bar"></span>
-                    <span class="icon-bar"></span>
-                </button>
-                <a class="navbar-brand" href="{{ url("/") }}" >{{ $systemPresenter->getKeyValue('blog_name') }}</a>
-            </div>
-            @include('default.navigation')
+<nav class="navbar navbar-default navbar-static-top">
+    <div class="container">
+        <div class="navbar-header">
+            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
+                <span class="sr-only">Toggle navigation</span>
+                <span class="icon-bar"></span>
+                <span class="icon-bar"></span>
+                <span class="icon-bar"></span>
+            </button>
+            <a class="navbar-brand" href="{{ url("/") }}" >{{ $systemPresenter->getKeyValue('blog_name') }}</a>
         </div>
-    </nav>
-
-</header>
-
-<section id="moell-home" data-section="home"   data-stellar-background-ratio="0.5">
-    <div class="gradient"></div>
+        @include('default.navigation')
+    </div>
+</nav>
+<!-- Main jumbotron for a primary marketing message or call to action -->
+<div class="jumbotron">
     <div class="container">
-        <div class="text-wrap">
+        <p>
             @yield('header-text')
-        </div>
+        </p>
     </div>
-</section>
-
-<section id='content'>
-    <div class='container'>
-        <div class='row'>
-            <div class='col-md-8' >
-                @yield('content')
-            </div>
-            <div class='col-md-4'>
-                @include('default.author')
+</div>
 
-                @include('default.search')
+<div class="container">
+    <div class='row'>
+        <div class='col-md-8' >
+            @yield('content')
+        </div>
+        <div class='col-md-4'>
+            @include('default.author')
 
-                @include('default.tag')
+            @include('default.tag')
 
-                @include('default.hot')
+            @include('default.hot')
 
-                @include('default.link')
-            </div>
+            @include('default.link')
         </div>
     </div>
-</section>
+</div> <!-- /container -->
+
 
 @include('default.footer')