Use position fixed for sidebar to restore keyboard scrolling functionality

This commit is contained in:
Adam Wathan 2017-10-24 09:19:39 -04:00
parent e821ea2667
commit ab601d42f7
2 changed files with 6 additions and 5 deletions

View File

@ -1,5 +1,5 @@
<!DOCTYPE html>
<html lang="en" class="bg-brand-soft">
<html lang="en" class="bg-smoke-light">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
@ -13,8 +13,8 @@
<script type="text/javascript" src="/js/prism.js" defer=""></script>
</head>
<body class="font-sans font-normal text-slate-darker leading-normal">
<div class="h-screen flex">
<div class="bg-white w-full max-w-xs flex-none overflow-scroll-y p-8 border-r-2 border-smoke">
<div class="min-h-screen">
<div class="fixed pin-y pin-l bg-white w-full max-w-xs flex-none overflow-scroll-y p-8 border-r-2 border-smoke">
<div class="flex items-center mb-8">
<svg class="h-8 w-8 mr-4" viewBox="0 0 60 36" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient x1="0%" y1="0%" y2="100%" id="a"><stop stop-color="#2383AE" offset="0%"></stop><stop stop-color="#6DD7B9" offset="100%"></stop></linearGradient></defs><path d="M15 12c2-8 7-12 15-12 12 0 13.5 9 19.5 10.5 4 1 7.5-.5 10.5-4.5-2 8-7 12-15 12-12 0-13.5-9-19.5-10.5-4-1-7.5.5-10.5 4.5zM0 30c2-8 7-12 15-12 12 0 13.5 9 19.5 10.5 4 1 7.5-.5 10.5-4.5-2 8-7 12-15 12-12 0-13.5-9-19.5-10.5-4-1-7.5.5-10.5 4.5z" fill="url(#a)" fill-rule="evenodd"></path></svg>
<span class='text-xl font-semibold'>Tailwind CSS</span>
@ -170,7 +170,7 @@
</div>
</nav>
</div>
<div class="bg-smoke-light flex-grow overflow-scroll-y">
<div class="ml-80">
<div class="px-6 py-8 w-full max-w-xl mx-auto">
@yield('body')
</div>

View File

@ -241,7 +241,8 @@ module.exports = {
'8': '2rem',
'10': '2.5rem',
'12': '3rem',
'16': '4rem'
'16': '4rem',
'80': '20rem',
},
negativeMargin: {
'px': '1px',