~myrrc/myrrc.dev

6db7637e34311638b47ef24bc257bc9f595e9b32 — Mikhail Kot 2 months ago 09f1eca 
simpler styles
patch browse .tar.gz 
4 files changed, 312 insertions(+), 347 deletions(-)

D sass/_base.sass
D sass/_layout.sass
D sass/_skin.sass
M sass/style.sass

D sass/_base.sass => sass/_base.sass +0 -133
@@ 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


D sass/_layout.sass => sass/_layout.sass +0 -79
@@ 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%


D sass/_skin.sass => sass/_skin.sass +0 -116
@@ 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)


M sass/style.sass => sass/style.sass +312 -19
@@ 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%