Revamped layout from sph! Theme: horror/war videogame atmosphere

This layout has been revamped to work on FrienRewind blogs! Enjoyyy

::-webkit-scrollbar-track {
  background-image: url("https://i.pinimg.com/564x/9f/5d/cb/9f5dcbef535e7114e21a3e8d6d51ed79.jpg");
  border-radius: 5px;
}

::-webkit-scrollbar-thumb {
  background-image: url("https://i.pinimg.com/564x/d6/2e/3e/d62e3e91b8685fd8397c64d991f04884.jpg");
  border-radius: 10px;
}

/* Background */
body {
  background: url("https://i.pinimg.com/564x/2d/60/7c/2d607cc2ca66d617f091bc1e35eeea4c.jpg") no-repeat fixed;
  background-size: cover;
}

/* Main sections */
main {
  background: rgba(98, 101, 84, 0.7);
  color: white;
  border: solid 3px white;
  border-top: none;
  text-align: left;
}

nav .top {
  background: #626554;
  color: white;
  border: solid 3px white;
  border-bottom: none;
}

nav .links {
  background: #626554;
  color: white;
  border: solid 3px white;
  font-size: smaller;
  text-align: left;
}

footer {
  background: #626554;
  color: white;
  border: solid 3px white;
  font-size: smaller;
  text-align: center;
}

/* Links */
a,
nav .links a,
nav .top a,
button,
.count {
  color: white;
}

nav .links a {
  text-shadow: none;
}

a:hover,
nav .links a:hover,
nav .top a:hover,
button:hover {
  color: white !important;
  text-decoration: underline !important;
}

button {
  background: none;
  border: none;
  color: white !important;
}

/* Variablezzzz */
:root {
  --logo-blue: white;
  --darker-blue: white;
  --lighter-blue: transparent;
  --even-lighter-blue: transparent;
  --lightest-blue: transparent;
  --dark-orange: white;
  --light-orange: transparent;
  --even-lighter-orange: transparent;
  --green: white;
}

/* this hides contact icons text issue */
.contact .inner a img {
  font-size: 0;
}

/* film grain overlay */
html:after {
  content: "";
  position: fixed;
  top: -110%;
  left: -50%;
  width: 300%;
  height: 300%;
  opacity: 0.1;
  pointer-events: none;
  background-image: url("https://s.studiobinder.com/wp-content/uploads/2020/08/What-is-Film-Grain-Film-Grain-Example.jpg");
  animation: grain 8s steps(10) infinite;
}

@keyframes grain {
  0%, 100% { transform: translate(0, 0); }
  10% { transform: translate(-5%, -10%); }
  20% { transform: translate(-15%, 5%); }
  30% { transform: translate(7%, -25%); }
  40% { transform: translate(-5%, 25%); }
  50% { transform: translate(-15%, 10%); }
  60% { transform: translate(15%, 0%); }
  70% { transform: translate(0%, 15%); }
  80% { transform: translate(3%, 35%); }
  90% { transform: translate(-10%, 10%); }
}

/* navbar separators */
nav .links li:not(:last-child)::after {
  content: url("https://external-media.spacehey.net/media/sFMUCOCYwF42iYHmLhKkr4anpUJo9eChzGtptILoguMw=/https://pixels.crd.co/assets/images/gallery60/bbcbc07c.gif?v=379361a4");
}

/* Verified / icons */
.verified-info .icon.verified,
a .icon {
  content: url("https://external-media.spacehey.net/media/sFMUCOCYwF42iYHmLhKkr4anpUJo9eChzGtptILoguMw=/https://pixels.crd.co/assets/images/gallery60/bbcbc07c.gif?v=379361a4");
}

/* online section */
.general-about .online {
  display: flex;
  align-items: center;
}

.general-about .online::before {
  content: "";
  background: url("https://i.postimg.cc/ZRpTPBPL/348472f664f8a8ef951945cff20831dd.png") center center no-repeat;
  background-size: contain;
  width: 2rem;
  height: 2rem;
  margin-right: 5px;
  animation: blink 2s cubic-bezier(1, 0, 0, 1) infinite;
}

.general-about .online img {
  display: none;
}

/* Replace online gif */
.online img {
  content: url("https://i5.glitter-graphics.org/pub/2115/2115985y3s1mnzx94.gif");
  height: 43px;
  width: 90px;
  animation: none;
  visibility: visible;
}

/* URL info image */
.profile .url-info p:last-child:after {
  content: "";
  display: block;
  background-image: url("https://i.pinimg.com/564x/68/77/f9/6877f9917b3f0ddaa7ed8f3bc769b48e.jpg");
  width: auto;
  height: 250px;
  background-position: top center;
  background-size: 100%;
  background-repeat: no-repeat;
}

Published by Factory Reset 𝄞𝄢

Revamped layout from sph! Theme: horror/war videogame atmosphere

Comments