google
/
material-design-lite
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Remove sidebar and use grid

master
Alexander Surma 2015-04-30 11:40:40 +01:00
parent c1df7f2097
commit d6b64c6994
2 changed files with 9 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
templates/article/index.html
View File

@ -41,7 +41,7 @@
}
</style>
</head>
<body>
<body style="mdl-color--grey-100">
<div class="mdl-layout mdl-js-layout">
<header class="mdl-layout__header mdl-layout__header--scroll mdl-color--grey-100 mdl-color-text--grey-800">
<span class="mdl-layout-title">Material Design Lite</span>
@ -58,12 +58,9 @@
</header>
<div class="ribbon mdl-color--primary"></div>
<main class="mdl-layout__content">
<header>
<h1>Simple Layout</h1>
<h2>for simple content</h2>
</header>
<div class="container">
<div class="mdl-color--white mdl-shadow--z1 content mdl-color-text--grey-800">
<div class="container mdl-grid">
<div class="mdl-cell mdl-cell--2-col mdl-cell--hide-tablet mdl-cell--hide-phone"></div>
<div class="content mdl-color--white mdl-shadow--2dp content mdl-color-text--grey-800 mdl-cell mdl-cell--8-col">
<h3>How to install MDL</h3>
<p>
Cillum dolor esse sit incididunt velit eiusmod magna ad nostrud officia aute dolor dolor. Magna esse ullamco pariatur adipisicing consectetur eu commodo officia. Ex cillum consequat mollit minim elit est deserunt occaecat nisi amet. Quis aliqua nostrud Lorem occaecat sunt. Eiusmod quis amet ullamco aliquip dolore ut incididunt duis adipisicing. Elit consequat nisi eiusmod aute ipsum sunt veniam do est. Occaecat mollit aliquip ut proident consectetur amet ex dolore consectetur aliqua elit.
@ -82,20 +79,6 @@
Commodo nisi non consectetur voluptate incididunt mollit duis dolore amet amet tempor exercitation. Qui amet aute ea aute id ad aliquip proident. Irure duis qui labore deserunt enim in quis nisi sint consequat aliqua. Ex proident labore et laborum tempor fugiat sint magna veniam minim. Nulla dolor labore adipisicing in enim mollit laboris fugiat eu. Aliquip minim cillum ullamco voluptate non dolore non ex duis fugiat duis ad. Deserunt cillum ad et nisi amet non voluptate culpa qui do. Labore ullamco et minim proident est laborum mollit ad labore deserunt ut irure dolore. Reprehenderit ad ad irure ut irure qui est eu velit eu excepteur adipisicing culpa. Laborum cupidatat ullamco eu duis anim reprehenderit proident aute ad consectetur eiusmod.
</p>
</div>
<ul class="sidenav">
<li class="active">
How to install MDL
</li>
<li>
Basic MDL usage
</li>
<li>
Advanced MDL usage
</li>
<li>
Contributing
</li>
</ul>
</div>
<footer class="mdl-mini-footer">
<div class="mdl-mini-footer--left-section">

58
templates/article/styles.css
View File

@ -16,59 +16,11 @@ body {
position: static;
}
main {
margin-top: -40vh;
}
main > header {
padding: 48px;
}
main > header > h2 {
font-weight: 300;
}
.container {
display: flex;
flex-direction: row;
max-width: 1280px;
margin: 0 auto;
margin-bottom: 48px;
main.mdl-layout__content.mdl-layout__content {
margin-top: -35vh;
}
.content {
padding: 48px;
width: 768px;
margin-right: 48px
}
.content > h3 {
margin-bottom: 24px;
}
.sidenav {
flex-grow: 1;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
padding: 0;
margin: 0;
}
.sidenav li {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
list-style-type: none;
font-size: 1em;
border-left: 2px solid transparent;
padding: 8px;
color: rgba(255, 255, 255, 0.7);
transition: border-left 0.4s ease-in-out;
}
.sidenav li:hover {
border-left-color: rgba(255, 255, 255, 0.7);
}
.sidenav li.active {
border-left: 3px solid white;
color: rgba(255, 255, 255, 1);
}
border-radius: 2px;
padding: 24px;
}