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 188 comments ( View all | Add Comment )

Moon.Jellies	1789368772 using Report Comment
caterbeetle	1788225510 using ty! Report Comment
cal☆	1786383710 using tysm! Report Comment
Cab1_Cad3	1786132743 Using for my project idea Report Comment
‘ Rune	1785867681 using!!! Report Comment
nyelly	1783060301 using <3 Report Comment
primgle	1782670795 using Report Comment
Valex333gg	1781095185 Using Report Comment
Valex333gg	1781095139 Using Report Comment
kari ᨳଓ	1775757094 Using Report Comment
♪ ⌣ 𝒮ℴ𝓅𝒽𝒾𝒶 𝜗𝜚	1775529426 using Report Comment
Charlie_ss	1775048278 using Report Comment
SHADOWONTHESUN	1774873769 Using Report Comment
Basil	1773958809 Using ^_^ Report Comment
Ghost_Yoru	1773138763 using for blog! Report Comment
Peter	1772659993 using :) Report Comment
Soph	1772622992 Using!! Report Comment
Samu	1772071932 Using :D Report Comment
sinnohian binch	1771994736 Using, thank you!! :D Report Comment
Spengus	1771964816 using this. great work, and thanks for sharing! Report Comment