layout.css

/*
  Basic structure
*/

html {
  border-top: 8px solid rgb(var(--accent-color));
  padding-top: 1rem;
  padding-bottom: 1rem;
}

body {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-areas:
    "banner menu menu"
    "content content content"
    "footer footer footer";
  margin-left: auto;
  margin-right: auto;
  max-width: 1080px;
  padding-left: 1rem;
  padding-right: 1rem;
}

@media screen and (max-width: 640px) {
  body {
    display: flex;
    flex-flow: column nowrap;
  }
}

/*
  Header
*/
#banner {
  border-bottom: 2px solid rgb(var(--title-color));
  grid-area: banner;
  padding-bottom: 1rem;
}

#banner>a {
  align-items: flex-end;
  display: flex;
  gap: 1rem;
  text-decoration: none;
}

@media screen and (max-width: 640px) {
  #banner a {
    align-items: center;
    flex-flow: column nowrap;
    text-align: center;
  }
}

#banner .avatar {
  display: inline-block;
}

#banner .avatar.square {
  border-radius: 5%;
}

#banner .avatar.circle {
  border-radius: 50%;
}

#banner h1 {
  display: inline;
  line-height: 1.125;
  color: rgb(var(--title-color));
  margin-bottom: 0;
}

#banner .description {
  margin-top: 1rem;
  margin-bottom: 0;
}

@media screen and (max-width: 640px) {
  #banner .description {
    text-align: center;
  }
}

/*
  Menu
*/
#menu {
  align-items: flex-end;
  border-bottom: 2px solid rgb(var(--title-color));
  display: flex;
  flex-flow: row wrap;
  gap: 1.5rem;
  grid-area: menu;
  justify-content: flex-end;
  padding-bottom: 1rem;
}

@media screen and (max-width: 640px) {
  #menu {
    flex-flow: row nowrap;
    gap: 0;
    justify-content: flex-start;
    overflow-x: auto;
    padding-top: 1rem;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: -ms-autohiding-scrollbar;
  }

  #menu::before,
  #menu::after {
    content: " ";
    margin: auto;
    width: 0;
  }
}

#menu a {
  flex: 0 0 auto;
  color: rgb(var(--title-color));
}

#menu a:hover,
#menu a:focus {
  color: rgb(var(--accent-color));
}

@media screen and (max-width: 640px) {
  #menu a {
    margin-right: 1rem;
  }
}

/*
  Content
*/

#content {
  grid-area: content;
}

#content>h3:first-child {
  border-bottom: 2px solid rgb(var(--title-color));
  margin-bottom: 0;
  margin-top: 1rem;
  padding-bottom: 1rem;
}

/* Post */

.post {
  border-bottom: 2px solid rgb(var(--title-color));
  padding-top: 3rem;
  padding-bottom: 3rem;
  position: relative;
}

.post-meta {
  font-size: 0.875rem;
}

.post-meta a {
  color: rgb(var(--title-color));
  display: inline-block;
}

.post-meta a:not(:last-child) {
  margin-right: 1rem;
}

.post-meta a:hover,
.post-meta a:focus {
  color: rgb(var(--accent-color));
}

.post-meta+h1 {
  margin-bottom: 3rem;
}

.post-meta+*:not(h1) {
  margin-top: 3rem;
}

.post-content>*,
.trail-content>*,
.post h1,
.post h2,
.post h3,
.post h4,
.post h5,
.post h6 {
  max-width: 640px;
}

.full-width-media .post-content>figure,
.full-width-media .post-content>iframe,
.full-width-media .post-content>audio,
.full-width-media .post-content>video,
.full-width-media .post-content>.npf_row,
.full-width-media .trail-content>figure,
.full-width-media .trail-content>iframe,
.full-width-media .trail-content>audio,
.full-width-media .trail-content>video,
.full-width-media .trail-content>.npf_row {
  max-width: 100%;
}

/*
  NPF Links
*/
.npf-link-block {
  align-items: flex-start;
  border: 1px solid rgba(var(--title-color), 0.25);
  border-radius: 0;
  box-shadow: -5px 5px rgba(var(--accent-color), 0.25);
  display: flex;
  flex-flow: column nowrap;
  max-width: 640px;
  padding: 0.5rem;
}

.npf-link-block .poster {
  justify-content: flex-start;
}

.npf-link-block .title {
  font-size: 1.75rem;
}

.npf-link-block.no-poster .title {
  color: var(--title-color);
}

/*
  NPF Galleries
*/
.post-body div.npf_row,
.post-body .post-content div.npf_row {
  margin-left: 0;
  margin-right: 0;
}

/* Reblogs */
.trail-item {
  margin-bottom: 1rem;
  padding-bottom: 1rem;
}

.trail-item:not(:first-child) {
  border-top: 2px dotted rgba(var(--title-color), 0.25);
  margin-top: 1rem;
  padding-top: 1rem;
}

.trail-blog {
  align-items: center;
  display: flex;
  flex-flow: row wrap;
  gap: 1rem;
  margin-bottom: 1rem;
}

.trail-blog .avatar {
  width: 2rem;
  height: 2rem;
  border-radius: 3px;
}

/* Notes */
.notes {
  margin-bottom: 1rem;
  list-style: none;
  margin-left: 0;
  font-size: 0.875rem;
}

.notes .note {
  padding: 0.25rem 0;
}

.notes .note blockquote {
  font-size: 1em;
  font-style: italic;
}

.notes li:not(:last-child) {
  border-bottom: 2px dashed rgba(var(--title-color), 0.25);
}

.notes li .avatar_frame {
  display: inline-block;
  vertical-align: middle;
  margin-right: 0.5rem;
}

.notes li .avatar {
  width: 2rem;
  height: 2rem;
  border-radius: 3px;
  vertical-align: middle;
}

.more_notes_link {
  font-weight: 700;
}

/* Post Info */
.post-info {
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 2px solid rgb(var(--title-color));
  border-top: none;
  display: flex;
  font-size: 0.875rem;
  gap: 1rem;
  padding: 1.5rem 2rem;
  position: absolute;
  right: 0;
  top: 0;
  width: 30%;
}

@media screen and (max-width: 800px) {
  .post-info {
    border-top: 2px solid rgb(var(--title-color));
    margin-top: 3rem;
    position: static;
    width: 100%;
  }
}

.post:nth-child(n) .post-info {
  background-color: rgba(var(--color-post-info-1n), 0.25);
}

.post:nth-child(2n) .post-info {
  background-color: rgba(var(--color-post-info-2n), 0.25);
}

.post:nth-child(3n) .post-info {
  background-color: rgba(var(--color-post-info-3n), 0.25);
}

.post:nth-child(4n) .post-info {
  background-color: rgba(var(--color-post-info-4n), 0.25);
}

.post:nth-child(5n) .post-info {
  background-color: rgba(var(--color-post-info-5n), 0.25);
}

.post-info ul {
  list-style: none;
  margin-left: 0;
  margin-bottom: 0;
}

.post-info .controls {
  display: flex;
  flex-flow: column nowrap;
  gap: 0.5rem;
  margin-left: auto;
}

.tag-list a {
  display: inline-block;
}

.tag-list a:not(:last-child)::after {
  color: rgba(var(--title-color), 0.75);
  content: "/";
  display: inline-block;
  margin-left: 0.25rem;
  margin-right: 0.25rem;
}

.controls .reblog_button,
.controls .like_button {
  width: 1.75rem;
  height: 1.75rem;
}

/*
  Pagination
*/

#pagination {
  align-items: center;
  border-top: 2px solid rgb(var(--title-color));
  display: flex;
  flex-flow: row nowrap;
  font-weight: 700;
  gap: 1rem;
  justify-content: center;
  padding-bottom: 1rem;
  padding-top: 1rem;
  text-align: center;
}

/*
  Footer
*/
#colophon {
  grid-area: footer;
  border-top: 2px solid rgb(var(--title-color));
  display: flex;
  flex-flow: row nowrap;
  gap: 1rem;
  padding-bottom: 1rem;
  padding-top: 1rem;
}

@media screen and (max-width: 640px) {
  #colophon {
    flex-flow: column nowrap;
  }
}

.about-this-site {
  font-size: 0.875rem;
}

.about-this-site ul {
  display: flex;
  flex-flow: row wrap;
  gap: 1rem;
  list-style: none;
  margin-left: 0;
}

.about-this-site ul li {
  flex: 0 0 auto;
  margin-top: 0;
  margin-bottom: 0;
}

#search {
  order: 2;
  margin-left: auto;
}

@media screen and (max-width: 640px) {
  #search {
    margin-left: 0;
  }
}

#search input[type="search"] {
  border: none;
  border-radius: 0;
  border-bottom: 1px solid rgb(var(--title-color));
  box-shadow: none;
  font: inherit;
}

#search input[type="search"]:active {
  border-bottom-color: rgb(var(--accent-color));
}

#search button[type="submit"] {
  background-color: rgb(var(--title-color));
  border: none;
  border-radius: 0;
  color: rgb(var(--background-color));
  font: inherit;
  padding-left: 0.3rem;
  padding-right: 0.3rem;
}