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

eurusne	1748905567 using now thx!!!! <3 Report Comment
soapy	1748531834 USING ! :3 Report Comment
JOHN !!	1747376212 using!! Report Comment
varde	1746479576 using Report Comment
Finn Boogieman	1745855278 using <3 Report Comment
Gooseberry	1745360676 Using!! Report Comment
testing dummy	1745318763 using! how can i change the font?? Report Comment
gfvoat	1745272416 using :)) Report Comment
Jupyy	1745230954 Usinggg Report Comment
Olgaa🌷	1745085120 using!! Report Comment
rinko	1744350665 Using Report Comment
freakazoid_rat	1743912822 using! Report Comment
TaterMouse	1743822885 What a pleasant theme :3 Report Comment
Triz	1743570252 usingg Report Comment
Oskaa	1743183447 usingg Report Comment
𝓐𝓷𝓬𝓻𝓪𝓽𝓲𝓬☆	1743100091 Using !! Report Comment
Laura	1742933738 using <3 Report Comment
Dean	1742550354 using Report Comment
Olive	1742518013 Usingg Report Comment
Olive	1742518010 Usingg Report Comment