Line 38: | Line 38: | ||
<style> | <style> | ||
+ | |||
+ | html, body | ||
+ | height: 100% | ||
+ | |||
+ | html | ||
+ | background-color: #222 | ||
+ | |||
+ | body | ||
+ | position: relative | ||
+ | max-width: 1024px | ||
+ | min-width: 768px | ||
+ | margin: 0 auto | ||
+ | |||
+ | header | ||
+ | color: #fff | ||
+ | background-color: #000 | ||
+ | overflow: hidden | ||
+ | |||
+ | h1 | ||
+ | font-weight: normal | ||
+ | margin: 0 | ||
+ | padding: 0 20px | ||
+ | line-height: 2 | ||
+ | position: relative | ||
+ | transition: all .3s ease-out | ||
.sidebar, .main | .sidebar, .main | ||
− | transition: all .3s ease-out | + | transition: all .3s ease-out |
− | overflow: scroll | + | overflow: scroll |
− | position: absolute | + | -webkit-overflow-scrolling: touch |
− | top: 64px | + | position: absolute |
− | bottom: 0 | + | top: 64px |
+ | bottom: 0 | ||
.sidebar | .sidebar | ||
− | width: 260px | + | width: 260px |
− | background-color: #333 | + | background-color: #333 |
− | left: 0 | + | left: 0 |
+ | |||
+ | .main | ||
+ | background-color: #f5f5f5 | ||
+ | position: absolute | ||
+ | left: 260px | ||
+ | right: 0 | ||
+ | padding: 20px | ||
+ | |||
+ | h2 | ||
+ | margin: 0 0 1em 0 | ||
+ | |||
+ | h3 | ||
+ | background-color: #555 | ||
+ | color: #ccc | ||
+ | margin: 0 | ||
+ | padding: 0 20px | ||
+ | font-weight: normal | ||
+ | line-height: 2 | ||
+ | text-transform: uppercase | ||
+ | font-size: 90% | ||
+ | |||
+ | .toggle-menu | ||
+ | color: #ccc | ||
+ | text-decoration: none | ||
+ | font-size: 50px | ||
+ | float: left | ||
+ | display: block | ||
+ | position: absolute | ||
+ | left: 0 | ||
+ | z-index: -1 | ||
+ | opacity: 0 | ||
+ | transition: opacity .3s ease-out | ||
+ | &:hover | ||
+ | color: #fff | ||
+ | &:before | ||
+ | height: 64px | ||
+ | width: 64px | ||
+ | display: block | ||
+ | text-align: center | ||
+ | line-height: 64px | ||
+ | font-size: 24px | ||
+ | |||
+ | nav ul | ||
+ | list-style: none | ||
+ | padding: 0 | ||
+ | margin: 0 | ||
+ | background-color: #444 | ||
+ | li | ||
+ | padding: 20px | ||
+ | color: #ccc | ||
+ | background-color: #333 | ||
+ | margin-bottom: 1px | ||
+ | border-left: 10px solid transparent | ||
+ | &.active | ||
+ | border-color: #e35205 | ||
+ | |||
+ | @media all and (max-width: 1024px) | ||
+ | .sidebar.toggled | ||
+ | left: 0 | ||
+ | z-index: 10 | ||
+ | box-shadow: 3px 1px 10px rgba(0,0,0,.8) | ||
+ | + .main | ||
+ | overflow: hidden | ||
+ | .sidebar | ||
+ | left: -260px | ||
+ | .main | ||
+ | left: 0 | ||
+ | .toggle-menu | ||
+ | z-index: 1 | ||
+ | opacity: 1 | ||
+ | h1 | ||
+ | left: 40px | ||
+ | |||
</style> | </style> |
Revision as of 08:00, 11 September 2017
<
Notebook
Week 1 (June 2 - June 8)
-
Wet Lab Overview
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eu vulputate dolor. Ut euismod nulla a efficitur placerat. Quisque eget nisl in eros mollis sagittis. Aliquam pretium feugiat nulla, quis aliquam lorem suscipit bibendum. Interdum et malesuada fames ac ante ipsum primis in faucibus.
-
Dry Lab Overview
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eu vulputate dolor. Ut euismod nulla a efficitur placerat. Quisque eget nisl in eros mollis sagittis. Aliquam pretium feugiat nulla, quis aliquam lorem suscipit bibendum. Interdum et malesuada fames ac ante ipsum primis in faucibus.
Week 2 (June 9 - June 15)
-
Wet Lab Overview
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eu vulputate dolor. Ut euismod nulla a efficitur placerat. Quisque eget nisl in eros mollis sagittis. Aliquam pretium feugiat nulla, quis aliquam lorem suscipit bibendum. Interdum et malesuada fames ac ante ipsum primis in faucibus.
Dry Lab Overview
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eu vulputate dolor. Ut euismod nulla a efficitur placerat. Quisque eget nisl in eros mollis sagittis. Aliquam pretium feugiat nulla, quis aliquam lorem suscipit bibendum. Interdum et malesuada fames ac ante ipsum primis in faucibus.