blog.css 1.88 KB
Newer Older
Mark Otto's avatar
Mark Otto committed
1
2
3
4
5
/* stylelint-disable selector-list-comma-newline-after */

.blog-header {
  line-height: 1;
  border-bottom: 1px solid #e5e5e5;
6
7
}

Mark Otto's avatar
Mark Otto committed
8
9
10
.blog-header-logo {
  font-family: "Playfair Display", Georgia, "Times New Roman", serif;
  font-size: 2.25rem;
Mark Otto's avatar
Mark Otto committed
11
12
}

Mark Otto's avatar
Mark Otto committed
13
14
.blog-header-logo:hover {
  text-decoration: none;
Mark Otto's avatar
Mark Otto committed
15
16
}

Mark Otto's avatar
Mark Otto committed
17
18
h1, h2, h3, h4, h5, h6 {
  font-family: "Playfair Display", Georgia, "Times New Roman", serif;
Mark Otto's avatar
Mark Otto committed
19
20
}

Mark Otto's avatar
Mark Otto committed
21
22
23
24
25
26
27
28
29
30
.display-4 {
  font-size: 2.5rem;
}
@media (min-width: 768px) {
  .display-4 {
    font-size: 3rem;
  }
}

.nav-scroller {
Mark Otto's avatar
Mark Otto committed
31
  position: relative;
Mark Otto's avatar
Mark Otto committed
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
  z-index: 2;
  height: 2.75rem;
  overflow-y: hidden;
}

.nav-scroller .nav {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  padding-bottom: 1rem;
  margin-top: -1px;
  overflow-x: auto;
  text-align: center;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
}

.nav-scroller .nav-link {
  padding-top: .75rem;
  padding-bottom: .75rem;
  font-size: .875rem;
}

.card-img-right {
  height: 100%;
  border-radius: 0 3px 3px 0;
}

.flex-auto {
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
Mark Otto's avatar
Mark Otto committed
64
65
}

Mark Otto's avatar
Mark Otto committed
66
67
68
69
70
.h-250 { height: 250px; }
@media (min-width: 768px) {
  .h-md-250 { height: 250px; }
}

Mark Otto's avatar
Mark Otto committed
71
72
73
74
75
/*
 * Blog name and description
 */
.blog-title {
  margin-bottom: 0;
76
  font-size: 2rem;
XhmikosR's avatar
XhmikosR committed
77
  font-weight: 400;
Mark Otto's avatar
Mark Otto committed
78
79
}
.blog-description {
80
  font-size: 1.1rem;
Mark Otto's avatar
Mark Otto committed
81
82
83
  color: #999;
}

84
85
86
87
88
89
@media (min-width: 40em) {
  .blog-title {
    font-size: 3.5rem;
  }
}

Mark Otto's avatar
Mark Otto committed
90
/* Pagination */
91
.blog-pagination {
92
  margin-bottom: 4rem;
Mark Otto's avatar
Mark Otto committed
93
}
94
.blog-pagination > .btn {
95
  border-radius: 2rem;
Mark Otto's avatar
Mark Otto committed
96
97
98
99
100
101
}

/*
 * Blog posts
 */
.blog-post {
102
  margin-bottom: 4rem;
Mark Otto's avatar
Mark Otto committed
103
104
}
.blog-post-title {
105
106
  margin-bottom: .25rem;
  font-size: 2.5rem;
Mark Otto's avatar
Mark Otto committed
107
108
}
.blog-post-meta {
109
  margin-bottom: 1.25rem;
Mark Otto's avatar
Mark Otto committed
110
111
112
113
114
115
116
  color: #999;
}

/*
 * Footer
 */
.blog-footer {
117
  padding: 2.5rem 0;
Mark Otto's avatar
Mark Otto committed
118
119
120
  color: #999;
  text-align: center;
  background-color: #f9f9f9;
121
  border-top: .05rem solid #e5e5e5;
Mark Otto's avatar
Mark Otto committed
122
}
123
124
125
.blog-footer p:last-child {
  margin-bottom: 0;
}