Style Sheet for Dreamwith

style.css

/* Cleaned CSS: */
* {
  margin: 0;
  padding: 0;
}

body {
  font-family: system-ui, -apple-system, -apple-system-font, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', sans-serif;
  font-size: 1rem;
  background-color: #5A5475;
  color: #F8F8F2;
}

h1 *, h2 * , h3 * { 
  letter-spacing: 0.075rem; 
}

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

.icon-links {
  padding-top: .25em;
}

.icon-links li {
  display: inline;
}

#canvas > .inner,
#footer {
  width: 80%;
  margin: auto;
}

#header h1 {
  margin-top: 1rem;
  margin-bottom: 0;
}

#header h1:after {
  content: ": Emma's Blog";  
}

h2#subtitle {
  font-size: large;
  margin: unset;
}

h2#pagetitle {
  font-size: x-large;
  margin-top: .5rem;
  margin-bottom: .5rem;
}

/* Don't display pagetitle on entry pages */

.page-entry h2#subtitle {
  margin-bottom: .5rem;
}

.page-entry h2#pagetitle {
  display: none;
}

.navigation {
  text-align: right;
  padding-bottom: .25em;
  font-size: small;
}

.navigation li {
  display: inline;
}

.entry {

}

.entry .header {
  background-color: #8077A8;
  padding: 5px;
}

.entry .header h3 {
  margin: unset;
}

.entry .header .datetime {
  font-size: medium
}

.entry .contents .inner {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-column-gap: 1rem;
  grid-template-areas: 
    "a b b b b b"
    "c b b b b b"
    "c b b b b b"
    "c d d d d d";
}

.entry .userpic {
  grid-area: a;
}

.entry .userpic img {
  border: solid 2px grey;
}

.entry .poster {
  grid-area: c;
  font-size: small;
  align-self: start;
}

.entry .entry-content {
  grid-area: b;
}

.entry .entry-content *,
.comment .comment-content * {
  line-height: 150%;
  margin-bottom: .50rem;
}

.entry .entry-content blockquote {
  border-left: solid 2px #0f0f0f;
  padding-left: .75rem;
  margin-bottom: 1rem;
}

.entry .entry-content ul,
.entry .entry-content ol {
  margin-top:  .25rem;
  margin-left: 2rem;
  margin-bottom: .25rem;
}

.entry .entry-content li {
  line-height: 125%;
}

.entry .entry-content img {
  max-width: 100%;
}

.entry .bottom-metadata {
  grid-area: d;
  
}

.entry .footer,
.entry .bottom-metadata {
  font-size: small;
}

.entry .footer li,
.entry .bottom-metadata li {
  display: inline;
}

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

.entry .footer .inner {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-column-gap: 1rem;
  grid-template-areas: 
    "a b b b b b"
    "c b b b b b"
    "d d d d d d";
}

.entry .footer {
  padding-top: .25rem;
}

.entry .footer .entry-management-links {
  grid-area: a;
}

.entry .footer .entry-interaction-links {
  grid-area: c;
}

.entry .footer div[id*='ljqrtentry'] {
  grid-area: d;
  justify-self: start;
}

.text-links li {
  display: inline;
}

.entry .footer .tag {
  grid-area: b;
}

hr.above-entry-interaction-links, hr.below-reply-container {
  display: none;
}

.separator-after {
  padding-bottom: 1em;
}

.comment .header h4 { 
  display: inline;
}

.comment .header {
  background-color: #8077A8;
  font-size: larger;
  padding: 5px;
}

.comment .contents .inner {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-column-gap: 1rem;
  grid-template-areas: 
    "a b b b b b"
    "c b b b b b"
    "c b b b b b"
    "d d d d d d";
}

.comment .userpic {
  grid-area: a;
}

.comment .poster {
  grid-area: c;
}

.comment .comment-content {
  grid-area: b;
}

.comment .poster-ip {
  padding-top: .5em;
  grid-area: d;
  font-size: small;
}

.comment .footer .inner {
  display: grid;
  grid-template-areas: 
    "a"
    "b"
    "c";
}

.comment .footer li {
  display: inline;
  font-size: small;
}

.comment .footer .multiform-checkbox:after {
  content: ' ';
}

.bottomcomment {
  border-top: solid 2px black;
}

.bottompages {
  padding-bottom: 1em;
}

#secondary .module-section-one .inner {
  padding: 2em;
  background-color: #8077A8;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
}

#secondary .module-calendar {
  grid-row: 1;
  grid-column: 2;
}

#secondary .module-typelist {
  grid-row: 1;
  grid-column: 3;
}

#secondary .module-search {
  grid-row: 2;
  grid-column: 1;
}

#secondary .module-tags_list {
  grid-row: 3;
  grid-column: 1;
}

#secondary .module-pagesummary {
  grid-row: 3;
  grid-column: 2;
}