static/scss/bootstrap-4.0.0-alpha.6/docs/examples/blog/blog.css

   1 /*
   2  * Globals
   3  */
   4
   5 @media (min-width: 48em) {
   6   html {
   7     font-size: 18px;
   8   }
   9 }
  10
  11 body {
  12   font-family: Georgia, "Times New Roman", Times, serif;
  13   color: #555;
  14 }
  15
  16 h1, .h1,
  17 h2, .h2,
  18 h3, .h3,
  19 h4, .h4,
  20 h5, .h5,
  21 h6, .h6 {
  22   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  23   font-weight: normal;
  24   color: #333;
  25 }
  26
  27
  28 /*
  29  * Override Bootstrap's default container.
  30  */
  31
  32 .container {
  33   max-width: 60rem;
  34 }
  35
  36
  37 /*
  38  * Masthead for nav
  39  */
  40
  41 .blog-masthead {
  42   margin-bottom: 3rem;
  43   background-color: #428bca;
  44   -webkit-box-shadow: inset 0 -.1rem .25rem rgba(0,0,0,.1);
  45           box-shadow: inset 0 -.1rem .25rem rgba(0,0,0,.1);
  46 }
  47
  48 /* Nav links */
  49 .nav-link {
  50   position: relative;
  51   padding: 1rem;
  52   font-weight: 500;
  53   color: #cdddeb;
  54 }
  55 .nav-link:hover,
  56 .nav-link:focus {
  57   color: #fff;
  58   background-color: transparent;
  59 }
  60
  61 /* Active state gets a caret at the bottom */
  62 .nav-link.active {
  63   color: #fff;
  64 }
  65 .nav-link.active:after {
  66   position: absolute;
  67   bottom: 0;
  68   left: 50%;
  69   width: 0;
  70   height: 0;
  71   margin-left: -.3rem;
  72   vertical-align: middle;
  73   content: "";
  74   border-right: .3rem solid transparent;
  75   border-bottom: .3rem solid;
  76   border-left: .3rem solid transparent;
  77 }
  78
  79
  80 /*
  81  * Blog name and description
  82  */
  83
  84 .blog-header {
  85   padding-bottom: 1.25rem;
  86   margin-bottom: 2rem;
  87   border-bottom: .05rem solid #eee;
  88 }
  89 .blog-title {
  90   margin-bottom: 0;
  91   font-size: 2rem;
  92   font-weight: normal;
  93 }
  94 .blog-description {
  95   font-size: 1.1rem;
  96   color: #999;
  97 }
  98
  99 @media (min-width: 40em) {
 100   .blog-title {
 101     font-size: 3.5rem;
 102   }
 103 }
 104
 105
 106 /*
 107  * Main column and sidebar layout
 108  */
 109
 110 /* Sidebar modules for boxing content */
 111 .sidebar-module {
 112   padding: 1rem;
 113   /*margin: 0 -1rem 1rem;*/
 114 }
 115 .sidebar-module-inset {
 116   padding: 1rem;
 117   background-color: #f5f5f5;
 118   border-radius: .25rem;
 119 }
 120 .sidebar-module-inset p:last-child,
 121 .sidebar-module-inset ul:last-child,
 122 .sidebar-module-inset ol:last-child {
 123   margin-bottom: 0;
 124 }
 125
 126
 127 /* Pagination */
 128 .blog-pagination {
 129   margin-bottom: 4rem;
 130 }
 131 .blog-pagination > .btn {
 132   border-radius: 2rem;
 133 }
 134
 135
 136 /*
 137  * Blog posts
 138  */
 139
 140 .blog-post {
 141   margin-bottom: 4rem;
 142 }
 143 .blog-post-title {
 144   margin-bottom: .25rem;
 145   font-size: 2.5rem;
 146 }
 147 .blog-post-meta {
 148   margin-bottom: 1.25rem;
 149   color: #999;
 150 }
 151
 152
 153 /*
 154  * Footer
 155  */
 156
 157 .blog-footer {
 158   padding: 2.5rem 0;
 159   color: #999;
 160   text-align: center;
 161   background-color: #f9f9f9;
 162   border-top: .05rem solid #e5e5e5;
 163 }
 164 .blog-footer p:last-child {
 165   margin-bottom: 0;
 166 }