Layout CSS
/* =========================================================
Twin Peaks Colour Palette
#9b4732 — Orange (155, 71, 50)
#980505 — Red (152, 5, 5)
#2d2d2d — Dark Blue (45, 45, 45)
#2a4619 — Light Blue (42, 70, 25)
#2a4619 — Light Light Blue (120, 175, 171)
========================================================= */
/* =========================================================
Font
========================================================= */
body {
font-family: Courier New, monospace !important;
background: url("https://64.media.tumblr.com/c10259ab38ffca32c98d182e6d7cef93/e2ee416579148c9b-9a/s400x600/3c0647fe7b51f14c610248d84100ce17d36eb421.pnj") center center / cover fixed !important;
color: #2d2d2d !important;
text-shadow:
0 0 3px rgba(42, 70, 25, 0.2),
0 0 6px rgba(120, 175, 171, 0.2);
}
/* =========================================================
Links
========================================================= */
a {
color: #980505 !important;
text-decoration: underline !important;
text-shadow:
0 0 4px rgba(120, 175, 171, 0.55);
}
a:hover {
color: #2a4619 !important;
text-shadow:
0 0 5px #2a4619,
0 0 10px rgba(120, 175, 171, 0.5);
}
/* =========================================================
Nav Bar
========================================================= */
.myspace-header {
position: relative;
z-index: 100;
width: 85%;
max-width: 990px;
color: #2d2d2d;
padding: 0;
margin: 0 auto;
font-size: 12px;
line-height: 0;
background-color:
rgba(42, 70, 25, 0.15) !important;
border-radius:
51px;
border-top:
1px solid rgba(42, 70, 25, 0.9);
}
/* =========================================================
Also Nav Bar
========================================================= */
.myspace-header .top-nav {
background:
none !important;
background-image:
url("https://i.pinimg.com/736x/c5/81/da/c581dafc1782de45692a15975d9c751c.jpg")
!important;
background-position:
center center !important;
background-size:
cover !important;
background-repeat:
no-repeat !important;
border:
5px solid #2d2d2d !important;
border-radius:
57px;
width:
519px;
margin-left:
auto !important;
margin-right:
auto !important;
box-shadow:
0 0 6px rgba(45, 45, 45, 0.8),
0 0 14px rgba(45, 45, 45, 0.55);
}
/* =========================================================
Search
========================================================= */
.myspace-header .top-nav .search-button {
border-color:
#2d2d2d !important;
background:
rgba(45, 45, 45, 0.94) !important;
color:
#2d2d2d !important;
border-radius:
0 10px 10px 0;
box-shadow:
0 0 5px rgba(45, 45, 45, 0.5);
}
.myspace-header .top-nav .search-input {
background:
rgba(45, 45, 45, 0.94) !important;
color:
#2d2d2d !important;
border-color:
#2d2d2d !important;
border-radius:
10px 0 0 10px;
box-shadow:
0 0 5px rgba(45, 45, 45, 0.45);
}
/* =========================================================
Main Menu ========================================================= */
.myspace-header .main-nav-wrapper {
background:
linear-gradient(
to bottom,
#2d2d2d 0%,
#2a4619 48%,
#2a4619 100%
) !important;
border-top-color:
#2d2d2d !important;
border-bottom-color:
#2d2d2d !important;
border-radius:
10px;
height:
48px;
box-shadow:
0 0 7px rgba(45, 45, 45, 0.65),
0 0 15px rgba(45, 45, 45, 0.45);
}
.myspace-header .main-nav {
list-style:
none;
margin:
0;
padding:
0;
display:
flex;
height:
100%;
padding-left:
42px;
}
.myspace-header .main-nav li a {
border:
2px outset rgba(45, 45, 45, 0.95);
border-radius:
30px;
text-shadow:
0 0 3px #2d2d2d,
0 0 6px rgba(45, 45, 45, 0.45);
}
.myspace-header .main-nav li a:hover {
background-color:
#2a4619 !important;
box-shadow:
0 0 5px #2a4619,
0 0 12px rgba(120, 175, 171, 0.7),
0 0 20px rgba(120, 175, 171, 0.35);
}
.myspace-header .main-nav li a {
border-right-color:
rgba(45, 45, 45, 0.7) !important;
}
/* =========================================================
Dropdown Menu
========================================================= */
.myspace-header .dropdown-menu {
background:
#2d2d2d !important;
border-color:
#2a4619 !important;
box-shadow:
0 0 7px rgba(45, 45, 45, 0.7),
0 0 16px rgba(45, 45, 45, 0.45) !important;
border-radius:
15px;
}
/* =========================================================
Logo
========================================================= */
.myspace-header .nav-logo {
height:
73px;
width:
auto;
margin:
0 10px;
position:
relative;
top:
2px;
}
/* =========================================================
Blog Container
========================================================= */
main {
background:
rgba(45, 45, 45, 0.92) !important;
border-left:
2px dotted #980505 !important;
border-right:
2px dotted #980505 !important;
padding:
20px !important;
color:
#9b4732 !important;
box-shadow:
0 0 8px rgba(155, 71, 50, 0.65),
inset 0 0 20px rgba(155, 71, 50, 0.25);
}
/* =========================================================
Blog Title
========================================================= */
.blog-entry .title {
font-family: Avant Garde, Avantgarde, Century Gothic, CenturyGothic, AppleGothic, sans-serif;
font-size: 60px;
font-weight: bold;
color: #644647;
letter-spacing: 1px;
text-transform: uppercase;
text-shadow: 1px 1px 0 #47ff52, -1px -1px 0 #47ff52, 1px -1px 0 #47ff52, -1px 1px 0 #47ff52, 0px 1px 0 #47ff52, 1px 0px 0 #47ff52, 0px -1px 0 #47ff52, -1px 0px 0 #47ff52, 4px 2px 0 #333;
color:
#644647 !important;
background:
url("https://i.pinimg.com/1200x/69/4b/b3/694bb343e13ec3aad726a85f5a389f86.jpg")
center center / cover !important;
border:
2px solid #2d2d2d !important;
padding:
15px !important;
font-size:
2em !important;
text-align:
center !important;
box-shadow:
0 0 6px rgba(45, 45, 45, 0.8),
0 0 14px rgba(45, 45, 45, 0.55),
0 0 25px rgba(45, 45, 45, 0.35);
}
/* =========================================================
Blog Text
========================================================= */
.blog-entry .content {
background:
rgba(5, 3, 1, 0.9) !important;
border:
2px dotted #2d2d2d !important;
padding:
20px !important;
color:
#9b4732 !important;
box-shadow:
0 0 6px rgba(45, 45, 45, 0.65),
0 0 15px rgba(45, 45, 45, 0.3);
text-shadow:
0 0 3px rgba(45, 45, 45, 1.0),
0 0 6px rgba(45, 45, 45, 1.0),
0 0 10px rgba(45, 45, 45, 1.0);
}
/* =========================================================
Bold Text
========================================================= */
.blog-entry .content b {
color:
#9b4732 !important;
text-shadow:
0 0 4px #2d2d2d,
0 0 8px rgba(45, 45, 45, 0.9);
}
/* =========================================================
Links within text
========================================================= */
.blog-entry .content a {
color:
#980505 !important;
text-decoration:
underline !important;
text-shadow:
0 0 4px #2d2d2d,
0 0 8px rgba(45, 45, 45, 0.5);
}
/* =========================================================
Lists
========================================================= */
.blog-entry ul,
.blog-entry ol {
background:
rgba(45, 45, 45, 0.88) !important;
border:
1px solid #2d2d2d !important;
padding:
15px !important;
color:
#9b4732 !important;
box-shadow:
0 0 6px rgba(45, 45, 45, 0.55);
}
.blog-entry li::marker {
color:
#2d2d2d !important;
}
/* =========================================================
Quotes
========================================================= */
.blog-entry blockquote {
background:
#2d2d2d !important;
border-left:
4px solid #980505 !important;
padding:
15px !important;
color:
#9b4732 !important;
box-shadow:
0 0 7px rgba(244, 173, 187, 0.6),
0 0 14px rgba(187, 222, 219, 0.4);
text-shadow:
0 0 4px #2a4619;
}
/* =========================================================
Sidebar
========================================================= */
.edit-info {
background:
url("https://i.pinimg.com/1200x/98/a8/62/98a862194de4d91d41b7ceed47adcd49.jpg")
center center / cover !important;
border:
2px solid #2d2d2d !important;
padding:
20px !important;
box-shadow:
0 0 7px rgba(45, 45, 45, 0.65),
0 0 16px rgba(45, 45, 45, 0.4);
}
.edit-info h4 {
color:
#9b4732 !important;
text-shadow:
0 0 5px #2d2d2d,
0 0 9px rgba(45, 45, 45, 0.5);
}
.edit-info a {
color:
#9b4732 !important;
text-shadow:
0 0 5px #2d2d2d;
}
/* =========================================================
Comments
========================================================= */
#comments {
background:
rgba(45, 45, 45, 0.92) !important;
border-bottom:
2px dotted #2d2d2d !important;
padding:
20px !important;
box-shadow:
0 0 8px rgba(45, 45, 45, 0.55);
}
#comments h2 {
color:
#2a4619 !important;
text-shadow:
0 0 5px #2d2d2d,
0 0 10px rgba(45, 45, 45, 0.55);
}
.comments-table td {
background:
rgba(45, 45, 45, 0.9) !important;
border:
1px solid #fef7c1 !important;
color:
#2a4619 !important;
box-shadow:
0 0 5px rgba(45, 45, 45, 0.55);
}
/* =========================================================
FOOTER
========================================================= */
footer {
background:
#2d2d2d !important;
border:
2px dotted #2d2d2d !important;
box-shadow:
0 0 7px rgba(45, 45, 45, 0.65),
0 0 15px rgba(45, 45, 45, 0.3);
}
footer p {
color:
#980505 !important;
text-shadow:
0 0 5px #2d2d2d;
}
/* =========================================================
LINKS GERAIS
========================================================= */
main a,
footer a,
.edit-info a {
color:
#9b4732 !important;
text-shadow:
0 0 4px #2a4619,
0 0 8px rgba(42, 70, 25, 0.45);
}
/* =========================================================
Custom Cursor
========================================================= */
* {
cursor:
url('https://www.kindpng.com/picc/m/585-5859200_twin-peaks-black-lodge-logo-hd-png-download.png')
32 32,
auto !important;
}
/*
Comments (0)
No comments yet. Be the first!
Log in to leave a comment.