Olive Ink

Tags: simple, 2000s, green, yellow, natural, xp, paper, eco beige

Description:

A simple theme with natural colors themed off of the 2005 Napa Style store site, which I learned about from some textbook I found about web design from like 2003, very interesting. This theme is pretty simple, but I think it works to its benefit, Though I might design a more textured version sometime with bevels on everything and what not.

As usual, all the colors used are immediately available to change at the beginning of the code, though the bullets and logo are pictures and would need to be changed with filters. That's about it.

Preview:

click on the image for a larger preview

Code:

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

<style>
@import url('https://fonts.googleapis.com/css2?family=La+Belle+Aurore&family=Marck+Script&display=swap');

:root {
--main-bg: #cc9;
--page-bg: #ffc;
--links-bg: #D1D989;
--title: #57734d;
--text: #453;
--text-light: #666248;
--text-checker: #666248;
--text-gril: #9a5218;
--text-grir: #636a2f;
--link: #983107;
--link-nav: #5E6F25;
--grid-left: #fdc044;
--grid-left-dark: #e19a33;
--grid-right: #c0c770;
--checker-light: #fee294;
--checker-dark: #fef3a6;

}

body { background-color: var(--main-bg); overflow-x: hidden; }
nav .top { background-color: var(--page-bg); margin:0; padding:0; }
nav .left { background-color: var(--title); padding: 25px 24px 24px 10px; }
nav .center, nav .right { background-color: var(--page-bg); }
nav .center {margin: 5px; margin-right: 0px; padding: 10px 0px 30px 20px; }
nav .right {margin: 5px; margin-left: 0px; padding-right:5px; padding-top: 5px; }
nav .links { background-color: var(--links-bg); }

@media (min-width: 785px) {
nav .links { columns: 7; max-width: 80%; text-align: center;
width: 605px; left: 205px; position: relative; bottom: 41px; } 
main { position: relative; top: -41px; } 
nav .center, nav .right {  box-shadow:0px -40px 0px var(--page-bg) inset; } }


nav .links a { text-shadow: none; color: var(--link-nav); font-weight: bold; }
nav .links a:hover, nav .links li.active a { color: var(--link); }

button { background-color: var(--grid-left); border-radius: 100px; color: var(--text);
font-weight: bold; border:none; padding: 4px 13px; margin: 2px; transition: 0.2s; }
button:hover { background-color: var(--checker-light); }

footer { background-color: var(--checker-light); } footer p { color: var(--text-light); }

main { background-color: var(--page-bg); }
main, nav, .logout-btn { color: var(--text); }
main, button, .logout-btn { font-family: verdana, arial, helvetica, sans-serif }

nav .links li:not(:last-child)::after { content:none; }

.profile .contact, .profile .table-section { border: none; }
.profile .table-section .heading { background-color: #0000; color: var(--title); border-bottom: dotted 2px var(--title);  }
.profile .url-info {border: none; background-color: #0000; color: var(--title); }

.details-table td:first-child, .comments-table td:first-child
{ color: var(--text-gril); box-shadow: 0px 10px 5px inset var(--grid-left-dark);
background-color: var(--grid-left);  padding-right: 10px; padding-top: 10px; border-radius: 4px 12px 4px 8px; }
.details-table td:first-child p { border-bottom: dotted 2px var(--text-gril); }

.details-table td:last-child, .comments-table td
{ color: var(--text-grir); background-color: var(--grid-right);  padding-right: 10px; border-radius: 4px 12px 8px 4px; }

.profile .blurbs .section h4 { color: var(--text-checker); padding-bottom: 20px; border-bottom: dotted 2px var(--text-checker); margin-bottom: 10px; }
a { color: var(--link); text-decoration: none; }
a:hover { color: var(--link); text-decoration: underline; }
.profile .contact .heading { margin-bottom: 20px; }
.profile .contact .heading, .profile .blurbs .heading, .profile .friends .heading
{ background-color: #0000; border-bottom: solid 2px var(--text-checker); }
.profile .blurbs .heading, .profile .friends .heading { margin-bottom: 10px; }
.profile .contact .heading { box-shadow: 0px 10px 0px var(--links-bg); }
.profile .blurbs .heading { box-shadow: 0px 10px 0px var(--checker-light); }
.profile .friends .heading { box-shadow: 0px 10px 0px var(--grid-left); }
.profile .blurbs .heading h4, .profile .friends .heading h4, .profile .contact .heading h4
{ font-family:Marck Script, cursive, sans serif; font-size:28px; font-weight: normal;
translate: 0px 13px; color: var(--title); }

.profile h1 { color: var(--title);  }

nav .top .left .logo { filter: invert(14%) sepia(25%) saturate(390%) hue-rotate(25deg) brightness(105%) contrast(86%); }

.profile .friends .person img, .general-about .profile-pic img { border-radius: 4px 12px 0px 0px; background-color: var(--grid-right);
box-shadow: 0px 15px 0px var(--grid-left-dark); translate: 0px -6px; }
.comments-table td:first-child img { border-radius: 4px 12px 4px 8px; }

.online, em { color: var(--grid-left); font-weight:bold; font-style:normal; } .online img { filter:hue-rotate(300deg) brightness(145%); }

.icon { display: none; }
.contact .inner a:before {content: url(https://groonklie.com/spacehey-junk/napastyle/bullet.png); image-rendering:pixelated; }
.f-col { padding: 5px; }
.f-col a { color: var(--text-checker); text-decoration: none; }
.f-col a:hover { color: var(--text-checker); text-decoration: underline; }
.f-col:first-child { border-right:6px solid var(--page-bg); }
.f-row:nth-child(even) .f-col:nth-child(even), .f-row:nth-child(odd) .f-col:nth-child(odd) { background-color: var(--checker-light); }
.f-row:nth-child(even) .f-col:nth-child(odd), .f-row:nth-child(odd) .f-col:nth-child(even) { background-color: var(--checker-dark); }

</style>

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 20 of 42 comments ( View all | Add Comment )

featherfae	1729196164 totally gonna use this, super cute!! Report Comment
corpse	1728770090 USING !!! <3 i love this so much and the colors are soooo prettyy!! Report Comment
vineriaswig	1728605848 using Report Comment
Takoma	1728068303 maybe using Report Comment
themythicalsausage	1727295661 Planning on using, still figuring out this sight though Report Comment
Looni	1727247069 Using Report Comment
AZTRICT !!	1726848138 using!! thank youu Report Comment
evergreen	1726442637 using fs Report Comment
plumeria761	1725248637 Using! Report Comment
⁠☆pepper☆ 🍉	1725124953 Using! :] Report Comment
Ainnofin	1723207511 using :3 Report Comment
e	1723199784 using this for blog posts! needed something nice, nostalgic, and simple, thank you so much! Report Comment
♪ COSMO/OREL ♪	1722876017 using! Report Comment
Stock	1722546189 Using Report Comment
clydeborg	1722536141 using!! Report Comment
𝅄 𝑺𝒆𝒂 Kinds ִ ꪆ𓏲 ׄ	1721911693 usando yeei Report Comment
chilchuck	1721591926 using! Report Comment
𝚁𝚊𝚖𝚘𝚗𝚎𝚌𝚑𝚊𝚖𝚘𝚖𝚒𝚕𝚎	1721576706 Using Report Comment
estherisher	1720902506 usingg Report Comment
☆— Nicolino !!	1720788022 USING!!!!!! I LUV THIZ Report Comment