From 6db7637e34311638b47ef24bc257bc9f595e9b32 Mon Sep 17 00:00:00 2001
From: Mikhail Kot <to@myrrc.dev>
Date: Sat, 22 Jun 2024 01:01:56 +0100
Subject: [PATCH] simpler styles

---
 sass/_base.sass   | 133 -------------------
 sass/_layout.sass |  79 -----------
 sass/_skin.sass   | 116 ----------------
 sass/style.sass   | 331 +++++++++++++++++++++++++++++++++++++++++++---
 4 files changed, 312 insertions(+), 347 deletions(-)
 delete mode 100644 sass/_base.sass
 delete mode 100644 sass/_layout.sass
 delete mode 100644 sass/_skin.sass

diff --git a/sass/_base.sass b/sass/_base.sass
deleted file mode 100644
index 96dcbed..0000000
--- a/sass/_base.sass
+++ /dev/null
@@ -1,133 +0,0 @@
-html
-  font-size: $base-font-size
-
-body, h1, h2, h3, h4, h5, h6, p, blockquote, pre, hr, dl, dd, ol, ul, figure
-  margin: 0
-  padding: 0
-
-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
-  overflow-wrap: break-word
-
-h1, h2, h3, h4, h5, h6, p, blockquote, pre, ul, ol, dl, figure, details, %vertical-rhythm
-  margin-bottom: $spacing-unit / 2
-
-hr
-  margin-top: $spacing-unit
-  margin-bottom: $spacing-unit
-
-main
-  display: block
-
-img
-  max-width: 100%
-  vertical-align: middle
-
-figure > img
-  display: block
-
-figcaption
-  font-size: $small-font-size
-
-ul, ol
-  margin-left: $spacing-unit
-
-li > ul, li > ol
-  margin-bottom: 0
-
-h1, h2, h3, h4, h5, h6
-  font-weight: $base-font-weight
-
-a
-  color: $link
-  text-decoration: none
-
-  &:visited
-    color: $link-visited
-  &:hover
-    color: $link-hover
-    text-decoration: underline
-
-blockquote
-  border-left: 4px solid $border-color-03
-  padding-left: $spacing-unit / 2
-
-  > :last-child
-    margin-bottom: 0
-
-pre, code
-  font-family: $code-font-family
-  font-size: 0.9375em
-  border: 1px solid $border-color-01
-  border-radius: 3px
-  background-color: $code-background-color
-
-code
-  padding: 1px 5px
-
-pre
-  padding: 8px 12px
-  overflow-x: auto
-
-  > code
-    border: 0
-    padding-right: 0
-    padding-left: 0
-
-.highlight
-  border-radius: 3px
-  background: $code-background-color
-  @extend %vertical-rhythm
-
-.wrapper
-  max-width: calc(#{$content-width} - (#{$spacing-unit}))
-  margin-right: auto
-  margin-left: auto
-  padding-right: $spacing-unit / 2
-  padding-left: $spacing-unit / 2
-  @extend %clearfix
-
-  @media screen and (min-width: $on-large)
-    max-width: calc(#{$content-width} - (#{$spacing-unit} * 2))
-    padding-right: $spacing-unit
-    padding-left: $spacing-unit
-
-%clearfix:after
-  content: ""
-  display: table
-  clear: both
-
-table
-  margin-bottom: $spacing-unit
-  width: 100%
-  text-align: $table-text-align
-  color: $table-text-color
-  border-collapse: collapse
-  border: 1px solid $table-border-color
-
-  tr:nth-child(even)
-      background-color: $table-zebra-color
-  th, td
-    padding: ($spacing-unit / 3) ($spacing-unit / 2)
-  th
-    background-color: $table-header-bg-color
-    border: 1px solid $table-header-border
-  td
-    border: 1px solid $table-border-color
-
-  @include media-query($on-laptop)
-    display: block
-    overflow-x: auto
-    -webkit-overflow-scrolling: touch
-    -ms-overflow-style: -ms-autohiding-scrollbar
diff --git a/sass/_layout.sass b/sass/_layout.sass
deleted file mode 100644
index 926cf7d..0000000
--- a/sass/_layout.sass
+++ /dev/null
@@ -1,79 +0,0 @@
-.site-header
-  min-height: $spacing-unit * 1.865
-  line-height: $base-line-height * $base-font-size * 2.25
-  position: relative
-
-.site-title
-  @include relative-font-size(1.625)
-  font-weight: 300
-  letter-spacing: -1px
-  margin-bottom: 0
-  float: left
-
-  &, &:visited
-    color: $site-title-color
-
-.popcat
-  margin-left: $spacing-unit / 5
-  margin-top: -$spacing-unit / 5
-  border-radius: 15%
-
-.page-content
-  padding: 0
-  flex: 1 0 auto
-
-.page-heading
-  @include relative-font-size(2)
-
-.post-link
-  display: block
-  @include relative-font-size(1.5)
-
-.post-header
-  margin-bottom: $spacing-unit / 2
-
-.post-header h1, .post-content h1
-  @include relative-font-size(2.625)
-  letter-spacing: -1px
-  line-height: 1.15
-
-  @media screen and (min-width: $on-large)
-    @include relative-font-size(2.625)
-
-.post-content
-  margin-bottom: $spacing-unit
-
-  h1, h2, h3, h4, h5, h6
-    margin-top: $spacing-unit
-  h2
-    @include relative-font-size(1.75)
-
-    @media screen and (min-width: $on-large) 
-      @include relative-font-size(2)
-  h3
-    @include relative-font-size(1.375)
-
-    @media screen and (min-width: $on-large) 
-      @include relative-font-size(1.625)
-  h4
-    @include relative-font-size(1.25)
-  h5
-    @include relative-font-size(1.125)
-  h6
-    @include relative-font-size(1.0625)
-
-.quote
-  text-align: right
-
-footer, .section-cut
-  text-align: center
-
-footer
-  padding-bottom: 10px
-
-.lang
-  float: right
-.row
-  display: flex
-.col
-  flex: 50%
diff --git a/sass/_skin.sass b/sass/_skin.sass
deleted file mode 100644
index 8d072ff..0000000
--- a/sass/_skin.sass
+++ /dev/null
@@ -1,116 +0,0 @@
-@charset "utf-8"
-
-$lm-brand-color: #828282 !default
-$lm-brand-color-light: lighten($lm-brand-color, 40%) !default
-$lm-brand-color-dark: darken($lm-brand-color, 25%) !default
-$lm-site-title-color: $lm-brand-color-dark !default
-$lm-text-color: #111111 !default
-$lm-background-color: #fdfdfd !default
-$lm-code-background-color: #eeeeff !default
-$lm-link: #2a7ae2 !default
-$lm-link-visited: darken($lm-link, 15%) !default
-$lm-link-hover: $lm-text-color !default
-$lm-border-color-01: $lm-brand-color-light !default
-$lm-border-color-02: lighten($lm-brand-color, 35%) !default
-$lm-border-color-03: $lm-brand-color-dark !default
-$lm-table-text-color: lighten($lm-text-color, 18%) !default
-$lm-table-zebra-color: lighten($lm-brand-color, 46%) !default
-$lm-table-header-bg-color: lighten($lm-brand-color, 43%) !default
-$lm-table-header-border: lighten($lm-brand-color, 37%) !default
-$lm-table-border-color: $lm-border-color-01 !default
-$dm-brand-color: #999999 !default
-$dm-brand-color-light: lighten($dm-brand-color, 5%) !default
-$dm-brand-color-dark: darken($dm-brand-color, 35%) !default
-$dm-site-title-color: $dm-brand-color-light !default
-$dm-text-color: #bbbbbb !default
-$dm-background-color: #181818 !default
-$dm-code-background-color: #212121 !default
-$dm-link: #79b8ff !default
-$dm-link-visited: $dm-link !default
-$dm-link-hover: $dm-text-color !default
-$dm-border-color-01: $dm-brand-color-dark !default
-$dm-border-color-02: $dm-brand-color-light !default
-$dm-border-color-03: $dm-brand-color !default
-$dm-table-text-color: $dm-text-color !default
-$dm-table-zebra-color: lighten($dm-background-color, 4%) !default
-$dm-table-header-bg-color: lighten($dm-background-color, 10%) !default
-$dm-table-header-border: lighten($dm-background-color, 21%) !default
-$dm-table-border-color: $dm-border-color-01 !default
-$brand-color: $lm-brand-color
-$brand-color-light: $lm-brand-color-light
-$brand-color-dark: $lm-brand-color-dark
-$site-title-color: $lm-site-title-color
-$text-color: $lm-text-color
-$background-color: $lm-background-color
-$code-background-color: $lm-code-background-color
-$link: $lm-link
-$link-visited: $lm-link-visited
-$link-hover: $lm-link-hover
-$border-color-01: $lm-border-color-01
-$border-color-02: $lm-border-color-02
-$border-color-03: $lm-border-color-03
-$table-text-color: $lm-table-text-color
-$table-zebra-color: $lm-table-zebra-color
-$table-header-bg-color: $lm-table-header-bg-color
-$table-header-border: $lm-table-header-border
-$table-border-color: $lm-table-border-color
-
-:root
-  --v: #{$lm-brand-color}
-  --light: #{$lm-brand-color-light}
-  --dark: #{$lm-brand-color-dark}
-  --title: #{$lm-site-title-color}
-  --text: #{$lm-text-color}
-  --bg: #{$lm-background-color}
-  --code: #{$lm-code-background-color}
-  --link: #{$lm-link}
-  --linkv: #{$lm-link-visited}
-  --linkh: #{$lm-link-hover}
-  --b1: #{$lm-border-color-01}
-  --b2: #{$lm-border-color-02}
-  --b3: #{$lm-border-color-03}
-  --tbl: #{$lm-table-text-color}
-  --tblz: #{$lm-table-zebra-color}
-  --tbl-hdr-bg: #{$lm-table-header-bg-color}
-  --tbl-hdr-border: #{$lm-table-header-border}
-  --tbl-border: #{$lm-table-border-color}
-
-@media (prefers-color-scheme: dark)
-  :root
-    --v: #{$dm-brand-color}
-    --light: #{$dm-brand-color-light}
-    --dark: #{$dm-brand-color-dark}
-    --title: #{$dm-site-title-color}
-    --text: #{$dm-text-color}
-    --bg: #{$dm-background-color}
-    --code: #{$dm-code-background-color}
-    --link: #{$dm-link}
-    --linkv: #{$dm-link-visited}
-    --linkh: #{$dm-link-hover}
-    --b1: #{$dm-border-color-01}
-    --b2: #{$dm-border-color-02}
-    --b3: #{$dm-border-color-03}
-    --tbl: #{$dm-table-text-color}
-    --tblz: #{$dm-table-zebra-color}
-    --tbl-hdr-bg: #{$dm-table-header-bg-color}
-    --tbl-hdr-border: #{$dm-table-header-border}
-    --tbl-border: #{$dm-table-border-color}
-
-$brand-color: var(--v)
-$brand-color-light: var(--light)
-$brand-color-dark: var(--dark)
-$site-title-color: var(--title)
-$text-color: var(--text)
-$background-color: var(--bg)
-$code-background-color: var(--code)
-$link: var(--link)
-$link-visited: var(--linkv)
-$link-hover: var(--linkh)
-$border-color-01: var(--b1)
-$border-color-02: var(--b2)
-$border-color-03: var(--b3)
-$table-text-color: var(--tbl)
-$table-zebra-color: var(--tblz)
-$table-header-bg-color: var(--tbl-hdr-bg)
-$table-header-border: var(--tbl-hdr-border)
-$table-border-color: var(--tbl-border)
diff --git a/sass/style.sass b/sass/style.sass
index 23e7048..8665db0 100644
--- a/sass/style.sass
+++ b/sass/style.sass
@@ -1,22 +1,315 @@
 @charset "utf-8"
-
-$base-font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", "Segoe UI Emoji", "Segoe UI Symbol", "Apple Color Emoji", Roboto, Helvetica, Arial, sans-serif !default
-$code-font-family: "Menlo", "Inconsolata", "Consolas", "Roboto Mono", "Ubuntu Mono", "Liberation Mono", "Courier New", monospace
-$base-font-size:   16px !default
-$base-font-weight: 400 !default
-$small-font-size:  $base-font-size * 0.875 !default
+$size:   16px !default
+$weight: 400 !default
+$small-font-size:  $size * 0.875 !default
 $base-line-height: 1.5 !default
-$spacing-unit:     30px !default
+$spacing: 30px !default
 $table-text-align: left !default
-$content-width:    800px !default
-$on-palm:          600px !default
-$on-laptop:        800px !default
-$on-medium:        $on-palm !default
-$on-large:         $on-laptop !default
-
-@mixin media-query($device)
-  @media screen and (max-width: $device)
-    @content
-@mixin relative-font-size($ratio)
-  font-size: #{$ratio}rem
-@import "skin", "base", "layout"
+$content: 800px !default
+$lm-brand-color: #828282 !default
+$lm-brand-color-light: lighten($lm-brand-color, 40%) !default
+$lm-brand-color-dark: darken($lm-brand-color, 25%) !default
+$lm-site-title-color: $lm-brand-color-dark !default
+$lm-text-color: #111111 !default
+$lm-background-color: #fdfdfd !default
+$lm-code-background-color: #eeeeff !default
+$lm-link: #2a7ae2 !default
+$lm-link-visited: darken($lm-link, 15%) !default
+$lm-link-hover: $lm-text-color !default
+$lm-border-color-01: $lm-brand-color-light !default
+$lm-border-color-02: lighten($lm-brand-color, 35%) !default
+$lm-border-color-03: $lm-brand-color-dark !default
+$lm-table-text-color: lighten($lm-text-color, 18%) !default
+$lm-table-zebra-color: lighten($lm-brand-color, 46%) !default
+$lm-table-header-bg-color: lighten($lm-brand-color, 43%) !default
+$lm-table-header-border: lighten($lm-brand-color, 37%) !default
+$lm-table-border-color: $lm-border-color-01 !default
+$dm-brand-color: #999999 !default
+$dm-brand-color-light: lighten($dm-brand-color, 5%) !default
+$dm-brand-color-dark: darken($dm-brand-color, 35%) !default
+$dm-site-title-color: $dm-brand-color-light !default
+$dm-text-color: #bbbbbb !default
+$dm-background-color: #181818 !default
+$dm-code-background-color: #212121 !default
+$dm-link: #79b8ff !default
+$dm-link-visited: $dm-link !default
+$dm-link-hover: $dm-text-color !default
+$dm-border-color-01: $dm-brand-color-dark !default
+$dm-border-color-02: $dm-brand-color-light !default
+$dm-border-color-03: $dm-brand-color !default
+$dm-table-text-color: $dm-text-color !default
+$dm-table-zebra-color: lighten($dm-background-color, 4%) !default
+$dm-table-header-bg-color: lighten($dm-background-color, 10%) !default
+$dm-table-header-border: lighten($dm-background-color, 21%) !default
+$dm-table-border-color: $dm-border-color-01 !default
+
+:root
+  --v: #{$lm-brand-color}
+  --light: #{$lm-brand-color-light}
+  --dark: #{$lm-brand-color-dark}
+  --title: #{$lm-site-title-color}
+  --text: #{$lm-text-color}
+  --bg: #{$lm-background-color}
+  --code: #{$lm-code-background-color}
+  --link: #{$lm-link}
+  --linkv: #{$lm-link-visited}
+  --linkh: #{$lm-link-hover}
+  --b1: #{$lm-border-color-01}
+  --b2: #{$lm-border-color-02}
+  --b3: #{$lm-border-color-03}
+  --tbl: #{$lm-table-text-color}
+  --tblz: #{$lm-table-zebra-color}
+  --tbl-hdr-bg: #{$lm-table-header-bg-color}
+  --tbl-hdr-border: #{$lm-table-header-border}
+  --tbl-border: #{$lm-table-border-color}
+
+@media (prefers-color-scheme: dark)
+  :root
+    --v: #{$dm-brand-color}
+    --light: #{$dm-brand-color-light}
+    --dark: #{$dm-brand-color-dark}
+    --title: #{$dm-site-title-color}
+    --text: #{$dm-text-color}
+    --bg: #{$dm-background-color}
+    --code: #{$dm-code-background-color}
+    --link: #{$dm-link}
+    --linkv: #{$dm-link-visited}
+    --linkh: #{$dm-link-hover}
+    --b1: #{$dm-border-color-01}
+    --b2: #{$dm-border-color-02}
+    --b3: #{$dm-border-color-03}
+    --tbl: #{$dm-table-text-color}
+    --tblz: #{$dm-table-zebra-color}
+    --tbl-hdr-bg: #{$dm-table-header-bg-color}
+    --tbl-hdr-border: #{$dm-table-header-border}
+    --tbl-border: #{$dm-table-border-color}
+
+$brand-color: var(--v)
+$brand-color-light: var(--light)
+$brand-color-dark: var(--dark)
+$site-title-color: var(--title)
+$text-color: var(--text)
+$background-color: var(--bg)
+$code-background-color: var(--code)
+$link: var(--link)
+$link-visited: var(--linkv)
+$link-hover: var(--linkh)
+$border-color-01: var(--b1)
+$border-color-02: var(--b2)
+$border-color-03: var(--b3)
+$table-text-color: var(--tbl)
+$table-zebra-color: var(--tblz)
+$table-header-bg-color: var(--tbl-hdr-bg)
+$table-header-border: var(--tbl-hdr-border)
+$table-border-color: var(--tbl-border)
+
+html
+  font-size: $size
+
+body, h1, h2, h3, h4, h5, h6, p, blockquote, pre, hr, dl, dd, ol, ul, figure
+  margin: 0
+  padding: 0
+
+body
+  font: $weight #{$size}/#{$base-line-height} sans-serif
+  color: $text-color
+  background-color: $background-color
+  -webkit-text-size-adjust: 100%
+  font-feature-settings: "kern" 1
+  font-kerning: normal
+  display: flex
+  min-height: 100vh
+  flex-direction: column
+  overflow-wrap: break-word
+
+h1, h2, h3, h4, h5, h6, p, blockquote, pre, ul, ol, dl, figure, details, %vertical-rhythm
+  margin-bottom: $spacing / 2
+
+hr
+  margin-top: $spacing
+  margin-bottom: $spacing
+
+main
+  display: block
+
+img
+  max-width: 100%
+  vertical-align: middle
+
+figure > img
+  display: block
+
+figcaption
+  font-size: $small-font-size
+
+ul, ol
+  margin-left: $spacing
+
+li > ul, li > ol
+  margin-bottom: 0
+
+h1, h2, h3, h4, h5, h6
+  font-weight: $weight
+
+a
+  color: $link
+  text-decoration: none
+
+  &:visited
+    color: $link-visited
+  &:hover
+    color: $link-hover
+    text-decoration: underline
+
+blockquote
+  border-left: 4px solid $border-color-03
+  padding-left: $spacing / 2
+
+  > :last-child
+    margin-bottom: 0
+
+pre, code
+  font-family: monospace
+  font-size: 0.9375em
+  border: 1px solid $border-color-01
+  border-radius: 3px
+  background-color: $code-background-color
+
+code
+  padding: 1px 5px
+
+pre
+  padding: 8px 12px
+  overflow-x: auto
+
+  > code
+    border: 0
+    padding-right: 0
+    padding-left: 0
+
+.highlight
+  border-radius: 3px
+  background: $code-background-color
+  @extend %vertical-rhythm
+
+.wrapper
+  max-width: $content - $spacing
+  margin-right: auto
+  margin-left: auto
+  padding-right: $spacing / 2
+  padding-left: $spacing / 2
+  @extend %clearfix
+
+  @media screen and (min-width: $content)
+    max-width: $content - $spacing * 2
+    padding-right: $spacing
+    padding-left: $spacing
+
+%clearfix:after
+  content: ""
+  display: table
+  clear: both
+
+table
+  margin-bottom: $spacing
+  width: 100%
+  text-align: $table-text-align
+  color: $table-text-color
+  border-collapse: collapse
+  border: 1px solid $table-border-color
+
+  tr:nth-child(even)
+      background-color: $table-zebra-color
+  th, td
+    padding: ($spacing / 3) ($spacing / 2)
+  th
+    background-color: $table-header-bg-color
+    border: 1px solid $table-header-border
+  td
+    border: 1px solid $table-border-color
+
+  @media screen and (max-width: $content)
+    display: block
+    overflow-x: auto
+    -webkit-overflow-scrolling: touch
+    -ms-overflow-style: -ms-autohiding-scrollbar
+
+.site-header
+  min-height: $spacing * 1.865
+  line-height: $base-line-height * $size * 2.25
+  position: relative
+
+.site-title
+  font-size: 1.625rem
+  font-weight: 300
+  letter-spacing: -1px
+  margin-bottom: 0
+  float: left
+
+  &, &:visited
+    color: $site-title-color
+
+.popcat
+  margin-left: $spacing / 5
+  margin-top: -$spacing / 5
+  border-radius: 15%
+
+.page-content
+  padding: 0
+  flex: 1 0 auto
+
+.page-heading
+  font-size: 2rem
+
+.post-link
+  display: block
+  font-size: 1.5rem
+
+.post-header
+  margin-bottom: $spacing / 2
+
+.post-header h1, .post-content h1
+  font-size: 2.625rem
+  letter-spacing: -1px
+  line-height: 1.15
+
+  @media screen and (min-width: $content)
+    font-size: 2.625rem
+
+.post-content
+  margin-bottom: $spacing
+
+  h1, h2, h3, h4, h5, h6
+    margin-top: $spacing
+  h2
+    font-size: 1.75rem
+
+    @media screen and (min-width: $content)
+      font-size: 2rem
+  h3
+    font-size: 1.375rem
+
+    @media screen and (min-width: $content)
+      font-size: 1.625rem
+  h4
+    font-size: 1.25rem
+  h5
+    font-size: 1.125rem
+  h6
+    font-size: 1.0625rem
+
+.quote
+  text-align: right
+
+footer, .section-cut
+  text-align: center
+
+footer
+  padding-bottom: 10px
+
+.lang
+  float: right
+.row
+  display: flex
+.col
+  flex: 50%
-- 
2.45.2