responsive design for workspace

html/default.html

            color: #444;
        }
        nav .brand-logo {
            white-space: nowrap;
            overflow-x: hidden;
        }
        p {
            line-height: 2rem;
        }

html/workspace.html

{{ define "title" }}Loop: Workspace{{ end }}
{{ define "styles" }}
    <style>
        nav ul a,
        nav .brand-logo {
            color: #444;
        }
        nav .brand-logo {
            white-space: nowrap;
            overflow-x: hidden;
        }
        nav .button-collapse {
            color: #26a69a;
        }
        pre#editor {
            height: 100vh;
        }
    </style>
{{ end }}
{{ define "content" }}
    <div class="row">
        <div id="left-pane" class="col s4 m4 l2">
    <nav class="white" role="navigation">
        <div class="nav-wrapper container">
            <div id="slide-out" class="side-nav">
                <h4 class="black-text center">Loop</h4>
                <div class="row">
                    <div class="col s12">
                        <select class="teal-text">
                            <option value="" disabled>Select a directory</option>
                            <option value="Personal" selected>Personal</option>
                        </select>
                    </div>
                    <div class="col s12 center">
                        <a class="waves-effect waves-light btn modal-trigger" href="#modal-new-directory">New Content</a>
                    </div>
                </div>
                <div class="row">
                    <div class="col s12">
                        <div class="collection">
                            {{ range $d := .Directories }}
                                {{ if eq $d $.Title }}
                                    <a class="collection-item active" href="/{{ $.Username }}/edit/{{ $d | urlquery }}">{{ $d }}</a>
                                {{ else }}
                                    <a class="collection-item" href="/{{ $.Username }}/edit/{{ $d | urlquery }}">{{ $d }}</a>
                                {{ end }}
                            {{ end }}
                        </div>
                    </div>
                </div>
            </div>
            <a href="#" data-activates="slide-out" class="button-collapse"><i class="mdi-navigation-menu"></i></a>
            <div class="brand-logo">{{ .Title }}</div>
        </div>
    </nav>
    <div class="row">
        <div id="left-pane" class="col l2 hide-on-med-and-down">
            <div class="row">
                <div class="col s12">
                    <label>Workspace</label>
                    <select>
                    <select class="teal-text">
                        <option value="" disabled>Select a directory</option>
                        <option value="Personal" selected>Personal</option>
                    </select>
            </div>
            <div class="row">
                <div class="col s12" style="overflow-y: auto;">
                    <ul class="collection">
                    <div class="collection">
                        {{ range $d := .Directories }}
                            <li class="collection-item avatar dismissable">
                                <i class="mdi-file-folder circle"></i>
                                <span class="title"><a href="/{{ $.Username }}/edit/{{ $d | urlquery }}">{{ $d }}</a></span>
                                <p><!--(3 files)--></p>
                                <a href="#" class="secondary-content"><i class="mdi-action-grade"></i></a>
                            </li>
                            {{ if eq $d $.Title }}
                                <a class="collection-item active" href="/{{ $.Username }}/edit/{{ $d | urlquery }}">{{ $d }}</a>
                            {{ else }}
                                <a class="collection-item" href="/{{ $.Username }}/edit/{{ $d | urlquery }}">{{ $d }}</a>
                            {{ end }}
                        {{ end }}
                    </ul>
                    </div>
                </div>
            </div>
        </div>
        <div id="workarea" class="col s8 m8 l10">
        <div id="workarea" class="col s12 m12 l10">
            <div class="fixed-action-btn" style="bottom: 45px; right: 24px;">
                <a id="create" class="btn-floating btn-large red" title="Edit">
                    <i class="large mdi-editor-mode-edit"></i>
                            <span class="hide-on-med-and-down">Preview</span>
                        </a>
                    </div>
                    <div class="col s12 m12 l12"><h4>{{ .Title }}</h4></div>
                    <pre id="editor" class="col s12 m12 l12">{{ .Content }}</pre>
                    <iframe id="view" class="col s12 m12 l12" style="display: none;" frameBorder="0" seamless="seamless" src="/{{ .Username }}/edit/{{ .Title | urlquery }}/preview"></iframe>
                </div>
            $('select').material_select();
            $('.modal-trigger').leanModal();
            $('.button-collapse').sideNav();
            $('#fullscreen').click(function (event) {
                event.preventDefault();