~cadence/Frames

9ec92c3fb7e2e51100b17c58a5ff044bfbd35499 — Cadence Ember 1 year, 9 months ago c87abb2
Organise styles
A sass/includes/base.sass => sass/includes/base.sass +67 -0
@@ 0,0 1,67 @@
@use "colors" as c

body
  padding: 20px
  margin: 0
  box-sizing: border-box
  font-family: monospace
  font-size: 18px
  line-height: 1.45
  min-height: 100vh
  background-color: c.$background
  color: c.$text

footer
  font-size: 15px
  margin: 40px 0

a, a:visited
  color: c.$text-link

code
  background: c.$background-highlight
  padding: 2px 4px
  border-radius: 4px

input, button
  font-size: 16px
  font-family: inherit
  padding: 6px
  margin: 0px
  background: c.$background-field
  color: c.$text
  border-radius: 8px

input
  border: 1px solid #888
  width: auto
  min-width: auto
  flex: 1
  margin-left: 20px

textarea
  width: 100%
  height: 100px
  resize: vertical
  padding: 8px
  font-size: 16px
  color: c.$text-field
  background: c.$background-field
  border: 1px solid #888

fieldset
  border: 1px solid #bbb
  padding: 0px 24px 24px

summary
  cursor: pointer

label
  display: flex
  align-items: baseline
  justify-content: space-between
  margin: 16px 0

ul
  color: c.$text-dim


A sass/includes/bits.sass => sass/includes/bits.sass +55 -0
@@ 0,0 1,55 @@
@use "colors" as c

.page
  max-width: 650px
  margin: 0 auto

.header
  margin: 20px 0
  display: flex
  align-items: center
  justify-content: center

  &__logo
    width: 48px
    height: 48px
    margin-right: 16px

  &__text
    font-size: 40px
    margin: 0

  &__link
    color: inherit !important
    text-decoration: none

.single-button-form
  display: inline

  > button
    display: inline
    border: none
    background: none
    padding: 0
    margin: 0
    color: c.$text-link
    text-decoration: underline
    cursor: pointer

.publish-frame
  margin: 16px 0px

  &[open]
    padding-bottom: 8px
    border-bottom: 3px solid #bbb

.auth-explanation
  margin: 24px 0
  color: c.$text-warning
  white-space: pre-line

.server-stats
  white-space: pre-line

.vertical-label
  flex-direction: column

A sass/includes/colors.sass => sass/includes/colors.sass +13 -0
@@ 0,0 1,13 @@
// Background
$background: #130e0e
$background-highlight: #333
$background-field: #222

// Text
$text: #eee
$text-field: #ddd
$text-dim: #ccc
$text-hint: #aaa
$text-link: #ee4a4a
$text-highlight: #b2dbb6
$text-warning: #fc6

A sass/includes/inline.sass => sass/includes/inline.sass +10 -0
@@ 0,0 1,10 @@
@use "colors" as c

.highlight
  color: c.$text-highlight

.hint
  color: c.$text-hint
  line-height: 1.2
  font-size: 14px
  margin: 16px 0

A sass/includes/pop-button.sass => sass/includes/pop-button.sass +31 -0
@@ 0,0 1,31 @@
@mixin pop-button
  display: inline-block
  position: relative
  box-shadow: 0px 3px 10px 2px #d02222
  border-radius: 12px
  padding: 16px 26px
  background: linear-gradient(110deg, #ea3028, #9f0000)
  color: #fff !important
  text-decoration: none

.pop-button
  @include pop-button
  display: block
  border: 0
  cursor: pointer
  padding: 12px 20px
  border-radius: 8px
  font-size: 16px
  margin: 24px 0

.full-pop-button
  padding: 32px
  text-align: center

  &__button
    @include pop-button

    &:active
      top: 3px
      background: linear-gradient(110deg, #bf1f18, #840202)
      box-shadow: 0px 1px 7px 0px #d02222

A sass/includes/post.sass => sass/includes/post.sass +37 -0
@@ 0,0 1,37 @@
@use "colors" as c

.post
  border: 1px solid #888
  padding: 8px
  margin: 24px 0

  &__author
    margin-bottom: 16px

  &__link
    color: c.$text-hint !important
    text-decoration: none

    &:hover
      text-decoration: underline

  &__content
    margin-bottom: 16px
    border-left: 3px solid #ddd
    padding-left: 8px
    margin-left: 2px
    white-space: pre-line

  &__image
    max-width: 100%
    max-height: 80vh

  &__cw
    color: #fc6

    @at-root [open] &
      margin-bottom: 12px

  &__delete
    display: block
    margin: 20px 0

M sass/main.sass => sass/main.sass +5 -197
@@ 1,197 1,5 @@
body
  padding: 20px
  margin: 0
  box-sizing: border-box
  font-family: monospace
  font-size: 18px
  line-height: 1.45
  min-height: 100vh
  background-color: #130e0e
  color: #eee

.page
  max-width: 650px
  margin: 0 auto

footer
  font-size: 15px
  margin: 40px 0

$link-color: #ee4a4a

a, a:visited
  color: $link-color

code
  background: #333
  padding: 2px 4px
  border-radius: 4px

input, button
  font-size: 16px
  font-family: inherit
  padding: 6px
  margin: 0px
  background: #222
  color: #eee
  border-radius: 8px

input
  border: 1px solid #888
  width: auto
  min-width: auto
  flex: 1
  margin-left: 20px

textarea
  width: 100%
  height: 100px
  resize: vertical
  padding: 8px
  font-size: 16px
  color: #ddd
  background: #222
  border: 1px solid #999

fieldset
  border: 1px solid #bbb
  padding: 0px 24px 24px

summary
  cursor: pointer

@mixin pop-button
  display: inline-block
  position: relative
  box-shadow: 0px 3px 10px 2px #d02222
  border-radius: 12px
  padding: 16px 26px
  background: linear-gradient(110deg, #ea3028, #9f0000)
  color: #fff !important
  text-decoration: none

.pop-button
  @include pop-button
  display: block
  border: 0
  cursor: pointer
  padding: 12px 20px
  border-radius: 8px
  font-size: 16px
  margin: 24px 0

label
  display: flex
  align-items: baseline
  justify-content: space-between
  margin: 16px 0

.vertical-label
  flex-direction: column

ul
  color: #ccc

.header
  margin: 20px 0
  display: flex
  align-items: center
  justify-content: center

  &__logo
    width: 48px
    height: 48px
    margin-right: 16px

  &__text
    font-size: 40px
    margin: 0

  &__link
    color: inherit !important
    text-decoration: none

.highlight
  color: #b2dbb6

.full-pop-button
  padding: 32px
  text-align: center

  &__button
    @include pop-button

    &:active
      top: 3px
      background: linear-gradient(110deg, #bf1f18, #840202)
      box-shadow: 0px 1px 7px 0px #d02222

.hint
  color: #aaa
  line-height: 1.2
  font-size: 14px
  margin: 16px 0

.single-button-form
  display: inline

  > button
    display: inline
    border: none
    background: none
    padding: 0
    margin: 0
    color: $link-color
    text-decoration: underline
    cursor: pointer

.publish-frame
  margin: 16px 0px

  &[open]
    padding-bottom: 8px
    border-bottom: 3px solid #bbb

.post
  border: 1px solid #888
  padding: 8px
  margin: 24px 0

  &__author
    margin-bottom: 16px

  &__link
    color: #aaa !important
    text-decoration: none

    &:hover
      text-decoration: underline

  &__content
    margin-bottom: 16px
    border-left: 3px solid #ddd
    padding-left: 8px
    margin-left: 2px
    white-space: pre-line

  &__image
    max-width: 100%
    max-height: 80vh

  &__cw
    color: #fc6

    @at-root [open] &
      margin-bottom: 12px

  &__delete
    display: block
    margin: 20px 0

.auth-explanation
  margin: 24px 0
  color: #ff9d9d
  white-space: pre-line

.server-stats
  white-space: pre-line
@use "includes/base"
@use "includes/bits"
@use "includes/inline"
@use "includes/pop-button"
@use "includes/post"