anjo(blogroll)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!---------------------------------------------------------------------------

ANJO blogroll by codematurgy. don't claim as your own. feel free to point out any issues or suggest any changes to make it easier to use and browse through.

---------------------------------------------------------------------------->

<html>

<title>{lang:Following} — {Title}</title>

<link rel="shortcut icon" href="{Favicon}">
<link rel="alternate" type="application/rss+xml" href="{RSS}">

<meta name="viewport" content="width=device-width"/>

<head>

<title>{Title}</title>

<style>

body {
    font-family:Lucida Console, Consolas, Menlo, monospace;
    font-size:11px; /* if you're looking for a font size different from the one offered, you can change 11 for a number that fits you best. though, please, avoid anything smaller than 11. */
    line-height:1.5em;
}

a { text-decoration:underline; }

/* UNIVERSAL SENTENCES */

.universal_sentences {
    text-transform:lowercase;
} /* for aesthetic and easy reading purposes some sentences where lowercased through this page! these are "pre-made" sentences by tumblr, created to be supported in every language, and therefore are by default capitalized. */

/* SCREEN READER SENTENCES */

.screen_reader_sentences {
    position:absolute;
    margin:0 0 0 -9999px;
} /* some things are easily understood for those with good sight, while it is actually quite confusing for those using screen readers. the sentences indicated in the code with this class are invisible on the screen, but will be rendered when using screen readers to make understanding easier. */

/* SIZES AND MARGINS */

/* size editing for boxes and content functionality takes part only in this section. other sections are aesthetic only. basically change any 15px that appears in this section for the desired margin size, and the 350px for the box size. note that there are 15px values outside of this section so don't use any "substitute all" method. the media screen sizes and "min-width" are a bit more complex so it has instructions of it's own over them. */

#content, #page_header, .followed_block, #not_following_message {
    margin:calc(15px / 2); /* change this value to change the gap size between boxes. the value is divided by two because every box will have the margin around itself, so the combined margins will result in 15px. it is also applied to the container and the navigation header to keep it's laterals with the same margins as the boxes. */
}

#content {
    margin-top:27px;
    margin-bottom:27px; /* i'm using the value 27 only because it's half of 54 which i used in larger screen sizes, as you can see further below. */
    width:calc(100% - (2 * 15px)); /* by default the content has 100% width unless we get to larger screen sizes, in which it will be defined so we can define the ammount of box columns. the 15px in the calculation is the margin size. */
}

.followed_block {
    width:100%; /* by default the boxes have 100% width unless we get to larger screen sizes, in which it will be defined so they don't get to large. */
}

/* these min-widths are calculed by adding another gap width to the total value of the width attribute inside it. for example, the following line would go 350px + 15px(365px) multiplied by 2(730px) plus 15px(745px). the extra gap is because the margins of the boxes beside the laterals of the screen add up to 15px. */
@media (min-width: 745px) {
    #content {
        margin:54px auto; /* when on larger screen sizes, i use 54px margins on bottom and top by default because of the tumblr buttons on the top of the page. */
        width:calc(2 * (350px + 15px)); /* 350px is for the boxes' width, 15px for the gap width between boxes, and the three multiplying them is for the amount of columns. remember editing the values for the following screen sizes if you wish, but remember to change the screen widths if they become to small for those boxes as well! */
    }

    .followed_block {
        width:350px; /* this is the width of the blog boxes. if you want to change it, remember to add or subtract the value to the container's width. although it's already really ideal for blog's with short or monosylabic titles */
    }
}
@media (min-width: 1110px) {
    #content {
        margin:54px auto;
        width:calc(3 * (350px + 15px));
    }
    .followed_block {
        width:350px;
    }
}

/* HEADER */

#page_header {
    margin-bottom:2em;
}

/* title */

#page_title {
    display:inline-block;
    margin:0;
    padding:0.2em 0.5em;
    line-height:1.25em;
    font-size:1.9em;
}

/* navigation */

#page_navigation {
    margin:-0.3em;
    padding:0;
    margin-top:1em;
    list-style-type:none;
}

#page_navigation li {
    display:inline-block;
    margin:0.3em;
    padding:0.4em 0.6em;
    font-size:1.25em;
}

/* LIST */

#not_following_message {
    display:none;
    padding:25px;
}

#following_list {
    margin:0;
    padding:0;
    list-style-type:none;
}

/* INDIVIDUAL BLOG BLOCK */

.followed_block {
    display:inline-table;
    vertical-align:middle;
}

.followed_portrait, .followed_text {
    display:table-cell;
    vertical-align:middle;
}

/* blog portrait */

.followed_portrait { padding:10px; }

.followed_portrait img { width:40px; }

@media (min-width: 280px) {
    .followed_portrait img { width:48px; }
}

@media (min-width: 380px) {
    .followed_portrait img { width:auto; }
}

/* blog username and title */

.followed_text {
    width:100%;
    padding:0 15px;
    max-height:84px;
    overflow:hidden;
}

.followed_text a {
    text-decoration:none;
    color:inherit;
}

.followed_text a:hover .followed_username, .followed_text a:focus .followed_username {
    text-decoration:underline;
}

.followed_username { word-break:break-all; }

/* BOTTOM CREDIT */

#credit_footer {
    margin-top:2em;
    text-align:center;
}

#codematurgy {
    display:inline-block;
    font-size:1.25em;
    padding:0.4em 0.6em;
}

/* UNIVERSAL STYLING */

/* round borders */

#page_title, #page_navigation li, #not_following_message, .followed_block, .followed_portrait img, #codematurgy {
    border-radius:3px;
    overflow:hidden;
}

/* non-underlined links */

#page_navigation li a, #codematurgy a { text-decoration:none; }

#page_navigation li a:hover, #page_navigation li a:focus, #codematurgy a:hover, #codematurgy a:focus { text-decoration:underline; }

/* colors */

body { background-color:{BackgroundColor}; } /* background color. i'm using the tumblr background variable since the topbar on mobile will match this color. */

a, .followed_username { color:{AccentColor}; }
#page_title { background-color:{AccentColor}; } /* main accent color. i'm using the tumblr accent variable to get it but it's up to you if you want to keep it. */

body { color:#9a9a9a; } /* font color. suggestions are #808080 for a light theme and #9a9a9a for a dark one. */

#page_title { color:white; } /* color for text over accent color, in the "following" header. it's probably white if you put a vibrant color as an accent color, but if you go for something too light just change this to black. if you feel like it can match the default text, you can just put inherit. */

#page_navigation li a, #codematurgy a { color:inherit; } /* color for links, both on header navigation and bottom credit. if you feel like it can match the default text, you can just put "inherit". */

#not_following_message, .followed_text { background-color:#161616; } /* basic block background color. suggestions are #ffffff for a light theme and #161616 for a dark one. */

.followed_portrait, #page_navigation li, #codematurgy { background-color:#212121; } /* portrait background color. suggestions are #dfdfdf for a light theme and #212121 for a dark one. */

/* a tip: if you want a color slightly darker than the background, instead of picking its hexcode you can just write rgba(0, 0, 0, 0.3), generating a semi-transparent dark background. then, adjust 0.3(the opacity) to the desired level from 0 to 1. */

</style>

</head>

<body>

<div id="content">

    <div id="page_header">

        <h1 id="page_title">{lang:Following}</h1>

        <ul id="page_navigation">
            <span class="screen_reader_sentences">{lang:Navigate}</span>
            <li><a href="{BlogURL}" class="universal_sentences">{lang:Home}</a></li>
            <li><a href="{BlogURL}archive" class="universal_sentences">{lang:Archive}</a></li>
            {block:AskEnabled}<li><a href="{BlogURL}ask">{AskLabel}</a></li>{/block:AskEnabled}
            {block:SubmissionsEnabled}<li><a href="{BlogURL}submit">{SubmitLabel}</a></li>{/block:SubmissionsEnabled}
            {block:HasPages}{block:Pages}<li><a href="{URL}">{Label}</a></li>{/block:Pages}{/block:HasPages}
        </ul>

    </div>

    <div id="not_following_message">{lang:This Tumblr hasnt followed any other Tumblrs}</div>

    {block:Following}<ul id="following_list">
        {block:Followed}<li class="followed_block"><div class="followed_portrait" aria-hidden="true"><img src="{FollowedPortraitURL-64}"/></div><div class="followed_text"><a href="{FollowedURL}"><div class="followed_username">{FollowedName}</div><div class="followed_title">{FollowedTitle}</div></a></div></li>{/block:Followed}
    </ul>{/block:Following}

    <div id="credit_footer">
        <span id="codematurgy"><a href="https://codematurgy.tumblr.com">codematurgy</a></span>
    </div>

</div>

</body>

</html>