Blog template design with RWD

template design in codepen

<main>
  <div class="nav">固定寬度</div>
  <div class="content">動態寬度</div>
  <div class="side">固定寬度</div>
</main>


main{
  background-color:white;
  height: 100%;
  width: 100%;
  display:inline-block;
  position: absolute;
  top:0;
  left:0;
  display:table;
}
.nav{
  color:white;
  display: table-cell; 

  height: 100%;
  background-color: green;
  line-height: 20px;
  margin-bottom: 20px;  
  width: 45px;
  z-index: 87;  
}
.content{
  color:white;
  display: table-cell; 

  background-color:blue;  
  height: 100%;
}
.side{
  color:white;
  display: table-cell;   

  background-color:red;
  width: 200px;
  height: 100%;
}
@media (max-width: 768px) {
  .nav{
    background-color: black !important;
    position:fixed !important;
    height:75px !important;
    width:100% !important;
    top:0;
    left:0;
  }
  .content{
    position:absolute !important;
    display: inline-block !important;
    height:100% !important;
    width:100% !important;
    top: 75px !important;
  }
  .side{
    display: none !important;
  }
}

backup

<div class="header">
        <div class="header-inner">
            <nav class="site-nav">
                <div class="menu">
                    <a class="website-text-logo blog-home" href="{% url 'blog_home' %}" title="部落格">
                        <i class="fa fa-home"></i>
                    </a>
                    <a class="website-text-logo" href="{% url 'blog_about' %}" title="關於作者">
                        <i class="fa fa-user"></i>
                    </a>
                </div>
                <div class="cus-menu">
                    {% if user.is_authenticated %}
                    <a class="website-text-logo" href="{% url 'profile' %}" title="個人資料">
                        <i class="fa fa-address-card"></i>
                    </a>
                    <a class="website-text-logo" href="{% url 'logout' %}" title="登出">
                        <i class="fa fa-sign-out"></i>
                    </a>
                    {% else %}
                    <a class="website-text-logo" href="{% url 'register' %}" title="註冊(不開放)">
                        <i class="fa fa-pencil-square-o"></i>
                    </a>
                    <a class="website-text-logo" href="{% url 'login' %}" title="登入">
                        <i class="fa fa-sign-in"></i>
                    </a>
                    {% endif %}
                </div>
            </nav>
        </div>
    </div>
    <div role="main" class="container">
        <div class="row">
            <div class="col-md-8">
                {% if messages %}
                {% for message in messages %}
                <div class="alert alert-{{ message.tags }}">
                    {{ message }}
                </div>
                {% endfor %}
                {% endif %}
                {% block content %}{% endblock %}
            </div>
            <!--        <div class="col-md-4">-->
            <!--            <div class="content-section">-->
            <!--                <h3>Our Sidebar</h3>-->
            <!--                <p class='text-muted'>You can put any information here you'd like.-->
            <!--                <ul class="list-group">-->
            <!--                    <li class="list-group-item list-group-item-light">Latest Posts</li>-->
            <!--                    <li class="list-group-item list-group-item-light">Announcements</li>-->
            <!--                    <li class="list-group-item list-group-item-light">Calendars</li>-->
            <!--                    <li class="list-group-item list-group-item-light">etc</li>-->
            <!--                </ul>-->
            <!--                </p>-->
            <!--            </div>-->
            <!--        </div>-->
        </div>
    </div>

ARJhe / Django_tutorial-Blog

Blog template design with RWD #5

backup