myrtillenne

29/10/2016

rosecarmine

Live preview
Features:

side image (set to "cover")
side icon (200x200px)
navigation links, links list, custom text
comment pages
icon pages

Code:

/*-------------------------------------

- layout - marbles (tabula rasa) - https://myrtillenne.dreamwidth.org
- icon font - material icons - https://material.io
- background image - https://unsplash.com

/*--------------- options ---------------*/

:root {
  --text-size: 16px;
  --text-color: #27465a;
  --line-height: 1.5;
  --background-color: #f7f9fb;
  --link-color: #039fc0;
  --link-hover-color: #3772b3;
  --main-font: Roboto, sans-serif;
  --title-font: Shadows Into Light Two, sans-serif;
  --subtitle-font: Montserrat Subrayada, sans-serif;
  --title-color: #27465a;
  --title-shadow-color: #f7f9fb;
  --content-width: 1000px;
  --entry-border-color: #4b8c9c;
  --entry-icon-color: #f7f9fb;
  --entry-icon-background-color: #4b8c9c;
  --entry-icon-background-hover-color: #27465a;
  --customtext-height: 10.5em;
  --sidebar-background-image: url("https://rosecarmine.dreamwidth.org/file/105485.jpg");
  --sidebar-icon: url("https://rosecarmine.dreamwidth.org/file/105313.jpg");
  --sidebar-border-color: #27465a;
  --sidebar-icon-color: #f7f9fb;
  --sidebar-icon-background-color: #27465a;
  --sidebar-icon-background-hover-color: #4b8c9c;
}

/*--------------- fonts ---------------*/

@font-face {
  font-family: "Material Icons";
  font-style: normal;
  font-weight: 400;
  src: url("https://fonts.gstatic.com/s/materialicons/v48/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2")
    format("woff2");
}

/*--------------- general ---------------*/

H1,
H2,
H3 {
  margin: 0.25em 0;
  padding: 0.25em 0;
}

img {
  border: none;
}

hr {
  display: none;
}

body {
  color: var(--text-color);
  background: var(--background-color);
  border: 0;
  font-family: var(--main-font);
  font-size: var(--text-size);
  line-height: var(--line-height);
  margin: 0;
}

/*--------------- links ---------------*/

a {
  color: var(--link-color);
}
a:visited {
  color: var(--link-color);
}
a:hover {
  color: var(--link-hover-color);
}
a:active {
  color: var(--link-color);
}

a,
a:link,
a:visited {
  text-decoration: none;
  transition: color 0.4s, background-color 0.4s;
}

blockquote {
  margin: 2em 0 1em;
  border: 1px solid var(--entry-border-color);
  padding: 1em;
  position: relative;
}

blockquote:before {
  content: "format_quote";
  font-family: Material Icons;
  position: absolute;
  font-size: 22px;
  top: -20px;
  left: 50%;
  margin-left: -20px;
  border-radius: 50%;
  color: var(--entry-icon-color);
  background: var(--entry-icon-background-color);
  width: 30px;
  height: 30px;
  line-height: 30px;
  border: 5px solid var(--background-color);
  text-align: center;
}

/*--------------- content layout ---------------*/

#canvas {
  margin: 30px 0;
}

@media (min-width: 600px) {
  #canvas {
    padding: 0 50px;
    margin: 50px 0;
  }
}

@media (min-width: 800px) {
  #canvas {
    margin-left: 36vw;
  }

#content {
    margin: 0 auto;
    max-width: var(--content-width);
  }
}

/*--------------- header ---------------*/

#header {
  padding: 0 2em;
  text-align: center;
  color: var(--text-color);
}

@media (min-width: 800px) {
  #header {
    position: fixed;
    left: 0;
    top: 0;
    background-image: var(--sidebar-background-image);
    background-size: cover;
    background-position: center center;
    width: 36vw;
    height: 100%;
    display: table;
    padding: 0;
    color: var(--title-color);
    text-shadow: 1px 1px 0 var(--title-shadow-color),
      -1px -1px 0 var(--title-shadow-color);
  }

#header > .inner {
    display: table-cell;
    vertical-align: middle;
    padding: 20px 5% 50px;
    border-right: 7px solid var(--sidebar-border-color);
  }

h1#title:before {
    content: "";
    display: block;
    width: 200px;
    height: 200px;
    border-radius: 200px;
    border: 7px solid var(--sidebar-border-color);
    margin: 0 auto 20px;
    background: var(--sidebar-icon);
  }

h1#title span:before {
    content: "";
    display: block;
    width: calc(50% - 120px);
    height: 1px;
    background: var(--sidebar-border-color);
    position: absolute;
    top: 107px;
    left: 0;
  }

h1#title span:after {
    content: "";
    display: block;
    width: calc(50% - 120px);
    height: 1px;
    background: var(--sidebar-border-color);
    position: absolute;
    top: 107px;
    right: 0;
  }
}

h1#title {
  font-family: var(--title-font);
  font-weight: normal;
  padding: 0;
  position: relative;
}

h1#title a {
  color: inherit;
}

h2#subtitle {
  font-family: var(--subtitle-font);
  font-weight: normal;
  text-transform: uppercase;
  font-size: 1em;
  letter-spacing: 2px;
  padding: 0;
}

h2#pagetitle {
  display: none;
}

/*------------ modules ------------*/

.module-section-one {
  margin: 30px 0;
}

.module {
  margin: 1.5em 2em;
}

@media (min-width: 600px) {
  .module {
    margin: 1.5em 0;
  }
}

.module-content ul {
  margin: 0;
  padding: 0;
  text-align: center;
}

.module-content li {
  margin: 0;
  display: inline-block;
}

.module-navlinks {
  text-align: center;
  position: relative;
}

.module-navlinks:before {
  content: "";
  position: absolute;
  top: 25px;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--sidebar-border-color);
  z-index: -1;
}

.module-navlinks li {
  margin: 0 5px;
  vertical-align: top;
}

.module-navlinks li a {
  display: block;
  width: 40px;
  height: 40px;
  padding: 0;
  background-color: var(--sidebar-icon-background-color);
  border: 5px solid var(--background-color);
  border-radius: 50%;
  overflow: hidden;
  text-align: center;
}

.module-navlinks li a:before {
  display: block;
  font-family: Material Icons;
  font-size: 22px;
  height: 40px;
  width: 40px;
  line-height: 40px;
  color: var(--entry-icon-color);
}

.module-navlinks li a:hover {
  background-color: var(--sidebar-icon-background-hover-color);
}

.list-item-recent a:before {
  content: "home";
}

.list-item-archive a:before {
  content: "folder";
}

.list-item-read a:before {
  content: "library_books";
}

.list-item-tags a:before {
  content: "style";
}

.list-item-network a:before {
  content: "wifi";
}

.list-item-memories a:before {
  content: "folder_special";
}

.list-item-userinfo a:before {
  content: "person";
}

.module-navlinks li a:after {
  margin: 35px 0 0 15px;
}

.module-typelist {
  text-transform: uppercase;
}

.module-typelist li {
  font-family: var(--subtitle-font);
  padding: 0 0.25em;
}

.module-customtext .module-content {
  max-height: var(--customtext-height);
  overflow: auto;
}

@media (min-width: 800px) {
  .module-customtext .module-content {
    text-align: justify;
  }
}

.module-customtext .module-content::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

.module-customtext .module-content::-webkit-scrollbar-track {
  background: transparent;
}

.module-customtext .module-content::-webkit-scrollbar-thumb {
  background: var(--entry-border-color);
}

.module-customtext .module-content::-webkit-scrollbar-corner {
  background: transparent;
}

.module h2,
.module .manage-link,
.module-userprofile,
.module-calendar,
.module-tags_list,
.module-tags_multilevel,
.module-tags_cloud,
.module-cuttagcontrols,
.module-pagesummary,
.module-active,
.module-credit,
.module-syndicate,
.module-subscriptionfilters,
.module-search,
.module-time,
.module-powered {
  display: none;
}

/*--------------- entries ---------------*/

.entry-wrapper,
.comment-wrapper {
  margin: 30px 0;
}

.separator {
  clear: both;
}

.has-userpic.entry-wrapper .separator-before {
  height: 43px;
}

.entry,
.full .comment {
  border: 1px solid var(--entry-border-color);
  padding: 2em 2em 0;
  background: transparent;
  position: relative;
}

.has-userpic .entry > .inner:first-child,
.has-userpic.full .comment > .inner:first-child {
  padding-top: 30px;
}

.header {
  text-align: center;
}

.sticky-entry-icon,
.admin-post-icon {
  display: none;
}

.entry .entry-title {
  font-family: var(--title-font);
  font-size: 1.5em;
  font-weight: normal;
  line-height: 1.2;
  margin: 0 0 0.5em;
  padding: 0;
}

.entry .entry-title a {
  color: var(--text-color);
}

.restrictions,
.access-filter {
  font-family: var(--subtitle-font);
}

.restrictions img,
.access-filter img {
  display: none;
}

.security-protected .access-filter:before {
  content: "LOCKED";
}

.security-private .access-filter:before {
  content: "PRIVATE";
}

.restrictions-NSFW .restrictions:before {
  content: "NSFW";
}

.restrictions-18 .restrictions:before {
  content: "18+";
}

.header .datetime {
  text-transform: uppercase;
  font-family: var(--subtitle-font);
}

.header .datetime a {
  color: var(--text-color);
}

.has-userpic .userpic {
  width: 85px;
  height: 85px;
  padding: 0 15px;
  position: absolute;
  top: -43px;
  left: 50%;
  margin-left: -58px;
  background: var(--background-color);
  justify-content: center;
  display: flex;
  align-items: center;
}

.userpic img {
  display: block;
  border: 5px solid var(--entry-border-color);
  border-radius: 50%;
  height: auto;
  width: auto;
  max-width: 75px;
  max-height: 75px;
}

.entry .poster {
  font-size: 0;
  display: block;
  text-align: center;
  line-height: 1;
}

.entry .poster .ljuser {
  font-size: var(--text-size);
}

.entry .poster .ljuser:nth-child(1):before {
  content: "- Written by ";
}

.entry .poster .ljuser:nth-child(2):before {
  content: "in ";
  padding-left: 0.25em;
}

.entry .poster .ljuser:last-child:after {
  content: " -";
}

.poster .ljuser img {
  display: none;
}

.poster .ljuser b {
  font-weight: normal;
}

.poster.empty {
  display: none;
}

.entry .contents,
.comment .contents {
  margin-top: 2em;
}

.entry-content,
.comment-content {
  margin: 2em 0;
}

.entry-content ol,
.comment-content ol,
.entry-content ul,
.comment-content ul {
  padding-left: 1em;
}

@media (min-width: 800px) {
  .entry-content {
    text-align: justify;
  }
}

.entry-content img,
.comment-content img {
  max-width: 100%;
  height: auto;
}

.metadata-label,
.entry .tag-text {
  font-weight: bold;
}

.metadata ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.metadata li {
  margin-bottom: 0.5em;
}

.tag ul {
  margin: 0;
  padding: 0;
  display: inline;
}

.tag ul li {
  display: inline;
}

.tag-nav-trigger {
  vertical-align: middle;
}

ul.entry-management-links {
  text-align: center;
  margin: 1.5em 0;
  padding: 0;
  line-height: 1;
}

ul.entry-management-links.text-links {
  font-family: var(--subtitle-font);
  text-transform: uppercase;
}

ul.entry-management-links.icon-links {
  margin-bottom: -17px;
}

ul.entry-management-links li {
  display: inline;
  padding: 0 0.25em;
}

ul.entry-management-links.icon-links li {
  display: inline-block;
  margin: 0 3px;
  padding: 0 5px;
  background: var(--background-color);
}

ul.entry-management-links.icon-links li a {
  width: 32px;
  height: 32px;
  display: block;
  line-height: 32px;
  background-color: var(--entry-icon-background-color);
  border-radius: 50%;
  color: var(--entry-icon-color);
}

ul.entry-management-links.icon-links li a:before {
  display: block;
  font-family: Material Icons;
  font-size: 22px;
}

ul.entry-management-links.icon-links li a:hover {
  background-color: var(--entry-icon-background-hover-color);
}

ul.entry-management-links li a img {
  display: none;
}

.icon-links .link_prev a:before {
  content: "skip_previous";
}

.icon-links .edit_entry a:before {
  content: "edit";
}

.icon-links .edit_tags a:before {
  content: "label";
}

.icon-links .mem_add a:before {
  content: "bookmark";
}

.icon-links .tell_friend a:before {
  content: "mail";
}

.icon-links .watch_comments a:before {
  content: "notifications";
}

.icon-links .link_next a:before {
  content: "skip_next";
}

ul.entry-interaction-links {
  float: left;
  width: 100%;
  margin: 30px 0 0;
  padding: 0;
  font-family: var(--subtitle-font);
  text-align: center;
  text-transform: uppercase;
  line-height: 1;
}

ul.entry-interaction-links li {
  display: inline;
  padding: 0 0.25em;
}

.entry-interaction-links a,
.entry-management-links a {
  color: var(--text-color);
}
.entry-interaction-links a:hover,
.entry-management-links a:hover {
  color: var(--link-color);
}

/*--------------- comments ---------------*/

.comment-pages {
  text-align: center;
  margin: 30px 0;
  border-top: 1px solid var(--entry-border-color);
  border-bottom: 1px solid var(--entry-border-color);
  padding: 1em;
  font-family: var(--subtitle-font);
}

.has-userpic.comment-wrapper .separator-before {
  height: 43px;
}

.comment-wrapper {
  min-width: 15em;
}

.partial .comment {
  padding: 1em;
  border: 1px solid var(--entry-border-color);
}

.thread-depth {
  display: block;
  margin-bottom: 1em;
}

.full .comment-title {
  font-family: var(--title-font);
  font-size: 1.5em;
  font-weight: normal;
  line-height: 1.2;
  padding-bottom: 0.5em;
}

.comment .comment-title {
  margin: 0;
}

.no-subject .comment .comment-title {
  padding: 0;
}

.comment-title a {
  color: var(--text-color);
}

.comment-date-text {
  display: none;
}

.full .comment .poster {
  display: block;
  text-align: center;
  line-height: 1;
}

.full .comment .poster:before {
  content: "- ";
}

.full .comment .poster:after {
  content: " -";
}

.poster-ip {
  display: block;
  text-align: center;
}

.multiform-checkbox {
  display: block;
}

ul.comment-management-links {
  text-align: center;
  margin: 1.5em 0;
  padding: 0;
  line-height: 1;
}

ul.comment-management-links.text-links {
  font-family: var(--subtitle-font);
  text-transform: uppercase;
}

ul.comment-management-links li {
  display: inline;
  padding: 0 0.25em;
}

ul.comment-management-links.icon-links {
  margin-bottom: -17px;
}

ul.comment-management-links.icon-links li {
  display: inline-block;
  margin: 0 3px;
  padding: 0 5px;
  background: var(--background-color);
}

ul.comment-management-links.icon-links li a {
  width: 32px;
  height: 32px;
  display: block;
  line-height: 32px;
  color: var(--entry-icon-color);
  background-color: var(--entry-icon-background-color);
  border-radius: 50%;
}

ul.comment-management-links.icon-links li a:hover {
  background-color: var(--entry-icon-background-hover-color);
}

ul.comment-management-links li a img {
  display: none;
}

ul.comment-management-links.icon-links li a:before {
  display: block;
  font-family: Material Icons;
  font-size: 22px;
}

.icon-links .edit_comment a:before {
  content: "edit";
}

.icon-links .delete_comment a:before {
  content: "delete_forever";
}

.icon-links .screen_comment a:before {
  content: "visibility_off";
}

.icon-links .unscreen_comment a:before {
  content: "visibility";
}

.icon-links .freeze_thread a:before {
  content: "ac_unit";
}

.icon-links .unfreeze_thread a:before {
  content: "wb_sunny";
}

ul.comment-interaction-links {
  float: left;
  width: 100%;
  margin: 30px 0 0;
  padding: 0;
  font-family: var(--subtitle-font);
  text-align: center;
  text-transform: uppercase;
  line-height: 1;
}

ul.comment-interaction-links li {
  display: inline;
  margin: 0 0.25em;
}

.comment-interaction-links a,
.comment-management-links a {
  color: var(--text-color);
}
.comment-interaction-links a:hover,
.comment-management-links a:hover {
  color: var(--link-color);
}

#comments ul.entry-interaction-links {
  display: none;
}

#comments ul.entry-management-links {
  display: none;
}

.comment-pages.bottompages {
  display: none;
}

.bottomcomment {
  text-align: center;
}

#qrformdiv {
  right: 0 !important;
  min-width: 100% !important;
  padding: 0;
  float: left;
  margin: 30px -2em 0;
  border: 1px solid var(--entry-border-color);
  clear: both;
}

.page-reply #qrformdiv {
  margin: 0;
}

#qrform {
  padding: 2em;
}

#qrdiv input,
#qrdiv select,
#qrdiv textarea {
  border: 1px solid var(--entry-border-color);
  background: var(--background-color);
  color: var(--text-color);
  font-family: var(--main-font);
  font-size: var(--text-size);
}

#qrdiv input[type="button"],
#qrdiv input[type="submit"] {
  background: transparent;
  border: 0;
  font-family: var(--subtitle-font);
  font-size: var(--text-size);
  padding: 0.5em;
  color: var(--link-color);
  text-transform: uppercase;
  line-height: 1;
}

#postform {
  padding: 2em;
  clear: both;
}

/*------------ archive, tags, icons containers ------------*/

.page-archive div.month,
.tags-container,
.icons-container {
  border: 1px solid var(--entry-border-color);
  padding: 2em 2em 0;
  margin-top: 40px;
  position: relative;
}

.page-archive div.month:before,
.tags-container:before,
.icons-container:before {
  font-family: Material Icons;
  position: absolute;
  font-size: 22px;
  top: -21px;
  left: 50%;
  margin-left: -21px;
  border-radius: 50%;
  color: var(--entry-icon-color);
  background: var(--entry-icon-background-color);
  width: 32px;
  height: 32px;
  line-height: 32px;
  border: 5px solid var(--background-color);
  text-align: center;
}

.page-archive div.month:before {
  content: "date_range";
}

.tags-container:before {
  content: "style";
}

.icons-container:before {
  content: "image";
}

.month-wrapper h3,
.header h2 {
  font-weight: normal;
  font-family: var(--title-font);
  font-size: 1.5em;
  line-height: 1;
  padding: 0;
  margin: 0;
}

.month-wrapper .contents,
.tags-container .contents,
.icons-container .contents {
  padding: 2em 0;
}

.month-wrapper .footer,
#primary .manage-link {
  float: left;
  width: 100%;
  font-family: var(--subtitle-font);
  text-align: center;
  text-transform: uppercase;
  margin-top: 30px;
}

.month-wrapper .footer a,
#primary .manage-link a {
  color: var(--text-color);
}

.month-wrapper .footer a:hover,
#primary .manage-link a:hover {
  color: var(--link-color);
}

/*------------ archive------------*/

.day-date {
  display: none;
}

.month caption {
  display: none;
}

table.month {
  width: 100%;
  text-align: center;
}

table.month th {
  font-family: var(--subtitle-font);
  text-transform: uppercase;
  height: 3em;
}

table.month td {
  border-top: 1px solid var(--entry-border-color);
  height: 3em;
}

td.day-has-entries .label {
  font-weight: bold;
}

table.month td .label,
table.month td p {
  display: inline-block;
  margin: 0;
}

table.month td p:before {
  content: "( ";
}

table.month td p:after {
  content: " )";
}

.month dl dt {
  line-height: 1;
  text-align: center;
  margin-bottom: -35px;
}

.month dl dt a {
  color: var(--entry-icon-color);
  display: inline-block;
  height: 50px;
  width: 50px;
  background: var(--entry-icon-background-color);
  line-height: 50px;
  border-radius: 50%;
  border: 10px solid var(--background-color);
}

.month dd {
  margin: 0;
  border: 1px solid var(--entry-border-color);
  padding: 2em;
}

.month dl .time {
  padding-right: 0.5em;
}

.month dl h3 {
  display: inline;
  font-size: 1em;
}

.page-month .month .entry-poster {
  margin-right: 0.5em;
}

.month dd br {
  display: block;
}

.page-archive .navigation ul:before {
  content: "";
  position: absolute;
  top: 30px;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--sidebar-border-color);
  z-index: -1;
}

.page-archive .navigation li {
  color: var(--sidebar-icon-color);
  display: inline-block;
  height: 50px;
  width: 50px;
  background: var(--sidebar-icon-background-color);
  line-height: 50px;
  border-radius: 50%;
  border: 5px solid var(--background-color);
  margin: 0 3px;
  transition: background-color 0.4s;
}

.page-archive .navigation li:hover {
  background: var(--sidebar-icon-background-hover-color);
}

.page-archive .navigation li.active {
  background: var(--sidebar-icon-background-hover-color);
}

.page-archive .navigation a {
  color: var(--sidebar-icon-color);
}

/*------------ tags ------------*/

ul.ljtaglist {
  padding: 0;
  margin-left: 1em;
  list-style: inside;
}

ul.ljtaglist:first-child,
.tags_cloud ul {
  padding: 0;
  margin: 0;
}

/*------------ icons page ------------*/

.page-icons .toppages {
  display: none;
}

.page-icons .bottompages {
  text-align: center;
  padding-top: 1.5em;
  border-top: 1px solid var(--entry-border-color);
}

.icon {
  border-top: 1px solid var(--entry-border-color);
  display: flex;
}

.icon-image {
  border-right: 1px solid var(--entry-border-color);
  padding: 0.5em;
}

.icon-image img {
  display: block;
}

.icon-info {
  text-transform: lowercase;
  padding: 1.5em;
}

.icon-info div span {
  font-style: normal;
}

.default.label {
  font-size: 0;
}

.default.label:before {
  content: "star";
  font-family: Material Icons;
  font-size: 22px;
  font-style: normal;
  vertical-align: top;
  line-height: 22px;
  color: var(--text-color);
}

.sorting-options ul {
  margin: 0;
  padding: 0 0 1.5em;
  text-align: center;
}

.sorting-options ul li {
  display: inline;
}

.icon-keywords ul {
  display: inline;
  margin-left: 0;
  padding-left: 0;
}

.icon-keywords ul li {
  display: inline;
}

.icon-pages p {
  margin: 0;
}

/*------------ navigation ------------*/

.navigation .page-separator,
.topnav {
  display: none;
}

.navigation {
  text-align: center;
}

.navigation ul {
  margin: 2em;
  padding: 0;
  position: relative;
  line-height: 1;
}

@media (min-width: 600px) {
  .navigation ul {
    margin: 30px 0;
  }
}

#entries .navigation ul:before {
  content: "";
  position: absolute;
  top: 15px;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--sidebar-border-color);
  z-index: -1;
}

.navigation li {
  display: inline-block;
  margin: 0 2px;
  padding: 0;
  vertical-align: top;
}

li.page-back,
li.page-forward {
  padding: 0 5px;
  background: var(--background-color);
}

li.page-back a,
li.page-forward a {
  display: block;
  font-size: 0;
  width: 32px;
  height: 32px;
  padding: 0;
  color: var(--sidebar-icon-color);
  background-color: var(--sidebar-icon-background-color);
  border-radius: 50%;
  overflow: hidden;
}

#entries .navigation li a:before {
  display: block;
  font-family: Material Icons;
  font-size: 22px;
  vertical-align: middle;
  height: 32px;
  width: 32px;
  line-height: 32px;
  text-align: center;
}

li.page-back a:before {
  content: "arrow_back";
}

li.page-forward a:before {
  content: "arrow_forward";
}

li.page-back a:hover,
li.page-forward a:hover {
  background-color: var(--sidebar-icon-background-hover-color);
}

.navigation.empty,
.noentries {
  display: none;
}

/*--------------- footer ---------------*/

#footer {
  text-align: center;
  margin: 2em;
  position: relative;
}

@media (min-width: 600px) {
  #footer {
    margin: 30px 0;
  }
}

@media (min-width: 800px) {
  #footer {
    width: 36vw;
    position: fixed;
    left: 0;
    bottom: 50px;
    margin: 0;
  }

#footer .inner {
    border-right: 7px solid transparent;
    margin: 0 5%;
  }
}

.page-top {
  display: flex;
  align-items: center;
}

.page-top:before {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--sidebar-border-color);
}

.page-top:after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--sidebar-border-color);
}

.page-top a {
  display: block;
  width: 32px;
  height: 32px;
  background: var(--sidebar-icon-background-color);
  color: var(--sidebar-icon-color);
  border-radius: 50%;
  margin: 0 10px;
  overflow: hidden;
}

.page-top a:hover {
  background: var(--sidebar-icon-background-hover-color);
}

.page-top a:before {
  content: "arrow_upward";
  display: block;
  font-family: Material Icons;
  font-size: 22px;
  vertical-align: middle;
  height: 32px;
  width: 32px;
  line-height: 32px;
  text-align: center;
}

/*------------ contextual pop-up ------------*/

div.ContextualPopup {
  background: var(--background-color);
  color: var(--text-color);
  font-family: arial, sans-serif;
  border: 0;
  width: 200px;
  text-align: center;
  padding: 1em;
}

.ContextualPopup a {
  color: var(--link-color);
}

.ContextualPopup a:hover {
  color: var(--link-hover-color);
}

div.ContextualPopup .Relation {
  font-family: var(--subtitle-font);
  text-transform: uppercase;
  font-size: 1em;
  margin: 1em 0;
  font-weight: normal;
}

div.ContextualPopup .Userpic {
  border: 0;
  float: none;
}

div.ContextualPopup .Userpic img {
  border: 5px solid var(--entry-border-color);
  border-radius: 50%;
}

.ContextualPopup .Actions ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

/*------------ control strip ------------*/

#lj_controlstrip {
  background: var(--background-color);
  color: var(--text-color);
  justify-content: center;
  padding-top: 0.75em;
  width: auto;
}

@media (min-width: 800px) {
  #lj_controlstrip {
    padding-left: 36vw;
  }
}

#lj_controlstrip > div {
  font-family: var(--main-font);
  font-size: var(--text-size);
  line-height: var(--line-height);
  padding: 0.25em 0.5em;
  flex-grow: 0;
}

#lj_controlstrip a {
  font-family: var(--main-font);
  color: var(--link-color);
}

#lj_controlstrip a:hover {
  color: var(--link-hover-color);
  text-decoration: none;
}

#lj_controlstrip_actionlinks {
  text-align: center;
}

#lj_controlstrip_statustext {
  color: var(--text-color);
  font-weight: normal;
  font-size: var(--text-size);
}

#lj_controlstrip_search {
  text-align: right;
}

#lj_controlstrip input,
#lj_controlstrip select {
  border: 1px solid var(--entry-border-color);
  background: var(--background-color) !important;
  font-size: var(--text-size) !important;
  color: var(--text-color) !important;
  font-family: var(--main-font) !important;
}

#lj_controlstrip input[type="submit"] {
  border: 0;
  background: transparent;
  text-transform: uppercase;
  font-family: var(--subtitle-font) !important;
  padding: 0.25em;
}

#lj_controlstrip .ljuser b {
  font-weight: normal;
}

#lj_controlstrip .ljuser img {
  display: none;
}

#lj_controlstrip_user,
#lj_controlstrip_login,
#lj_controlstrip_actionlinks {
  border: 0;
}

#lj_controlstrip_userpic a img {
  border: 5px solid var(--entry-border-color);
  border-radius: 50%;
}

How to install:

Go to the "Select style" page, search for "Tabula Rasa" and apply any theme.
Choose the "1 Column (modules at top and bottom; no sidebar)" page setup.
Go to the "Customize your theme" page, click on the "Custom CSS" tab and paste the code into the "Use embeded CSS" field. Uncheck "Use layout's stylesheet(s)". Copy and paste the following https://fonts.googleapis.com/css2?family=Roboto&family=Shadows+Into+Light+Two&family=Montserrat+Subrayada&display=swap into the "Custom stylesheet URL" field.
Click on the "Modules" tab. Set "Navigation" to number 2, "Custom text" to number 3, "Links list" to number 4. Uncheck the other modules.

Resources:

icon font by Google
image from unsplash.com

Tags:

rosecarmine

FEATURES

250 - 500px wide posts
popup menu containing avatar, description, links and search
page links and 8 extra links
show/hide captions and tags on index page
like and reblog links on index page
pagination or infinite scroll (with optional manual load)
font size and google fonts of your choice
optional sidebar image
optional subtitle
custom photoset lightbox

CODE

<!DOCTYPE html>
<html>
<head>

<title>{Title}</title>
<link rel="shortcut icon" href="{Favicon}">
<link rel="alternate" type="application/rss+xml" href="{RSS}">
{block:ifMainGoogleFont}<link href="https://fonts.googleapis.com/css?family={text:Main Google Font}" rel="stylesheet" type="text/css">{/block:ifMainGoogleFont}
{block:ifSecondaryGoogleFont}<link href="https://fonts.googleapis.com/css?family={text:Secondary Google Font}" rel="stylesheet" type="text/css">{/block:ifSecondaryGoogleFont}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css"/>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<link href="https://static.tumblr.com/vywm3oc/SKaog4f6h/style.css" rel="stylesheet" type="text/css">
{block:Description}
<meta name="description" content="{MetaDescription}" />
{/block:Description}
<meta name="image:Sidebar Image" content="https://static.tumblr.com/c42c7a3ea24d0a983d5c40d7506c7004/vywm3oc/7vlofrhmd/tumblr_static_8frli08qjuccog8ww808ooc80.jpg"/>
<meta name="image:Sidebar Background" content="https://static.tumblr.com/59ad6dddc427f03991588236ae579178/vywm3oc/q5Bofrhme/tumblr_static_9m0ya22wsoco4000coco4kggw.jpg"/>
<meta name="color:Background" content="#fcfbf7"/>
<meta name="color:Text" content="#806152"/>
<meta name="color:Link" content="#e38044"/>
<meta name="color:Link Hover" content="#e87362"/>
<meta name="color:Title" content="#806152"/>
<meta name="color:Subtitle" content="#806152"/>
<meta name="color:Sidebar Background" content="#fcfbf7"/>
<meta name="color:Sidebar Border" content="#bf7f63"/>
<meta name="color:Sidebar Link" content="#fcfbf7"/>
<meta name="color:Sidebar Link Hover" content="#fff"/>
<meta name="color:Sidebar Link Background" content="#e49463"/>
<meta name="color:Sidebar Link Background Hover" content="#ea8971"/>
<meta name="color:Post Border" content="#e3c6b9"/>
<meta name="color:Post Footer Link" content="#fcfbf7"/>
<meta name="color:Post Footer Link Hover" content="#fff"/>
<meta name="color:Post Footer Background" content="#f8c09e"/>
<meta name="color:Post Footer Background Hover" content="#f9b5a6"/>
<meta name="color:Navigation Border" content="#e3c6b9"/>
<meta name="color:Navigation Link" content="#fcfbf7"/>
<meta name="color:Navigation Link Hover" content="#fff"/>
<meta name="color:Navigation Background" content="#f8c09e"/>
<meta name="color:Navigation Background Hover" content="#f9b5a6"/>
<meta name="color:Photoset Background" content="#fff"/>
<meta name="color:Photoset Controls" content="#fff"/>
<meta name="color:Tooltip Background" content="#fff"/>
<meta name="color:Tooltip Text" content="#806152"/>
<meta name="text:Subtitle" content=""/>
<meta name="text:Sidebar Width" content="36vw"/>
<meta name="text:Body Font Size" content="12"/>
<meta name="text:Title Font Size" content="28"/>
<meta name="text:Subtitle Font Size" content="14"/>
<meta name="text:Post Title Font Size" content="20"/>
<meta name="text:Post Spacing" content="30"/>
<meta name="text:Photoset Spacing" content="2">
<meta name="text:Main Google Font" content=""/>
<meta name="text:Secondary Google Font" content="Playball"/>
<meta name="text:Link 1 Title" content=""/>
<meta name="text:Link 1 URL" content="http://"/>
<meta name="text:Link 2 Title" content=""/>
<meta name="text:Link 2 URL" content="http://"/>
<meta name="text:Link 3 Title" content=""/>
<meta name="text:Link 3 URL" content="http://"/>
<meta name="text:Link 4 Title" content=""/>
<meta name="text:Link 4 URL" content="http://"/>
<meta name="text:Link 5 Title" content=""/>
<meta name="text:Link 5 URL" content="http://"/>
<meta name="text:Link 6 Title" content=""/>
<meta name="text:Link 6 URL" content="http://"/>
<meta name="text:Link 7 Title" content=""/>
<meta name="text:Link 7 URL" content="http://"/>
<meta name="text:Link 8 Title" content=""/>
<meta name="text:Link 8 URL" content="http://"/>
<meta name="text:Website URL" content="http://"/>
<meta name="text:Email Address" content="mailto:"/>
<meta name="text:Facebook URL" content="http://www.facebook.com/"/>
<meta name="text:Twitter URL" content="http://twitter.com/"/>
<meta name="text:Instagram URL" content="http://www.instagram.com/"/>
<meta name="select:Main Font" content="arial, sans-serif" title="Arial"/>
<meta name="select:Main Font" content="georgia, serif" title="Georgia"/>
<meta name="select:Main Font" content="Palatino, 'Palatino Linotype', serif" title="Palatino"/>
<meta name="select:Main Font" content="Times, 'Times New Roman', serif" title="Times New Roman"/>
<meta name="select:Main Font" content="courier, monospace" title="Courier"/>
<meta name="select:Main Font" content="lucida console, monospace" title="Lucida Console"/>
<meta name="select:Main Font" content="verdana, sans-serif" title="Verdana"/>
<meta name="select:Sidebar Background Size" content="cover" title="cover">
<meta name="select:Sidebar Background Size" content="auto" title="default">
<meta name="select:Post Size" content="500" title="500px">
<meta name="select:Post Size" content="450" title="450px">
<meta name="select:Post Size" content="400" title="400px">
<meta name="select:Post Size" content="350" title="350px">
<meta name="select:Post Size" content="300" title="300px">
<meta name="select:Post Size" content="250" title="250px">
<meta name="select:Text Align" content="left" title="left">
<meta name="select:Text Align" content="justify" title="justify">
<meta name="if:Sidebar Image" content="1">
<meta name="if:Always Show Caption" content="1">
<meta name="if:Always Show Tags" content="0">
<meta name="if:Infinite Scroll" content="0">
<meta name="if:Manual Load" content="0">
<style>
body{
    line-height:1.5;
    font-size:{text:Body Font Size}px;
    font-family:{block:ifMainGoogleFont}{text:Main Google Font}, {/block:ifMainGoogleFont}{select:Main Font};
    background:{color:Background};
    color:{color:Text};
    margin:0;
    overflow-y:scroll;
}

::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}

::-webkit-scrollbar-button {
  width: 0;
  height: 0;
}

::-webkit-scrollbar-thumb {
  background: {color:Sidebar Border};
  border: 0;
}

::-webkit-scrollbar-track {
  background: {color:Background};
  border: 0;
}

::-webkit-scrollbar-corner {
  background: transparent;
}

a{
    color:{color:Link};
    text-decoration:none;
    transition:color 0.4s, background 0.4s;
}

a:hover{
    color:{color:Link Hover};
}

a img{
     border:0;
}

blockquote:not(.instagram-media){
    border-left:1px solid {color:Post Border};
    padding-left:1em;
    margin-left:0;
    margin-right:0;
}

pre{
    white-space:pre-wrap;
}

#sidebar{
    position:fixed;
    left:0;
    top:0;
    background-image:url({image:Sidebar Background});
    background-color:{color:Sidebar Background};
    background-size:{select:Sidebar Background Size};
    background-position:center center;
    width:{text:Sidebar Width};
    min-width:350px;
    height:100%;
    display:table;
    padding:40px 4%;
    border-right:7px solid {color:Sidebar Border};
    box-sizing:border-box;
}

#sidebar .inner{
    display:table-cell;
    vertical-align:middle;
    text-align:center;
    position:relative;
}

#navigation{
    margin:0;
    padding:0;
    width:100%;
    height:40px;
    position:absolute;
    top:0;
    z-index:1;
    display:flex;
    justify-content:center;
}

#navigation li{
    list-style:none;
}

#navigation li a{
    display:block;
    color:{color:Sidebar Link};
    font-size:14px;
    width:40px;
    height:40px;
    line-height:0;
    border-radius:40px;
    background:{color:Sidebar Link Background};
    position:relative;
    margin:0 5px;
}

#navigation li a:hover{
    color:{color:Sidebar Link Hover};
    background:{color:Sidebar Link Background Hover};
}

#navigation li a i{
    line-height:40px;
}

#navigation li  a.hide-menu{
    display:none;
}

.line{
    display:block;
    width:14px;
    height:1px;
    background:{color:Sidebar Border};
}

#navigation .line{
    margin-top:20px;
}

.line2{
    flex:1;
}

#sidebar-image{
    position:relative;
}

#sidebar-image img{
    width:200px;
    height:auto;
    border-radius:50%;
    border:7px solid {color:Sidebar Border};
}

#line3{
    width:calc(50% - 117px);
    height:1px;
    background:{color:Sidebar Border};
    position:absolute;
    top:50%;
    left:0;
}

#line4{
    width:calc(50% - 117px);
    height:1px;
    background:{color:Sidebar Border};
    position:absolute;
    top:50%;
    right:0;
}

h1#title{
    font-size:{text:Title Font Size}px;
    font-family:{block:ifSecondaryGoogleFont}{text:Secondary Google Font}, {/block:ifSecondaryGoogleFont}{select:Main Font};
    line-height:1;
    margin:0.5em 0 0.25em;
    color:{color:Title};
}

h2#subtitle{
    font-size:{text:Subtitle Font Size}px;
    line-height:1;
    margin:0;
    color:{color:Subtitle};
}

#top{
    width:100%;
    height:30px;
    position:absolute;
    bottom:0;
    display:flex;
    justify-content:center;
}

#top .line{
    margin-top:15px;
}

#top a{
    display:block;
    color:{color:Sidebar Link};
    font-size:14px;
    width:30px;
    height:30px;
    line-height:0;
    border-radius:30px;
    background:{color:Sidebar Link Background};
    margin:0 5px;
    float:left;
}

#top a:hover{
    color:{color:Sidebar Link Hover};
    background:{color:Sidebar Link Background Hover};
}

#top a i{
    line-height:30px;
}

#content{
    margin-left:{text:Sidebar Width};
    background:{color:Background};
    position:relative;
    z-index:2;
}

#content .inner{
    margin:0 auto;
    width:calc({select:Post Size}px + 42px);
    padding:0 20px;
    background:{color:Background};
}

#menu{
    display:none;
}

#menu .contents{
    display:table;
    height:100vh;
}

#menu .outer{
    display:table-cell;
    vertical-align:middle;
    padding:40px 0;
}

#menu .box{
    border:1px solid {color:Post Border};
    margin:48px 0 15px;
}

#poster-avatar{
    display:block;
    width:96px;
    height:96px;
    margin:-48px auto 0;
    padding:0 10px;
    background:{color:Background};
}

#poster-avatar img{
    border-radius:96px;
}

#description{
    width:{select:Post Size}px;
    margin:20px;
    text-align:{select:Text Align};
}

#menu h4{
    margin:0;
}

#links{
    width:{select:Post Size}px;
    margin:20px;
}

#links ul{
    margin:0;
    padding:0;
    overflow:hidden;
}

#links li{
    float:left;
    list-style:none;
    width:50%;
    line-height:1.5;
}

#links li a{
    display:block;
    padding:0.5em;
    border-bottom:1px solid {color:Post Border};
}

#links li:nth-child(odd) a{
    margin-right:7px;
}
 
#links li:nth-child(even) a{
    margin-left:7px;
}

#credit{
    clear:left;
}

#credit a{
    margin-right:7px;
    margin-left:0!important;
}

#search input{
    width:100%;
    height:1.5em;
    overflow:visible;
    border:0;
    background:transparent;
    padding:0.5em;
    margin-left:7px;
    color:{color:Text};
    border-bottom:1px solid {color:Post Border};
    font-size:1em;
    font-family:{block:ifMainGoogleFont}{text:Main Google Font}, {/block:ifMainGoogleFont}{select:Main Font};
}

#search input:focus{
    outline: none;
}

#social{
    height:30px;
    text-align:center;
    margin-bottom:-15px;
}

#social ul{
    margin:0;
    padding:0;
    list-style:none;
    display:flex;
    justify-content:center;
}

#social li{
    padding:0 5px;
    margin:0 4px;
    background:{color:Background};
}

#social li a{
    display:block;
    font-size:14px;
    width:30px;
    height:30px;
    line-height:0;
    border-radius:30px;
    color:{color:Post Footer Link};
    background:{color:Post Footer Background};
}

#social li a:hover{
    color:{color:Post Footer Link Hover};
    background:{color:Post Footer Background Hover};
}

#social li a i{
    line-height:30px;
}

#posts-wrapper{
    padding:40px 0;
}

.post-spacing{
    height:{text:Post Spacing}px;
}

.posts:first-child .post-spacing{
    display:none;
}

.posts .box{
    border:1px solid {color:Post Border};
    margin:{block:IndexPage}20px{/block:IndexPage}{block:PermalinkPage}24px{/block:PermalinkPage} 0 15px;
}

.post img, .post iframe{
    display:block;
}

.posts img{
    max-width:100%;
    height:auto;
}

.header{
    {block:IndexPage}height:40px;
    margin-top:-20px;{/block:IndexPage}
    {block:PermalinkPage}height:48px;
    margin-top:-24px;{/block:PermalinkPage}
}

.header ul{
    margin:0;
    padding:0;
    list-style:none;
    display:flex;
    justify-content:center;
}

.header li{
    background:{color:Background};
    padding:0 5px;
    margin:0 7px;
}

.header img{
    border-radius:50%;
    display:block;
}

.post{
    width:{select:Post Size}px;
    margin:20px;
    text-align:{select:Text Align};
}

.post h3.title{
    font-family:{block:ifSecondaryGoogleFont}{text:Secondary Google Font}, {/block:ifSecondaryGoogleFont}{select:Main Font};
    font-size:{text:Post Title Font Size}px;
    line-height:1.2;
}

.post ol, .caption ol, .post ul, .caption ul{
    padding-left:1em;
    list-style-position:inside;
}

.read-more{
    border-top:1px solid {color:Post Border};
    padding:0.5em 0.5em 0;
}

.post.photo img{
    margin:0 auto;
}

.post.photoset img{
    cursor:pointer;
}

.photo-slideshow .count-2 {
    width: calc((100% - {text:Photoset Spacing}px) / 2);
}
 
.photo-slideshow .count-2:first-child{
     margin-right:{text:Photoset Spacing}px;
}
 
.photo-slideshow .count-3 {
    width: calc(33.333333% - {text:Photoset Spacing}px * 2 / 3);
    margin-right:{text:Photoset Spacing}px;
}
 
.photo-slideshow .count-3:last-child{
    margin-right:0;
}
 
.photo-slideshow .row{
    margin-bottom:{text:Photoset Spacing}px!important;
}
 
.photo-slideshow .row:last-child{
    margin-bottom:0!important;
}

.quote-text{
    font-size:1.5em;
    font-style:italic;
    line-height:1.2;
    border:1px solid {color:Post Border};
    padding:20px;
}

.post-type{
    width:24px;
    height:24px;
    padding: 0 5px;
    text-align:center;
    color:{color:Post Footer Link};
    background:{color:Background};
    margin:-12px auto 12px;
    position:relative;
    line-height:0;
}

.post-type i{
    width:24px;
    height:24px;
    line-height:24px;
    border-radius:24px;
    font-size:12px;
    background:{color:Post Footer Background};
}

.source{
    text-align:center;
}

.question, .answer{
    border:1px solid {color:Post Border};
    padding:20px 20px 25px;
    margin-bottom:30px;
    position:relative;
}

.asker-avatar, .answerer-avatar{
    position:absolute;
    left:50%;
    bottom:-15px;
    width:30px;
    height:30px;
    background:{color:Background};
    padding: 0 5px;
    margin-left:-20px;
}

.asker-avatar img, .answerer-avatar img{
    display:block;
    border-radius:30px;
}

.ask-name{
    font-weight:bold;
}

.answer p{
    margin-bottom:0;
}

.answer p:first-of-type{
    display:inline;
}

.chat-line{
    margin-top:0.5em;
    padding:0 0.5em 0.5em;
    border-bottom:1px solid {color:Post Border};
}

.chat .chat-line:last-child{
    padding-bottom:0;
    border:0;
}

.chat span{
    font-weight:bold;
}

.audio-container{
    display:flex;
    align-items:center;
    border:1px solid {color:Post Border};
}

.audio-wrapper{
    position:relative;
    min-width:100px;
    height:100px;
    margin-left:1em;
}

.audio-player{
    position:absolute;
    top:0;
    left:0;
}
 
.player{
    width:100px;
    height:28px;
    overflow:hidden;
    padding:36px 0;
}

.album-art{
    width:100px;
    height:100px;
    position:absolute;
    visibility:visible;
    opacity:1;
    transition: visibility 0.4s step-start, opacity 0.4s linear;
    top:0;
    left:0;
}
 
.album-art img{
    width:100%;
    height:100%;
}
 
.post.audio:hover .album-art{
    visibility:hidden;
    opacity:0;
    transition:visibility 0.4s step-end, opacity 0.4s linear;
}

.audio-caption{
    flex:1;
    padding:20px;
}

.song{
    font-size:1.2em;
    font-weight:bold;
}

.artist, .album{
    display:inline;
}

.audio .post-type i{
    font-size:14px;
}

.link-container{
    border:1px solid {color:Post Border};
    padding:20px;
}

.link-container h4{
    margin:0;
    font-size:1.2em;
    line-height:1.2;
}

.link .post-type i{
	font-size:14px;
}

.caption{
    width:{select:Post Size}px;
    margin: 0 20px;
    {block:IndexPage}{block:ifNotAlwaysShowCaption}display:none;{/block:ifNotAlwaysShowCaption}{/block:IndexPage}
}

.caption > p:first-child{
    margin-top:0;
}

.tags.index{
    width:{select:Post Size}px;
    margin: 0 20px 1em;
    {block:ifNotAlwaysShowTags}display:none;{/block:ifNotAlwaysShowTags}
}

.tags.index a{
    margin-right:0.25em;
}

.footer{
    {block:IndexPage}
    height:30px;
    margin-bottom:-15px;{/block:IndexPage}
    {block:PermalinkPage}margin:20px;{/block:PermalinkPage}
}

.footer ul{
    margin:0;
    padding:0;
    list-style:none;
}

.footer.index ul{
    display:flex;
    justify-content:center;
}

.footer.index li{
    padding:0 5px;
    margin:0 4px;
    text-align:center;
    background:{color:Background};
}

.footer.index li a{
    display:block;
    font-size:14px;
    width:30px;
    height:30px;
    line-height:0;
    border-radius:30px;
    color:{color:Post Footer Link};
    background:{color:Post Footer Background};
}

.footer.index li a:hover{
    color:{color:Post Footer Link Hover};
    background:{color:Post Footer Background Hover};
}

.footer.index li a i{
    line-height:30px;
}

.show-caption{
    {block:ifAlwaysShowCaption}display:none;{/block:ifAlwaysShowCaption}
}

.show-tags{
    {block:ifAlwaysShowTags}display:none;{/block:ifAlwaysShowTags}
}

.footer.entry > ul > li{
    margin-top:1em;
    line-height:20px;
    padding-right:30px;
    position:relative;
}

.footer.entry > ul > li:after{
    font-family: FontAwesome;
    position:absolute;
    top:0;
    right:0;
    font-size:10px;
    width:20px;
    height:20px;
    text-align:center;
    line-height:20px;
    color:{color:Post Footer Link};
    background:{color:Post Footer Background};
    border-radius:16px;
}

li.tags:after{
    content:"\f02c";
}

li.date:after{
    content:"\f017";
}

li.reblog:after{
    content:"\f021";
}

li.note-count:after{
    content:"\f005";
}

.footer.entry .tags ul{
    margin:0;
    padding:0;
    display:inline;
}

.footer.entry .tags li{
    display:inline;
}

.footer.entry .tags li:after{
    content:", ";
}

.footer.entry .tags li:nth-last-child(2):after{
    content:" and ";
}

.footer.entry .tags li:last-child:after{
    content:"";
}

.custom-like-button{
    position:relative;
    width:30px;
    height:30px;
}

.like_button{
    position:absolute;
    top: 0;
    left:5px;
    width:30px;
    height:30px;
    opacity:0;
    z-index:10;
}

.like_button iframe{
    width:100%!important;
    height:100%!important;
}

.like-button-heart{
    position:absolute;
    top:0;
    left:5px;
    z-index:1;
}

.like_button:hover + .like-button-heart{
    color: red;
    background:{color:Post Footer Background Hover};
}

.like_button.liked + .like-button-heart{
    color: red;
}

#notes{
    display:none;
}

#notes ol{
    list-style:none;
    margin:0;
    padding:0;
}

#notes li{
    margin:1em 0;
    line-height:20px;
    position:relative;
}

li.note.like, li.note.reblog{
    padding-right:30px;
}

#notes .avatar{
    display:inline-block;
    vertical-align:middle;
    margin-right:0.5em;
    border-radius:16px;
}

#notes li.more_notes_link_container{
    margin:0;
}

li.note:after{
    font-family: FontAwesome;
    position:absolute;
    top:0;
    right:0;
    font-size:10px;
    width:20px;
    height:20px;
    text-align:center;
    line-height:20px;
    color:{color:Post Footer Link};
    background:{color:Post Footer Background};
    border-radius:16px;
}

li.note.like:after{
    content:"\f004";
}

li.note.reblog:after{
    content:"\f021";
}

li.note.original_post:after{
    content:"\f040";
}

.more_notes_link, .notes_loading{
    display:block;
    width:30px;
    height:30px;
    line-height:30px;
    font-size:0;
    margin:0 auto -35px;
    padding:0 5px;
    background:{color:Background};
}

.more_notes_link:before, .notes_loading:before{
    display:block;
    font-size:14px;
    font-family: FontAwesome;
    color:{color:Post Footer Link};
    background:{color:Post Footer Background};
    border-radius:30px;
    transition:color 0.4s, background 0.4s;
}

.more_notes_link:hover:before{
    color:{color:Post Footer Link Hover};
    background:{color:Post Footer Background Hover};
}

.more_notes_link:before{
    content: "\f067";
}

.notes_loading:before{
    content: "\f254";
}

#notes blockquote{
    margin:1em 0;
    line-height:1.5;
}

#footer{
    text-align:center;
    {block:IndexPage}{block:ifInfiniteScroll}{block:ifNotManualLoad}display:none;{/block:ifNotManualLoad}{/block:ifInfiniteScroll}{/block:IndexPage}
}

#footer:empty{
    display:none;
}

#footer .border{
    margin-top:15px;
    width:100%;
    height:0;
    border-top:1px solid {color:Navigation Border};
}

.pagination{
    height:30px;
    margin-top:-15px;
}

.pagination ul{
    list-style:none;
    margin:0;
    padding:0;
    display:flex;
    justify-content:center;
    {block:IndexPage}{block:ifInfiniteScroll}{block:ifManualLoad}display:none;{/block:ifManualLoad}{/block:ifInfiniteScroll}{/block:IndexPage}
}

.pagination li{
    padding:0 5px;
    margin:0 5px;
    background:{color:Background};
}

#load-more{
    padding:0 5px;
    margin:0 auto;
    width:30px;
    background:{color:Background};
}

.pagination li a, #load-more a{
    display:block;
    font-size:14px;
    width:30px;
    height:30px;
    line-height:0;
    border-radius:30px;
    color:{color:Navigation Link};
    background:{color:Navigation Background};
}

.pagination li a:hover, #load-more a:hover{
    color:{color:Navigation Link Hover};
    background:{color:Navigation Background Hover};
}

#load-more a.empty{
    display:none;
}

.pagination li a i, #load-more a i{
    line-height:30px;
}

#infscr-loading{
    display:none!important;
}

.clearfix{
    display:block;
    clear:both;
}

#lightbox{
    top:0;
    left:0;
    width:100%;
    height:100%;
    display:none;
    position:fixed;
    padding:30px 40px;
    box-sizing:border-box;
    z-index:99999;
}

#lightboxbg {
    background:{color:Photoset Background};
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0.8;
}

#lightbox img{
    max-width:100%;
    max-height:100%;
    width:auto;
    height:auto;
    position:relative;
    top:50%;
    left:50%;
    box-shadow:0 0 2px rgba(0,0,0,0.4);
    transform:translate(-50%, -50%);
    cursor:pointer;
}

.arrow-left, .arrow-right{
    color:{color:Photoset Controls};
    position:absolute;
    top:50%;
    margin-top:-20px;
    cursor:pointer;
    font-size:20px;
    width:40px;
    height:40px;
    line-height:0;
    border-radius:40px;
    background:rgba(0,0,0,0.3);
    text-align:center;
}

.arrow-left i, .arrow-right i{
    line-height:40px;
}

.arrow-left{
    left:50%;
}

.arrow-right{
    right:50%;
}

.custom-tooltip{
    display: none;
    max-width: 300px;
    font-size: 1em;
    line-height:1.2;
    color:{color:Tooltip Text};
    background:{color:Tooltip Background};
    box-shadow:0 0 2px rgba(0,0,0,0.3),0 0 1px rgba(255,255,255,0.7);
    font-family: inherit;
    padding: 0.5em 0.75em;
    z-index:9999;
    border:0;
    border-radius:2px;
}

{CustomCSS}
</style>
</head>

<body>
<div id="canvas">
<div id="sidebar">
<div class="inner">
<ul id="navigation">
<li class="line line2"></li>
<li><a href="/" title="Index"><i class="fa fa-file-text"></i></a></li>
<li class="line"></li>
<li><a href="/archive" title="Archive"><i class="fa fa-folder-open"></i></a></li>
{block:AskEnabled}<li class="line"></li>
<li><a href="/ask" title="{AskLabel}"><i class="fa fa-envelope"></i></a></li>{/block:AskEnabled}
<li class="line"></li>
<li id="more"><a href="#" class="show-menu" title="View menu"><i class="fa fa-bars"></i></a><a href="#" class="hide-menu" title="Hide menu"><i class="fa fa-remove"></i></a></li>
<li class="line line2"></li>
</ul>
{block:ifSidebarImage}<div id="sidebar-image"><div id="line3"></div><img src="{image:Sidebar Image}"><div id="line4"></div></div>{/block:ifSidebarImage}
<h1 id="title">{Title}</h1>
{block:ifSubtitle}<h2 id="subtitle">{text:Subtitle}</h2>{/block:ifSubtitle}
<div id="top"><div class="line line2"></div><a href="#" title="Back to top"><i class="fa fa-arrow-up"></i></a><div class="line line2"></div></div>
</div>
</div>
<div id="content">
<div class="inner">
<div id="menu">
<div class="contents">
<div class="outer">
<div class="box">
<div id="poster-avatar"><img src="{PortraitURL-96}" /></div>
{block:Description}<div id="description">{Description}</div>{/block:Description}
<div id="links"><ul>
{block:SubmissionsEnabled}<li><a href="/submit">{SubmitLabel}</a></li>{/block:SubmissionsEnabled}
{block:Pages}<li><a href="{URL}">{Label}</a></li>{/block:Pages}
{block:ifLink1Title}<li><a href="{text:Link 1 URL}">{text:Link 1 Title}</a></li>{/block:ifLink1Title}
{block:ifLink2Title}<li><a href="{text:Link 2 URL}">{text:Link 2 Title}</a></li>{/block:ifLink2Title}
{block:ifLink3Title}<li><a href="{text:Link 3 URL}">{text:Link 3 Title}</a></li>{/block:ifLink3Title}
{block:ifLink4Title}<li><a href="{text:Link 4 URL}">{text:Link 4 Title}</a></li>{/block:ifLink4Title}
{block:ifLink5Title}<li><a href="{text:Link 5 URL}">{text:Link 5 Title}</a></li>{/block:ifLink5Title}
{block:ifLink6Title}<li><a href="{text:Link 6 URL}">{text:Link 6 Title}</a></li>{/block:ifLink6Title}
{block:ifLink7Title}<li><a href="{text:Link 7 URL}">{text:Link 7 Title}</a></li>{/block:ifLink7Title}
{block:ifLink8Title}<li><a href="{text:Link 8 URL}">{text:Link 8 Title}</a></li>{/block:ifLink8Title}
<li id="credit"><a href="http://myrtillenne.dreamwidth.org">Theme</a></li>
<li id="search"><form name="search" action="/search" method="get">
<input type="text" name="q" value="{SearchQuery}" placeholder="Search"/>
</form></li>
<div class="clearfix"></div>
</ul>
</div>
<div id="social">
<ul>
{block:ifWebsiteURL}<li><a href="{text:Website URL}"><i class="fa fa-globe"></i></a></li>{/block:ifWebsiteURL}
{block:ifEmailAddress}<li><a href="{text:Email Address}"><i class="fa fa-envelope"></i></a></li>{/block:ifEmailAddress}
{block:ifFacebookURL}<li><a href="{text:Facebook URL}"><i class="fa fa-facebook"></i></a></li>{/block:ifFacebookURL}
{block:ifTwitterURL}<li><a href="{text:Twitter URL}"><i class="fa fa-twitter"></i></a></li>{/block:ifTwitterURL}
{block:ifInstagramURL}<li><a href="{text:Instagram URL}"><i class="fa fa-instagram"></i></a></li>{/block:ifInstagramURL}
</ul>
</div>
</div>
</div>
</div>
</div>
<div id="posts-wrapper">
<div class="contents">
{block:Posts}
<div class="posts" id="{PostID}">
<div class="post-spacing"></div>
<div class="box">
<div class="header">
<ul>
{block:IndexPage}{block:NotReblog}<li class="poster-avatar"><a href="/" title="Posted by {Name}"><img src="{PortraitURL-40}" /></a></li>{/block:NotReblog}
{block:RebloggedFrom}<li class="reblog-parent"><a href="{ReblogParentURL}" title="Reblogged from {ReblogParentName}"><img src="{ReblogParentPortraitURL-40}" /></a></li>
<li class="reblog-root"><a href="{ReblogRootURL}" title="Original by {ReblogRootName}"><img src="{ReblogRootPortraitURL-40}" /></a></li>{/block:RebloggedFrom}{/block:IndexPage}
{block:PermalinkPage}<li class="poster-avatar"><a href="/" title="{Name}"><img src="{PortraitURL-48}" /></a></li>{/block:PermalinkPage}
</ul>
</div>
{block:Text}
<div class="post text">
{block:Title}
<h3 class="title"><a href="{Permalink}">{Title}</a></h3>
{/block:Title}{Body}
{block:More}<div class="read-more"><a href="{Permalink}">Read More</a></div>{/block:More}
</div>
{/block:Text}
{block:Photo}
<div class="post photo">
{LinkOpenTag}<img src="{PhotoURL-500}" alt="{PhotoAlt}"/>{LinkCloseTag}
</div>
{/block:Photo}
{block:Panorama}
<div class="post panorama">
{LinkOpenTag}<img src="{PhotoURL-Panorama}" alt="{PhotoAlt}"/>
{LinkCloseTag}
</div>
{/block:Panorama}
{block:Photoset}
<div class="post photoset"><div class="photo-slideshow" id="photoset_{PostID}" data-layout="{PhotosetLayout}">{block:Photos}<div class="photo-data"><div class="pxu-photo"><img src="{PhotoURL-HighRes}" width="{PhotoWidth-HighRes}" height="{PhotoHeight-HighRes}" data-highres="{PhotoURL-HighRes}" data-width="{PhotoWidth-HighRes}" data-height="{PhotoHeight-HighRes}"{block:Caption} title="{Caption}" alt="{Caption}"{/block:Caption} /></div></div>{/block:Photos}</div></div>
{/block:Photoset}
{block:Quote}
<div class="post quote"><div class="quote-text">{Quote}</div><div class="post-type"><i class="fa fa-quote-left"></i></div>
{block:Source}
<div class="source">{Source}</div>
{/block:Source}
</div>
{/block:Quote}
{block:Link}
<div class="post link">
<div class="link-container"><a href="{URL}" class="link" {Target}><h4 class="title">{Name}</h4></a></div><div class="post-type"><i class="fa fa-chain"></i></div>
{block:Description}<div class="description">{Description}
</div>{/block:Description}
</div>
{/block:Link}
{block:Chat}
<div class="post chat">
{block:Title}<h3 class="title"><a href="{Permalink}">{Title}</a></h3>
{/block:Title}
{block:Lines}
<div class="chat-line {Alt} user_{UserNumber}">
{block:Label}<span class="label">{Label}</span>
{/block:Label}{Line}</div>{/block:Lines}
</div>
{/block:Chat}
{block:Video}
<div class="post video">{Video-500}</div>
{/block:Video}
{block:Audio}
<div class="post audio">
<div class="audio-container"><div class="audio-caption"><div class="song">{block:TrackName}{TrackName}{/block:TrackName}</div><div class="artist">{block:Artist}{Artist}{/block:Artist}</div><div class="album">{block:Album} ▪ {Album}{/block:Album}</div></div><div class="audio-wrapper">{block:AudioPlayer}<div class="audio-player"><div class="player">{AudioPlayer}</div></div>{/block:AudioPlayer}{block:AlbumArt}<div class="album-art"><img src="{AlbumArtURL}" /></div>{/block:AlbumArt}</div></div><div class="post-type"><i class="fa fa-microphone"></i></div></div>
{/block:Audio}
{block:Answer}
<div class="post ask">
<div class="question"><div class="asker-avatar"><img src="{AskerPortraitURL-30}" /></div><span class="ask-name">{Asker}</span> asked: {Question}</div>
{block:Answerer}
<div class="answer"><div class="answerer-avatar"><img src="{AnswererPortraitURL-30}" /></div><span class="ask-name">{Answerer}</span> answered: {Answer}</div>
{/block:Answerer}
<div class="replies">{Replies}</div>
</div>
{/block:Answer}
<div class="clearfix"></div>

{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}

{block:IndexPage}{block:HasTags}<div class="tags index">{block:Tags}#<a href="{TagURL}">{Tag}</a> {/block:Tags}</div>{/block:HasTags}{/block:IndexPage}

{block:IndexPage}<div class="footer index">
<ul>
{block:Date}<li><a href="{Permalink}" title="{DayOfMonth} {Month} {Year}"><i class="fa fa-clock-o"></i></a></li>{/block:Date}
{block:NoteCount}<li><a href="{Permalink}" title="{NoteCountWithLabel}"><i class="fa fa-star"></i></a></li>{/block:NoteCount}
{block:Caption}<li class="show show-caption"><a href="#" data-id="caption" title="View caption"><i class="fa fa-commenting"></i></a></li>{/block:Caption}
{block:HasTags}<li class="show show-tags"><a href="#" data-id="tags" title="View tags"><i class="fa fa-tags"></i></a></li>{/block:HasTags}
<li class="custom-like-button" title="Like">{LikeButton}<a class="like-button-heart"><i class="fa fa-heart"></i></a></li>
<li><a href="{ReblogURL}" title="Reblog"><i class="fa fa-refresh"></i></a></li>
</ul>
</div>{/block:IndexPage}
{block:PermalinkPage}<div class="footer entry">
<ul>
{block:HasTags}<li class="tags">Tagged with <ul>{block:Tags}<li><a href="{TagURL}">{Tag}</a></li>{/block:Tags}</ul></li>{/block:HasTags}
{block:Date}<li class="date">Posted on {DayOfMonth} {Month} {Year} ({TimeAgo})</li>{/block:Date}
{block:RebloggedFrom}<li class="reblog">Reblogged from <a href="{ReblogParentURL}" title="{ReblogParentTitle}">{ReblogParentName}</a>, original by <a href="{ReblogRootURL}" title="{ReblogRootTitle}">{ReblogRootName}</a></li>{/block:RebloggedFrom}
{block:NoteCount}<li class="note-count">Has <a href="#" title="View notes">{NoteCountWithLabel}</a></li>{/block:NoteCount}
</ul>
{block:PostNotes}<div id="notes">{PostNotes}</div>{/block:PostNotes}
</div>{/block:PermalinkPage}
</div>
</div>
{/block:Posts}
</div>

<div id="footer">
{block:Pagination}
<div class="post-spacing"></div>
<div class="border"></div>
<div class="pagination">
<ul>
{block:PreviousPage}
<li class="previous"><a href="{PreviousPage}" title="Previous page"><i class="fa fa-arrow-left"></i>
</a></li>{/block:PreviousPage}
{block:NextPage}
<li class="next"><a href="{NextPage}" title="Next page"><i class="fa fa-arrow-right"></i>
</a></li>
{/block:NextPage}
</ul>
{block:ifInfiniteScroll}{block:ifManualLoad}<div id="load-more"><a href="#" class="load" title="Load more"><i class="fa fa-arrow-down"></i></a><a href="#" class="empty" title="No more posts to show"><i class="fa fa-remove"></i></a></div>{/block:ifManualLoad}{/block:ifInfiniteScroll}
</div>
{/block:Pagination}
{block:PermalinkPagination}
<div class="post-spacing"></div>
<div class="border"></div>
<div class="pagination"><ul>
{block:NextPost}
<li class="next"><a href="{NextPost}" title="Previous post"><i class="fa fa-arrow-left"></i></a></li>
{/block:NextPost}
{block:PreviousPost}
<li class="previous"><a href="{PreviousPost}" title="Next post"><i class="fa fa-arrow-right"></i></a></li>{/block:PreviousPost}
</ul></div>
{/block:PermalinkPagination}
</div>
</div>
</div>
</div>
</div>

$(function(){
    
    $('#navigation').on('click', '#more a.show-menu', function(e){
        e.preventDefault();
        $('a.hide-menu').css('display', 'block');
        $(this).hide();
        $('#posts-wrapper').fadeOut(function(){
            $('html, body').scrollTop(0);
            $('#menu').fadeIn();
        });
    });
    
    $('#navigation').on('click', '#more a.hide-menu', function(e){
        e.preventDefault();
        $('a.show-menu').css('display', 'block');
        $(this).hide();
        $('#menu').fadeOut(function(){
            $('#posts-wrapper').fadeIn();
        })
    });
    
    $('.photo-slideshow').pxuPhotoset({
        highRes: false,
        lightbox: false,
        rounded: false,
        gutter: '0px',
        photoset: '.photo-slideshow',
        photoWrap: '.photo-data',
        photo: '.pxu-photo'
   });
    
    function resizeVideo(){
        if ({select:Post Size} < 500){
            newSize = {select:Post Size};
            width = $(this).width();
            height = $(this).height();
            ratio = newSize / width;
            newHeight = Math.floor(height * ratio);
            $(this).attr({'width': newSize, 'height' : newHeight});
            if ($(this).hasClass('tumblr_video_iframe')){
                $(this).parent().css({'width': newSize, 'height' : newHeight});
            }
        }
    }
   
    function resizeEmbed(){
        postSize = $(this).closest('.tmblr-embed').width();
        width = $(this).width();
        if (postSize < width){
            newSize = postSize;
            height = $(this).height();
            ratio = newSize / width;
            newHeight = Math.floor(height * ratio);
            $(this).attr({'width': newSize, 'height' : newHeight});
        }
    }
   
    $('.video iframe').each(resizeVideo);
    $('.tmblr-embed iframe').each(resizeEmbed);
    
    $('.photo-slideshow').on('click', 'img', lightbox);
    
    var imagesURLs = [];
    var mainImgEl;
    var arrowLeft;
    var arrowRight;
    var crtImgURL;
    var crtImgIndex;
    
    function lightbox(){
        $(this).closest('.photo-slideshow').find('img').each(function(){
            imagesURLs.push($(this).attr('data-highres'));
        });
        
        $('body').append('<div id="lightbox"><div id="lightboxbg"></div><img id="mainImage" /><div class="arrow-left"><i class="fa fa-arrow-left"></i></div><div class="arrow-right"><i class="fa fa-arrow-right"></i></div></div>');
        
        mainImgEl = $('#mainImage');
        arrowLeft = $('.arrow-left');
        arrowRight = $('.arrow-right');
        
        crtImgURL = $(this).attr('data-highres');
        crtImgIndex = $.inArray(crtImgURL, imagesURLs);
        
        mainImgEl.attr('src', crtImgURL);
        $('#lightbox').fadeIn();
        
        mainImgEl.load(placeArrows);
        placeArrows();
    }
        
    $('body').on('click', '#mainImage', function(){
        window.open(imagesURLs[crtImgIndex], '_blank', 'toolbar=0,location=0,menubar=0,scrollbars=1');
    });
        
    $('body').on('click', '.arrow-left', function(){
        if (crtImgIndex == 0){
            crtImgIndex = imagesURLs.length;
        }
        mainImgEl.attr('src', imagesURLs[crtImgIndex -= 1]).load(placeArrows);
        placeArrows();
    });
        
    $('body').on('click', '.arrow-right', function(){
        if (crtImgIndex == (imagesURLs.length - 1)){
            crtImgIndex = -1;
        }
        mainImgEl.attr('src', imagesURLs[crtImgIndex += 1]).load(placeArrows);
        placeArrows();
    });
        
    $(window).on('resize', function(){
        if (imagesURLs.length){
            placeArrows();
        }
    });
        
    function placeArrows(){
        var arrowMargin = mainImgEl.width()/2 + 20;
        arrowLeft.css({
            'margin-left' : -arrowMargin
        });
        arrowRight.css({
            'margin-right' : -arrowMargin
        });
    }
    
    $('body').on('click', '#lightboxbg', function() {
        $('#lightbox').fadeOut(function() {
            $('#lightbox').remove();
        });
        imagesURLs = [];
    });
    
    $('#top a').click(function(e){
        e.preventDefault();
        $('html, body').animate({scrollTop : 0},600);
    });
    
    $('[title], #posts-wrapper, #notes').tooltip({ 
        track: true,
		show: {delay:100, duration: 500},
		tooltipClass: "custom-tooltip",
		position: { my: "left+15 top+15" }
    });
    
    $('.show-caption a').tooltip({
        content: 'View caption'
    });
    $('.show-tags a').tooltip({
        content: 'View tags'
    });
    
    $('body').on('click', '.show a', function(e){
        e.preventDefault();
        var toExpand = $(this).attr('data-id');
        $(this).closest('.posts').find('.' + toExpand).slideToggle();
        var crtContent = $(this).tooltip( "option", "content" );
        var newContent = (crtContent === 'View ' + toExpand) ? 'Hide ' + toExpand : 'View ' + toExpand;
        $(this).tooltip( "option", "content", newContent);
    });
    
    $('.footer.entry').on('click', '.note-count a', function(e){
        e.preventDefault();
        $('#notes').slideToggle(600);
        var crtContent = $(this).tooltip( "option", "content" );
        var newContent = (crtContent === 'View notes') ? 'Hide notes' : 'View notes';
        $(this).tooltip( "option", "content", newContent);
    });
    
    $('.note-count a').tooltip({
        content: 'View notes'
    });
    
    $('iframe.tumblr_audio_player').load(function(){
        $(this).contents().find('head').append($('<style "type=text/css">.audio-player{background:{color:Background}!important;color:{color:Text}!important;}</style>'));
    });
    
    var container = $('#posts-wrapper .contents');
    
    {block:IndexPage}
    {block:ifInfiniteScroll}
    container.infinitescroll({
        navSelector: '.pagination ul',
        nextSelector: '.pagination .next a',
        itemSelector: '.posts',
        loading: {
            finishedMsg: '<em></em>',
            img: '',
            msgText: '<em></em>'
        }{block:ifManualLoad},
        errorCallback: function(){ $('a.load').hide(); $('a.empty').css('display', 'block');}{/block:ifManualLoad}
    }, function(newElements){
        var newElems = $(newElements);
        var newElemsIDs = newElems.map(function(){ 
            return this.id; 
        }).get();
        var newPhotoset = newElems.find('.photo-slideshow');
        newPhotoset.each(function() {
            $(this).pxuPhotoset({
                highRes: false,
                lightbox: false,
                rounded: false,
                gutter: '0px',
                photoset: '.photo-slideshow',
                photoWrap: '.photo-data',
                photo: '.pxu-photo'
            });
        });
        newPhotoset.on('click', 'img', lightbox);
        newElems.find('.video iframe').each(resizeVideo);
        newElems.find('.tmblr-embed iframe').each(resizeEmbed);
        newElems.find('iframe.tumblr_audio_player').load(function(){
            $(this).contents().find('head').append($('<style "type=text/css">.audio-player{background:{color:Background}!important;color:{color:Text}!important;}</style>'));
        });
        newElems.find('.show a').tooltip({
            track: true,
    		show: {delay:100, duration: 500},
    		tooltipClass: "custom-tooltip",
    		position: { my: "left+10 top+20" }
        });
        newElems.find('.show-caption a').tooltip({
            content: 'View caption'
        });
        newElems.find('.show-tags a').tooltip({
            content: 'View tags'
        });
        Tumblr.LikeButton.get_status_by_post_ids(newElemsIDs);
    });
    {block:ifManualLoad}
    $(window).off('.infscr');
    $('#load-more a').click(function(e){
        e.preventDefault();
        container.infinitescroll('retrieve');
    });
    {/block:ifManualLoad}
    {/block:ifInfiniteScroll}
    {/block:IndexPage}
    
});
</script>
</body>
</html>

RESOURCES

photoset grid by Pixel Union
icon font by Dave Gandy
custom tooltips by JQuery Foundation
audio player tutorial by Roxie
infinite scroll by Paul Irish
sample sidebar image from Picjumbo

Tags:

layout,
site:tumblr

Welcome!

Hello and welcome to my design journal containing free custom layouts made by me, rosecarmine.

Thank you for visiting and I hope you enjoy using my layouts.

Terms of use

Credit me on your journal or profile page.
Do not use my codes as bases.

Layouts

Resources

Backgrounds

Mini icons

Journal layouts

29/10/2016

29/10/2016

Marbles

Marbles ver. 2

Welcome!

Terms of use

Layouts

Links

Resources