<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>STEMChat</title>
    <link rel="shortcut icon" href="/favicon.ico">
    <link rel="stylesheet" href="/css/pure_css.css">
    <link rel="stylesheet" href="https://unpkg.com/purecss@2.0.3/build/grids-responsive-min.css" />
    <link rel="stylesheet" href="css/blog.css">
    <link rel="stylesheet" href="/css/navbar.css">
    <style media="screen">
    .para {
        color: #333;
    }

    #plus {
        height: 6rem;
        width: 6rem;
        position: fixed;
        bottom: 2.5rem;
        right: 2.5rem;
        opacity: 0.5;
    }

    #plus:hover {
        opacity: 1.0;
    }

    </style>
</head>

<body>

    <div  class="topnav" id="myTopnav1">
        <a href="javascript:void(0);" class="icon" onclick="myFunction1()">
            <i>â˜°</i>
        </a>

        <!-- Navigation links (hidden by default) -->
        <div id="myLinks">
            <a href="/">Home</a>

            <a href='<%=about%>'>About</a>
            <%if(curr_user){%>
                <a href="<%=home%>">Chat</a>
                <%}%>
                <a href='<%=blog%>' class="active">Blogs</a>
            <a href='<%=project%>'>Projects</a>


            <a href='<%=feedback%>'>Feedback</a>
            <%if(curr_user){%>
                <a href='<%=profile%>'>Profile</a>
                <%}%>
            <%if(!curr_user){%>
                <a href="<%=home%>">Login</a>
                <%}%>
            <%if(curr_user){%>
            <a href="<%=logout%>">Logout</a>
            <%}%>
        </div>
        <!-- "Hamburger menu" / "Bar icon" to toggle the navigation links -->

    </div>

    <div id="layout" class="pure-g">
        <div class="sidebar pure-u-1">
            <div class="header">
                <h1 class="brand-title">Blogs</h1>
                <h2 class="brand-tagline"></h2>
                <h4>
                    When you have a great story to tell about your experience which you think should be read and
                    discussed by our members, use this category. Your post will be published after moderation.
                </h4>

                <nav class="nav">
                    <ul class="nav-list">
                        <li class="nav-item">
                            <!-- <a class="pure-button" href="http://purecss.io">Pure</a> -->
                        </li>
                        <li class="nav-item">
                            <!-- <a class="pure-button" href="http://yuilibrary.com">YUI Library</a> -->
                        </li>
                    </ul>
                </nav>
            </div>
        </div>
        <div id="main">

            <div class="content pure-u-1 pure-u-md-1">
                <%for(var i=0;i<projects.length;i++){%>
                    <div class="posts">


                        <!-- A single blog post -->
                        <section class="post">
                            <header class="post-header">

                                <a href="/post/t/<%=projects[i].slug%>/<%=projects[i].id%>/22" class="link_head">
                                    <h3>
                                       &#9672 <%=projects[i].title%>


                                </a>
                                <%if(projects[i].image_url!=null){%>
                                <img width="80" height="80" alt="Tilo Mitra&#x27;s avatar" class="post-avatar"
                                    src=<%=projects[i].image_url%>>
                                <%}%>
                            </h3>


                            </header>

                            <div class="post-description">
                                <p class="content-subhead para">

                                    <%for(var j=0;j<projects[i].tags.length;j++){%>
                                    #<%=projects[i].tags[j]%>
                                    <%}%>

                                </p>
                            </div>
                        </section>
                    </div>
                    <%}%>
                    <!-- A wrapper for all the blog posts -->





                    <div class="footer">
                        <div class="pure-menu pure-menu-horizontal">

                            <center>
                              <!--
                              <div class='foot'>
                                  <p> MADE BY BITS 2020</p>
                              </div>
                              -->
                            </center>
                        </div>
                    </div>

                </div>
            </div>
        </div>








    <script src="/js/ui.js"></script>

    <script>
    //Navbar
       function myFunction1() {
            var x = document.getElementById("myTopnav1");
            if (x.className === "topnav") {
                x.className += " responsive";
            } else {
                x.className = "topnav";
            }
        }
        function myFunction() {
            var x = document.getElementById("myTopnav");
            if (x.className === "topnav") {
                x.className += " responsive";
            } else {
                x.className = "topnav";
            }
        }
    </script>
</body>

</html>
