upd
This commit is contained in:
Michael Zhang
parent
569422fd30
commit
86525a855b
7 changed files with 282 additions and 47 deletions
|
|
@ -1,5 +1,8 @@
|
||||||
<div class="container" id="navbar" style="padding-top: 10px;">
|
<div class="container" id="navbar" style="padding-top: 10px;">
|
||||||
<h2 style="display: inline-block;"><a href="/" class="link">michael's blog</a></h2>
|
<a href="/" class="title nocolorlink">michael's blog</a>
|
||||||
<a href="/about" class="link">about</a>
|
|
||||||
<a href="https://git.mzhang.me/explore" target="_blank" class="link">gitea</a>
|
<div id="nav">
|
||||||
|
<a href="/about" class="link">about</a>
|
||||||
|
<a href="https://git.mzhang.me/explore" class="link">gitea</a>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -7,7 +7,7 @@
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
{% include navbar.html %}
|
<header>{% include navbar.html %}</header>
|
||||||
|
|
||||||
<div class="container" style="padding: 30px;">
|
<div class="container" style="padding: 30px;">
|
||||||
{{ content }}
|
{{ content }}
|
||||||
|
|
|
||||||
113
_sass/breakpoints.scss
Normal file
113
_sass/breakpoints.scss
Normal file
|
|
@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -1,9 +1,10 @@
|
||||||
|
@import "breakpoints.scss";
|
||||||
@import "colors.scss";
|
@import "colors.scss";
|
||||||
@import "fonts.scss";
|
@import "fonts.scss";
|
||||||
|
@import "mixins.scss";
|
||||||
@import "simple-grid.scss";
|
@import "simple-grid.scss";
|
||||||
@import "syntax.scss";
|
@import "syntax.scss";
|
||||||
body {
|
body {
|
||||||
border-top: 10px solid $brand;
|
|
||||||
background-color: #f0f0f0;
|
background-color: #f0f0f0;
|
||||||
font-family: "Roboto", sans-serif;
|
font-family: "Roboto", sans-serif;
|
||||||
font-weight: 300;
|
font-weight: 300;
|
||||||
|
|
@ -40,7 +41,54 @@ code {
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
code {
|
||||||
|
color: #e83e8c;
|
||||||
|
}
|
||||||
|
|
||||||
|
pre {
|
||||||
|
border: 1px solid #000;
|
||||||
|
border-radius: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
#navbar .link {
|
#navbar .link {
|
||||||
font-size: 1.4em;
|
|
||||||
margin-right: 20px;
|
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;
|
||||||
|
}
|
||||||
|
}
|
||||||
39
_sass/mixins.scss
Normal file
39
_sass/mixins.scss
Normal file
|
|
@ -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));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -27,7 +27,7 @@ body {
|
||||||
}
|
}
|
||||||
|
|
||||||
* {
|
* {
|
||||||
font-family: $font-family;
|
// font-family: $font-family;
|
||||||
color: $dark-grey;
|
color: $dark-grey;
|
||||||
line-height: $font-height;
|
line-height: $font-height;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,38 +1,70 @@
|
||||||
.highlight .hll { background-color: #ffffcc }
|
pre.highlight { background-color: #444444 }
|
||||||
.highlight { background: #ffffff; }
|
.highlight .hll { background-color: #444444 }
|
||||||
.highlight .c { color: #008000 } /* Comment */
|
.highlight .c { color: #608b4e } /* Comment */
|
||||||
.highlight .err { border: 1px solid #FF0000 } /* Error */
|
.highlight .err { color: #cccccc; border: 1px solid #f44747 } /* Error */
|
||||||
.highlight .k { color: #0000ff } /* Keyword */
|
.highlight .g { color: #cccccc } /* Generic */
|
||||||
.highlight .ch { color: #008000 } /* Comment.Hashbang */
|
.highlight .k { color: #569cd6 } /* Keyword */
|
||||||
.highlight .cm { color: #008000 } /* Comment.Multiline */
|
.highlight .l { color: #cccccc } /* Literal */
|
||||||
.highlight .cp { color: #0000ff } /* Comment.Preproc */
|
.highlight .n { color: #cccccc } /* Name */
|
||||||
.highlight .cpf { color: #008000 } /* Comment.PreprocFile */
|
.highlight .o { color: #d4d4d4 } /* Operator */
|
||||||
.highlight .c1 { color: #008000 } /* Comment.Single */
|
.highlight .x { color: #cccccc } /* Other */
|
||||||
.highlight .cs { color: #008000 } /* Comment.Special */
|
.highlight .p { color: #cccccc } /* Punctuation */
|
||||||
.highlight .ge { font-style: italic } /* Generic.Emph */
|
.highlight .cm { color: #608b4e } /* Comment.Multiline */
|
||||||
.highlight .gh { font-weight: bold } /* Generic.Heading */
|
.highlight .cp { color: #569cd6 } /* Comment.Preproc */
|
||||||
.highlight .gp { font-weight: bold } /* Generic.Prompt */
|
.highlight .c1 { color: #608b4e } /* Comment.Single */
|
||||||
.highlight .gs { font-weight: bold } /* Generic.Strong */
|
.highlight .cs { color: #cd0000; font-weight: bold } /* Comment.Special */
|
||||||
.highlight .gu { font-weight: bold } /* Generic.Subheading */
|
.highlight .gd { color: #cd0000 } /* Generic.Deleted */
|
||||||
.highlight .kc { color: #0000ff } /* Keyword.Constant */
|
.highlight .ge { color: #cccccc; font-style: italic } /* Generic.Emph */
|
||||||
.highlight .kd { color: #0000ff } /* Keyword.Declaration */
|
.highlight .gr { color: #FF0000 } /* Generic.Error */
|
||||||
.highlight .kn { color: #0000ff } /* Keyword.Namespace */
|
.highlight .gh { color: #000080; font-weight: bold } /* Generic.Heading */
|
||||||
.highlight .kp { color: #0000ff } /* Keyword.Pseudo */
|
.highlight .gi { color: #00cd00 } /* Generic.Inserted */
|
||||||
.highlight .kr { color: #0000ff } /* Keyword.Reserved */
|
.highlight .go { color: #808080 } /* Generic.Output */
|
||||||
.highlight .kt { color: #2b91af } /* Keyword.Type */
|
.highlight .gp { color: #000080; font-weight: bold } /* Generic.Prompt */
|
||||||
.highlight .s { color: #a31515 } /* Literal.String */
|
.highlight .gs { color: #cccccc; font-weight: bold } /* Generic.Strong */
|
||||||
.highlight .nc { color: #2b91af } /* Name.Class */
|
.highlight .gu { color: #800080; font-weight: bold } /* Generic.Subheading */
|
||||||
.highlight .ow { color: #0000ff } /* Operator.Word */
|
.highlight .gt { color: #0040D0 } /* Generic.Traceback */
|
||||||
.highlight .sa { color: #a31515 } /* Literal.String.Affix */
|
.highlight .kc { color: #569cd6 } /* Keyword.Constant */
|
||||||
.highlight .sb { color: #a31515 } /* Literal.String.Backtick */
|
.highlight .kd { color: #00cd00 } /* Keyword.Declaration */
|
||||||
.highlight .sc { color: #a31515 } /* Literal.String.Char */
|
.highlight .kn { color: #cd00cd } /* Keyword.Namespace */
|
||||||
.highlight .dl { color: #a31515 } /* Literal.String.Delimiter */
|
.highlight .kp { color: #569cd6 } /* Keyword.Pseudo */
|
||||||
.highlight .sd { color: #a31515 } /* Literal.String.Doc */
|
.highlight .kr { color: #569cd6 } /* Keyword.Reserved */
|
||||||
.highlight .s2 { color: #a31515 } /* Literal.String.Double */
|
.highlight .kt { color: #4EC9B0 } /* Keyword.Type */
|
||||||
.highlight .se { color: #a31515 } /* Literal.String.Escape */
|
.highlight .ld { color: #cccccc } /* Literal.Date */
|
||||||
.highlight .sh { color: #a31515 } /* Literal.String.Heredoc */
|
.highlight .m { color: #b5cea8 } /* Literal.Number */
|
||||||
.highlight .si { color: #a31515 } /* Literal.String.Interpol */
|
.highlight .s { color: #ce9178 } /* Literal.String */
|
||||||
.highlight .sx { color: #a31515 } /* Literal.String.Other */
|
.highlight .na { color: #cccccc } /* Name.Attribute */
|
||||||
.highlight .sr { color: #a31515 } /* Literal.String.Regex */
|
.highlight .nb { color: #b5cea8 } /* Name.Builtin */
|
||||||
.highlight .s1 { color: #a31515 } /* Literal.String.Single */
|
.highlight .nc { color: #00cdcd } /* Name.Class */
|
||||||
.highlight .ss { color: #a31515 } /* Literal.String.Symbol */
|
.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 */
|
||||||
Loading…
Reference in a new issue