mui/examples/layouts/blog.html at angular-bugfixes · cssCheck/mui · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="../assets/mui/css/mui.min.css" rel="stylesheet" type="text/css" />
    <script src="../assets/mui/js/mui.min.js"></script>
    <style>
      /**
       * Body CSS
       */
      html,
      body {
        height: 100%;
      }

      html,
      body,
      input,
      textarea,
      buttons {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.004);
      }


      /**
       * Sidebar CSS
       */
      #sidebar {
        background-color: #E57373;
        padding: 15px;
      }

      @media (min-width: 768px) {
        #sidebar {
          position: fixed;
          top: 0;
          bottom: 0;
          width: 180px;
          height: 100%;
          padding-top: 30px;
        }
      }


      /**
       * Content CSS
       */
      @media (min-width: 768px) {
        #content {
          margin-left: 180px;
        }
      }

    </style>
  </head>
  <body>
    <div id="sidebar">
      <div class="mui--text-white mui--text-display1 mui--align-vertical" style="height:100%;">SAMPLE BLOG</div>
    </div>
    <div id="content" class="mui-container-fluid">
      <div class="mui-row">
        <div class="mui-col-sm-10 mui-col-sm-offset-1">
          <br>
          <br>
          <div class="mui--text-black-54 mui--text-body2">PINNED POST</div>
          <div class="mui-divider"></div>
          <br>
          <div class="mui--text-headline">MUI Acquires New Features</div>
          <div class="mui--text-black-54">By <a href="#">Team MUI</a> 3 days ago</div>
          <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In facilisis aliquam ipsum sed dignissim. Sed ac accumsan odio. Vivamus tristique dignissim neque. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc cursus felis nec purus condimentum vestibulum. Donec mauris nisi, sollicitudin eget iaculis id, suscipit id odio. <a href="#">Read more...</a></div>
          <br>
          <br>
          <div class="mui--text-black-54 mui--text-body2">RECENT POSTS</div>
          <div class="mui-divider"></div>
          <br>
          <div class="mui--text-headline">MUI Acquires New Features</div>
          <div class="mui--text-black-54">By <a href="#">Team MUI</a> 1 week ago</div>
          <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In facilisis aliquam ipsum sed dignissim. Sed ac accumsan odio. Vivamus tristique dignissim neque. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc cursus felis nec purus condimentum vestibulum. Donec mauris nisi, sollicitudin eget iaculis id, suscipit id odio. <a href="#">Read more...</a></div>
          <br>
          <div class="mui--text-headline">MUI Acquires New Features</div>
          <div class="mui--text-black-54">By <a href="#">Team MUI</a> 3 weeks ago</div>
          <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In facilisis aliquam ipsum sed dignissim. Sed ac accumsan odio. Vivamus tristique dignissim neque. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc cursus felis nec purus condimentum vestibulum. Donec mauris nisi, sollicitudin eget iaculis id, suscipit id odio. <a href="#">Read more...</a></div>
        </div>
      </div>
    </div>
  </body>
</html>