diff --git a/scss/style.scss b/scss/style.scss index abcc20f..f8c31da 100755 --- a/scss/style.scss +++ b/scss/style.scss @@ -5,8 +5,6 @@ @import "_reset"; @import "_variables"; -@import "_highlights"; -// TODO - Tempted to move this to the end of the file, so that it shows up at the end of the .css. Or remove it entirely and find a better way to include highlighting. /*/ /* BASE RULES @@ -268,4 +266,8 @@ nav { footer { padding: 20px 0; text-align: center; -} \ No newline at end of file +} + +// Settled on moving the import of syntax highlighting to the bottom of the CSS +// ... Otherwise it really bloats up the top of the CSS file and makes it difficult to find the start +@import "_highlights"; \ No newline at end of file diff --git a/style.css b/style.css index 40d1c9c..be1d9e9 100644 --- a/style.css +++ b/style.css @@ -30,6 +30,203 @@ table { border-collapse: collapse; border-spacing: 0; } +/*/ +/* BASE RULES +/*/ +html { + font-size: 100%; } + +body { + background: white; + font: 18px/1.4 Helvetica, Arial, sans-serif; + color: #333333; } + +.container { + margin: 0 auto; + max-width: 740px; + width: 100%; } + +h1, h2, h3, h4, h5, h6 { + font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; + color: #222222; + font-weight: 500; + line-height: 1.7; + margin: 1em 0 15px; + padding: 0; } + @media screen and (max-width: 520px) { + h1, h2, h3, h4, h5, h6 { + line-height: 1.4; } } + +h1 { + font-weight: 400; + font-size: 32px; } + h1 a { + color: inherit; } + +h2 { + font-size: 22px; } + +h3 { + font-size: 18px; + font-weight: 600; } + +h4 { + font-size: 18px; + color: #666666; + font-weight: 600; } + +p { + margin: 15px 0; } + +a { + color: #4183c4; + text-decoration: none; + cursor: pointer; } + a:hover, a:active { + color: #4183c4; } + +ul, ol { + margin: 15px 0; + padding-left: 30px; } + +ul { + list-style-type: disc; } + +ol { + list-style-type: decimal; } + +ol ul, ul ol, ul ul, ol ol { + margin: 0; } + +ul ul, ol ul { + list-style-type: circle; } + +em { + font-style: italic; } + +strong { + font-weight: 600; } + +img { + max-width: 100%; } + +.date { + font-style: italic; + color: #666666; } + +::-moz-selection { + color: black; + background: #eeeeee; } + +::selection { + color: black; + background: #eeeeee; } + +.clearfix:before, .clearfix:after { + content: " "; + display: table; } + +.clearfix:after { + clear: both; } + +/*/ +/* LAYOUT / SECTIONS +/*/ +.wrapper-masthead { + margin-bottom: 40px; } + +.masthead { + padding: 20px 0; + border-bottom: 1px solid #eeeeee; } + @media screen and (max-width: 520px) { + .masthead { + text-align: center; } } + +.site-avatar { + float: left; + width: 70px; + height: 70px; + margin-right: 15px; } + @media screen and (max-width: 520px) { + .site-avatar { + float: none; + display: block; + margin: 0 auto; } } + .site-avatar img { + border-radius: 5px; } + +.site-info { + float: left; } + @media screen and (max-width: 520px) { + .site-info { + float: none; + display: block; + margin: 0 auto; } } + +.site-name { + margin: 0; + color: #333333; + cursor: pointer; + font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; + font-weight: 300; + font-size: 28px; + letter-spacing: 1px; } + +.site-description { + margin: -5px 0 0 0; + color: #777777; + font-size: 16px; } + @media screen and (max-width: 520px) { + .site-description { + margin: 3px 0; } } + +nav { + float: right; + margin-top: 23px; + font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; + font-size: 18px; } + @media screen and (max-width: 520px) { + nav { + float: none; + margin-top: 9px; + display: block; + font-size: 16px; } } + nav a { + margin-left: 25px; + color: #333333; + text-align: right; + font-weight: 300; + letter-spacing: 1px; } + @media screen and (max-width: 520px) { + nav a { + margin: 0 10px; + color: #4183c4; } } + +.posts > .post { + padding-bottom: 2em; + border-bottom: 1px solid #eeeeee; } + +.posts > .post:last-child { + padding-bottom: 1em; + border-bottom: none; } + +.post blockquote { + margin: 1.8em 0.8em; + border-left: 2px solid #666666; + padding: 0.1em 1em; + color: #666666; + font-size: 22px; + font-style: italic; } + +.wrapper-footer { + margin-top: 50px; + border-top: 1px solid #dddddd; + background-color: #eeeeee; } + +footer { + padding: 20px 0; + text-align: center; } + /***********************/ /* SYNTAX HIGHLIGHTING */ /***********************/ @@ -319,200 +516,4 @@ code { .highlight .il { color: #2aa198; } -/* Literal.Number.Integer.Long */ -/*/ -/* BASE RULES -/*/ -html { - font-size: 100%; } - -body { - background: white; - font: 18px/1.4 Helvetica, Arial, sans-serif; - color: #333333; } - -.container { - margin: 0 auto; - max-width: 740px; - width: 100%; } - -h1, h2, h3, h4, h5, h6 { - font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; - color: #222222; - font-weight: 500; - line-height: 1.7; - margin: 1em 0 15px; - padding: 0; } - @media screen and (max-width: 520px) { - h1, h2, h3, h4, h5, h6 { - line-height: 1.4; } } - -h1 { - font-weight: 400; - font-size: 32px; } - h1 a { - color: inherit; } - -h2 { - font-size: 22px; } - -h3 { - font-size: 18px; - font-weight: 600; } - -h4 { - font-size: 18px; - color: #666666; - font-weight: 600; } - -p { - margin: 15px 0; } - -a { - color: #4183c4; - text-decoration: none; - cursor: pointer; } - a:hover, a:active { - color: #4183c4; } - -ul, ol { - margin: 15px 0; - padding-left: 30px; } - -ul { - list-style-type: disc; } - -ol { - list-style-type: decimal; } - -ol ul, ul ol, ul ul, ol ol { - margin: 0; } - -ul ul, ol ul { - list-style-type: circle; } - -em { - font-style: italic; } - -strong { - font-weight: 600; } - -img { - max-width: 100%; } - -.date { - font-style: italic; - color: #666666; } - -::-moz-selection { - color: black; - background: #eeeeee; } - -::selection { - color: black; - background: #eeeeee; } - -.clearfix:before, .clearfix:after { - content: " "; - display: table; } - -.clearfix:after { - clear: both; } - -/*/ -/* LAYOUT / SECTIONS -/*/ -.wrapper-masthead { - margin-bottom: 40px; } - -.masthead { - padding: 20px 0; - border-bottom: 1px solid #eeeeee; } - @media screen and (max-width: 520px) { - .masthead { - text-align: center; } } - -.site-avatar { - float: left; - width: 70px; - height: 70px; - margin-right: 15px; } - @media screen and (max-width: 520px) { - .site-avatar { - float: none; - display: block; - margin: 0 auto; } } - .site-avatar img { - border-radius: 5px; } - -.site-info { - float: left; } - @media screen and (max-width: 520px) { - .site-info { - float: none; - display: block; - margin: 0 auto; } } - -.site-name { - margin: 0; - color: #333333; - cursor: pointer; - font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; - font-weight: 300; - font-size: 28px; - letter-spacing: 1px; } - -.site-description { - margin: -5px 0 0 0; - color: #777777; - font-size: 16px; } - @media screen and (max-width: 520px) { - .site-description { - margin: 3px 0; } } - -nav { - float: right; - margin-top: 23px; - font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; - font-size: 18px; } - @media screen and (max-width: 520px) { - nav { - float: none; - margin-top: 9px; - display: block; - font-size: 16px; } } - nav a { - margin-left: 25px; - color: #333333; - text-align: right; - font-weight: 300; - letter-spacing: 1px; } - @media screen and (max-width: 520px) { - nav a { - margin: 0 10px; - color: #4183c4; } } - -.posts > .post { - padding-bottom: 2em; - border-bottom: 1px solid #eeeeee; } - -.posts > .post:last-child { - padding-bottom: 1em; - border-bottom: none; } - -.post blockquote { - margin: 1.8em 0.8em; - border-left: 2px solid #666666; - padding: 0.1em 1em; - color: #666666; - font-size: 22px; - font-style: italic; } - -.wrapper-footer { - margin-top: 50px; - border-top: 1px solid #dddddd; - background-color: #eeeeee; } - -footer { - padding: 20px 0; - text-align: center; } +/* Literal.Number.Integer.Long */ \ No newline at end of file