Merge pull request Hopetree#229 from Hopetree/develop

修改页面扁平化设计为圆角

apps/blog/static/blog/css/base.css

@@ -177,6 +177,15 @@ blockquote {
  color: #ea6f5a;
 }
 
+
+#searchform .form-control {
+ border-radius: 0.5rem 0 0 0.5rem;
+}
+
+#searchform button {
+ border-radius: 0 0.5rem 0.5rem 0;
+}
+
 /*to top+++++++++++++++++++++++++++++++++++++++++++++++++*/
 #to-top {
  position: fixed;
@@ -198,6 +207,10 @@ blockquote {
 }
 
 /*carousel---------------------------------------------*/
+.carousel-inner {
+ border-radius: .5rem !important;
+}
+
 .carousel-indicators li {
  width: 10px;
  height: 10px;
@@ -206,6 +219,10 @@ blockquote {
  border-radius: 10px;
 }
 
+.description {
+ border-radius: .5rem;
+}
+
 .description h1 {
  padding-bottom: 8px;
  border-bottom: 2px solid #f0f0f0;
@@ -236,7 +253,7 @@ blockquote {
 
 
 .summary-list .media {
- background: linear-gradient(to right, #EC695C, #61C454) no-repeat right bottom;
+ /*background: linear-gradient(to right, #EC695C, #61C454) no-repeat right bottom;*/
  background-size: 0 2px;
  transition: background-size 500ms;
 }
@@ -248,6 +265,7 @@ blockquote {
 
 .summary-list .article-block {
  background-color: #fff;
+ border-radius: .5rem;
 }
 
 .summary-list .cate {
@@ -259,6 +277,10 @@ blockquote {
 }
 
 /* base right --------------------------------------------------*/
+.rounded-6 {
+ border-radius: .5rem !important;
+}
+
 #theme-img {
  width: auto;
  max-height: 14px;
@@ -541,8 +563,8 @@ footer a:hover {
  transform: scale(1.1);
  }
 
- .summary-list .media:hover {
- box-shadow: 0 2px 6px rgba(0, 0, 0, 0.275)
+ .summary-list .article-block:hover {
+ box-shadow: 0 3px 8px rgba(0, 0, 0, 0.275)
  }
 
  .summary-list .avatar {

apps/blog/templates/blog/about.html

@@ -13,7 +13,7 @@
 <div class="container">
  <div class="row">
  <div class="col-lg-8" style="line-height:2">
- <div class="card rounded-0 border-0 p-3 f-16">{{ body|safe }}</div>
+ <div class="card rounded-6 border-0 p-3 f-16">{{ body|safe }}</div>
  </div>
  <div class="col-lg-4">
  {% include 'blog/tags/base_right.html' %}

apps/blog/templates/blog/archive.html

@@ -21,9 +21,9 @@
 {% block base_content %}
 <div class="container">
  <div class="row">
- {% cache 3600 'cache_archive_html_tag' %}
+ {% cache 3600 'cache_archive_html_tag_new' %}
  <div class="col-lg-8">
- <div class="card border-0 rounded-0 mb-3">
+ <div class="card border-0 rounded-6 mb-3">
  <div class="card-body f-16 archive">
  {% regroup articles by create_date.year as year_list %}
  <ul class="pl-4">

apps/blog/templates/blog/base.html

@@ -21,7 +21,7 @@
  <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
  <script src="{% static 'blog/js/headroom.min.js'%}"></script>
  <!-- blog CSS -->
- <link href="{% static 'blog/css/base.css' %}?v=20230323.02" rel="stylesheet">
+ <link href="{% static 'blog/css/base.css' %}?v=20230508.01" rel="stylesheet">
  {% block top-file %}{% endblock %}
  <!--根据cookies判断是否启用暗色主题-->
  {% if not request.COOKIES.toggleTheme %}
@@ -45,7 +45,7 @@
 {% if messages %}
 <div class="container">
  {% for message in messages %}
- <div class="alert {% if message.tags %}alert-{{ message.tags }}{% else %}alert-secondary{% endif %} alert-dismissible rounded-0 fade show" role="alert">
+ <div class="alert {% if message.tags %}alert-{{ message.tags }}{% else %}alert-secondary{% endif %} alert-dismissible rounded-6 fade show" role="alert">
  {{ message }}
  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
  <span aria-hidden="true">&times;</span>

apps/blog/templates/blog/category.html

@@ -18,7 +18,7 @@
  <h1 class="f-17"><strong>{{ search_tag }}：{{ search_instance.name }}</strong></h1>
  <p class="f-16">{{ search_instance.description }}</p>
  </div>
- <div class="text-secondary font-weight-bold py-2 f-15 choice">
+ <div class="text-secondary font-weight-bold py-3 f-15 choice">
  {% url 'blog:category' search_instance.slug as base_category %}
  {% url 'blog:category_hot' search_instance.slug as hot_category %}
  <a class="pb-2 {% if request.path == base_category %}active{% endif %}" href="{{ base_category }}">

apps/blog/templates/blog/detail.html

@@ -23,7 +23,7 @@
  <div class="row justify-content-center">
  <div class="col-lg-9 col-xl-10">
  <nav aria-label="breadcrumb">
- <ol class="breadcrumb bg-white border-0 rounded-0 mb-2 py-2 f-15">
+ <ol class="breadcrumb bg-white border-0 rounded-6 mb-2 py-2 f-15">
  <li class="breadcrumb-item">
  <i class="fa fa-home mr-1"></i><a href="{% url 'blog:index' %}">首页</a>
  </li>
@@ -35,7 +35,7 @@
  <li class="breadcrumb-item active d-md-none" aria-current="page">当前位置</li>
  </ol>
  </nav>
- <div class="card rounded-0 border-0" id="article">
+ <div class="card rounded-6 border-0" id="article">
  <div class="card-body px-2 px-md-3 pb-0">
  <h1 class="card-title text-center font-weight-bold text-info">{{ article.title }}</h1>
  <hr>
@@ -90,7 +90,7 @@ <h1 class="card-title text-center font-weight-bold text-info">{{ article.title }
  {% include 'blog/tags/reward.html' %}
  </div>
  </div>
- <div class="card mt-2 rounded-0 border-0" id="comment-block">
+ <div class="card mt-2 rounded-6 border-0" id="comment-block">
  {% include 'comment/comment_form.html' %}
  {% get_parent_comments article as comment_list %}
  {% include 'comment/comment_list.html' %}

apps/blog/templates/blog/index.html

@@ -16,7 +16,7 @@
  <div class="row">
  <div class="col-lg-8">
  {% include 'blog/tags/carousel.html' %}
- <div class="text-secondary font-weight-bold py-2 f-15 choice">
+ <div class="text-secondary font-weight-bold py-3 f-15 choice">
  {% url 'blog:index' as base_index %}
  {% url 'blog:index_hot' as hot_index %}
  <a class="pb-2 {% if request.path == base_index %}active{% endif %}" href="{{ base_index }}">

apps/blog/templates/blog/tag.html

@@ -18,7 +18,7 @@
  <h1 class="f-17"><strong>{{ search_tag }}：{{ search_instance.name }}</strong></h1>
  <p class="f-16">{{ search_instance.description }}</p>
  </div>
- <div class="text-secondary font-weight-bold py-2 f-15 choice">
+ <div class="text-secondary font-weight-bold py-3 f-15 choice">
  {% url 'blog:tag' search_instance.slug as base_tag %}
  {% url 'blog:tag_hot' search_instance.slug as hot_tag %}
  <a class="pb-2 {% if request.path == base_tag %}active{% endif %}" href="{{ base_tag }}">

apps/blog/templates/blog/tags/article_list.html

@@ -1,37 +1,39 @@
 {% load blog_tags oauth_tags comment_tags %}
-{% load humanize static%}
+{% load humanize static %}
 <div class="summary-list">
  {% for article in articles %}
- <div class="article-block">
- <div class="media mb-1 mb-sm-2 p-2 p-lg-3">
- <div class="align-self-center mr-2 mr-lg-3 w-25 modal-open">
- <a href="{{ article.get_absolute_url }}" target="_blank">
- <img class="w-100 article-img" src="{{ article.img_link }}" alt="{{ article.title }}">
- </a>
- </div>
- <div class="media-body">
- {% if article.is_top %}<img class="float-right top-article-img" src="{% static 'blog/img/TOP.png' %}">{% endif %}
- <div class="text-muted mb-2 f-12">
- {% get_user_avatar_tag article.author %}
- <span>{{ article.author }}</span>
- <span><i class="fa fa-calendar-times-o ml-2 mr-1"></i>{{ article.create_date|naturaltime }}</span>
- </div>
- <h2 class="mt-0 font-weight-bold text-info f-17">
- <a href="{{ article.get_absolute_url }}" target="_blank">{{ article.title}}</a>
- </h2>
- <p class="d-none d-sm-block mb-2 f-15">{{ article.summary|truncatechars:130 }}</p>
- <p class="d-block d-sm-none mb-2 f-15">{{ article.summary|truncatechars:64 }}</p>
- <div class="text-muted mb-0 f-12">
- <a class="cate" href="{{ article.category.get_absolute_url }}" title="查看当前分类下更多文章">
- <i class="fa fa-book mr-1"></i>{{ article.category }}</a>
- <span><i class="fa fa-eye ml-2 mr-1"></i>{{ article.views }}</span>
- <a href="{{ article.get_absolute_url }}#comment-block" target="_blank" title="查看文章评论">
- <i class="fa fa-comments ml-2 mr-1"></i>{% get_comment_count article %}</a>
+ <div class="article-block">
+ <div class="media mb-1 mb-sm-2 p-2 p-lg-3">
+ <div class="align-self-center rounded-6 mr-2 mr-lg-3 w-25 modal-open">
+ <a href="{{ article.get_absolute_url }}" target="_blank">
+ <img class="w-100 article-img" src="{{ article.img_link }}" alt="{{ article.title }}">
+ </a>
+ </div>
+ <div class="media-body">
+ {% if article.is_top %}
+ <img class="float-right top-article-img" src="{% static 'blog/img/TOP.png' %}">{% endif %}
+ <div class="text-muted mb-2 f-12">
+ {% get_user_avatar_tag article.author %}
+ <span>{{ article.author }}</span>
+ <span><i
+ class="fa fa-calendar-times-o ml-2 mr-1"></i>{{ article.create_date|naturaltime }}</span>
+ </div>
+ <h2 class="mt-0 font-weight-bold text-info f-17">
+ <a href="{{ article.get_absolute_url }}" target="_blank">{{ article.title }}</a>
+ </h2>
+ <p class="d-none d-sm-block mb-2 f-15">{{ article.summary|truncatechars:130 }}</p>
+ <p class="d-block d-sm-none mb-2 f-15">{{ article.summary|truncatechars:64 }}</p>
+ <div class="text-muted mb-0 f-12">
+ <a class="cate" href="{{ article.category.get_absolute_url }}" title="查看当前分类下更多文章">
+ <i class="fa fa-book mr-1"></i>{{ article.category }}</a>
+ <span><i class="fa fa-eye ml-2 mr-1"></i>{{ article.views }}</span>
+ <a href="{{ article.get_absolute_url }}#comment-block" target="_blank" title="查看文章评论">
+ <i class="fa fa-comments ml-2 mr-1"></i>{% get_comment_count article %}</a>
+ </div>
+ </div>
  </div>
  </div>
- </div>
- </div>
  {% empty %}
- <div class="p-3 mt-3 bg-white"><p>暂时没有文章!</p></div>
+  <div class="p-3 mt-3 bg-white"><p>暂时没有文章!</p></div>
  {% endfor %}
 </div>

apps/blog/templates/blog/tags/base_right.html

@@ -2,7 +2,7 @@
 {% load blog_tags static %}
 
 <!--个人空间-->
-<div class="card border-0 rounded-0 px-3 mb-2 mb-md-3 d-none d-lg-block" id="home-card">
+<div class="card border-0 rounded-6 px-3 mb-2 mb-md-3 d-none d-lg-block" id="home-card">
  <div class="card-header bg-white px-0">
  <strong><i class="fa fa-paper-plane mr-2 f-17"></i>博客空间</strong>
  <img class="float-right" id="theme-img"
@@ -46,7 +46,7 @@
  </div>
 </div>
 <!--文章分类-->
-<div class="card border-0 rounded-0 px-3 mb-2 mb-md-3" id="category-card">
+<div class="card border-0 rounded-6 px-3 mb-2 mb-md-3" id="category-card">
  <div class="card-header bg-white px-0">
  <strong><i class="fa fa-book mr-2 f-17"></i>文章分类</strong>
  </div>
@@ -62,7 +62,7 @@
  </ul>
 </div>
 <!--标签云-->
-<div class="card border-0 rounded-0 px-3 mb-2 mb-md-3" id="tag-card">
+<div class="card border-0 rounded-6 px-3 mb-2 mb-md-3" id="tag-card">
  <div class="card-header bg-white px-0">
  <strong><i class="fa fa-tags mr-2 f-17"></i>标&nbsp;签&nbsp;云</strong>
  </div>
@@ -78,7 +78,7 @@
 </div>
 <!--友链-->
 <div class="d-none d-lg-block">
- <div class="card border-0 rounded-0 px-3 mb-2 mb-md-3" id="friends-card">
+ <div class="card border-0 rounded-6 px-3 mb-2 mb-md-3" id="friends-card">
  <div class="card-header bg-white px-0">
  <strong><i class="fa fa-link mr-2 f-17"></i>友情链接</strong>
  </div>

apps/blog/templates/blog/tags/navbar.html

@@ -63,10 +63,10 @@
  <form class="nav-item navbar-form mr-2 py-md-2" role="search" method="get" id="searchform"
  action="{% url 'blog:search_view' %}">
  <div class="input-group">
- <input type="search" name="q" class="form-control rounded-0" placeholder="站内搜索" autocomplete="off"
+ <input type="search" name="q" class="form-control" placeholder="站内搜索" autocomplete="off"
  required=True>
  <div class="input-group-btn">
- <button class="btn btn-info rounded-0" type="submit"><i class="fa fa-search"></i></button>
+ <button class="btn btn-info" type="submit"><i class="fa fa-search"></i></button>
  </div>
  </div><!-- /input-group -->
  </form>

apps/blog/templates/blog/timeline.html

@@ -25,7 +25,7 @@ <h1 id="timeline"><i class="fa fa-hourglass-half mr-2"></i>建站日志</h1>
  {% else %}
  <li class="timeline-inverted">{% endif %}
  <div class="timeline-badge {{ timeline.icon_color }}"><i class="{{ timeline.icon }}"></i></div>
- <div class="timeline-panel">
+ <div class="timeline-panel rounded-6">
  <div class="timeline-heading">
  <h2 class="timeline-title text-info">{{ timeline.title }}</h2>
  <p class="mb-1">

apps/tool/templates/tool/base_tool.html

@@ -10,7 +10,7 @@
  <div class="row">
  <div class="col-lg-8 f-16">
  <nav aria-label="breadcrumb">
- <ol class="breadcrumb bg-white border-0 rounded-0 mb-2 py-2 f-15">
+ <ol class="breadcrumb bg-white border-0 rounded-6 mb-2 py-2 f-15">
  <li class="breadcrumb-item">
  <i class="fa fa-home mr-1"></i><a href="{% url 'blog:index' %}">首页</a>
  </li>
@@ -20,7 +20,7 @@
  <li class="breadcrumb-item active" aria-current="page">{% block tool_name %}{% endblock %}</li>
  </ol>
  </nav>
- <div class="card rounded-0 border-0 p-2 p-lg-3">
+ <div class="card rounded-6 border-0 p-2 p-lg-3">
  {% block left_content %}{% endblock %}
  </div>
  </div>

apps/tool/templates/tool/tags/tool_item.html

@@ -1,5 +1,5 @@
 <div class="col-md-6 col-lg-4 col-xl-3 px-lg-2 mb-3">
- <div class="card">
+ <div class="card rounded-6">
  <div class="card-header p-2 tool-header">
  <a href="{{ tool_item.url }}">
  <img class="w-25 float-left mr-2" src="{{ tool_item.img }}"

apps/tool/templates/tool/tags/tool_list.html

@@ -2,7 +2,7 @@
 
 {% if not request.user.is_superuser %}
 {% get_toollist_by_key as tool_list %}
-<div class="card border-0 rounded-0 px-3 mb-2 mb-md-3 tool-cate">
+<div class="card border-0 rounded-6 px-3 mb-2 mb-md-3 tool-cate">
  <div class="card-header bg-white px-0">
  <strong><i class="fa fa-trophy mr-2 f-17"></i>自定义工具</strong>
  </div>
@@ -22,7 +22,7 @@
 
 {% get_toolcates as cates %}
 {% for each_cate in cates %}
-<div class="card border-0 rounded-0 px-3 mb-2 mb-md-3 tool-cate">
+<div class="card border-0 rounded-6 px-3 mb-2 mb-md-3 tool-cate">
  <div class="card-header bg-white px-0">
  <strong><i class="{{ each_cate.icon }} mr-2 f-17"></i>{{ each_cate.name }}</strong>
  </div>

templates/account/base.html

@@ -14,7 +14,7 @@
 <div class="container">
  <div class="row">
  <div class="col-12 col-sm-8 col-md-6 offset-sm-2 offset-md-3 px-xl-5">
- <div class="card rounded-0 px-3 px-lg-4">
+ <div class="card rounded-6 px-3 px-lg-4">
  <div class="card-header text-center bg-white py-2">
  <h3 class="my-1 text-info">{% block user_title %}账号管理{% endblock %}</h3>
  </div>