ATE

<!DOCTYPE html>

<!---
  ___ ___ _    _    _____      __  _____ _  _ ___ __  __ ___ ___
 | _ \_ _| |  | |  / _ \ \    / / |_   _| || | __|  \/  | __/ __|
 |  _/| || |__| |_| (_) \ \/\/ /    | | | __ | _|| |\/| | _|\__ \
 |_| |___|____|____\___/ \_/\_/     |_| |_||_|___|_|  |_|___|___/

                                BY CARA

Rules:
    1. Do not steal snippets or all of my codes.
    2. Do not claim theme as yours.
    3. Do not remove the credit.
-->

<head>
    <title>{Title}</title>

    <link rel="shortcut icon" href="{FavIcon}" />
    <link rel="alternate" type="application/rss+xml" href="{RSS}" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <link href="https://static.tumblr.com/wgijwsy/k1Hm9ei8b/normalize.css" rel="stylesheet" type="text/css"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/smoothscroll/1.4.1/SmoothScroll.min.js"></script>

    <link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:ital,wght@0,400;0,700;1,400&family=Spectral:ital,wght@0,400;0,700;1,400&display=swap" rel="stylesheet">

    <link rel="stylesheet" href="https://cdn.linearicons.com/free/1.0.0/icon-font.min.css">

<!--- START META TAGS --->
<meta name="select:font" content="Open Sans, sans-serif" title="Open Sans"/>
<meta name="select:font" content="Lato, sans-serif" title="Lato"/>
<meta name="select:font" content="Roboto, sans-serif" title="Roboto"/>

<meta name="color:Background" content="#ffffff"/>
<meta name="color:Text" content="#000000"/>
<meta name="color:header" content="#000000"/>
<meta name="color:footer" content="#000000"/>
<meta name="color:featured" content="#000000"/>
<meta name="color:accent" content="#ac1512"/>
<meta name="color:gray" content="#717171"/>

<meta name="image:logo" content=""/>

<meta name="if:infinite scroll" content="1"/>

<meta name="text:link 1 name" content=""/>
<meta name="text:link 1 url" content=""/>

<meta name="text:link 2 name" content=""/>
<meta name="text:link 2 url" content=""/>

<meta name="text:link 3 name" content=""/>
<meta name="text:link 3 url" content=""/>
<!-- END OF META TAGS -->

</head>
<style>

body {
color:{color:text};
background-color:{color:background};
font-size:16px;
font-family: 'Source Sans Pro', sans-serif;
line-height:1.5;
overflow-x:hidden;
}

a {
text-decoration:none;
color:{color:text};
}

iframe, img, embed, object, video {
max-width: 100%;
}

img {
height:auto;
width:auto;
}

blockquote {
border-left:1.5px solid {color:accent};
color:{color:text};
margin-left:10px;
padding-left:20px;
}

#header {
top:0;
width:100%;
height:auto;
background-color:{color:header};
padding:20px;
}

#header img {
width:60px;
height:60px;
z-index:999999999;
}

#links {
position:absolute;
margin-left:95px;
margin-top:-45px;
}

.aboutdrop {
display:inline;
color:{color:text};
}

.aboutdrop a {
color:{color:text};
}

.aboutbutton {
  border: none;
  outline: none;
  margin: 0;
  background-color:{color:header};
color:{color:text};  font-weight:700;
}

.aboutdrop:hover, .aboutbutton:focus {
color:{color:text};
}

.about-content {
width:150px;
  display: none;
  position: absolute;
  margin-left:305px;
  background-color: #f9f9f9;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 999999999999;
color:#000;
}

.about-content a {
display:block;
margin-right:0px;
padding:10px;
color:#000;
}

.about-content a:hover {
  background-color:{color:background};
}

.aboutshow {
  display: block;}

.lnr-chevron-down {
margin-left:5px;
font-size:10px;
font-weight:700;
}

#featured {
width:100vw;
height:87vh;
background-color:{color:featured};
}

#featuredc {
margin:80px 0px 0px 230px;
width:1000px;
height:520px;
background-color:{color:featured};
position:absolute;
z-index:99999;
}

#featureda {
float:left;
width:500px;
height:520px;
background-color:#fff;
}

#featuredap {
margin:50px;
}

#featuredat {
font-weight:700;
font-size:26px;
font-family: 'Spectral', serif;
}

#featuredac {
margin-top:20px;
}

#featuredatt {
margin-top:110px;
color:{color:gray};
}

#featuredb {
float:right;
width:500px;
height:520px;
background-color:green;
}

#others {
margin-top:20px;
width:100vw;
height:auto;
margin-bottom:50px;
margin-left:-40px;
padding:30px;
z-index:99999;
}

#othersc {
width:1000px;
height:250px;
margin:0 auto 50px auto;
}

#othersct {
color:#000;
font-size:26px;
margin-bottom:30px;
font-family: 'Spectral', serif;
font-weight:700;
}

#othersbox {
width:310px;
height:250px;
float:left;
background-color:#fff;
margin-right:30px;
border-left:3px solid {color:accent};
}

#box1 {
margin:30px;
}

#box1t {
font-size:24px;
color:{color:accent};
font-weight:700;
margin-top:10px;
}

#box1c {
margin-top:10px;
}

#othersbox2 {
width:310px;
height:250px;
float:left;
background-color:#fff;
margin-right:30px;
border-left:3px solid {color:accent};
}

#box2 {
margin:30px;
}

#box2t {
font-size:24px;
color:{color:accent};
font-weight:700;
margin-top:10px;
}

#box2c {
margin-top:10px;
}

#othersbox3 {
width:310px;
height:250px;
float:left;
background-color:#fff;
border-left:3px solid {color:accent};
}

#box3 {
margin:30px;
}

#box3t {
font-size:24px;
color:{color:accent};
font-weight:700;
margin-top:10px;
}

#box3c {
margin-top:10px;
}

.lnr-book, .lnr-pencil, .lnr-users {
font-size:30px;
}

#announcement {
margin-top:-30px;
width:100vw;
height:auto;
margin-bottom:50px;
padding:30px;
z-index:99999;
}

#annc {
width:1000px;
height:250px;
margin:0 auto 50px auto;
}

#at {
color:#000;
font-size:26px;
margin-bottom:30px;
font-family: 'Spectral', serif;
font-weight:700;
}

#ac {
background-color:{color:accent};
padding:70px;
}

/* POST CONTAINER */
#content {
width:1000px; /* Increase or decrease width to add more columns */
margin:0 auto 70px auto;
background-color:{color:background};
}

/* Individual Posts */
.posts {
width:500px;
float:left;
background-color:{color:background};
}

#perma {
position:relative;
width:500px;
color:{color:gray};
}

.postsim {
width:470px;
float:right;
background-color:{color:background};
margin-left:30px;
}

#footer {
bottom:0;
width:100%;
height:300px;
padding:20px;
background-color:{color:footer};
color:#fff;
}

.ptitle {
font-weight:700;
font-size:22px;
font-family: 'Spectral', serif;
}

/* INFINITE SCROLL */
{block:ifnotinfinitescroll}
.pagi {
width:270px;
margin-left:120px;
text-align:center;
text-transform:uppercase;
color:#000;
font-size:20px;
letter-spacing:3px;
}
{/block:ifnotinfinitescroll}

.pagi a {
color:{color:accent};
margin:20px;
}

{block:ifinfinitescroll}
.pagi {
display:none;
}
{/block:ifinfinitescroll}

/* TUMBLR CONTROLS */
.tmblr-iframe {
position:fixed!important;
top:0;
right:0;
z-index:99999999999999999999999!important;
-webkit-transform:scale(0.8,0.8);
-webkit-transform-origin: 100% 0%;
-ms-transform-origin:100% 0%;
-ms-transform:scale(0.8,0.8);
transform:scale(0.8,0.8);
transform-origin:100% 0%;
}

</style>
<body>
<!--- PLLW THMS --->
<div id="header">
    <img src="{image:logo}">
    <div id="links">
        <a href="/current" style="font-weight:700;">Current</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <a href="/archives" style="font-weight:700;">Archives</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <a href="/announcements" style="font-weight:700;">Announcements</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

       <div class="aboutdrop">
       <button class="aboutbutton" onclick="myFunction()">About
       <span class="lnr lnr-chevron-down"></span></button>
       <div class="about-content" id="myDropdown">
            <a href="#">Link 1</a>
            <a href="#">Link 2</a>
            <a href="#">Link 3</a>
       </div>
       </div>

    </div>
</div>

<div id="featured">
    <div id="featuredc">
        <div id="featureda">
            <div id="featuredap">
                <div id="featuredat">Lorem Ipsum Dolor Sit Amet Consectetur Adipiscing</div>
                <div id="featuredac">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet sem sed magna euismod viverra eget vitae ipsum. Proin ultrices est vel justo vulputate volutpat. Sed gravida non neque ac lobortis. Proin dapibus est sit amet metus scelerisque luctus. Proin ornare, velit at imperdiet dapibus, quam eros pellentesque ante, vel sagittis ligula sem vel nisi. Donec tellus sapien, egestas vel lobortis sed, luctus eu tellus.
            </div>
                <div id="featuredatt">APJIHL No.000&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;October 2020&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;23 Articles</div>
            </div>
        </div>

        <div id="featuredb">
            <img src="https://placeimg.com/500/520/tech">
        </div>

    </div>
</div>

<div id="others">
    <div id="othersc">
        <div id="othersct">Information</div>
        <div id="othersbox">
            <div id="box1">
                <span class="lnr lnr-book"></span>
                <div id="box1t">For Readers</div>
                <div id="box1c">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet sem sed magna euismod viverra eget vitae ipsum.</div>
            </div>
        </div>

        <div id="othersbox2">
            <div id="box2">
                <span class="lnr lnr-pencil"></span>
                <div id="box2t">For Authors</div>
                <div id="box2c">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet sem sed magna euismod viverra eget vitae ipsum.</div>
            </div>
        </div>

        <div id="othersbox3">
            <div id="box3">
                <span class="lnr lnr-users"></span>
                <div id="box2t">For Librarians</div>
                <div id="box2c">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet sem sed magna euismod viverra eget vitae ipsum.</div>
            </div>
        </div>
    </div>
</div>

<div id="content">
    <div class="posts">
        {block:Posts}

        {block:Text}
            <div class="post text">
            {block:Title}
            <div class="ptitle"><a href="{Permalink}">{Title}</a></div>
            {/block:Title}
            {Body}</div>
        {/block:Text}

        <div id="perma">
            ARTICLE | 15 min. read
        </div>

        {/block:Posts}
    </div>

    <div class="postsim">
        <img src="https://placeimg.com/470/445/tech">
    </div>
</div>

<div id="footer">
    hello
</div>

<script>
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction() {
  document.getElementById("myDropdown").classList.toggle("aboutshow");
}

// Close the dropdown if the user clicks outside of it
window.onclick = function(e) {
  if (!e.target.matches('.aboutbutton')) {
  var myDropdown = document.getElementById("myDropdown");
    if (myDropdown.classList.contains('aboutshow')) {
      myDropdown.classList.remove('aboutshow');
    }
  }
}
</script>

<!--- DO NOT TOUCH THIS PART --->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="https://static.tumblr.com/wgijwsy/Ebfm2v4gy/jquery.masonry.min.js"></script>
{block:IfInfiniteScroll}
<script src="https://static.tumblr.com/wgijwsy/u2vm2hxv6/jquery.infinitescroll.min.js"></script>
<script src="https://static.tumblr.com/iwtk77u/Yhym2yygt/jquery.imagesloaded.min.js"></script>
{/block:IfInfiniteScroll}

<script>
(function() {
    var $tumblelog = $('#content');
    {block:IfInfiniteScroll}
    $tumblelog.infinitescroll({
        navSelector  : ".pagination",
        nextSelector : ".pagination a:first",
        itemSelector : ".posts",
        bufferPx     : 50,
        done : "",
        loading: {
            img : "",
            msgText: ""
        },
    },
      function( newElements ) {
            var $newElems = $( newElements ).css({ opacity: 0 });
            $newElems.imagesLoaded(function(){
                $newElems.animate({ opacity: 1 });
                $tumblelog.masonry( 'appended', $newElems);
            });
          }
    );
    {/block:IfInfiniteScroll}
    $tumblelog.imagesLoaded( function(){
      $tumblelog.masonry({
        columnWidth: function( containerWidth ) {
            return containerWidth / 100;
          }
      });
    });
})();
</script>
<!--- DO NOT TOUCH THIS PART --->

</body>
</html>