style.css (5625B)
1 /* 2 Theme-specific CSS 3 */ 4 @font-face { 5 font-family: 'MuseoSlab500'; 6 src: url('Museo_Slab_500.woff'); 7 } 8 * { 9 padding:0; 10 margin:0; 11 } 12 #sidebar { 13 position:fixed; 14 width:200px; 15 height:100%; 16 background-color:#002B36; 17 border-right:5px solid #839496; 18 } 19 #wrapper { 20 padding-top:30px; 21 padding-left:200px; 22 } 23 #logo { 24 margin-top:30px; 25 margin-bottom:10px; 26 height:80px; 27 text-align:center; 28 } 29 #logo a { 30 display:inline-block; 31 font-family:'Droid Mono', monospace, sans-serif; 32 font-size:20px; 33 background-color:#839496; 34 border:5px solid #839496; 35 border-radius:0px 5px 5px 0px; 36 color:#002B36; 37 text-align:center; 38 text-decoration:none; 39 -o-transition:all .2s ease-out; 40 -ms-transition:all .2s ease-out; 41 -moz-transition:all .2s ease-out; 42 -webkit-transition:all .2s ease-out; 43 transition:all .2s ease-out; 44 } 45 #logo a:before { 46 -webkit-transform: rotate(-90deg); 47 -moz-transform: rotate(-90deg); 48 -ms-transform: rotate(-90deg); 49 -o-transform: rotate(-90deg); 50 filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); 51 -o-transition:all .2s ease-out; 52 -ms-transition:all .2s ease-out; 53 -moz-transition:all .2s ease-out; 54 -webkit-transition:all .2s ease-out; 55 transition:all .2s ease-out; 56 content:"HOME"; 57 position:fixed; 58 font-family:'Droid Mono', monospace, sans-serif; 59 60 top:52px; 61 left:-60px; 62 } 63 #logo a:hover { 64 border-left:20px solid #839496; 65 } 66 #logo a:hover:before { 67 -webkit-transform: rotate(-90deg); 68 -moz-transform: rotate(-90deg); 69 -ms-transform: rotate(-90deg); 70 -o-transform: rotate(-90deg); 71 filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); 72 73 position:fixed; 74 75 left:-10px; 76 } 77 #nav a { 78 font-family:'MuseoSlab500',sans-serif; 79 font-size:30px; 80 display:block; 81 color:#839496; 82 padding:5px; 83 text-decoration:none; 84 text-align:right; 85 -o-transition:all .2s ease-out; 86 -ms-transition:all .2s ease-out; 87 -moz-transition:all .2s ease-out; 88 -webkit-transition:all .2s ease-out; 89 transition:all .2s ease-out; 90 } 91 #nav a.current { 92 background-color:#839496; 93 color:#002B36; 94 } 95 #nav a.current:hover { 96 background-color:#839496; 97 color:#002B36; 98 } 99 #nav a:hover { 100 background-color:#073642; 101 padding-right:30px; 102 } 103 #nav a:hover:after { 104 content:"<"; 105 position:fixed; 106 left:175px; 107 } 108 #content { 109 width:700px; 110 margin:0px auto 100% auto; 111 word-wrap:break-word; 112 } 113 #content ul { 114 list-style-type:square; 115 color:#1F2428; 116 margin-left:30px; 117 } 118 .post { 119 120 } 121 .post li { 122 color:#454545; 123 margin-bottom:10px; 124 } 125 .post .header { 126 font-family:'MuseoSlab500',sans-serif; 127 font-size:60px; 128 border-bottom:2px solid #cecece; 129 margin-bottom:5px; 130 text-shadow: 2px 3px #eff6ee; 131 } 132 .post .content { 133 text-align:left; 134 font-size:17px; 135 color:#454545; 136 } 137 .post .projectdescription { 138 text-align:left; 139 font-size:17px; 140 color:#454545; 141 } 142 .post img { 143 max-width:700px; 144 } 145 .post .content h1 { 146 font-family:'MuseoSlab500',sans-serif; 147 color:#404040; 148 font-size:40px; 149 border-bottom:1px solid #cecece; 150 } 151 .post h2 { 152 font-family:'MuseoSlab500',sans-serif; 153 font-size:30px; 154 background-color: #002B36; 155 color: #EEEEEE; 156 padding: 5px; 157 box-shadow: 0px 0px 5px #FFF; 158 border-radius: 0px 3px 3px 0px; 159 } 160 .post h3 { 161 padding: 5px; 162 margin: 30px 0px 0px 0px; 163 font-size: 25px; 164 text-shadow: 1px 1px #FFFFFF; 165 } 166 .post p { 167 color:#353535; 168 font-size:20px; 169 line-height:27px; 170 margin-bottom:10px; 171 padding: 0px 10px; 172 text-shadow: #eff6ee 1px 1px; 173 text-align: justify; 174 } 175 .post li p { 176 padding: 0px; 177 font-size: 17px; 178 text-align: left; 179 } 180 .post blockquote { 181 font-size:13px; 182 margin-left:10px; 183 } 184 .post blockquote p { 185 font-size:15px; 186 } 187 .post table { 188 margin:0 auto; 189 border:1px solid #CCCCCC; 190 } 191 .post table tr th { 192 padding:2px; 193 border:1px solid #CCCCCC; 194 } 195 .post table tr td { 196 padding:2px; 197 border:1px solid #CCCCCC; 198 } 199 200 .aboutbox { 201 opacity: 0.8; 202 margin-left: 1px; 203 border: 5px solid rgb(16, 62, 74); 204 outline: rgb(0, 43, 54) solid 1px; 205 padding: 10px; 206 background-color: rgb(238, 238, 238); 207 box-shadow: rgb(0, 43, 54) 0px 0px 3px inset; 208 } 209 #archives { 210 font-size:20px; 211 } 212 #archives ul { 213 list-style-type:none; 214 margin:0; 215 padding:10px; 216 padding-left:30px; 217 } 218 #archives h1 { 219 font-weight:normal; 220 font-size:60px; 221 } 222 #archives .entry { 223 list-style-type:square; 224 color:#839496; 225 } 226 #archives .entry a { 227 color:#839596; 228 } 229 #archives .entry a:hover { 230 color:#003D4D; 231 } 232 233 #archives .month { 234 font-family: 'MuseoSlab500', sans-serif; 235 border-bottom:1px solid #1F2428; 236 padding:0px 20px; 237 font-size:25px; 238 color:#555555; 239 margin-left:10px; 240 } 241 #archives .year { 242 font-family: 'MuseoSlab500', sans-serif; 243 font-size:30px; 244 background-color:#002B36; 245 color:#EEEEEE; 246 padding:5px 5px 5px 13px; 247 box-shadow:0px 1px 5px #002B36; 248 249 } 250 #archives .year:before { 251 content:"• "; 252 } 253 254 .boldhr { 255 border:1px solid #444444; 256 border-radius:5px; 257 box-shadow:1px 1px #444444; 258 margin-bottom:0px; 259 } 260 .lighthr { 261 border:1px dotted #CCC; 262 margin-top:1px; 263 } 264 .date { 265 font-size:15px; 266 color:#888; 267 } 268 .smooth { 269 -o-transition:bottom 1s ease-out; 270 -ms-transition:bottom 1s ease-out; 271 -moz-transition:bottom 1s ease-out; 272 -webkit-transition:bottom 1s ease-out; 273 transition:bottom 1s ease-out; 274 } 275 276 @media screen and (max-width:950px) { 277 #sidebar { 278 position: inherit; 279 width: auto; 280 } 281 #logo { 282 margin-top: 0px; 283 margin-bottom: 0px; 284 background-color: #839496; 285 height: 45px; 286 } 287 #logo a { 288 border-radius: 0px; 289 border: 0px; 290 width: 100%; 291 box-shadow: none; 292 } 293 #logo a:before { 294 content: ""; 295 } 296 #logo a:hover { 297 border:0px; 298 } 299 #logo a img { 300 margin:0px; 301 } 302 303 #wrapper { 304 padding-left: 0px; 305 } 306 #content { 307 width: auto; 308 padding: 2px; 309 } 310 }