myrtillenne | Present

comment pages
icon pages

Code:

/*-------------------------------------
 
- layout - present (strata) - https://myrtillenne.dreamwidth.org
- images - subtlepatterns.com
 
-------------------------------------*/

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

:root {
  --text-size: 16px;
  --text-color: #503d30;
  --line-height: 1.5;
  --background-color: #f9edd7;
  --background-image: url("https://rosecarmine.dreamwidth.org/file/117295.jpg");
  --ribbon-color: #d13167;
  --ribbon-image: url("https://rosecarmine.dreamwidth.org/file/117032.png");
  --ribbon-border-color: #e37099;
  --icon-frame: url("https://rosecarmine.dreamwidth.org/file/116763.png");
  --link-color: #d13167;
  --link-hover-color: #bb8359;
  --main-font: Lora, serif;
  --title-font: Eagle Lake, serif;
  --title-color: #503d30;
  --entry-background-color: #fcf5eb;
  --entry-border-color: #e7d9be;
  --entry-title-color: #bb8359;
  --entry-title-hover-color: #d13167;
  --navigation-color: #f9edd7;
  --navigation-hover-color: #fcf5eb;
}

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

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

img {
  border: none;
}

hr {
  display: none;
}

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

html body {
  margin-left: 0;
  margin-right: 0;
}

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

a,
a:link,
a:visited,
a:active {
  text-decoration: none;
  transition: all 0.4s ease;
}

q {
  font-style: italic;
}

blockquote {
  border-top: 1px solid var(--entry-border-color);
  border-bottom: 1px solid var(--entry-border-color);
  padding: 1em;
  font-style: italic;
  margin: 1em 0;
}

blockquote:first-letter {
  font-size: 3.6em;
  float: left;
  padding: 0 0.1em 0 0;
  line-height: 0.5;
  font-family: var(--title-font);
}

#content {
  margin: 0 auto;
  max-width: 1000px;
}

@media (min-width: 1024px) {
  #content {
    border-left: 400px solid transparent;
    position: relative;
  }

#content:before {
    content: "";
    position: fixed;
    top: 0;
    height: 100%;
    width: 42px;
    background-image: var(--ribbon-image);
    background-color: var(--ribbon-color);
    border-left: 2px solid var(--ribbon-border-color);
    border-right: 2px solid var(--ribbon-border-color);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0.8);
  }

#primary {
    float: right;
    width: 100%;
    margin-bottom: -1em;
  }

#primary > .inner:first-child {
    padding-left: 45px;
  }
}

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

#header > .inner:first-child {
  margin: 0 auto;
  max-width: 1000px;
  padding: 40px 0;
  text-align: center;
}

h1#title {
  font-family: var(--title-font);
  padding: 0;
  margin: 0;
  font-size: 1.5em;
  font-weight: normal;
  color: var(--title-color);
}

h1#title a {
  color: inherit;
}

h2#subtitle {
  font-family: var(--title-font);
  padding: 0;
  margin: 0.5em 0 0;
  font-size: 1.2em;
  font-weight: normal;
  font-style: italic;
  color: var(--title-color);
}

h2#pagetitle {
  display: none;
}

@media (min-width: 1024px) {
  #header > .inner:first-child {
    border-left: 400px solid transparent;
    text-align: left;
  }

h1#title {
    padding: 0 40px 0 95px;
  }

h2#subtitle {
    padding: 0 40px 0 95px;
  }
}

.module-section-header {
  background-image: var(--ribbon-image);
  background-color: var(--ribbon-color);
  border-top: 2px solid var(--ribbon-border-color);
  border-bottom: 2px solid var(--ribbon-border-color);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.8);
  min-height: 42px;
  text-align: center;
}

.module-navlinks ul {
  display: flex;
  align-items: center;
  min-height: 42px;
  flex-wrap: wrap;
  justify-content: center;
}

.module-navlinks li {
  font-family: var(--title-font);
  padding: 0.25em 0.5em;
  display: inline-block;
}

.module-navlinks li a {
  color: var(--navigation-color);
  text-shadow: 0 0 2px rgba(0, 0, 0, 0.8);
}

.module-navlinks li a:hover {
  color: var(--navigation-hover-color);
}

@media (min-width: 1024px) {
  .module-section-header .inner {
    border-left: 400px solid transparent;
    max-width: 1000px;
    margin: 0 auto;
  }
  
  .module-navlinks{
    padding-left: 104px;
  }

.module-navlinks ul {
    justify-content: flex-start;
  }

.module-navlinks li:first-child {
    min-width: 400px;
    text-align: right;
    margin-left: -460px;
    margin-right: 60px;
    padding-right: 104px;
    box-sizing: border-box;
  }

.module-navlinks li {
    padding: 0.25em 1em 0.25em 0;
    text-align: center;
  }
}

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

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

@media (min-width: 640px) {
  .entry,
  .full .comment {
    margin: 40px 40px 0;
  }
}

.entry .entry-title {
  font-family: var(--title-font);
  font-size: 1.2em;
  border-bottom: 1px solid var(--entry-border-color);
  font-weight: normal;
  font-style: italic;
  color: var(--entry-title-color);
  margin: 0 0 1em;
  padding: 0 0 0.5em;
}

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

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

.no-subject .entry .entry-title {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
}

.entry .entry-title .ljuser img {
  display: none;
}

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

.entry .datetime {
  float: left;
}

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

.restrictions,
.access-filter {
  float: left;
  margin-right: 0.25em;
}

.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+)";
}

.has-userpic .userpic {
  float: right;
  shape-outside: circle(50%);
  margin-left: 1em;
}

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

@media (min-width: 800px) {
  .has-userpic .userpic img {
    max-width: 100px;
    max-height: 100px;
  }
}

.entry .poster {
  font-size: 0;
  display: block;
  clear: left;
}

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

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

.entry .poster .ljuser:nth-child(1):after {
  content:"";
  padding-right: 0.25em;
}

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

.entry .poster span b,
.full .comment .poster span b {
  font-weight: normal;
}

.poster .ljuser img {
  display: none;
}

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

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

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

.entry-content li,
.comment-content li {
  list-style-position: inside;
}

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

.metadata {
  font-style: italic;
}

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

.entry div.tag {
  font-style: italic;
}

.metadata li:first-letter,
.entry div.tag:first-letter {
  font-family: var(--title-font);
}

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

.tag ul li {
  display: inline;
}

ul.entry-management-links {
  margin: 2em 0 0 0;
  padding: 0;
  font-family: var(--title-font);
}

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

ul.entry-interaction-links {
  border-top: 1px solid var(--entry-border-color);
  margin: 0.5em 0 0 0;
  padding: 0.5em 0 0 0;
  text-align: right;
  font-family: var(--title-font);
}

.entry-interaction-links a,
.entry-management-links a,
.comment-interaction-links a,
.comment-management-links a {
  color: var(--entry-title-color);
}

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

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

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

.comment-pages {
  font-family: var(--title-font);
  margin: 0 20px;
  color: var(--title-color);
}

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

.comment-pages b {
  font-weight: normal;
}

.comment-pages:first-child {
  margin-top: 20px;
}

@media (min-width: 640px) {
  .comment-pages {
    margin: 0 40px;
  }

.comment-pages:first-child {
    margin-top: 40px;
  }
}

.comment-posted {
  font-weight: bold;
}

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

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

.full .comment-title {
  font-family: var(--title-font);
  font-size: 1.2em;
  border-bottom: 1px solid var(--entry-border-color);
  font-weight: normal;
  font-style: italic;
  color: var(--entry-title-color);
  margin: 0 0 1em;
  padding: 0 0 0.5em;
}

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

.full .comment-title a:hover {
  color: var(--entry-title-hover-color);
}

.no-subject .comment .comment-title {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
}

.comment .header .datetime {
  float: left;
}

.full .comment .poster {
  display: block;
  clear: left;
}

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

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

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

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

ul.comment-management-links {
  margin: 0;
  padding: 0;
  font-family: var(--title-font);
  display: inline;
}

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

ul.comment-interaction-links {
  margin: 0.5em 0 0;
  padding: 0.5em 0 0;
  border-top: 1px solid var(--entry-border-color);
  font-family: var(--title-font);
  text-align: right;
}

ul.comment-interaction-links li {
  display: inline;
  padding-left: 0.25em;
}

.multiform-checkbox {
  display: inline;
  font-family: var(--title-font);
  color: var(--entry-title-color);
  padding-right: 0.25em;
}

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

@media (min-width: 640px) {
  .partial .comment {
    margin: 40px 40px 0;
  }
}

#qrformdiv {
  right: 0 !important;
  min-width: 100% !important;
  padding: 0;
}

#qrform {
  padding-top: 2em;
}

#postform {
  margin: 20px 0;
  background: var(--entry-background-color);
  border: 1px solid var(--entry-border-color);
  padding: 2em;
}

@media (min-width: 640px) {
  #postform {
    margin: 40px 40px 0;
  }
}

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

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

.bottomcomment {
  margin: 0 20px;
  color: var(--title-color);
}

.bottomcomment select,
.bottomcomment input {
  background: var(--entry-background-color);
  border: 1px solid var(--entry-border-color);
  padding: 0.25em;
  font-family: var(--title-font);
  font-size: 1em;
  color: var(--entry-title-color);
}

.bottomcomment label:before {
  content: "";
  display: block;
  margin-top: 20px;
}

@media (min-width: 640px) {
  .bottomcomment {
    margin: 0 40px;
    color: var(--title-color);
  }

.bottomcomment label:before {
    margin-top: 40px;
  }
}

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

.month-wrapper,
.page-month .month,
.tags-container,
.icons-container {
  margin: 20px 0;
  background: var(--entry-background-color);
  border: 1px solid var(--entry-border-color);
  padding: 2em;
}

@media (min-width: 640px) {
  .month-wrapper,
  .page-month .month,
  .tags-container,
  .icons-container {
    margin: 40px 40px 0;
  }
}

.month .header,
.tags-container .header,
.icons-container .header {
  border-bottom: 1px solid var(--entry-border-color);
  margin-bottom: 2em;
}

.month-wrapper h3,
.tags-container h2,
.icons-container h2 {
  font-family: var(--title-font);
  font-size: 1.2em;
  font-weight: normal;
  color: var(--entry-title-color);
  margin: 0;
  padding: 0 0 0.5em;
  font-style: italic;
}

.month .footer,
#primary .manage-link {
  border-top: 1px solid var(--entry-border-color);
  padding-top: 0.5em;
  font-family: var(--title-font);
  text-align: right;
}

.month .footer a,
.tags-container .footer a,
.icons-container .footer a {
  color: var(--entry-title-color);
}

.month .footer a:hover,
.tags-container .footer a:hover,
.icons-container .footer a:hover {
  color: var(--entry-title-hover-color);
}

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

.month caption {
  display: none;
}

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

table.month {
  margin: 0 auto;
}

table.month td {
  font-family: var(--title-font);
  border-top: 1px solid var(--entry-border-color);
  width: 3.25em;
  height: 3.25em;
}

table.month th {
  padding: 0.5em;
  font-family: var(--title-font);
}

table.month td p {
  margin: 0;
  float: right;
}

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

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

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

.month dl dt {
  font-family: var(--title-font);
  border-bottom: 1px solid var(--entry-border-color);
  padding-bottom: 0.5em;
  color: var(--entry-title-color);
  margin-top: 2em;
  font-style: italic;
}

.month dl dt a {
  color: var(--entry-title-color);
}

.month dl dt:first-child {
  margin-top: 0;
}

.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 dl {
  margin: 0;
}

.month dl .tag ul {
  margin-top: 0;
}

.month dd {
  margin: 0;
  padding-top: 1em;
}

.month dd br {
  display: block;
}

.day-date {
  display: none;
}

#archive-month select,
#archive-month input {
  background: var(--entry-background-color);
  border: 1px solid var(--entry-border-color);
  padding: 0.25em;
  font-family: var(--title-font);
  font-size: 1em;
  color: var(--entry-title-color);
}

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

ul.ljtaglist {
  padding: 0;
  margin-left: 1em;
  line-height: 1.8;
  list-style: none;
}

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

.tags-container .manage-link {
  margin-top: 2em;
}

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

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

.page-icons .bottompages {
  text-align: center;
  margin-top: 2em;
}

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

.icon-image {
  float: left;
  margin: 1em 1em 1em 0;
}

.icon-info {
  margin: 1em 0;
}

.icon-image img {
  display: block;
}

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

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

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

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

.icon-pages p {
  margin: 0;
}

.keywords-label,
.comment-text,
.description-text {
  font-weight: bold;
}

.icons-container .manage-link {
  margin-top: 1em;
}

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

@media (min-width: 1024px) {
  #secondary {
    float: left;
    width: 400px;
    margin-left: -400px;
  }
}

.module-section-one .module {
  margin: 20px 0;
  background: var(--entry-background-color);
  border: 1px solid var(--entry-border-color);
  padding: 2em;
}

@media (min-width: 640px) {
  .module-section-one .module {
    margin: 40px;
  }
}

.module .module-header {
  font-family: var(--title-font);
  font-size: 1em;
  border-bottom: 1px solid var(--entry-border-color);
  text-align: right;
  color: var(--entry-title-color);
  font-weight: normal;
  padding: 0 0 0.5em;
  margin: 0;
  font-style: italic;
}

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

.module-section-one .module-content {
  padding-top: 1em;
}

.module-content ul {
  list-style: none;
  margin-left: 1em;
  padding: 0;
}

.module-content ul:first-child {
  margin: 0;
}

.module-section-one .module-content li {
  margin: 0.25em 0;
}

.module-section-one .module-userprofile {
  background: transparent;
  border: 0;
  padding: 0;
  text-align: center;
}

.module-section-one .module-userprofile .module-content {
  padding: 0;
}

.module .userpic {
  width: 100px;
  height: 100px;
  padding: 17px;
  background: var(--icon-frame) no-repeat;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}

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

@media (min-width: 1024px) {
  .module-section-one .module-userprofile {
    margin: 0;
  }

.module .userpic {
    position: absolute;
    top: -90px;
    left: -44px;
  }
}

.module-calendar .module-content {
  text-align: center;
  font-family: var(--title-font);
  font-weight: normal;
}

.module-calendar table {
  margin: 0 auto;
}

.module-calendar td,
.module-calendar th {
  width: 2em;
  height: 2em;
  line-height: 1;
}

.entry-day {
  border-radius: 50%;
  border: 1px solid var(--entry-border-color);
  text-align: center;
}

.module-syndicate .module-content,
.module-search .module-content,
.module-cuttagcontrols .module-content {
  text-align: center;
}

.search-box {
  margin: 0.2em auto;
  max-width: 100%;
}

.search-form .search-box-item,
.search-form .search-button-item {
  display: block;
}

.search-form .comment_search_checkbox_item {
  display: inline;
}

.search-box-item input {
  border: 1px solid var(--entry-border-color);
  font-size: var(--text-size);
  font-family: var(--main-font);
}

.search-button-item input {
  background: transparent;
  border: 0;
  font-size: var(--text-size);
  color: var(--entry-title-color);
  font-family: var(--title-font);
  line-height: 1;
}

.module-pagesummary .ljuser {
  white-space: normal !important;
}

.module-pagesummary .ljuser img {
  display: none;
}

.module-pagesummary .module-content {
  word-wrap: break-word;
}

.tags_cloud li,
.module-tags_cloud li {
  display: inline;
}

.module-customtext .module-content:first-letter {
  font-family: var(--title-font);
  font-style:italic;
}

.module-userprofile .module-header,
.journal-name,
.journal-website-name,
ul.userlite-interaction-links,
.module-navlinks h2,
.module-credit,
.module-time,
.module-powered,
.module .manage-link {
  display: none !important;
}

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

.navigation {
  font-family: var(--title-font);
  line-height: 1;
  color: var(--title-color);
}

.navigation ul {
  margin: 20px;
  padding: 0;
}

@media (min-width: 640px) {
  .navigation ul {
    margin: 40px 40px 0;
    padding: 0;
  }
}

.navigation li {
  display: inline;
  padding-right: 1em;
}

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

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

#footer {
  max-width: 1000px;
  margin: 20px;
  line-height: 1;
}

@media (min-width: 640px) {
  #footer {
    margin: 40px;
  }
}

#footer .inner {
  font-family: var(--title-font);
}

#footer a {
  color: var(--title-color);
}

@media (min-width: 1024px) {
  #footer {
    clear: left;
    padding-left: 400px;
    margin: 0 auto 40px;
  }

#footer .inner {
    width: 400px;
    margin-left: -400px;
    text-align: right;
  }

.page-top {
    padding-right: 40px;
  }
}

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

div.ContextualPopup {
  background: var(--entry-background-color);
  border: 0;
  font-family: var(--main-font);
  font-size: 1em;
  color: var(--text-color);
  padding: 1.5em;
  width: 200px;
  border: 1px solid var(--entry-border-color);
}

div.ContextualPopup .Relation {
  font-family: var(--title-font);
  border-bottom: 1px solid var(--entry-border-color);
  padding: 1em 0;
  font-size: 1em;
  font-weight: normal;
  text-align: center;
}

div.ContextualPopup .Userpic {
  border: 0;
  float: none;
  text-align: center;
}

div.ContextualPopup .Userpic img {
  border-radius: 50%;
  margin-bottom: 0.25em;
  border: 3px solid var(--entry-border-color);
}

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

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

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

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

#lj_controlstrip {
  background-image: var(--ribbon-image);
  background-color: var(--ribbon-color);
  background-repeat: repeat;
  justify-content: center;
  color: var(--navigation-color);
  padding: 0.25em 0;
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.8);
  width: auto;
  border-top: 2px solid var(--ribbon-border-color);
  border-bottom: 2px solid var(--ribbon-border-color);
  text-shadow: 0 0 2px rgba(0, 0, 0, 0.8);
  z-index: 9;
}

#lj_controlstrip > div {
  font-family: var(--main-font);
  font-size: 14px;
  flex-grow: 0;
}

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

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

#lj_controlstrip_actionlinks {
  text-align: center;
}

#lj_controlstrip_statustext {
  font-weight: normal;
  font-size: 14px;
  color: var(--navigation-color);
}

#lj_controlstrip_search {
  text-align: right;
}

#lj_controlstrip input,
#lj_controlstrip select {
  border: 0;
  font-size: 1em !important;
  font-family: var(--main-font) !important;
}

#lj_controlstrip input[type="submit"] {
  border: 0;
  background: transparent;
  font-size: 1em;
  font-style: italic;
  color: var(--navigation-color);
  font-family: var(--title-font) !important;
  padding: 0.25em;
  text-shadow: 0 0 2px rgba(0, 0, 0, 0.8);
}

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

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

#lj_controlstrip .ljuser img {
  display: none;
}

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

How to install:

Go to the "Select style" page, search for "Strata" and apply any theme.
Go to the "Customize your theme" page, click 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=Lora&family=Eagle+Lake&display=swap into the "Custom stylesheet URL" field.
Click on the "Presentation" tab. In the "Additional options" section select "text-only" for "Select whether entry management links are printed as text or using the available icons" and "Select whether comment management links are printed as text or using the available icons".

Resources: images from subtlepatterns.com

Present

no subject

no subject