Created
September 24, 2012 15:14
-
-
Save Acconut/3776467 to your computer and use it in GitHub Desktop.
Anchor orange thing theme
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* Anchor orange thing theme | |
*/ | |
ul { list-style: none; } | |
* { box-sizing: border-box; } | |
html, body { height: 100%; } | |
a { text-decoration: none; } | |
*::selection { background-color: #ffdaad; } | |
/* --- BODY --- */ | |
body { | |
text-align: left !important; | |
font-family: Helvetica, arial, sans-serif; | |
} | |
/* --- CONTENT --- */ | |
.content { | |
height: 100%; | |
} | |
/* --- HEADER --- */ | |
header { | |
padding-top: 25px; | |
padding-bottom: 25px; | |
background: #e8a24c; | |
} | |
.title-box { | |
margin: 0px 20%; | |
} | |
header .title-box h1 { | |
color: #c98c42; | |
font-size: 400%; | |
font-family: verdana; | |
text-shadow: 0px -2px #bc833e, | |
0px 2px #ffb254; | |
} | |
header .title-box:after { | |
content: ""; | |
position: fixed; | |
height: 100%; | |
top: 0px; | |
margin-left: 11%; | |
width: 0px; | |
border-right: #E8A24C 3px solid; | |
z-index: -1; | |
} | |
/* --- MIDDLE --- */ | |
.middle { | |
padding: 0 20%; | |
overflow: auto; | |
} | |
/* --- LEFT BAR --- */ | |
.left-bar { | |
width: 20%; | |
float: left; | |
padding-right: 4%; | |
padding-top: 2%; | |
} | |
.left-bar nav ul { | |
text-align: right; | |
font-size: 110%; | |
line-height: 150%; | |
} | |
.left-bar nav ul a { color: #C98C42; } | |
.left-bar nav li:hover a { color: #a87537; } | |
.left-bar nav li { position: relative; } | |
.left-bar nav li .arrow { | |
transition: border-width .25s ease; | |
border: 13px solid transparent; | |
border-right-width: 0px; | |
position: absolute; | |
width: 0px; | |
height: 0px; | |
top: 0px; | |
right: -16%; | |
} | |
.left-bar nav li:hover .arrow, .left-bar nav li.active .arrow { | |
border-width: 13px; | |
border-right-color: #E8A24C; | |
} | |
/* --- RIGHT BAR --- */ | |
.right-bar { | |
float: left; | |
padding: 2% 1%; | |
width: 75%; | |
position: relative; | |
} | |
.posts li section { | |
width: 100%; | |
padding: 1% 0; | |
overflow: auto; | |
} | |
.posts li section h2 { | |
color: #626166; | |
float: left; | |
} | |
.posts li section .date { | |
float: right; | |
color: #d9d8e2; | |
} | |
.posts li:hover section h2 { color: #333333; } | |
.posts li:hover section .date { color: #7b7b7f; } | |
/* --- FOOTER --- */ | |
footer { | |
font-size: 80%; | |
line-height: 24px; | |
padding-top: 2%; | |
} | |
footer li { display: inline; } | |
footer li::after { content: " \2014"; color: #b0b0b7 !important; } | |
footer ul li:last-child::after { content: ""; } | |
footer li, footer a { color: #b0b0b7; } | |
footer li:hover, footer li:hover a { color: #7b7b7f; } | |
/* --- ATTRIBUTION --- */ | |
.attribution { | |
float: right; | |
} | |
/* ------ MEDIA QUERIES ------ */ | |
@media (max-width: 1296px) { | |
.middle { padding: 0 10%; } | |
.title-box { margin: 0 10%; } | |
.title-box::after { left: 13.7%; } | |
} | |
@media (max-width: 873px) { | |
.middle { padding: 0; } | |
.title-box { margin: 0 2%; } | |
.title-box::after { left: 7.5%; } | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!-- Don't put link tags in the body, kidys! --> | |
<link rel="stylesheet" type="text/css" href="http://acconut.koding.com/anchor/themes/default/css/reset.css" /> | |
<div class="content"> | |
<header> | |
<!-- TITLE --> | |
<div class="title-box"> | |
<h1 class="title"> | |
Your title here | |
</h1> | |
</div> | |
</header> | |
<div class="middle"> | |
<!-- THE LEFT THINGY --> | |
<div class="left-bar"> | |
<!-- NAVIGATION --> | |
<nav> | |
<ul> | |
<li class="active"><a href="#">Posts</a><div class="arrow"></div></li> | |
<li><a href="#">About</a><div class="arrow"></div></li> | |
<li><a href="#">Gallery</a><div class="arrow"></div></li> | |
</ul> | |
</nav> | |
</div> | |
<!-- RIGHT THINGY --> | |
<div class="right-bar"> | |
<div class="posts"> | |
<ul> | |
<li> | |
<a href="#"> | |
<section> | |
<h2>Test</h2> | |
<span class="date">Just now</span> | |
</section> | |
</a> | |
</li> | |
<li> | |
<a href="#"> | |
<section> | |
<h2>Post title, ok?</h2> | |
<span class="date">Just now</span> | |
</section> | |
</a> | |
</li> | |
<li> | |
<a href="#"> | |
<section> | |
<h2>Hello World</h2> | |
<span class="date">At the beginning of the universe</span> | |
</section> | |
</a> | |
</li> | |
</ul> | |
</div> | |
<!-- FOOTER --> | |
<footer> | |
<div class="attribution"> | |
<a href="http://anchorcms.com" target="_blank"> | |
<img src="http://acconut.koding.com/anchor/themes/default/img/attribution.gif" /> | |
</a> | |
</div> | |
<ul> | |
<li><a href="#">RSS</a></li> | |
<li><a href="#">Home</a></li> | |
<li><a href="#">@sillytwittername</a></li> | |
<li>© 2012 owner</li> | |
</ul> | |
</footer> | |
</div> | |
</div> | |
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment