diff --git a/_includes/navbar.html b/_includes/navbar.html index 1392aad..2dc2720 100644 --- a/_includes/navbar.html +++ b/_includes/navbar.html @@ -1,5 +1,8 @@ + michael's blog + + + \ No newline at end of file diff --git a/_layouts/default.html b/_layouts/default.html index 0fbc2ab..033f9a3 100644 --- a/_layouts/default.html +++ b/_layouts/default.html @@ -7,7 +7,7 @@ - {% include navbar.html %} +
{% include navbar.html %}
{{ content }} @@ -16,4 +16,4 @@ {% include footer.html %} - + \ No newline at end of file diff --git a/_sass/breakpoints.scss b/_sass/breakpoints.scss new file mode 100644 index 0000000..3ea0ddf --- /dev/null +++ b/_sass/breakpoints.scss @@ -0,0 +1,113 @@ +$grid-breakpoints: ( xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px) !default; +// Breakpoint viewport sizes and media queries. +// +// Breakpoints are defined as a map of (name: minimum width), order from small to large: +// +// (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px) +// +// The map defined in the `$grid-breakpoints` global variable is used as the `$breakpoints` argument by default. +// Name of the next breakpoint, or null for the last breakpoint. +// +// >> breakpoint-next(sm) +// md +// >> breakpoint-next(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)) +// md +// >> breakpoint-next(sm, $breakpoint-names: (xs sm md lg xl)) +// md +@function breakpoint-next($name, $breakpoints: $grid-breakpoints, $breakpoint-names: map-keys($breakpoints)) { + $n: index($breakpoint-names, $name); + @return if($n < length($breakpoint-names), nth($breakpoint-names, $n + 1), null); +} // Minimum breakpoint width. Null for the smallest (first) breakpoint. +// +// >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)) +// 576px +@function breakpoint-min($name, $breakpoints: $grid-breakpoints) { + $min: map-get($breakpoints, $name); + @return if($min !=0, $min, null); +} // Maximum breakpoint width. Null for the largest (last) breakpoint. +// The maximum value is calculated as the minimum of the next one less 0.02px +// to work around the limitations of `min-` and `max-` prefixes and viewports with fractional widths. +// See https://www.w3.org/TR/mediaqueries-4/#mq-min-max +// Uses 0.02px rather than 0.01px to work around a current rounding bug in Safari. +// See https://bugs.webkit.org/show_bug.cgi?id=178261 +// +// >> breakpoint-max(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)) +// 767.98px +@function breakpoint-max($name, $breakpoints: $grid-breakpoints) { + $next: breakpoint-next($name, $breakpoints); + @return if($next, breakpoint-min($next, $breakpoints) - .02px, null); +} // Returns a blank string if smallest breakpoint, otherwise returns the name with a dash infront. +// Useful for making responsive utilities. +// +// >> breakpoint-infix(xs, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)) +// "" (Returns a blank string) +// >> breakpoint-infix(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)) +// "-sm" +@function breakpoint-infix($name, $breakpoints: $grid-breakpoints) { + @return if(breakpoint-min($name, $breakpoints)==null, "", "-#{$name}"); +} // Media of at least the minimum breakpoint width. No query for the smallest breakpoint. +// Makes the @content apply to the given breakpoint and wider. +@mixin media-breakpoint-up($name, $breakpoints: $grid-breakpoints) { + $min: breakpoint-min($name, $breakpoints); + @if $min { + @media (min-width: $min) { + @content; + } + } + @else { + @content; + } +} // Media of at most the maximum breakpoint width. No query for the largest breakpoint. +// Makes the @content apply to the given breakpoint and narrower. +@mixin media-breakpoint-down($name, $breakpoints: $grid-breakpoints) { + $max: breakpoint-max($name, $breakpoints); + @if $max { + @media (max-width: $max) { + @content; + } + } + @else { + @content; + } +} // Media that spans multiple breakpoint widths. +// Makes the @content apply between the min and max breakpoints +@mixin media-breakpoint-between($lower, $upper, $breakpoints: $grid-breakpoints) { + $min: breakpoint-min($lower, $breakpoints); + $max: breakpoint-max($upper, $breakpoints); + @if $min !=null and $max !=null { + @media (min-width: $min) and (max-width: $max) { + @content; + } + } + @else if $max==null { + @include media-breakpoint-up($lower, $breakpoints) { + @content; + } + } + @else if $min==null { + @include media-breakpoint-down($upper, $breakpoints) { + @content; + } + } +} // Media between the breakpoint's minimum and maximum widths. +// No minimum for the smallest breakpoint, and no maximum for the largest one. +// Makes the @content apply only to the given breakpoint, not viewports any wider or narrower. +@mixin media-breakpoint-only($name, $breakpoints: $grid-breakpoints) { + $min: breakpoint-min($name, $breakpoints); + $max: breakpoint-max($name, $breakpoints); + @if $min !=null and $max !=null { + @media (min-width: $min) and (max-width: $max) { + @content; + } + } + @else if $max==null { + @include media-breakpoint-up($name, $breakpoints) { + @content; + } + } + @else if $min==null { + @include media-breakpoint-down($name, $breakpoints) { + @content; + } + } +} \ No newline at end of file diff --git a/_sass/main.scss b/_sass/main.scss index 569ab8f..83ce923 100644 --- a/_sass/main.scss +++ b/_sass/main.scss @@ -1,9 +1,10 @@ +@import "breakpoints.scss"; @import "colors.scss"; @import "fonts.scss"; +@import "mixins.scss"; @import "simple-grid.scss"; @import "syntax.scss"; body { - border-top: 10px solid $brand; background-color: #f0f0f0; font-family: "Roboto", sans-serif; font-weight: 300; @@ -40,7 +41,54 @@ code { padding: 10px; } +code { + color: #e83e8c; +} + +pre { + border: 1px solid #000; + border-radius: 3px; +} + #navbar .link { - font-size: 1.4em; margin-right: 20px; +} + +header { + padding-bottom: 25px; + padding-top: 30px; + border-top: 10px solid $brand; + list-style-type: none; + font-size: 1.3em; + @include media-breakpoint-down(sm) { + padding-bottom: 0; + } + a.title { + @include media-breakpoint-down(sm) { + display: block; + text-align: center; + margin-right: 0; + margin-bottom: 20px; + font-size: 2em; + } + margin-right: 30px; + color: $brand; + font-size: 1.2em; + font-weight: 300; + } + div#nav { + display: inline; + } + @include media-breakpoint-down(sm) { + div#nav { + text-align: center; + display: block; + margin: auto; + } + } + a.link { + @include colored-link(1px, black); + margin-left: 10px; + margin-right: 10px; + } } \ No newline at end of file diff --git a/_sass/mixins.scss b/_sass/mixins.scss new file mode 100644 index 0000000..f39ced8 --- /dev/null +++ b/_sass/mixins.scss @@ -0,0 +1,39 @@ +@mixin transform($arguments) { + -webkit-transform: $arguments; + -moz-transform: $arguments; + -ms-transform: $arguments; + -o-transform: $arguments; + transform: $arguments; +} + +@mixin transition($arguments) { + -webkit-transition: $arguments; + -moz-transition: $arguments; + -ms-transition: $arguments; + -o-transition: $arguments; + transition: $arguments; +} + +@mixin colored-link($thickness, $color) { + position: relative; + text-decoration: none; + color: $color; + &:before { + content: ""; + position: absolute; + background-color: $color; + width: 100%; + height: $thickness; + bottom: 0; + left: 0; + visibility: hidden; + @include transform(scaleX(0)); + @include transition(all 0.2s ease-out 0s); + } + &:hover { + &:before { + visibility: visible; + @include transform(scaleX(1)); + } + } +} \ No newline at end of file diff --git a/_sass/simple-grid.scss b/_sass/simple-grid.scss index c3e4c67..74b90fd 100644 --- a/_sass/simple-grid.scss +++ b/_sass/simple-grid.scss @@ -27,7 +27,7 @@ body { } * { - font-family: $font-family; + // font-family: $font-family; color: $dark-grey; line-height: $font-height; } diff --git a/_sass/syntax.scss b/_sass/syntax.scss index af4b2a0..e4dc912 100644 --- a/_sass/syntax.scss +++ b/_sass/syntax.scss @@ -1,38 +1,70 @@ -.highlight .hll { background-color: #ffffcc } -.highlight { background: #ffffff; } -.highlight .c { color: #008000 } /* Comment */ -.highlight .err { border: 1px solid #FF0000 } /* Error */ -.highlight .k { color: #0000ff } /* Keyword */ -.highlight .ch { color: #008000 } /* Comment.Hashbang */ -.highlight .cm { color: #008000 } /* Comment.Multiline */ -.highlight .cp { color: #0000ff } /* Comment.Preproc */ -.highlight .cpf { color: #008000 } /* Comment.PreprocFile */ -.highlight .c1 { color: #008000 } /* Comment.Single */ -.highlight .cs { color: #008000 } /* Comment.Special */ -.highlight .ge { font-style: italic } /* Generic.Emph */ -.highlight .gh { font-weight: bold } /* Generic.Heading */ -.highlight .gp { font-weight: bold } /* Generic.Prompt */ -.highlight .gs { font-weight: bold } /* Generic.Strong */ -.highlight .gu { font-weight: bold } /* Generic.Subheading */ -.highlight .kc { color: #0000ff } /* Keyword.Constant */ -.highlight .kd { color: #0000ff } /* Keyword.Declaration */ -.highlight .kn { color: #0000ff } /* Keyword.Namespace */ -.highlight .kp { color: #0000ff } /* Keyword.Pseudo */ -.highlight .kr { color: #0000ff } /* Keyword.Reserved */ -.highlight .kt { color: #2b91af } /* Keyword.Type */ -.highlight .s { color: #a31515 } /* Literal.String */ -.highlight .nc { color: #2b91af } /* Name.Class */ -.highlight .ow { color: #0000ff } /* Operator.Word */ -.highlight .sa { color: #a31515 } /* Literal.String.Affix */ -.highlight .sb { color: #a31515 } /* Literal.String.Backtick */ -.highlight .sc { color: #a31515 } /* Literal.String.Char */ -.highlight .dl { color: #a31515 } /* Literal.String.Delimiter */ -.highlight .sd { color: #a31515 } /* Literal.String.Doc */ -.highlight .s2 { color: #a31515 } /* Literal.String.Double */ -.highlight .se { color: #a31515 } /* Literal.String.Escape */ -.highlight .sh { color: #a31515 } /* Literal.String.Heredoc */ -.highlight .si { color: #a31515 } /* Literal.String.Interpol */ -.highlight .sx { color: #a31515 } /* Literal.String.Other */ -.highlight .sr { color: #a31515 } /* Literal.String.Regex */ -.highlight .s1 { color: #a31515 } /* Literal.String.Single */ -.highlight .ss { color: #a31515 } /* Literal.String.Symbol */ \ No newline at end of file +pre.highlight { background-color: #444444 } +.highlight .hll { background-color: #444444 } +.highlight .c { color: #608b4e } /* Comment */ +.highlight .err { color: #cccccc; border: 1px solid #f44747 } /* Error */ +.highlight .g { color: #cccccc } /* Generic */ +.highlight .k { color: #569cd6 } /* Keyword */ +.highlight .l { color: #cccccc } /* Literal */ +.highlight .n { color: #cccccc } /* Name */ +.highlight .o { color: #d4d4d4 } /* Operator */ +.highlight .x { color: #cccccc } /* Other */ +.highlight .p { color: #cccccc } /* Punctuation */ +.highlight .cm { color: #608b4e } /* Comment.Multiline */ +.highlight .cp { color: #569cd6 } /* Comment.Preproc */ +.highlight .c1 { color: #608b4e } /* Comment.Single */ +.highlight .cs { color: #cd0000; font-weight: bold } /* Comment.Special */ +.highlight .gd { color: #cd0000 } /* Generic.Deleted */ +.highlight .ge { color: #cccccc; font-style: italic } /* Generic.Emph */ +.highlight .gr { color: #FF0000 } /* Generic.Error */ +.highlight .gh { color: #000080; font-weight: bold } /* Generic.Heading */ +.highlight .gi { color: #00cd00 } /* Generic.Inserted */ +.highlight .go { color: #808080 } /* Generic.Output */ +.highlight .gp { color: #000080; font-weight: bold } /* Generic.Prompt */ +.highlight .gs { color: #cccccc; font-weight: bold } /* Generic.Strong */ +.highlight .gu { color: #800080; font-weight: bold } /* Generic.Subheading */ +.highlight .gt { color: #0040D0 } /* Generic.Traceback */ +.highlight .kc { color: #569cd6 } /* Keyword.Constant */ +.highlight .kd { color: #00cd00 } /* Keyword.Declaration */ +.highlight .kn { color: #cd00cd } /* Keyword.Namespace */ +.highlight .kp { color: #569cd6 } /* Keyword.Pseudo */ +.highlight .kr { color: #569cd6 } /* Keyword.Reserved */ +.highlight .kt { color: #4EC9B0 } /* Keyword.Type */ +.highlight .ld { color: #cccccc } /* Literal.Date */ +.highlight .m { color: #b5cea8 } /* Literal.Number */ +.highlight .s { color: #ce9178 } /* Literal.String */ +.highlight .na { color: #cccccc } /* Name.Attribute */ +.highlight .nb { color: #b5cea8 } /* Name.Builtin */ +.highlight .nc { color: #00cdcd } /* Name.Class */ +.highlight .no { color: #cccccc } /* Name.Constant */ +.highlight .nd { color: #cccccc } /* Name.Decorator */ +.highlight .ni { color: #cccccc } /* Name.Entity */ +.highlight .ne { color: #666699; font-weight: bold } /* Name.Exception */ +.highlight .nf { color: #cccccc } /* Name.Function */ +.highlight .nl { color: #cccccc } /* Name.Label */ +.highlight .nn { color: #cccccc } /* Name.Namespace */ +.highlight .nx { color: #cccccc } /* Name.Other */ +.highlight .py { color: #cccccc } /* Name.Property */ +.highlight .nt { color: #cccccc } /* Name.Tag */ +.highlight .nv { color: #00cdcd } /* Name.Variable */ +.highlight .ow { color: #cdcd00 } /* Operator.Word */ +.highlight .w { color: #cccccc } /* Text.Whitespace */ +.highlight .mf { color: #b5cea8 } /* Literal.Number.Float */ +.highlight .mh { color: #b5cea8 } /* Literal.Number.Hex */ +.highlight .mi { color: #b5cea8 } /* Literal.Number.Integer */ +.highlight .mo { color: #b5cea8 } /* Literal.Number.Oct */ +.highlight .sb { color: #ce9178 } /* Literal.String.Backtick */ +.highlight .sc { color: #ce9178 } /* Literal.String.Char */ +.highlight .sd { color: #ce9178 } /* Literal.String.Doc */ +.highlight .s2 { color: #ce9178 } /* Literal.String.Double */ +.highlight .se { color: #ce9178 } /* Literal.String.Escape */ +.highlight .sh { color: #ce9178 } /* Literal.String.Heredoc */ +.highlight .si { color: #ce9178 } /* Literal.String.Interpol */ +.highlight .sx { color: #ce9178 } /* Literal.String.Other */ +.highlight .sr { color: #ce9178 } /* Literal.String.Regex */ +.highlight .s1 { color: #ce9178 } /* Literal.String.Single */ +.highlight .ss { color: #ce9178 } /* Literal.String.Symbol */ +.highlight .bp { color: #b5cea8 } /* Name.Builtin.Pseudo */ +.highlight .vc { color: #569cd6 } /* Name.Variable.Class */ +.highlight .vg { color: #00cdcd } /* Name.Variable.Global */ +.highlight .vi { color: #00cdcd } /* Name.Variable.Instance */ +.highlight .il { color: #b5cea8 } /* Literal.Number.Integer.Long */ \ No newline at end of file