]>
Commit | Line | Data |
---|---|---|
91e44d91 S |
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 | } |