diff options
Diffstat (limited to 'Just-Read/static')
-rw-r--r-- | Just-Read/static/css/main.css | 742 | ||||
-rw-r--r-- | Just-Read/static/images/bullet.png | bin | 194 -> 1496 bytes |
2 files changed, 593 insertions, 149 deletions
diff --git a/Just-Read/static/css/main.css b/Just-Read/static/css/main.css index f5d4c6a..3537b3b 100644 --- a/Just-Read/static/css/main.css +++ b/Just-Read/static/css/main.css @@ -1,11 +1,8 @@ article, -aside, -details, figcaption, figure, footer, header, -hgroup, nav, section, time { @@ -13,9 +10,8 @@ time { } html { font-size: 100%; - overflow-y: scroll; - -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; + -webkit-text-size-adjust: 100%; } body { margin: 0; @@ -33,7 +29,12 @@ body { a:hover, a:active { outline: 0; } -ul, ol { +pre { + white-space: pre; + white-space: pre-wrap; + word-wrap: break-word; +} +ol, ul { margin: 0; padding: 0; } @@ -52,47 +53,48 @@ img { .clearfix { *zoom: 1; } -.border-box { - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - -o-box-sizing: border-box; - box-sizing: border-box; -} -.sans, .fancy-font { - font-family: 'Droid Sans', sans-serif; -} -.mono { - font-family: 'Droid Sans Mono', monospace; -} figure { - position: relative; margin: 0 0 24px 0; + position: relative; } figure img, figure object, figure embed, figure video { - max-width: 100%; display: block; + height: auto; + max-width: 100%; } figcaption { - margin-top: 24px; color: #999999; + margin-top: 24px; } .video-container { - position: relative; + height: 0; + margin-bottom: 24px; padding-bottom: 56.25%; padding-top: 30px; - height: 0; + position: relative; overflow: hidden; - margin-bottom: 24px; } .video-container iframe, .video-container object, .video-container embed { + height: 100%; + left: 0; position: absolute; top: 0; - left: 0; width: 100%; - height: 100%; +} +.border-box { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + -o-box-sizing: border-box; + box-sizing: border-box; +} +.sans, .fancy-font { + font-family: 'Droid Sans', sans-serif; +} +.mono { + font-family: 'Droid Sans Mono', monospace; } .small { font-size: 12px; @@ -112,95 +114,259 @@ figcaption { .gigantic { font-size: 48px; } +.title { + line-height: 1; + font-family: 'Droid Sans', sans-serif; + font-weight: 700; +} body { - font-size: 14px; - line-height: 24px; background: #ffffff; color: #404040; + line-height: 24px; + font-size: 14px; font-family: 'Droid Sans', sans-serif; } -.title { - line-height: 1; - font-family: 'Droid Sans', sans-serif; - font-weight: 700; +a { + color: #1d73bb; + text-decoration: none; +} +a:hover { + color: #02060a; + text-decoration: underline; } h1 { + font-size: 24px; + margin: 0 0 36px 0; line-height: 1; font-family: 'Droid Sans', sans-serif; font-weight: 700; - font-size: 24px; - margin: 0 0 36px 0; } h2 { + font-size: 18px; + margin: 48px 0 24px; line-height: 1; font-family: 'Droid Sans', sans-serif; font-weight: 700; - font-size: 18px; - margin: 48px 0 24px; } h3 { + color: #999999; + margin: 36px 0 24px; + font-size: 14px; + text-transform: uppercase; line-height: 1; font-family: 'Droid Sans', sans-serif; font-weight: 700; - font-size: 14px; - margin: 36px 0 24px; - text-transform: uppercase; - color: #999999; } h4, h5, h6 { + font-weight: 400; + margin: 24px 0; + font-size: 14px; line-height: 1; font-family: 'Droid Sans', sans-serif; font-weight: 700; - font-size: 14px; - margin: 24px 0; - font-weight: 400; } b, strong { font-weight: 700; } -.tagcloud li { - list-style: none; - margin-bottom: 3px; +blockquote { + border-left: 6px solid #1d73bb; + margin-left: -12px; + padding-left: 6px; } -.tagcloud a { - color: #000000; +code, .codehilite { + background: #262626; + -webkit-box-shadow: inset 0 0 10px #000000; + -moz-box-shadow: inset 0 0 10px #000000; + box-shadow: inset 0 0 10px #000000; + color: #ffffff; display: block; - background-color: #ffffff; - padding: 3px 6px; - font-size: 12px; + margin-left: -24px; + font-family: 'Droid Sans Mono', monospace; + padding: 24px; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; +} +time { + font-size: 12px; + text-transform: uppercase; +} +.post ul li { + list-style-image: url('../images/bullet.png'); +} +.archive li { + list-style: none; +} +.archive a { + border-bottom: 1px dotted #cccccc; + display: block; + padding: 12px 0; + -webkit-transition: all 0.25s linear; + -moz-transition: all 0.25s linear; + -o-transition: all 0.25s linear; + transition: all 0.25s linear; +} +.archive a:hover { + background-color: #f2f2f2; + text-decoration: none; +} +.archive time { + color: #666666; + display: inline; + padding-left: 12px; +} +.tabmenu li { + list-style-type: none; +} +.tabmenu li a { + border: 1px solid #1d73bb; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; + display: block; + float: left; + padding: 12px 0; + text-align: center; + width: 50%; } -.tagcloud a:hover { +.tabmenu li a:hover { text-decoration: none; - background-color: #c5efec; } -.wrapper { - padding: 0 0.75em; +.tabmenu li:last-child a { + border-left: none; +} +.ui-tabs-hide { + display: none; +} +.tabmenu li a:hover, .ui-tabs-selected a, .ui-tabs-selected a { + background-color: #f2f2f2; +} +.btn { + color: #ffffff; + background-color: #556270; + border: none; + -webkit-box-shadow: inset 0px -3px 1px rgba(0, 0, 0, 0.45), 0px 2px 2px rgba(0, 0, 0, 0.25); + -moz-box-shadow: inset 0px -3px 1px rgba(0, 0, 0, 0.45), 0px 2px 2px rgba(0, 0, 0, 0.25); + box-shadow: inset 0px -3px 1px rgba(0, 0, 0, 0.45), 0px 2px 2px rgba(0, 0, 0, 0.25); + padding: 8px 14px 10px; + position: relative; + -webkit-border-radius: 3px; + -moz-border-radius: 3px; + border-radius: 3px; + -moz-background-clip: padding; + -webkit-background-clip: padding-box; + background-clip: padding-box; + text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.5); + -webkit-user-select: none; +} +.btn:hover { + color: #ffffff; + text-decoration: none; +} +.btn:active { + -webkit-box-shadow: inset 0px -3px 1px #ffffff, inset 0 0px 3px rgba(0, 0, 0, 0.9); + -moz-box-shadow: inset 0px -3px 1px #ffffff, inset 0 0px 3px rgba(0, 0, 0, 0.9); + box-shadow: inset 0px -3px 1px #ffffff, inset 0 0px 3px rgba(0, 0, 0, 0.9); + position: relative; + top: 3px; +} +.btn:active:after { + content: ""; + background: #ffffff; + bottom: -1px; + height: 3px; + left: 0; + position: absolute; + width: 100%; +} +.tag li { + list-style: none; + margin-bottom: 3px; +} +.tag a { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; + -moz-border-radius-bottomright: 4px; + -webkit-border-bottom-right-radius: 4px; + border-bottom-right-radius: 4px; + -moz-border-radius-topright: 4px; + -webkit-border-top-right-radius: 4px; + border-top-right-radius: 4px; + color: #000000; + background-color: #ddedfa; + display: block; + margin-left: 20px; + padding: 0 10px 0 12px; + position: relative; + font-size: 12px; } -a { - color: #4ecdc4; +.tag a:hover { + background-color: #85bdec; text-decoration: none; - -webkit-transition: all 0.25s linear; - -moz-transition: all 0.25s linear; - -o-transition: all 0.25s linear; - transition: all 0.25s linear; } -a:hover { - color: #113e3a; - text-decoration: underline; +.tag a:before { + content: ""; + border-color: transparent #ddedfa transparent transparent; + border-style: solid; + border-width: 12px 12px 12px 0; + float: left; + height: 0; + left: -12px; + position: absolute; + top: 0; + width: 0; +} +.tag a:after { + content: ""; + background: #ffffff; + -webkit-box-shadow: -1px -1px 2px #000000; + -moz-box-shadow: -1px -1px 2px #000000; + box-shadow: -1px -1px 2px #000000; + float: left; + height: 4px; + left: 0; + position: absolute; + -webkit-border-radius: 2px; + -moz-border-radius: 2px; + border-radius: 2px; + -moz-background-clip: padding; + -webkit-background-clip: padding-box; + background-clip: padding-box; + top: 10px; + width: 4px; +} +.tag a:hover:before { + border-color: transparent #85bdec transparent transparent; +} +.tag-1 a { + width: 100%; +} +.tag-2 a { + width: 90%; +} +.tag-3 a { + width: 80%; +} +.tag-4 a { + width: 70%; +} +.tag-5 a { + width: 60%; +} +.tag-6 a { + width: 50%; +} +.tag-7 a { + width: 40%; +} +.tag-8 a { + width: 30%; } header { border-width: 0 0 2px; @@ -218,15 +384,15 @@ header { background-image: -o-linear-gradient(top, #556270, #48535f); background-image: linear-gradient(top, #556270, #48535f); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#556270', endColorstr='#48535f', GradientType=0); - padding: 48px 5.555555555555555%; margin-bottom: 48px; + padding: 24px 5.555555555555555%; } header h1 { margin: 0; } header a { - text-decoration: none; color: rgba(255, 255, 255, 0.8); + text-decoration: none; text-shadow: 0 1px 0 #b3b3b3, 0 2px 0 #999999, 0 3px 0 #808080, 0 4px 0 #666666, 0 5px 0 #4d4d4d, 0 6px 0 #333333, 0px 7px 0 #1a1a1a, 0 8px 7px #0d0d0d; } header a:hover { @@ -239,11 +405,11 @@ footer { -webkit-border-image: url('../images/pages.png') 20 0 0 repeat; -o-border-image: url('../images/pages.png') 20 0 0 repeat; border-image: url('../images/pages.png') 20 0 0 repeat; - padding: 48px 5.555555555555555% 24px; - margin-top: 96px; color: rgba(0, 0, 0, 0.6); + margin-top: 96px; + padding: 48px 5.555555555555555% 24px; } -.pages { +.nav { margin-bottom: 24px; } .nav li { @@ -251,17 +417,112 @@ footer { display: inline; padding-right: 10px; } +.nav a { + -webkit-transition: all 0.25s linear; + -moz-transition: all 0.25s linear; + -o-transition: all 0.25s linear; + transition: all 0.25s linear; +} p[role="contentinfo"] { - margin-top: 12px; font-size: 12px; } +.social { + margin-bottom: 24px; +} +.social li { + list-style: none; + display: inline; + padding-right: 12px; +} +.icon { + margin-right: 2px; + vertical-align: -3px; +} +.social a[href*='behance.net']:before { + content: url('../images/icons/behance.png'); + margin-right: 2px; + vertical-align: -3px; +} +.social a[href*='delicious.com']:before { + content: url('../images/icons/delicious.png'); + margin-right: 2px; + vertical-align: -3px; +} +.social a[href*='facebook.com']:before { + content: url('../images/icons/facebook.png'); + margin-right: 2px; + vertical-align: -3px; +} +.social a[href*='flickr.com']:before { + content: url('../images/icons/flickr.png'); + margin-right: 2px; + vertical-align: -3px; +} +.social a[href*='forrst.com']:before { + content: url('../images/icons/forrst.png'); + margin-right: 2px; + vertical-align: -3px; +} +.social a[href*='github.com']:before { + content: url('../images/icons/github.png'); + margin-right: 2px; + vertical-align: -3px; +} +.social a[href*='plus.google.com']:before { + content: url('../images/icons/google_plus.png'); + margin-right: 2px; + vertical-align: -3px; +} +.social a[href*='last.fm']:before { + content: url('../images/icons/lastfm.png'); + margin-right: 2px; + vertical-align: -3px; +} +.social a[href*='linkedin.com']:before { + content: url('../images/icons/linkedin.png'); + margin-right: 2px; + vertical-align: -3px; +} +.social a[href*='quora.com']:before { + content: url('../images/icons/quora.png'); + margin-right: 2px; + vertical-align: -3px; +} +.social a[href*='rss.xml']:before { + content: url('../images/icons/rss.png'); + margin-right: 2px; + vertical-align: -3px; +} +.social a[href*='stackoverflow.com']:before { + content: url('../images/icons/stackoverflow.png'); + margin-right: 2px; + vertical-align: -3px; +} +.social a[href*='twitter.com']:before { + content: url('../images/icons/twitter.png'); + margin-right: 2px; + vertical-align: -3px; +} +.social a[href*='youtube.com']:before { + content: url('../images/icons/youtube.png'); + margin-right: 2px; + vertical-align: -3px; +} +.wrapper { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + -o-box-sizing: border-box; + box-sizing: border-box; + padding: 0 0.75em; +} .content { margin: 0 5.555555555555555%; } .meta { - background: #f2f2f2; - padding-top: 24px; + background: #fafafa; + margin-top: 48px; padding-bottom: 24px; + padding-top: 24px; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; @@ -269,107 +530,60 @@ p[role="contentinfo"] { -webkit-background-clip: padding-box; background-clip: padding-box; } -time { - font-size: 12px; - text-transform: uppercase; +.meta time { + font-weight: 700; + margin-left: 20px; + margin-bottom: 24px; } -.tags li { - display: inline; - list-style: none; +.tag li { + display: block; + float: left; + width: 50%; } blockquote, code, +.codehilite, .post ul, .post ol, -p { +p, +.archive { margin: 0 0 24px 0; } -blockquote { - margin-left: -12px; - border-left: 6px solid #4ecdc4; - padding-left: 6px; -} -code { - display: block; - background: #262626; - -webkit-box-shadow: inset 0 0 10px #000000; - -moz-box-shadow: inset 0 0 10px #000000; - box-shadow: inset 0 0 10px #000000; - padding: 24px; - color: #ffffff; - -webkit-border-radius: 4px; - -moz-border-radius: 4px; - border-radius: 4px; - -moz-background-clip: padding; - -webkit-background-clip: padding-box; - background-clip: padding-box; - font-family: 'Droid Sans Mono', monospace; - margin-left: -24px; -} -.post ul li { - list-style-image: url('../images/bullet.png'); -} .main + .main { margin-top: 96px; } -.archive li { - list-style: none; -} -.archive a { - display: block; - padding: 12px 0; - border-bottom: 1px dotted #cccccc; -} -.archive a:hover { - text-decoration: none; -} -.archive time { - display: inline; - color: #666666; -} -.tag-1 a { - width: 100%; -} -.tag-2 a { - width: 75%; -} -.tag-3 a { - width: 50%; -} -.tag-4 a { - width: 25%; -} @media screen and (min-width: 45em) { header .wrapper { - width: 75%; float: right; + width: 75%; } .meta, .pages { - width: 25%; float: left; text-align: right; - } - .pages { - padding-top: 52px; + width: 25%; } .meta { background: #ffffff; + margin-top: 0; padding-top: 60px; } .meta time { margin-bottom: 24px; + margin-left: 0; + font-weight: 400; } .post, .copy, .main { - width: 75%; float: right; + width: 75%; } - .tags li { - display: block; + .tag li { + float: none; + width: 100%; } - .tags a:hover, .nav a:hover { + .nav a:hover { padding-right: 6px; } - .tags a:hover:after, .nav a:hover:after, .more:hover:after { + .nav a:hover:after { content: "\2192 "; } .nav li { @@ -377,22 +591,26 @@ code { padding-right: 0; } .archive time { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + -o-box-sizing: border-box; + box-sizing: border-box; display: block; - width: 25%; float: left; + width: 25%; } } @media screen and (min-width: 55.5em) { - .post p, + .post > p, .post blockquote, .post ul, .post ol { width: 66.66666666666667%; } .main { - width: 50%; float: none; margin-left: 25%; + width: 50%; } } @media screen and (min-width: 61.5em) { @@ -435,8 +653,8 @@ code { margin-top: 48px; } .meta, .pages { - width: 18.75%; padding-left: 6.25%; + width: 18.75%; } .meta { padding-top: 96px; @@ -453,11 +671,11 @@ code { .post li { margin-bottom: 24px; } - code { - font-size: 36px; + code, .codehilite { line-height: 1.5; + font-size: 36px; } - .post p, + .post > p, .post blockquote, .post ul, .post ol { @@ -528,4 +746,230 @@ code { thead { display: table-header-group; } -}
\ No newline at end of file +} +.c { + color: #757575; +} +/* Comment */ +.err { + color: #fa4753; +} +/* Error */ +.k { + color: #6bc5d9; +} +/* Keyword */ +.l { + color: #514986; +} +/* Literal */ +.n { + color: #f8f8f2; +} +/* Name */ +.o { + color: #f92672; +} +/* Operator */ +.p { + color: #f8f8f2; +} +/* Punctuation */ +.cm { + color: #757575; +} +/* Comment.Multiline */ +.cp { + color: #757575; +} +/* Comment.Preproc */ +.c1 { + color: #757575; +} +/* Comment.Single */ +.cs { + color: #757575; +} +/* Comment.Special */ +/* Generic.Emph */ +/* Generic.Strong */ +.kc { + color: #6bc5d9; +} +/* Keyword.Constant */ +.kd { + color: #6bc5d9; +} +/* Keyword.Declaration */ +.kn { + color: #f92672; +} +/* Keyword.Namespace */ +.kp { + color: #6bc5d9; +} +/* Keyword.Pseudo */ +.kr { + color: #6bc5d9; +} +/* Keyword.Reserved */ +.kt { + color: #6bc5d9; +} +/* Keyword.Type */ +.ld { + color: #f4e07c; +} +/* Literal.Date */ +.m { + color: #514986; +} +/* Literal.Number */ +.s { + color: #f4e07c; +} +/* Literal.String */ +.na { + color: #9cc52c; +} +/* Name.Attribute */ +.nb { + color: #f8f8f2; +} +/* Name.Builtin */ +.nc { + color: #9cc52c; +} +/* Name.Class */ +.no { + color: #6bc5d9; +} +/* Name.Constant */ +.nd { + color: #9cc52c; +} +/* Name.Decorator */ +.ni { + color: #f8f8f2; +} +/* Name.Entity */ +.ne { + color: #9cc52c; +} +/* Name.Exception */ +.nf { + color: #9cc52c; +} +/* Name.Function */ +.nl { + color: #f8f8f2; +} +/* Name.Label */ +.nn { + color: #f8f8f2; +} +/* Name.Namespace */ +.nx { + color: #9cc52c; +} +/* Name.Other */ +.py { + color: #f8f8f2; +} +/* Name.Property */ +.nt { + color: #f92672; +} +/* Name.Tag */ +.nv { + color: #f8f8f2; +} +/* Name.Variable */ +.ow { + color: #f92672; +} +/* Operator.Word */ +.w { + color: #f8f8f2; +} +/* Text.Whitespace */ +.mf { + color: #514986; +} +/* Literal.Number.Float */ +.mh { + color: #514986; +} +/* Literal.Number.Hex */ +.mi { + color: #514986; +} +/* Literal.Number.Integer */ +.mo { + color: #514986; +} +/* Literal.Number.Oct */ +.sb { + color: #f4e07c; +} +/* Literal.String.Backtick */ +.sc { + color: #f4e07c; +} +/* Literal.String.Char */ +.sd { + color: #f4e07c; +} +/* Literal.String.Doc */ +.s2 { + color: #f4e07c; +} +/* Literal.String.Double */ +.se { + color: #514986; +} +/* Literal.String.Escape */ +.sh { + color: #f4e07c; +} +/* Literal.String.Heredoc */ +.si { + color: #f4e07c; +} +/* Literal.String.Interpol */ +.sx { + color: #f4e07c; +} +/* Literal.String.Other */ +.sr { + color: #f4e07c; +} +/* Literal.String.Regex */ +.s1 { + color: #f4e07c; +} +/* Literal.String.Single */ +.ss { + color: #f4e07c; +} +/* Literal.String.Symbol */ +.bp { + color: #f8f8f2; +} +/* Name.Builtin.Pseudo */ +.vc { + color: #f8f8f2; +} +/* Name.Variable.Class */ +.vg { + color: #f8f8f2; +} +/* Name.Variable.Global */ +.vi { + color: #f8f8f2; +} +/* Name.Variable.Instance */ +.il { + color: #514986; +} +/* Literal.Number.Integer.Long */
\ No newline at end of file diff --git a/Just-Read/static/images/bullet.png b/Just-Read/static/images/bullet.png Binary files differindex b821648..96210f1 100644 --- a/Just-Read/static/images/bullet.png +++ b/Just-Read/static/images/bullet.png |