Yeti-ish

Tags: basic, minimal, clean, dark, samsux
Description:

this theme is a basic but clean, dark design. if i wrote this post correctly, you should be seeing a preview of how it looks... right on this page
Code:

<!-- (c) Layout created by samsux (https://layouts.spacehey.com/layout?id=103093) -->

/* "Yeti-ish"
 * theme designed by samsux (https://spacehey.com/samsux)
 *
 * this theme is developed off-of the previous theme i made,
 * "New Year's Yesteryear".  i've taken it as a base,
 * and have since modified the color palette to more closely align
 * with the Yeti theme design from the folks over at
 * BunsenLabs Linux.  i also modified some of the font choice.
 *
 * i used Tommy Panzram's "Layout Editor" to make this, and then
 * i proofread the code (a bit) manually using vim.
 *
 * this theme was not necessarily designed to be used by others, hence its
 * dense formatting, and how unoptimized it might be.
 * nevertheless, youre free to use it if youd like.
 *
 * links if you're interested:
 * [1]: my page, [2]: Tommy Panzram's page, [3]: Tommy Panzram's Editor,
 * [4]: vim, the ubiquitous text editor, [5]: BunsenLabs Linux Forums
 *
 * [1] :  https://spacehey.com/samsux
 * [2] :  https://spacehey.com/tommypanzram
 * [3] :  https://heroin-bob.github.io/SpaceHeyLayoutEditor
 * [4] :  https://www.vim.org
 * [5] :  https://forums.bunsenlabs.org
 *
 * trans rights, always and forever
 * hope youre doing well,
 * - samsux
 */

:root { --logo-blue: rgb(54, 87, 130);
  --darker-blue: rgb(54, 87, 130);
  --lighter-blue: #434950;
  --even-lighter-blue: #292d31;
  --lightest-blue: #292d31;
  --dark-orange: #c3cfdf;
  --light-orange: #434950;
  --even-lighter-orange: bisque;
  --turquoise: darkturquoise;
  
  --dark-gray: rgb(54, 87, 130);

  --table-header: rgb();
  --table-color: rgb();
  --link-text: rgb();
  --main-text: rgb();
  --link-hover: rgb();
}

.heading h4 { color: #c3cfdf; }
.logo {
 filter: sepia(100%) hue-rotate(100deg) saturate(2) brightness(50%);
}
body #previewContainer {
  background-color: #111214;
  font-family: 'Linux Biolinum', 'Libertinus Sans', 'Lucida Grande', 'Lucida Sans', sans-serif;
  font-size: 12px;
  text-decoration: underlined;
  text-shadow: none;
}
body { background-color:#111214; }
nav .top {
  background-color: #202326;
  color: #9ba8bb;
  font-family: 'Linux Biolinum', 'Libertinus Sans', 'Lucida Grande', 'Lucida Sans', sans-serif;
  font-size: 12px;
  text-decoration: underlined;
  text-shadow: none;
  box-shadow: 0 0 6px rgba(0,0,0,0.33);
  clip-path: inset(0 -6px -6px -6px);
}
nav .top a {
  background-color: #202326;
  color: #9ba8bb;
  text-decoration: underlined;
  text-shadow: none;
  padding: 0 5px 0 5px;
  font-family: 'Linux Biolinum', 'Libertinus Sans', 'Lucida Grande', 'Lucida Sans', sans-serif;
  font-size: 12px;
}
nav .top a:hover {
  background-color: #9ba8bb;
  color: #202326;
  text-decoration: underlined;
  text-shadow: none;
  padding: 0 5px 0 5px;
  font-family: 'Linux Biolinum', 'Libertinus Sans', 'Lucida Grande', 'Lucida Sans', sans-serif;
  font-size: 12px;
}
.search-wrapper #q {
  border: 1px solid #1d1f21;
  background-color: #292d31;
  padding: 3px;
  color: #9ba8bb;
  font-family: 'Linux Biolinum', 'Libertinus Sans', 'Lucida Grande', 'Lucida Sans', sans-serif;
  font-size: 12px;
}
form {
  padding: 3px;
  color: #9ba8bb;
}
.links {
  background-color: #202326;
  text-align: center;
  border: 1px solid #434950;
  text-shadow: none;
  font-family: 'Linux Biolinum', 'Libertinus Sans', 'Lucida Grande', 'Lucida Sans', sans-serif;
  font-size: 12px;
}
.links a {
  background-color: #434950;
  color: #9ba8bb;
  text-decoration: underlined;
  text-shadow: none;
  padding: 0 5px 0 5px;
  font-family: 'Linux Biolinum', 'Libertinus Sans', 'Lucida Grande', 'Lucida Sans', sans-serif;
  font-size: 12px;
}
nav .links {
  background-color: #434950;
  color: #9ba8bb;
  text-align: center;
  border: 1px solid #434950;
  text-decoration: underlined;
  text-shadow: none;
  font-family: 'Linux Biolinum', 'Libertinus Sans', 'Lucida Grande', 'Lucida Sans', sans-serif;
  font-size: 12px;
  box-shadow: 0 0 6px rgba(0,0,0,0.50);
  clip-path: inset(0 -6px -6px -6px);
}
nav .links a:hover {
  text-decoration: underline;
  color: #292d31;
  text-shadow: none;
  border-radius: 2px;
  font-family: 'Linux Biolinum', 'Libertinus Sans', 'Lucida Grande', 'Lucida Sans', sans-serif;
  font-size: 12px;
}
.links li a {
  text-decoration: underline;
  text-shadow: none;
  color: #c8d8ef;
}
nav .links li:not(:last-child)::after, footer .links li:not(:last-child)::after {
  content: "";
}

main {
  padding: 0 0 0 0;
  border-top: 1px solid #292d31;
  border-right: 1px solid #292d31;
  box-shadow: 0 0 6px rgba(0,0,0,0.25);
  clip-path: inset(0 -6px -6px -6px);
  border-left: 1px solid #292d31;
  font-family: 'Linux Biolinum', 'Libertinus Sans', 'Lucida Grande', 'Lucida Sans', sans-serif;
  font-size: 12px;
  background-color: #292d31;
  color: #9ba8bb;
}

.general-about .profile-pic img { border: 1px solid #1d1f21; }

.row.profile .col.w-40.left {
  padding: 11px 11px 0 11px;
  font-family: 'Linux Biolinum', 'Libertinus Sans', 'Lucida Grande', 'Lucida Sans', sans-serif;
  font-size: 12px;
}
.row.profile .col.right {
  padding: 11px 11px 0 11px;
  font-family: 'Linux Biolinum', 'Libertinus Sans', 'Lucida Grande', 'Lucida Sans', sans-serif;
  font-size: 12px;
}

a {
  padding: 2px 2px 2px 2px;
  color: #9ba8bb;
  text-decoration: underlined;
  text-shadow: none;
  font-family: 'Linux Biolinum', 'Libertinus Sans', 'Lucida Grande', 'Lucida Sans', sans-serif;
  font-size: 12px;
}
a:hover {
  color: #292d31;
  background-color: #9ba8bb;
  padding: 2px 2px 2px 2px;
  text-decoration: underlined;
  text-shadow: none; 
  border-radius: 2px;
  font-family: 'Linux Biolinum', 'Libertinus Sans', 'Lucida Grande', 'Lucida Sans', sans-serif;
  font-size: 12px;
}
.mood a, .contact a, .table-section a, .blog-preview a, .blurbs a {
  color: #9ba8bb;
  padding: 2px 2px 2px 2px;
  text-decoration: underline;
  font-family: 'Linux Biolinum', 'Libertinus Sans', 'Lucida Grande', 'Lucida Sans', sans-serif;
  font-size: 12px;
}
.mood a:hover, .contact a:hover, .table-section a:hover, .blog-preview a:hover, .blurbs a:hover {
  color: #292d31;
  background-color: #9ba8bb;
  padding: 2px 2px 2px 2px;
  border-radius: 2px;
  text-decoration: none;
  font-family: 'Linux Biolinum', 'Libertinus Sans', 'Lucida Grande', 'Lucida Sans', sans-serif;
  font-size: 12px;
}
.col.w-40.left .contact {
  font-family: 'Linux Biolinum', 'Libertinus Sans', 'Lucida Grande', 'Lucida Sans', sans-serif;
  font-size: 12px;
}

.friends a {
  text-decoration: underline;
  font-family: 'Linux Biolinum', 'Libertinus Sans', 'Lucida Grande', 'Lucida Sans', sans-serif;
  font-size: 12px;
}
.profile .friends .person p, a {
  color: #9ba8bb;
  background-color: #292d31;
  text-decoration: none;
  font-family: 'Linux Biolinum', 'Libertinus Sans', 'Lucida Grande', 'Lucida Sans', sans-serif;
  font-size: 12px;
}
.profile .friends .person p:hover {
  color: #292d31;
  background-color: #9ba8bb;
  text-decoration: none;
  border-radius: 2px;
  padding: 2px 2px 2px 2px;
  font-family: 'Linux Biolinum', 'Libertinus Sans', 'Lucida Grande', 'Lucida Sans', sans-serif;
  font-size: 12px;
}

.inner .comments-table { border-color: #1d1f21; }
.comments-table a {
  color: #9ba8bb;
  background-color: #292d31;
  text-decoration: underline;
  padding: 2px 2px 2px 2px;
  font-family: 'Linux Biolinum', 'Libertinus Sans', 'Lucida Grande', 'Lucida Sans', sans-serif;
  font-size: 12px;
}
.comments-table a:hover {
  color: #292d31;
  background-color: #9ba8bb;
  border-radius: 2px;
  text-decoration: none;
  font-family: 'Linux Biolinum', 'Libertinus Sans', 'Lucida Grande', 'Lucida Sans', sans-serif;
  font-size: 12px;
}

.comments-table table {
  background-color: #1c1e20;
  border-color: 1px solid #1c1e20;
  border: collapse;
  font-family: 'Linux Biolinum', 'Libertinus Sans', 'Lucida Grande', 'Lucida Sans', sans-serif;
  font-size: 12px;
}
.comments-table tbody {
  border: 0;
  font-family: 'Linux Biolinum', 'Libertinus Sans', 'Lucida Grande', 'Lucida Sans', sans-serif;
  font-size: 12px;
} 
.comments-table td:first-child {
  border: 0;  
  background-color: #292d31;
  border-color: 1px solid #292d31;
  font-family: 'Linux Biolinum', 'Libertinus Sans', 'Lucida Grande', 'Lucida Sans', sans-serif;
  font-size: 12px;
}
.comments-table td {
  border: 0;  
  background-color: #292d31;
  border-color: 1px solid #292d31;
  font-family: 'Linux Biolinum', 'Libertinus Sans', 'Lucida Grande', 'Lucida Sans', sans-serif;
  font-size: 12px;
}
.comments-table tr {
  background-color: #1c1e20;
  border-color: 1px solid #1c1e20;
  font-family: 'Linux Biolinum', 'Libertinus Sans', 'Lucida Grande', 'Lucida Sans', sans-serif;
  font-size: 12px;
}

td .comment-replies {
  border: 1px solid #1c1e20;  
  background-color: #292d31;
  border-color: 1px solid #292d31;
  font-family: 'Linux Biolinum', 'Libertinus Sans', 'Lucida Grande', 'Lucida Sans', sans-serif;
  font-size: 12px;
}

.report {
  color: rgb(54, 87, 130);
  text-decoration: none;
  padding: 2px 2px 2px 2px;
  font-family: 'Linux Biolinum', 'Libertinus Sans', 'Lucida Grande', 'Lucida Sans', sans-serif;
  font-size: 12px;
}
.report:hover {
  color: rgb(54, 87, 130);
  text-decoration: none;
  border-radius: 2px;
  padding: 2px 2px 2px 2px;
  font-family: 'Linux Biolinum', 'Libertinus Sans', 'Lucida Grande', 'Lucida Sans', sans-serif;
  font-size: 12px;
}
.count {
  background-color: #434950;
  border: 1px solid #1d1f21;
  color: white;
  padding: 3px 3px 2px 2px;
  font-family: 'Linux Biolinum', 'Libertinus Sans', 'Lucida Grande', 'Lucida Sans', sans-serif;
  font-size: 12px;
}

p { color: #9ba8bb; }

footer {
  color: #9ba8bb;
  background-color: #292d31;
  border-top: #292d31;
  border-right: #292d31;
  border-left: #292d31;
  border-bottom: #292d31;
  font-family: 'Linux Biolinum', 'Libertinus Sans', 'Lucida Grande', 'Lucida Sans', sans-serif;
  font-size: 12px;
  box-shadow: 0 0 3px 3px rgba(0,0,0,0.1);
}
footer .links {
  background-color: #292d31;
  border-top: #292d31;
  border-right: #292d31;
  border-left: #292d31;
  border-bottom: #292d31;
}
footer .links a {
  background-color: #292d31;
  border-top: #292d31;
  border-right: #292d31;
  border-left: #292d31;
  border-bottom: #292d31;
  text-decoration: underline;
}

footer a:hover {
  color: #292d31;
  background-color: #9ba8bb;
  padding: 2px 2px 2px 2px;
  border-radius: 2px;
  text-decoration: none;
  font-family: 'Linux Biolinum', 'Libertinus Sans', 'Lucida Grande', 'Lucida Sans', sans-serif;
  font-size: 12px;
}

footer .copyright a:hover {
  color: #292d31;
  background-color: #9ba8bb;
  padding: 2px 2px 2px 2px;
  border-radius: 2px;
  text-decoration: none;
  font-family: 'Linux Biolinum', 'Libertinus Sans', 'Lucida Grande', 'Lucida Sans', sans-serif;
  font-size: 12px;
}
/* begin site content below */
Copy and paste this code into the "About me" section of your Profile to use it.
Caution: This Layout was not inspected by SpaceHey — use it at your own risk.
Comments

Displaying 0 of 0 comments ( View all | Add Comment )