Kaylvang's Blog

Layout CSS

/* ♡ KAYLVANG'S LACE DIARY ♡
   FriendRewind blog theme — v2, A Letter for You
   Paste into the CSS field of a custom BLOG layout.
   Hosted image URLs are installed.
   Keep your original layout backed up while testing.
*/

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,500;0,600;1,500&display=swap');

:root {
  --diary-cream: #fffdf9;
  --diary-paper: #fff9f7;
  --diary-pink: #e096aa;
  --diary-rose: #b86d86;
  --diary-pale-pink: #f5dce3;
  --diary-sage: #62765c;
  --diary-mist: #e7ede2;
  --diary-ink: #52614e;
}

/* Wallpaper: miniature pink gingham on warm ivory. */
html, body {
  color: var(--diary-ink) !important;
  background-color: #fdf5f5 !important;
  background-image: url("https://i.ibb.co/jvsQTD6X/Ivory-Lace-and-Dusty-Roses.png") !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-position: center top !important;
  background-attachment: fixed !important;
  font-family: 'DM Sans', Arial, sans-serif !important;
}

/* Full-page ivory lace and dusty rose wallpaper, hosted by Kait.
   background-size: cover fills wide screens without default side gutters.
   On small portrait screens, outer floral edges may crop naturally.
*/

/* Matching watercolor floral header and footer.
   The white translucent layer keeps navigation links readable.
*/
.myspace-header .top-nav,
.myspace-header .main-nav-wrapper,
nav .top, nav .links, footer {
  background-color: #faf7ef !important;
  background-image:
    linear-gradient(rgba(255,253,249,.48), rgba(255,253,249,.48)),
    url('https://i.ibb.co/39zZrG6G/download-2.jpg') !important;
  background-repeat: repeat, repeat !important;
  background-size: auto, 320px auto !important;
  background-position: center !important;
  border-color: #e8c6cf !important;
}

.myspace-header a,
.myspace-header label,
nav a, footer a, nav label, footer p {
  color: var(--diary-sage) !important;
}

/* ♡ Sushi Green Tea cursor selected by Kait ♡ */
*, *::before, *::after {
  cursor: url('https://cdn.cursors-4u.net/previews/sushi-green-tea-742869c8-32.webp') 34 32, auto !important;
}

/* ♡ A LETTER FOR YOU ♡
   Full-page welcome screen that automatically fades away.
   Hosted envelope image on a pink gingham screen.
*/
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 99998;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  padding-bottom: 35px;
  font: normal clamp(74px, 18vw, 160px)/1 Georgia, serif;
  text-align: center;
  background-color: #fff7f8;
  background-image: url("https://i.ibb.co/X0LRw1n/Lace-Diary-Love-Letter.png"),
    linear-gradient(90deg, rgba(224,150,170,.08) 50%, transparent 50%),
    linear-gradient(rgba(224,150,170,.08) 50%, transparent 50%);
  background-size: min(55vw, 320px) auto, 32px 32px, 32px 32px;
  background-repeat: no-repeat, repeat, repeat;
  background-position: center 43%, center, center;
  animation: diary-welcome 2.3s ease forwards;
  pointer-events: none;
}

body::after {
  content: 'a little letter for you ♡';
  position: fixed;
  z-index: 99999;
  left: 0;
  right: 0;
  top: 70%;
  padding: 0 14px;
  color: #a8667c;
  font: italic clamp(19px, 4.5vw, 28px)/1.3 'Playfair Display', Georgia, serif;
  letter-spacing: .03em;
  text-align: center;
  animation: diary-welcome 2.3s ease forwards;
  pointer-events: none;
}

@keyframes diary-welcome {
  0%, 60% { opacity: 1; visibility: visible; }
  100% { opacity: 0; visibility: hidden; }
}

/* Preserve the original's dainty, inset diary-window feeling. */
main {
  box-sizing: border-box;
  max-width: 860px !important;
  width: min(92%, 860px) !important;
  height: auto !important;
  min-height: 440px;
  margin: 32px auto !important;
  padding: clamp(18px, 4vw, 38px) !important;
  overflow: visible !important;
  color: var(--diary-ink) !important;
  background:
    linear-gradient(var(--diary-cream), var(--diary-cream)) padding-box,
    repeating-linear-gradient(45deg, #f6dce4 0 8px, #fffdf9 8px 16px, #dde9d8 16px 24px, #fffdf9 24px 32px) border-box !important;
  border: 12px solid transparent !important;
  border-radius: 18px !important;
  box-shadow: 0 9px 30px rgba(104,78,83,.13), inset 0 0 0 1px #ebcbd6;
}

/* Soft lace stitching inside the outer candy-stripe border. */
main::before {
  content: '♡  ·  ♡  ·  ♡  ·  ♡  ·  ♡';
  display: block;
  margin: -12px auto 24px;
  padding: 9px 0 12px;
  color: var(--diary-rose);
  border-bottom: 2px dotted #e9bdcb;
  text-align: center;
  letter-spacing: .5em;
  font-size: 12px;
}

h1, h2, h3, h4, h5 {
  color: var(--diary-sage) !important;
  font-family: 'Playfair Display', Georgia, serif !important;
  line-height: 1.25;
}

h1 {
  color: var(--diary-rose) !important;
  font-size: clamp(30px, 5vw, 46px) !important;
  font-style: italic;
  text-align: center;
  text-shadow: 1px 2px 0 #fff;
  animation: diary-float 4s ease-in-out infinite;
}

@keyframes diary-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

/* ♡ Whipped-cream profile-picture frame ♡
   Original transparent frame artwork supplied by Kait.
   Scope to a blog entry's author card, not every image on the site.
*/
.row.article.blog-entry .edit-info .profile-pic {
  position: relative !important;
  box-sizing: border-box !important;
  width: 160px !important;
  max-width: 100% !important;
  aspect-ratio: 1 / 1;
  overflow: visible !important;
  isolation: isolate;
  border: none !important;
  background: transparent !important;
}

.row.article.blog-entry .edit-info .profile-pic img {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
  aspect-ratio: 1 / 1;
  object-fit: cover !important;
  box-sizing: border-box !important;
  padding: 19% !important;
  border: 0 !important;
  border-radius: 0 !important;
}

.row.article.blog-entry .edit-info .profile-pic::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  background: url('https://64.media.tumblr.com/b8ade1643ed8ec956f25d7b5432d82ed/ce9f592c99f44d2f-22/s500x750/02a3baa07ac74a3d76ccde17863926b19bf6d341.pnj') center / 100% 100% no-repeat;
  pointer-events: none;
}

p, li, td, blockquote, .section {
  color: var(--diary-ink) !important;
  font-family: 'DM Sans', Arial, sans-serif !important;
  line-height: 1.7 !important;
}

a { color: var(--diary-rose) !important; text-decoration-color: #e5b1c0; }
a:hover { color: var(--diary-sage) !important; text-decoration: underline wavy !important; }

/* The paper-card treatment also catches common blog content containers. */
article, .blog-content, .blog-post, .blog-entry, .blog-body, .blog-preview {
  background: var(--diary-paper) !important;
  border: 1px solid #efd7dd !important;
  border-radius: 10px !important;
  padding: clamp(12px, 2vw, 22px) !important;
  box-shadow: 0 3px 0 rgba(224,150,170,.10);
}

/* ♡ DAINTY DIARY COMMENTS ♡
   Replaces the default yellow/orange blog-comment styling.
*/
.comments {
  background: #fffdfa !important;
  border: 1px solid #ead3db !important;
  border-radius: 12px !important;
  padding: 12px !important;
  box-shadow: 0 4px 13px rgba(139,96,111,.07);
}

.comments > .heading,
.comments .heading {
  background: #f3e2e7 !important;
  border: 1px solid #e8c5d1 !important;
  border-radius: 9px !important;
  padding: 8px 12px !important;
}

.comments .heading h4 {
  color: #62765c !important;
  font: italic 600 21px/1.3 'Playfair Display', Georgia, serif !important;
  margin: 0 !important;
}

.comments .inner,
.comments .comment-count-links {
  background: transparent !important;
  color: #62765c !important;
}

.comments .comments-table {
  width: 100% !important;
  background: #fffaf8 !important;
  border: 1px solid #e9d6dc !important;
  border-collapse: separate !important;
  border-spacing: 0 8px !important;
  border-radius: 10px !important;
}

.comments .comments-table tr,
.comments .comments-table td,
.comments .comment-reply,
.comments .cb-author-cell,
.comments .cb-content-cell {
  background: #fffaf8 !important;
  border-color: #f0dee4 !important;
  color: #52614e !important;
}

.comments .comments-table tr td:first-child,
.comments .cb-author-cell {
  background: #f7f0ee !important;
  border-right: 1px dotted #e8bfcb !important;
  border-radius: 8px 0 0 8px;
}

.comments .comments-table tr td:last-child,
.comments .cb-content-cell {
  border-radius: 0 8px 8px 0;
}

.comments .cb-author-name,
.comments .cb-author-name a,
.comments .cb-body,
.comments .count {
  color: #62765c !important;
}

.comments .comment-replies {
  border-left: 3px solid #e5b6c6 !important;
  background: #fdf6f7 !important;
}

.comments .cb-like-btn,
.comments .cb-pin-btn,
.comments button,
.comments input[type='submit'] {
  background: #f4e7eb !important;
  color: #62765c !important;
  border: 1px solid #e5bfcb !important;
  border-radius: 7px !important;
}

.comments textarea,
.comments input[type='text'],
.comments .cb-edit-textarea {
  background: #fffdfb !important;
  color: #52614e !important;
  border: 1px solid #e5cbd4 !important;
  border-radius: 8px !important;
}

blockquote {
  margin: 1.2em 0;
  padding: .75em 1.2em;
  background: #f7eeee;
  border-left: 4px solid var(--diary-pink);
  border-radius: 0 9px 9px 0;
}

hr { border: 0; border-top: 2px dotted #e7b8c8; margin: 24px 0; }

button, input[type='submit'], input[type='button'] {
  color: var(--diary-sage) !important;
  background: var(--diary-mist) !important;
  border: 1px solid #b9c9b2 !important;
  border-radius: 8px !important;
  font-family: 'DM Sans', Arial, sans-serif !important;
}

/* Rose-and-sage scrollbar, inspired by the original retro scrollbar. */
::-webkit-scrollbar { width: 11px; }
::-webkit-scrollbar-track { background: #fff0f4; }
::-webkit-scrollbar-thumb {
  background: #dca2b3;
  border: 2px solid #fff0f4;
  border-radius: 12px;
}

@media (max-width: 600px) {
  main { width: 94% !important; margin: 14px auto !important; border-width: 7px !important; }
  main::before { letter-spacing: .18em; }
  h1 { animation: none; }
  .row.article.blog-entry .edit-info .profile-pic {
    width: 110px !important;
    min-width: 110px !important;
    flex: 0 0 110px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  h1 { animation: none; }
  body::before, body::after { animation-duration: .15s; }
}