← Back to Blog Layouts
Layout Preview

Blue

Author: 𝓪𝓹𝓹𝓵𝓮𝓱𝓮𝓪𝓭
Category: ¿?
Created: October 3, 2026
Downloads: 18
Log in to Apply

Live Preview

Comments (0)

No comments yet. Be the first!

Log in to leave a comment.

Layout CSS

```css
/* =========================================================
   FRIEND REWIND — PASTEL BLUE LIQUID GLASS
   CORRECTED BLOG LAYOUT
   ========================================================= */


/* =========================================================
   GLOBAL / BACKGROUND
   ========================================================= */

html {
  min-height: 100%;
  background: #9fbfd0 !important;
}

body {
  min-height: 100vh;
  margin: 0 !important;

  font-family: Georgia, monospace !important;

  background:
    linear-gradient(
      135deg,
      rgba(225,242,250,.16),
      rgba(120,158,181,.10)
    ),
    url("https://friendrewind.com/uploads/gallery/35749/img_6ab418c7276a88.68486332.webp")
    center center / cover fixed no-repeat !important;

  color: #eaf7fc !important;
}


/* =========================================================
   REMOVE ORIGINAL DARK BACKGROUNDS
   ========================================================= */

main,
section,
article,
aside,
.container,
.wrapper,
.page,
.page-content,
.profile,
.profile-content,
.profile-section,
.blog,
.blog-post,
.comments,
.comment,
table,
tbody,
tr {
  background-color: transparent !important;
}


/* =========================================================
   LINKS
   ========================================================= */

a {
  color: #e4f5fc !important;
  text-decoration: underline !important;

  transition:
    color .2s ease,
    text-shadow .2s ease;
}

a:hover {
  color: #ffffff !important;

  text-shadow:
    0 0 8px rgba(255,255,255,.65);
}


/* =========================================================
   GLOBAL GLASS
   ========================================================= */

.myspace-header,
.blog-entry,
.edit-info,
#comments,
.comments-table td,
footer {

  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.20),
      rgba(180,215,230,.10)
    ) !important;

  backdrop-filter:
    blur(20px)
    saturate(135%) !important;

  -webkit-backdrop-filter:
    blur(20px)
    saturate(135%) !important;

  border:
    1px solid rgba(255,255,255,.52) !important;

  box-shadow:
    0 15px 40px rgba(50,90,110,.18),
    inset 0 1px 0 rgba(255,255,255,.72),
    inset 0 -1px 0 rgba(255,255,255,.12) !important;
}


/* =========================================================
   HEADER
   ========================================================= */

.myspace-header {

  position: relative;
  z-index: 100;

  display: block !important;

  width: 85%;
  max-width: 990px;

  margin: 0 auto !important;
  padding: 0 !important;

  box-sizing: border-box !important;

  color: #e8f7fc !important;

  font-size: 12px;
  line-height: 0;

  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.22),
      rgba(145,185,205,.12)
    ) !important;

  border:
    1px solid rgba(255,255,255,.65) !important;

  border-radius: 51px !important;

  box-shadow:
    0 12px 35px rgba(50,90,110,.20),
    inset 0 1px 0 rgba(255,255,255,.85),
    inset 0 -1px 0 rgba(255,255,255,.15) !important;

  backdrop-filter:
    blur(22px)
    saturate(140%) !important;

  -webkit-backdrop-filter:
    blur(22px)
    saturate(140%) !important;
}


/* =========================================================
   TOP NAV / SEARCH
   ========================================================= */

.myspace-header .top-nav {

  width: 519px !important;
  max-width: calc(100% - 20px) !important;

  margin: 0 auto !important;

  box-sizing: border-box !important;

  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.28),
      rgba(130,170,190,.10)
    ),
    url("https://friendrewind.com/uploads/gallery/35749/img_6ab418c7276a88.68486332.webp")
    center / cover !important;

  border:
    2px solid rgba(255,255,255,.65) !important;

  border-radius: 57px !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    inset 0 -1px 0 rgba(255,255,255,.15),
    0 8px 25px rgba(50,90,110,.16) !important;

  backdrop-filter:
    blur(12px)
    saturate(130%) !important;

  -webkit-backdrop-filter:
    blur(12px)
    saturate(130%) !important;
}


/* =========================================================
   SEARCH
   ========================================================= */

.myspace-header .top-nav .search-input {

  background:
    rgba(255,255,255,.30) !important;

  color:
    #ffffff !important;

  border:
    1px solid rgba(255,255,255,.65) !important;

  border-radius:
    12px 0 0 12px !important;

  box-shadow:
    inset 0 1px 3px rgba(50,90,110,.10) !important;

  backdrop-filter:
    blur(12px) !important;

  -webkit-backdrop-filter:
    blur(12px) !important;
}


.myspace-header .top-nav .search-input::placeholder {
  color: rgba(255,255,255,.78) !important;
}


.myspace-header .top-nav .search-button {

  background:
    rgba(255,255,255,.48) !important;

  color:
    #789eb5 !important;

  border:
    1px solid rgba(255,255,255,.72) !important;

  border-radius:
    0 12px 12px 0 !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.75) !important;

  transition:
    background .2s ease,
    box-shadow .2s ease;
}


.myspace-header .top-nav .search-button:hover {

  background:
    rgba(255,255,255,.72) !important;

  box-shadow:
    0 0 18px rgba(255,255,255,.28),
    inset 0 1px 0 rgba(255,255,255,.9) !important;
}


/* =========================================================
   MAIN NAV
   ========================================================= */

.myspace-header .main-nav-wrapper {

  background:
    linear-gradient(
      to bottom,
      rgba(255,255,255,.18),
      rgba(120,158,181,.18)
    ) !important;

  border-top:
    1px solid rgba(255,255,255,.55) !important;

  border-bottom:
    1px solid rgba(255,255,255,.45) !important;

  border-radius:
    12px !important;

  height:
    48px !important;

  backdrop-filter:
    blur(18px)
    saturate(135%) !important;

  -webkit-backdrop-filter:
    blur(18px)
    saturate(135%) !important;
}


.myspace-header .main-nav {

  list-style: none;

  margin: 0 !important;

  padding: 0 0 0 42px !important;

  display: flex;

  height: 100%;
}


.myspace-header .main-nav li a {

  background:
    rgba(255,255,255,.08) !important;

  border:
    1px solid rgba(255,255,255,.50) !important;

  border-right-color:
    transparent !important;

  border-radius:
    30px !important;

  color:
    #ffffff !important;

  transition:
    background .25s ease,
    box-shadow .25s ease,
    transform .2s ease;
}


.myspace-header .main-nav li a:hover {

  background:
    rgba(255,255,255,.28) !important;

  box-shadow:
    0 5px 18px rgba(255,255,255,.22),
    inset 0 1px 0 rgba(255,255,255,.65);

  transform:
    translateY(-1px);
}


/* =========================================================
   DROPDOWNS
   ========================================================= */

.myspace-header .dropdown-menu {

  background:
    rgba(125,165,185,.26) !important;

  backdrop-filter:
    blur(20px)
    saturate(145%) !important;

  -webkit-backdrop-filter:
    blur(20px)
    saturate(145%) !important;

  border:
    1px solid rgba(255,255,255,.62) !important;

  border-radius:
    16px !important;

  box-shadow:
    0 15px 35px rgba(40,80,100,.22),
    inset 0 1px 0 rgba(255,255,255,.7) !important;
}


/* =========================================================
   LOGO
   ========================================================= */

.myspace-header .nav-logo {

  height:
    73px;

  width:
    auto;

  margin:
    0 10px;

  position:
    relative;

  top:
    2px;

  filter:
    drop-shadow(0 3px 8px rgba(255,255,255,.55));
}


/* =========================================================
   MAIN PAGE
   ========================================================= */

main {

  box-sizing:
    border-box !important;

  width:
    100% !important;

  max-width:
    1100px !important;

  margin:
    20px auto !important;

  padding:
    20px !important;

  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.12),
      rgba(130,175,195,.08)
    ) !important;

  border-left:
    1px solid rgba(255,255,255,.38) !important;

  border-right:
    1px solid rgba(255,255,255,.38) !important;

  color:
    #ffffff !important;

  backdrop-filter:
    blur(14px)
    saturate(125%) !important;

  -webkit-backdrop-filter:
    blur(14px)
    saturate(125%) !important;
}


/* =========================================================
   ★ BLOG LAYOUT — THE IMPORTANT PART ★
   ========================================================= */

/*
   FriendRewind's HTML is:

   .row.blog-entry
      ├── .col.w-20.left
      │      └── .edit-info
      │
      └── .col.right
             ├── .title
             ├── .content
             └── .comments

   We explicitly rebuild this row.
*/


.blog-entry {

  display:
    flex !important;

  flex-direction:
    row !important;

  align-items:
    flex-start !important;

  justify-content:
    center !important;

  gap:
    20px !important;

  width:
    100% !important;

  max-width:
    100% !important;

  margin:
    0 auto !important;

  padding:
    18px !important;

  box-sizing:
    border-box !important;

  position:
    relative !important;

  left:
    auto !important;

  right:
    auto !important;

  overflow:
    hidden;

  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.20),
      rgba(145,185,205,.08)
    ) !important;

  border:
    1px solid rgba(255,255,255,.58) !important;

  border-radius:
    24px !important;

  box-shadow:
    0 20px 50px rgba(45,85,105,.18),
    inset 0 1px 0 rgba(255,255,255,.80),
    inset 0 -1px 0 rgba(255,255,255,.12) !important;

  backdrop-filter:
    blur(20px)
    saturate(135%) !important;

  -webkit-backdrop-filter:
    blur(20px)
    saturate(135%) !important;
}


/* =========================================================
   PROFILE COLUMN
   ========================================================= */

.blog-entry > .col.w-20.left {

  flex:
    0 0 20% !important;

  width:
    20% !important;

  max-width:
    20% !important;

  min-width:
    0 !important;

  float:
    none !important;

  margin:
    0 !important;

  padding:
    0 !important;

  box-sizing:
    border-box !important;

  position:
    relative !important;

  left:
    auto !important;

  right:
    auto !important;
}


/* =========================================================
   PROFILE GLASS
   ========================================================= */

.blog-entry > .col.w-20.left .edit-info {

  width:
    100% !important;

  box-sizing:
    border-box !important;

  margin:
    0 !important;

  padding:
    20px !important;

  background:
    linear-gradient(
      135deg,
      rgba(145,185,205,.20),
      rgba(255,255,255,.12)
    ) !important;

  backdrop-filter:
    blur(20px)
    saturate(135%) !important;

  -webkit-backdrop-filter:
    blur(20px)
    saturate(135%) !important;

  border:
    1px solid rgba(255,255,255,.58) !important;

  border-radius:
    22px !important;

  box-shadow:
    0 15px 35px rgba(45,85,105,.17),
    inset 0 1px 0 rgba(255,255,255,.70) !important;
}


/* =========================================================
   BLOG CONTENT COLUMN
   ========================================================= */

.blog-entry > .col.right {

  flex:
    1 1 0 !important;

  width:
    auto !important;

  max-width:
    none !important;

  min-width:
    0 !important;

  float:
    none !important;

  margin:
    0 !important;

  padding:
    0 !important;

  box-sizing:
    border-box !important;

  position:
    relative !important;

  left:
    auto !important;

  right:
    auto !important;
}


/* =========================================================
   BLOG TITLE
   ========================================================= */

.blog-entry > .col.right > .title {

  width:
    100% !important;

  box-sizing:
    border-box !important;

  margin:
    0 0 18px 0 !important;

  color:
    #ffffff !important;

  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.20),
      rgba(120,158,181,.12)
    ),
    url("https://friendrewind.com/uploads/gallery/35749/img_6ab418c7276a88.68486332.webp")
    center / cover !important;

  border:
    1px solid rgba(255,255,255,.68) !important;

  border-radius:
    20px !important;

  padding:
    20px !important;

  font-size:
    2em !important;

  text-align:
    center !important;

  text-shadow:
    0 2px 8px rgba(45,75,95,.42);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.85),
    inset 0 -1px 0 rgba(255,255,255,.15),
    0 10px 25px rgba(50,90,110,.14) !important;
}


/* =========================================================
   BLOG CONTENT
   ========================================================= */

.blog-entry > .col.right > .content {

  width:
    100% !important;

  box-sizing:
    border-box !important;

  margin:
    0 !important;

  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.15),
      rgba(145,185,205,.07)
    ) !important;

  border:
    1px solid rgba(255,255,255,.46) !important;

  border-radius:
    20px !important;

  padding:
    24px !important;

  color:
    #ffffff !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.62),
    inset 0 -1px 0 rgba(255,255,255,.10) !important;

  backdrop-filter:
    blur(16px)
    saturate(125%) !important;

  -webkit-backdrop-filter:
    blur(16px)
    saturate(125%) !important;
}


/* =========================================================
   BLOG TEXT
   ========================================================= */

.blog-entry .content b,
.blog-entry .content strong {

  color:
    #ffffff !important;

  text-shadow:
    0 1px 4px rgba(45,75,95,.38);
}


.blog-entry .content p,
.blog-entry .content li {

  text-shadow:
    0 1px 3px rgba(45,75,95,.25);
}


/* =========================================================
   LISTS
   ========================================================= */

.blog-entry .content ul,
.blog-entry .content ol {

  background:
    rgba(125,165,185,.16) !important;

  backdrop-filter:
    blur(14px) !important;

  -webkit-backdrop-filter:
    blur(14px) !important;

  border:
    1px solid rgba(255,255,255,.48) !important;

  border-radius:
    15px !important;

  padding:
    15px 20px !important;

  color:
    #ffffff !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.45),
    0 5px 18px rgba(50,90,110,.10) !important;
}


.blog-entry li::marker {
  color: #ffffff !important;
}


/* =========================================================
   BLOCKQUOTES
   ========================================================= */

.blog-entry blockquote {

  background:
    linear-gradient(
      135deg,
      rgba(125,165,185,.22),
      rgba(255,255,255,.10)
    ) !important;

  backdrop-filter:
    blur(16px)
    saturate(130%) !important;

  -webkit-backdrop-filter:
    blur(16px)
    saturate(130%) !important;

  border-left:
    4px solid rgba(255,255,255,.82) !important;

  border-top:
    1px solid rgba(255,255,255,.35) !important;

  border-right:
    1px solid rgba(255,255,255,.18) !important;

  border-bottom:
    1px solid rgba(255,255,255,.18) !important;

  border-radius:
    0 16px 16px 0 !important;

  padding:
    18px !important;

  color:
    #ffffff !important;

  box-shadow:
    0 8px 20px rgba(45,85,105,.14),
    inset 0 1px 0 rgba(255,255,255,.40) !important;
}


/* =========================================================
   PROFILE PICTURE
   ========================================================= */

.edit-info .profile-pic img {

  display:
    block !important;

  max-width:
    100% !important;

  margin:
    0 auto !important;

  border-radius:
    50% !important;

  animation:
    spin 7s infinite linear !important;

  border:
    3px solid rgba(255,255,255,.82) !important;

  box-shadow:
    0 0 0 5px rgba(255,255,255,.10),
    0 8px 28px rgba(40,80,100,.25),
    inset 0 1px 0 rgba(255,255,255,.8) !important;
}


@keyframes spin {

  from {
    transform:
      rotate(0deg);
  }

  to {
    transform:
      rotate(-360deg);
  }

}


/* =========================================================
   AUTHOR TEXT
   ========================================================= */

.edit-info h4 {

  color:
    #ffffff !important;

  text-shadow:
    0 1px 5px rgba(45,75,95,.30);
}


.edit-info a {

  color:
    #e8f8ff !important;
}


/* =========================================================
   BLOG IMAGES
   ========================================================= */

.blog-entry .content img {

  max-width:
    100% !important;

  height:
    auto !important;

  border-radius:
    18px !important;

  border:
    1px solid rgba(255,255,255,.72) !important;

  box-shadow:
    0 12px 30px rgba(40,80,100,.20),
    0 0 0 4px rgba(255,255,255,.07) !important;

  transition:
    transform .3s ease,
    box-shadow .3s ease;
}


.blog-entry .content img:hover {

  transform:
    translateY(-2px);

  box-shadow:
    0 18px 38px rgba(40,80,100,.26),
    0 0 0 5px rgba(255,255,255,.12) !important;
}


/* =========================================================
   KUDOS
   ========================================================= */

.blog-entry .kudos-container {

  margin-top:
    14px !important;

  color:
    #ffffff !important;
}


/* =========================================================
   COMMENTS
   ========================================================= */

.blog-entry > .col.right > #comments {

  width:
    100% !important;

  box-sizing:
    border-box !important;

  margin:
    18px 0 0 0 !important;

  background:
    linear-gradient(
      135deg,
      rgba(145,185,205,.14),
      rgba(255,255,255,.08)
    ) !important;

  border:
    1px solid rgba(255,255,255,.42) !important;

  border-radius:
    18px !important;

  padding:
    20px !important;

  backdrop-filter:
    blur(18px)
    saturate(130%) !important;

  -webkit-backdrop-filter:
    blur(18px)
    saturate(130%) !important;
}


#comments h2,
#comments h4 {

  color:
    #ffffff !important;

  text-shadow:
    0 1px 5px rgba(45,75,95,.35);
}


/* =========================================================
   COMMENT CELLS
   ========================================================= */

.comments-table td {

  background:
    linear-gradient(
      135deg,
      rgba(145,185,205,.20),
      rgba(255,255,255,.09)
    ) !important;

  backdrop-filter:
    blur(15px)
    saturate(130%) !important;

  -webkit-backdrop-filter:
    blur(15px)
    saturate(130%) !important;

  border:
    1px solid rgba(255,255,255,.50) !important;

  border-radius:
    14px !important;

  color:
    #ffffff !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.48),
    0 5px 18px rgba(45,85,105,.10) !important;
}


/* =========================================================
   FOOTER
   ========================================================= */

footer {

  box-sizing:
    border-box !important;

  width:
    100% !important;

  max-width:
    1100px !important;

  margin:
    20px auto !important;

  background:
    linear-gradient(
      135deg,
      rgba(120,158,181,.20),
      rgba(255,255,255,.10)
    ) !important;

  backdrop-filter:
    blur(18px)
    saturate(135%) !important;

  -webkit-backdrop-filter:
    blur(18px)
    saturate(135%) !important;

  border:
    1px solid rgba(255,255,255,.56) !important;

  border-radius:
    18px !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.62),
    0 10px 30px rgba(45,85,105,.14) !important;
}


footer p {
  color: #ffffff !important;
}


/* =========================================================
   INPUTS
   ========================================================= */

input,
textarea,
select {

  background:
    rgba(255,255,255,.18) !important;

  color:
    #ffffff !important;

  border:
    1px solid rgba(255,255,255,.55) !important;

  border-radius:
    10px !important;

  box-shadow:
    inset 0 1px 4px rgba(45,75,95,.10),
    inset 0 1px 0 rgba(255,255,255,.50) !important;

  backdrop-filter:
    blur(12px) !important;

  -webkit-backdrop-filter:
    blur(12px) !important;
}


input::placeholder,
textarea::placeholder {

  color:
    rgba(255,255,255,.72) !important;
}


/* =========================================================
   BUTTONS
   ========================================================= */

button {

  background:
    rgba(255,255,255,.25) !important;

  color:
    #ffffff !important;

  border:
    1px solid rgba(255,255,255,.60) !important;

  border-radius:
    12px !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.65),
    0 5px 15px rgba(45,85,105,.12) !important;

  backdrop-filter:
    blur(12px) !important;

  -webkit-backdrop-filter:
    blur(12px) !important;

  transition:
    background .2s ease,
    transform .2s ease,
    box-shadow .2s ease;
}


button:hover {

  background:
    rgba(255,255,255,.42) !important;

  transform:
    translateY(-1px);

  box-shadow:
    0 8px 20px rgba(255,255,255,.18),
    inset 0 1px 0 rgba(255,255,255,.85) !important;
}


/* =========================================================
   CUSTOM CURSOR
   ========================================================= */

* {

  cursor:
    url("https://friendrewind.com/uploads/gallery/35749/img_6ab41d799cb6f7.17222299.webp")
    32 32,
    auto !important;
}


/* =========================================================
   MUSIC BAR — INVISIBLE
   ========================================================= */

.music-bar {

  background:
    transparent !important;

  backdrop-filter:
    none !important;

  -webkit-backdrop-filter:
    none !important;

  border:
    none !important;

  box-shadow:
    none !important;
}


.music-bar::before,
.music-bar::after {

  display:
    none !important;

  content:
    none !important;
}


.music-bar .bar-title {

  text-shadow:
    0 1px 4px rgba(0,0,0,.65) !important;
}


/* =========================================================
   MOBILE — STACK BLOG COLUMNS
   ========================================================= */

@media (max-width: 700px) {

  .blog-entry {

    flex-direction:
      column !important;

    gap:
      15px !important;
  }

  .blog-entry > .col.w-20.left {

    flex:
      0 0 auto !important;

    width:
      100% !important;

    max-width:
      100% !important;
  }

  .blog-entry > .col.right {

    width:
      100% !important;
  }

}


/* =========================================================
   FINAL BOX SIZING
   ========================================================= */

*,
*::before,
*::after {
  box-sizing: border-box;
}


/* =========================================================
   END
   ========================================================= */
```