generated from templates/go-generic
WIP: New Flow website built with Nanoc and Mage #1
2 changed files with 23 additions and 13 deletions
|
@ -1,3 +1,11 @@
|
||||||
|
:root {
|
||||||
|
--background: #1a1b26;
|
||||||
|
--background-dark: #16161e;
|
||||||
|
--foreground: #a9b1d6;
|
||||||
|
--link: #7aa2f7;
|
||||||
|
--link-hover: #bb9af7;
|
||||||
|
}
|
||||||
|
|
||||||
* {
|
* {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
@ -5,20 +13,20 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
background: #fff;
|
background: var(--background);
|
||||||
|
color: var(--foreground);
|
||||||
}
|
}
|
||||||
|
|
||||||
a {
|
a {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
a:link,
|
a:link, a:visited {
|
||||||
a:visited {
|
color: var(--link);
|
||||||
color: #f30;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
a:hover {
|
a:hover {
|
||||||
color: #f90;
|
color: var(--link-hover);
|
||||||
}
|
}
|
||||||
|
|
||||||
#main {
|
#main {
|
||||||
|
@ -55,19 +63,20 @@ a:hover {
|
||||||
}
|
}
|
||||||
|
|
||||||
#sidebar {
|
#sidebar {
|
||||||
position: absolute;
|
background: var(--background-dark);
|
||||||
top: 40px;
|
position: fixed;
|
||||||
left: 20px;
|
top: 0px;
|
||||||
|
left: 0px;
|
||||||
width: 200px;
|
width: 200px;
|
||||||
padding: 20px 20px 0 0;
|
height: 100%;
|
||||||
border-right: 1px solid #ccc;
|
padding: 30px 20px 0 0;
|
||||||
|
#border-right: 1px solid #ccc;
|
||||||
text-align: right;
|
text-align: right;
|
||||||
}
|
}
|
||||||
|
|
||||||
#sidebar h2 {
|
#sidebar h2 {
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
color: #333;
|
|
||||||
letter-spacing: 1px;
|
letter-spacing: 1px;
|
||||||
line-height: 20px;
|
line-height: 20px;
|
||||||
}
|
}
|
||||||
|
@ -87,9 +96,10 @@ a:hover {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
background-color: #333;
|
background-color: var(--background-dark);
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 0;
|
top: 0;
|
||||||
|
left: 220px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -7,7 +7,7 @@
|
||||||
<%= yield %>
|
<%= yield %>
|
||||||
</div>
|
</div>
|
||||||
<div id="sidebar">
|
<div id="sidebar">
|
||||||
<h2>Projects</h2>
|
<h2>My Projects</h2>
|
||||||
<ul>
|
<ul>
|
||||||
<%= projects %>
|
<%= projects %>
|
||||||
</ul>
|
</ul>
|
||||||
|
|
Loading…
Reference in a new issue