diff --git a/.gitignore b/.gitignore index b3730fe..558106f 100644 --- a/.gitignore +++ b/.gitignore @@ -22,3 +22,4 @@ resources/index/ code.code-workspace .portal/ tags +**/public/css/** \ No newline at end of file diff --git a/project.clj b/project.clj index 6a29261..6621d30 100644 --- a/project.clj +++ b/project.clj @@ -30,7 +30,10 @@ [ring/ring-core "1.8.0"] [ring/ring-defaults "0.3.2"] [selmer "1.12.18"]] - + :plugins [[lein-sass "0.4.0"]] + :sass {:src "resources/sass" + :output-directory "resources/public/css"} + :hooks [leiningen.sass] :min-lein-version "2.0.0" :source-paths ["src/clj"] diff --git a/resources/html/base.html b/resources/html/base.html index d52d69f..f4d871c 100644 --- a/resources/html/base.html +++ b/resources/html/base.html @@ -10,6 +10,7 @@ {% style "/assets/material-icons/css/material-icons.min.css" %} {% style "/css/screen.css" %} + {% style "/css/minima.css" %} diff --git a/resources/sass/minima.scss b/resources/sass/minima.scss new file mode 100644 index 0000000..4884381 --- /dev/null +++ b/resources/sass/minima.scss @@ -0,0 +1,63 @@ +@charset "utf-8"; + +// Define defaults for each variable. + +$base-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default; +$base-font-size: 16px !default; +$base-font-weight: 400 !default; +$small-font-size: $base-font-size * 0.875 !default; +$base-line-height: 1.5 !default; + +$spacing-unit: 30px !default; + +$green: #C5DCA0; +$yellow: #F5F2B8; +$peach: #F9DAD0; +$lavender: #A491D3; +$gray: #818AA3; + + + +$background-color: $green !default; +$brand-color: $lavender !default; +$block-color: $peach !default; +$contrast-color: $yellow !default; + +$dark-brand: darken($brand-color, 25%) !default; +$grey-color: $gray !default; +$grey-color-light: lighten($grey-color, 40%) !default; +$grey-color-dark: darken($grey-color, 25%) !default; + +$text-color: $grey-color-dark !default; + +$table-text-align: left !default; + +// Width of the content area +$content-width: 1000px !default; + +$on-palm: 600px !default; +$on-laptop: 800px !default; + +// Use media queries like this: +// @include media-query($on-palm) { +// .wrapper { +// padding-right: $spacing-unit / 2; +// padding-left: $spacing-unit / 2; +// } +// } +@mixin media-query($device) { + @media screen and (max-width: $device) { + @content; + } +} + +@mixin relative-font-size($ratio) { + font-size: $base-font-size * $ratio; +} + +// Import partials. +@import + "minima/base", + "minima/layout", + "minima/syntax-highlighting" +; diff --git a/resources/sass/minima/_base.scss b/resources/sass/minima/_base.scss new file mode 100644 index 0000000..388fa48 --- /dev/null +++ b/resources/sass/minima/_base.scss @@ -0,0 +1,255 @@ +/** + * Reset some basic elements + */ + body, h1, h2, h3, h4, h5, h6, + p, blockquote, pre, hr, + dl, dd, ol, ul, figure { + margin: 0; + padding: 0; + } + + + + /** + * Basic styling + */ + body { + font: $base-font-weight #{$base-font-size}/#{$base-line-height} $base-font-family; + color: $text-color; + background-color: $background-color; + -webkit-text-size-adjust: 100%; + -webkit-font-feature-settings: "kern" 1; + -moz-font-feature-settings: "kern" 1; + -o-font-feature-settings: "kern" 1; + font-feature-settings: "kern" 1; + font-kerning: normal; + display: flex; + min-height: 100vh; + flex-direction: column; + } + + + + /** + * Set `margin-bottom` to maintain vertical rhythm + */ + h1, h2, h3, h4, h5, h6, + p, blockquote, pre, + ul, ol, dl, figure, + %vertical-rhythm { + margin-bottom: $spacing-unit / 2; + } + + + + /** + * `main` element + */ + main { + display: block; /* Default value of `display` of `main` element is 'inline' in IE 11. */ + } + + + + /** + * Images + */ + img { + max-width: 100%; + vertical-align: middle; + } + + + + /** + * Figures + */ + figure > img { + display: block; + } + + figcaption { + font-size: $small-font-size; + } + + + + /** + * Lists + */ + ul, ol { + margin-left: $spacing-unit; + } + + li { + > ul, + > ol { + margin-bottom: 0; + } + } + + + + /** + * Headings + */ + h1, h2, h3, h4, h5, h6 { + font-weight: $base-font-weight; + } + + + + /** + * Links + */ + a { + color: $brand-color; + text-decoration: none; + + &:visited { + color: darken($brand-color, 15%); + } + + &:hover { + color: $text-color; + text-decoration: underline; + } + + .social-media-list &:hover { + text-decoration: none; + + .username { + text-decoration: underline; + } + } + } + + + /** + * Blockquotes + */ + blockquote { + color: $grey-color; + border-left: 4px solid $grey-color-light; + padding-left: $spacing-unit / 2; + @include relative-font-size(1.125); + letter-spacing: -1px; + font-style: italic; + + > :last-child { + margin-bottom: 0; + } + } + + + + /** + * Code formatting + */ + pre, + code { + @include relative-font-size(0.9375); + border: 1px solid $grey-color-light; + border-radius: 3px; + background-color: #eef; + } + + code { + padding: 1px 5px; + } + + pre { + padding: 8px 12px; + overflow-x: auto; + + > code { + border: 0; + padding-right: 0; + padding-left: 0; + } + } + + + + /** + * Wrapper + */ + .wrapper { + max-width: -webkit-calc(#{$content-width} - (#{$spacing-unit} * 2)); + max-width: calc(#{$content-width} - (#{$spacing-unit} * 2)); + margin-right: auto; + margin-left: auto; + padding-right: $spacing-unit; + padding-left: $spacing-unit; + @extend %clearfix; + + @include media-query($on-laptop) { + max-width: -webkit-calc(#{$content-width} - (#{$spacing-unit})); + max-width: calc(#{$content-width} - (#{$spacing-unit})); + padding-right: $spacing-unit / 2; + padding-left: $spacing-unit / 2; + } + } + + + + /** + * Clearfix + */ + %clearfix:after { + content: ""; + display: table; + clear: both; + } + + + + /** + * Icons + */ + + .svg-icon { + width: 16px; + height: 16px; + display: inline-block; + fill: #{$grey-color}; + padding-right: 5px; + vertical-align: text-top; + } + + .social-media-list { + li + li { + padding-top: 5px; + } + } + + + + /** + * Tables + */ + table { + margin-bottom: $spacing-unit; + width: 100%; + text-align: $table-text-align; + color: lighten($text-color, 18%); + border-collapse: collapse; + border: 1px solid $grey-color-light; + tr { + &:nth-child(even) { + background-color: lighten($grey-color-light, 6%); + } + } + th, td { + padding: ($spacing-unit / 3) ($spacing-unit / 2); + } + th { + background-color: lighten($grey-color-light, 3%); + border: 1px solid darken($grey-color-light, 4%); + border-bottom-color: darken($grey-color-light, 12%); + } + td { + border: 1px solid $grey-color-light; + } + } + \ No newline at end of file diff --git a/resources/sass/minima/_layout.scss b/resources/sass/minima/_layout.scss new file mode 100644 index 0000000..6294b6c --- /dev/null +++ b/resources/sass/minima/_layout.scss @@ -0,0 +1,297 @@ +/** + * Site header + */ + .site-header { + border-top: 5px solid $grey-color; + border-bottom: 1px dotted $grey-color; + min-height: $spacing-unit * 1.865; + + // Positioning context for the mobile navigation icon + position: relative; + } + + .site-title { + @include relative-font-size(1.625); + font-weight: 300; + line-height: $base-line-height * $base-font-size * 2.25; + letter-spacing: -1px; + margin-bottom: 0; + float: left; + + &, + &:visited { + color: $grey-color-dark; + } + } + + .site-nav { + float: right; + line-height: $base-line-height * $base-font-size * 2.25; + + .nav-trigger { + display: none; + } + + .menu-icon { + display: none; + } + + .page-link { + color: $text-color; + line-height: $base-line-height; + + // Gaps between nav items, but not on the last one + &:not(:last-child) { + margin-right: 20px; + } + } + + @include media-query($on-palm) { + position: absolute; + top: 9px; + right: $spacing-unit / 2; + background-color: $background-color; + border: 1px solid $grey-color-light; + border-radius: 5px; + text-align: right; + + label[for="nav-trigger"] { + display: block; + float: right; + width: 36px; + height: 36px; + z-index: 2; + cursor: pointer; + } + + .menu-icon { + display: block; + float: right; + width: 36px; + height: 26px; + line-height: 0; + padding-top: 10px; + text-align: center; + + > svg { + fill: $grey-color-dark; + } + } + + input ~ .trigger { + clear: both; + display: none; + } + + input:checked ~ .trigger { + display: block; + padding-bottom: 5px; + } + + .page-link { + display: block; + padding: 5px 10px; + + &:not(:last-child) { + margin-right: 0; + } + margin-left: 20px; + } + } + } + + + + /** + * Site footer + */ + .site-footer { + border-top: 1px dotted $grey-color; + padding: $spacing-unit 0; + + .u-photo { + border-radius: 50%; + } + } + + .footer-heading { + @include relative-font-size(1.125); + margin-bottom: $spacing-unit / 2; + } + + .contact-list, + .social-media-list { + list-style: none; + margin-left: 0; + } + + .footer-col-wrapper { + @include relative-font-size(0.9375); + color: $grey-color; + margin-left: -$spacing-unit / 2; + @extend %clearfix; + } + + .footer-col { + float: left; + margin-bottom: $spacing-unit / 2; + padding-left: $spacing-unit / 2; + } + + .footer-col-1 { + width: -webkit-calc(25% - (#{$spacing-unit} / 2)); + width: calc(25% - (#{$spacing-unit} / 2)); + } + + .footer-col-2 { + width: -webkit-calc(20% - (#{$spacing-unit} / 2)); + width: calc(20% - (#{$spacing-unit} / 2)); + } + + .footer-col-3 { + width: -webkit-calc(55% - (#{$spacing-unit} / 2)); + width: calc(55% - (#{$spacing-unit} / 2)); + } + + @include media-query($on-laptop) { + .footer-col-1, + .footer-col-2 { + width: -webkit-calc(50% - (#{$spacing-unit} / 2)); + width: calc(50% - (#{$spacing-unit} / 2)); + } + + .footer-col-3 { + width: -webkit-calc(100% - (#{$spacing-unit} / 2)); + width: calc(100% - (#{$spacing-unit} / 2)); + } + } + + @include media-query($on-palm) { + .footer-col { + float: none; + width: -webkit-calc(100% - (#{$spacing-unit} / 2)); + width: calc(100% - (#{$spacing-unit} / 2)); + } + } + + + + /** + * Page content + */ + .page-content { + padding: $spacing-unit 0; + flex: 1; + } + + .page-heading { + @include relative-font-size(2); + } + + .post-list-heading { + @include relative-font-size(1.75); + } + + .post-list { + margin-left: 0; + list-style: none; + + > li { + margin-bottom: $spacing-unit; + } + } + + .post-meta { + font-size: $small-font-size; + color: $grey-color; + } + + .post-link { + display: block; + @include relative-font-size(1.5); + } + + + + /** + * Posts + */ + .post-header { + margin-bottom: $spacing-unit; + } + + .post-title { + @include relative-font-size(2.625); + letter-spacing: -1px; + line-height: 1; + + @include media-query($on-laptop) { + @include relative-font-size(2.25); + } + } + + .post-content { + margin-bottom: $spacing-unit; + + h2 { + @include relative-font-size(2); + + @include media-query($on-laptop) { + @include relative-font-size(1.75); + } + } + + h3 { + @include relative-font-size(1.625); + + @include media-query($on-laptop) { + @include relative-font-size(1.375); + } + } + + h4 { + @include relative-font-size(1.25); + + @include media-query($on-laptop) { + @include relative-font-size(1.125); + } + } + } + + .h-entry { + background-color: $block-color; + padding: $spacing-unit / 1.5; + border-radius: $spacing-unit; + border: 4px solid $grey-color; + //border-top: 1px solid $contrast-color; + //border-left: 1px solid $contrast-color; + //box-shadow: ($spacing-unit / 30) ($spacing-unit / 15) $grey-color; + } + + .reply-context { + border-top: 1px solid $grey-color; + border-bottom: 1px solid $grey-color; + } + + a { + &.pgp::before { + content: "⚿ "; + } + + &.u-in-reply-to::before { + content: "↲ " ; + } + + &.u-like-of::before { + content: "♥ " ; + } + + &.u-bookmark-of::before { + content: "🔖 " ; + } + + &.u-checkin::before { + content: "⌖ "; + } + } + \ No newline at end of file diff --git a/resources/sass/minima/_syntax-highlighting.scss b/resources/sass/minima/_syntax-highlighting.scss new file mode 100644 index 0000000..b9ca2a2 --- /dev/null +++ b/resources/sass/minima/_syntax-highlighting.scss @@ -0,0 +1,71 @@ +/** + * Syntax highlighting styles + */ +.highlight { + background: #fff; + @extend %vertical-rhythm; + + .highlighter-rouge & { + background: #eef; + } + + .c { color: #998; font-style: italic } // Comment + .err { color: #a61717; background-color: #e3d2d2 } // Error + .k { font-weight: bold } // Keyword + .o { font-weight: bold } // Operator + .cm { color: #998; font-style: italic } // Comment.Multiline + .cp { color: #999; font-weight: bold } // Comment.Preproc + .c1 { color: #998; font-style: italic } // Comment.Single + .cs { color: #999; font-weight: bold; font-style: italic } // Comment.Special + .gd { color: #000; background-color: #fdd } // Generic.Deleted + .gd .x { color: #000; background-color: #faa } // Generic.Deleted.Specific + .ge { font-style: italic } // Generic.Emph + .gr { color: #a00 } // Generic.Error + .gh { color: #999 } // Generic.Heading + .gi { color: #000; background-color: #dfd } // Generic.Inserted + .gi .x { color: #000; background-color: #afa } // Generic.Inserted.Specific + .go { color: #888 } // Generic.Output + .gp { color: #555 } // Generic.Prompt + .gs { font-weight: bold } // Generic.Strong + .gu { color: #aaa } // Generic.Subheading + .gt { color: #a00 } // Generic.Traceback + .kc { font-weight: bold } // Keyword.Constant + .kd { font-weight: bold } // Keyword.Declaration + .kp { font-weight: bold } // Keyword.Pseudo + .kr { font-weight: bold } // Keyword.Reserved + .kt { color: #458; font-weight: bold } // Keyword.Type + .m { color: #099 } // Literal.Number + .s { color: #d14 } // Literal.String + .na { color: #008080 } // Name.Attribute + .nb { color: #0086B3 } // Name.Builtin + .nc { color: #458; font-weight: bold } // Name.Class + .no { color: #008080 } // Name.Constant + .ni { color: #800080 } // Name.Entity + .ne { color: #900; font-weight: bold } // Name.Exception + .nf { color: #900; font-weight: bold } // Name.Function + .nn { color: #555 } // Name.Namespace + .nt { color: #000080 } // Name.Tag + .nv { color: #008080 } // Name.Variable + .ow { font-weight: bold } // Operator.Word + .w { color: #bbb } // Text.Whitespace + .mf { color: #099 } // Literal.Number.Float + .mh { color: #099 } // Literal.Number.Hex + .mi { color: #099 } // Literal.Number.Integer + .mo { color: #099 } // Literal.Number.Oct + .sb { color: #d14 } // Literal.String.Backtick + .sc { color: #d14 } // Literal.String.Char + .sd { color: #d14 } // Literal.String.Doc + .s2 { color: #d14 } // Literal.String.Double + .se { color: #d14 } // Literal.String.Escape + .sh { color: #d14 } // Literal.String.Heredoc + .si { color: #d14 } // Literal.String.Interpol + .sx { color: #d14 } // Literal.String.Other + .sr { color: #009926 } // Literal.String.Regex + .s1 { color: #d14 } // Literal.String.Single + .ss { color: #990073 } // Literal.String.Symbol + .bp { color: #999 } // Name.Builtin.Pseudo + .vc { color: #008080 } // Name.Variable.Class + .vg { color: #008080 } // Name.Variable.Global + .vi { color: #008080 } // Name.Variable.Instance + .il { color: #099 } // Literal.Number.Integer.Long +} \ No newline at end of file diff --git a/resources/public/css/screen.css b/resources/sass/screen.scss similarity index 100% rename from resources/public/css/screen.css rename to resources/sass/screen.scss