markdown 亚马逊Kindle键盘CSS3G

Posted 2021-05-06

@import compass

// variables

$i: !important
$keyWH: 15px
$keyB: $keyWH + 2 // Height and Width with 1px border
$keyM: 7px
$double: ($keyWH * 2) + $keyM
$letters: ($keyB + $keyM) * 10
$space: ($keyB * 5) + ($keyM * 4)
$keyboard: ($keyB + $keyM) * 12
$select: $double - ($double / 3)

body
  width: 960px
  margin: 50px auto

#kindle
  position: relative
  width: 365px
  height: 564px
  margin: 7px 43px
  float: left
  +border-radius(50px)
  +background-image(linear-gradient(left, rgba(#9c9da1, 1) 1px, rgba(#525254, 1) 45px, rgba(#525254, 1) 321px, rgba(#333335, 1) 364px))
  &::after
    content: " "
    position: absolute
    bottom: -75px
    width: 365px
    height: 80px
    +border-radius(50px)
    +background-image(linear-gradient(rgba(#525254, .2) rgba(#fff, 0)))
  h1
    font-family: serif
    font-size: 13px
    font-style: italic
    text-align: center
    text-decoration: underline
    margin-top: 37px
  h2
    font-family: serif
    font-size: 9px
    text-align: center
    margin-top: 19px
    line-height: 13px
    span
      &:before
        content: "\2014"
  p
    font-family: serif
    font-size: 9px
    text-align: justify
    margin: 19px 19px 0
    line-height: 14px
    &:first-letter
      font-size: 13px


#logo
  position: relative
  font-size: 13px
  text-align: center
  color: #b5b5ad
  margin-top: 18px
  span
    font-weight: bold
  #amazon
    position: absolute
    left: 117px
    top: -64px
    width: 80px
    height: 80px
    border-bottom: 2px solid #b5b5ad
    clip: rect(77px, 50px, 84px, 30px)
    +border-radius(100px)

.back,
.next
  position: absolute
  height: 59px
  width: 9px
  top: 200px
  line-height: 57px
  color: #c6c6c6
  font-size: 9px
  border-top: #525254 1px solid
  border-right: #525254 1px solid
  border-bottom: #525254 1px solid
  &.end
    right: 0 $i
    border-right: 0px
    border-left: #525254 1px solid

.next
  height: 118px
  top: 261px
  line-height: 118px

#screen
  color: #2b2b2b
  font-size: 9px
  font-weight: bold
  width: 269px
  height: 362px
  margin: 16px 46px 43px
  background-color: rgba(#cccccc, 1)
  border: 1px solid #89898b

#statusbar
  width: 235px
  height: 8px
  padding: 4px 17px
  font-weight: bold
  border-bottom: 1px solid #6c6c6c
  +box-shadow(#6c6c6c 0 1px 4px -4px inset)
  +background-image(linear-gradient(rgba(#cecece, 1), rgba(#929292, 1)))

#location
  font-size: 9px
  width: 235px
  font-weight: bold
  margin-top: 15px
  padding: 0 17px
  span
    float: left
    &:nth-child(even)
      text-align: center
      width: 206px

#progressbar
  clear: both
  width: 233px
  height: 1px
  border: #2b2b2b 1px solid
  +border-radius(100px)
  #progress
    background-color: #2b2b2b
    height: 1px
    width: 3px

#keyboard
  width: $keyboard
  margin: 0 auto
  color: #7c7b77
  font-size: 9px
  font-weight: bold
  text-align: center
  .letters
    width: $letters
    margin: 0 0 7px
    clear: both
  .key
    display: block
    border: 1px solid #151618
    width: $keyWH
    height: $keyWH
    line-height: 15px
    margin-right: $keyM
    +border-radius(100px)
    +background-image(linear-gradient(left, #4b4c4e, #38393b))
    +box-shadow(#5a5b5d 0 0 2px inset)
    float: left
    &.double
      font-size: 7px
      width: $double
  #keys
    float: left

#navigation
  width: $double
  float: left

#key_sym,
#key_del,
#key_letters,
#key_alt
  font-size: 7px

#key_space
  width: $space $i
  +background-image(linear-gradient(#4b4c4e, #38393b 25px) $i)

#key_nav
  width: $double + 2 $i
  height: $double + 2 $i
  margin: 7px 0
  +border-radius(10px $i)
  #key_select
    width: $select
    height: $select
    margin: 6px
    line-height: $select - 3
    +box-shadow(#9c9da1 0 0 1px inset, #9c9da1 0 0 1px)
    +border-radius(5px $i)
    +background-image(linear-gradient(left, #38393b, #4b4c4e 15px) $i)

#product
  float: left
  width: 470px
  text-align: justify
  font-family: serif
  h1
    color: #E47911

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

#kindle
  #logo
    %span> amazon
    kindle
    #amazon
  .back
    <
  .next
    >
  #screen
    #statusbar
      The Art of Choosing
    #ebook
      %h1
        Past Is Prologue
      %h2
        Everything begins with a story.
        %br/
        %span
          Joseph Campbell
      %p
        I was born in Toronto, one month early and during a blizzard that covered the city in snow and silence. The surprise and the low-visibility conditions that
        %br/
        accompanied my arrival were portents, though they went unrecognized at the time. My mother, as a recent immigrant from India, was of two worlds, and she would pass that multiple identity on to me. My father was making his way to Canada, but had not yet arrived; his absence at my birtday was a sign of the deeper absence yet to come. Looking bck, I see all the ways in which my life was set the moment I was born into it. Whether in the starts on in stone, whether by the hand of God or some unnameable force, it was already written, and every action of mine would serve to sociis natoque penatibus et magnis dis part
    #location
      %span
        3%
      %span
        Locations 32-39
      %span
        298
      #progressbar
        #progress
  #keyboard
    #keys
      .letters
        .key
          Q
        .key
          W
        .key
          E
        .key
          R
        .key
          T
        .key
          Y
        .key
          U
        .key
          I
        .key
          O
        .key
          P
      .letters
        .key
          A
        .key
          S
        .key
          D
        .key
          F
        .key
          G
        .key
          H
        .key
          J
        .key
          K
        .key
          L
        .key#key_del
          Del
      .letters
        .key
          Z
        .key
          X
        .key
          C
        .key
          V
        .key
          B
        .key
          N
        .key
          M
        .key
          :preserve
            .
        .key#key_sym
          Sym
        .key
          ⏎
      #options
        .key
          ↑
        .key#key_alt
          Alt
        .key#key_space
        .key#key_letters
          Aa
        .key.double
          Home
    #navigation
      .key.double
        Menu
      .key#key_nav
        .key#key_select
          :preserve
            .
      .key.double
        Back
  .back.end
    <
  .next.end
    >

#product
  %h1
    Amazon Kindle Keyboard CSS3G
  %p
    Curabitur blandit tempus porttitor. Praesent commodo cursus CSS3, vel scelerisque nisl consectetur et. Vestibulum id ligula porta felis euismod semper. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur.
  %p
    Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum HAML, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean lacinia bibendum nulla sed consectetur.
  %p
    Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Etiam porta sem malesuada magna mollis euismod. SASS leo risus, porta ac consectetur ac, vestibulum at eros. Curabitur blandit tempus porttitor. Sed posuere consectetur est at lobortis. Maecenas faucibus mollis interdum.
  %p
    Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Vestibulum id ligula porta felis euismod semper. Nullam quis risus COMPASS urna mollis ornare vel eu leo. Curabitur blandit tempus porttitor. Nulla vitae elit libero, a pharetra augue.

Amazon Kindle Keyboard CSS3G
----------------------------
I really enjoy reading on my Kindle and decided to recreate it in CSS. I still haven;t done the icons on the statusbar. I will update the pen in the next days.

A [Pen](https://codepen.io/harunpehlivan/pen/MVyORM) by [HARUN PEHLİVAN](https://codepen.io/harunpehlivan) on [CodePen](https://codepen.io).

[License](https://codepen.io/harunpehlivan/pen/MVyORM/license).