Sqweaks
Tweaks for Scribbles
Subscribe via RSS here

Shoutouts Retro Style

Example
Example

If you're using Shoutouts, a neat service generously provided for free by Vincent, here's a way to add a retro look for your Scribbles blog.

Add the following styles to your Shoutouts theme:

@import url("https://fonts.googleapis.com/css2?family=Special+Elite&display=swap");
.shoutout__container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 20px 0 0;
  padding: 10px;
  background-color: \#f9f9cb;
  background-size: 18px 18px;
  background-image:  repeating-linear-gradient(0deg, \#ededfa, \#ededfa 0.9px, \#f9f9cb 0.9px, \#f9f9cb);
  border-radius: 7px;
}
.shoutout__container img {
  flex: 0;
  width: 75px;
  height: 75px;
  filter: grayscale(80%);
  border-radius: 7px !important;
}
.shoutout__content {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 0;
  text-align: left;
  overflow-wrap: break-word;
  font-family: "Special Elite", serif;
  color: \#444;
}
.shoutout__content a {
  font-weight: normal;
  text-decoration: underline !important;
  text-decoration-style: wavy;
}
.shoutout__title {
  display: none;
}

Then, add your Shoutouts embed and theme IDs in your Scribbles blog settings. Done! See a live example on my blog.

Caption Styles

Example
Example
/* Image caption */ figcaption { display: table; width: auto; margin: 0 auto 25px; padding: 5px 12px; font-size: 80% !important; color: var(--tw-prose-code) !important; text-align: center; background: var(--tw-prose-th-borders); border-radius: 5px; }

Colorful Avatar

Example
Example

Spice up your avatar by adding a colorful border to it. Tip: Use your category colors for a consistent look and feel. 

/* Colorful avatar */
header img {
  background: linear-gradient(\#fff, \#fff) padding-box,
  linear-gradient(180deg, \#1e90ff, \#cc33cc, \#ffff00) border-box;
  border: 5px solid transparent;
  border-radius: 50%;
}

Colorful Logo

Example
Example
/* Colorful logo */ author.prose { background-image: linear-gradient(90deg, rgba(94,114,235,1) 0%, rgba(255,145,144,1) 56%, rgba(254,193,149,1) 100%); color: transparent; -webkit-background-clip: text; }

Print Styles

Improve the look of your blog posts when being printed. 

/* Print styles */
@media print {
body {
  color: \#000;
  background: \#fff;
}
header {
  margin: 0 !important;
}
h1, h2, h3 {
  line-height: 1.3;
}
a {
  color: \#000 !important;
  text-decoration: none !important;
}
blockquote,
code {
  margin: 0;
  padding: 0 1.5em;
  background: \#fff;
  border: none;
}
header img,
.category_name,
footer {
  display: none !important;
}
}

powered by scribbles