---
---
$link-color: #0099ff;
$border-color: #dedede;
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
color: #222;
font-family: 'Open Sans',Arial,Helvetica,sans-serif;
line-height: 2;
}
a {
&:link, &:active {
color: $link-color;
text-decoration: none;
}
&:hover, &:visited {
color: $link-color;
text-decoration: underline;
}
}
h1, h2, h3, h4, h5 {
font-family: 'Zilla Slab','Open Sans',X-LocaleSpecific,sans-serif;
font-weight: bold;
color: #222;
a:link, a:visited, a:hover, a:active {
color: #222;
}
}
.header-wide {
border-bottom: 1px solid $border-color;
position: fixed;
width: 100%;
background-color: white;
h1 {
padding: 0 1.5rem;
float: left;
line-height: 4rem;
}
ul {
display: inline-block;
float: right;
padding: 0 1rem;
li {
display: inline-block;
padding: 0 1rem;
a {
line-height: 4rem;
}
}
}
}
.header-mobile {
border-bottom: 1px solid $border-color;
position: fixed;
width: 100%;
background-color: white;
h1 {
padding: 0 1.5rem;
line-height: 4rem;
text-align: center;
}
}
aside {
width: 15rem;
position: fixed;
top: 4rem;
left: 0;
bottom: 0;
border-right: 1px solid $border-color;
padding: 1rem 0;
h1 {
font-size: 1.2rem;
line-height: 2.5;
padding: 0 1.5rem;
}
ul {
li {
display: block;
a {
padding: .35rem 1.5rem .35rem 1.5rem;
line-height: 2.5;
display: block;
}
}
.separator {
height: 0;
border-bottom: 1px solid $border-color;
}
}
}
.aside-wide {
width: 15rem;
position: fixed;
top: 4rem;
left: 0;
bottom: 0;
}
.aside-mobile {
width: 15rem;
position: fixed;
top: 0;
bottom: 0;
left: -16rem;
bottom: 0;
border-right: 1px solid $border-color;
padding: 4rem 0;
background-color: white;
box-shadow: 0 0 1rem #aaa;
transition-property: left;
transition-duration: 0.3s;
}
main {
padding: 4rem 4rem 4rem 20rem;
margin: 0 auto;
article {
h1, h2, h3, h4, h5 {
font-family: 'Zilla Slab','Open Sans',X-LocaleSpecific,sans-serif;
font-weight: bold;
}
h1 {
font-size: 3rem;
line-height: 2;
}
h2 {
border-top: 1px dotted #c1c5c8;
font-size: 1.8;
margin-top: 36px;
padding-top: 36px;
font-family: 'Zilla Slab','Open Sans',X-LocaleSpecific,sans-serif;
}
kbd {
display: inline-block;
padding: 3px 5px;
line-height: 10px;
color: #444d56;
vertical-align: middle;
background-color: #fafbfc;
border: 1px solid #c6cbd1;
border-bottom-color: rgb(198, 203, 209);
border-bottom-color: #959da5;
border-radius: 3px;
box-shadow: inset 0 -1px 0 #959da5;
}
pre {
padding: 16px;
overflow: auto;
line-height: 1.45;
background-color: #f6f8fa;
border-radius: 3px;
}
pre > code {
background: none;
padding: .2em 0;
}
code {
padding: .2em .4em;
margin: 0;
background-color: rgba(27,31,35,.05);
border-radius: 3px;
}
ul {
li {
padding: .25rem 0;
margin-left: 1rem;
}
}
p {
margin-bottom: 1rem;
}
}
}
footer {
position: fixed;
bottom: 0;
left: 0;
right: 0;
background-color: lightgreen;
}
.open-menu-checkbox {
display: inline-block;
width: 32px;
height: 32px;
position: fixed;
left: 16px;
top: 16px;
opacity: 0;
z-index: 4;
cursor: pointer;
}
.open-menu-bar-container {
position: fixed;
top: 16px;
left: 16px;
width: 32px;
height: 32px;
display: inline-block;
z-index: 2;
}
.open-menu-bar {
display: block;
width: 32px;
height: 4px;
margin: 5px 0;
background: #444;
border-radius: 2px;
transition-duration: 0.3s;
&:nth-of-type(1) {
transform-origin: 3px 50%;
}
&:nth-of-type(2) {
transform-origin: 0% 100%;
}
&:nth-of-type(3) {
transform-origin: 3px 50%;
}
}
.open-menu-checkbox:checked ~ .aside-mobile {
left: 0;
}
.open-menu-checkbox:checked ~ .open-menu-bar-container > .open-menu-bar {
&:nth-of-type(1) {
transform: rotate(45deg) translate(3px, -3px);
}
&:nth-of-type(2) {
opacity: 0;
transform: scale(0.2, 0.2);
}
&:nth-of-type(3) {
transform: rotate(-45deg) translate(3px, 3px);
}
}
// for PC
@media (min-width: 769px) {
.header-mobile {
display: none;
}
.aside-mobile {
display: none;
}
.open-menu-checkbox, .open-menu-bar-container {
display: none;
}
}
// for mobile
@media (max-width: 768px) {
.header-wide {
display: none;
}
.aside-wide {
display: none;
}
main {
padding: 4rem 2rem 2rem 2rem;
}
}