;; -*- mode:scheme -*-
(let* (;; FONTS ;;
       (font-proportion-ratio (/ 3 4))
       (largest-font-size 5.5)          ; (REM)

       ;; COLORS ;;
       (almost-black "#111")
       (white "white")

       (primary-color white)
       (primary-light-color "#2ba6cb")
       (inverted-primary-light-color white)
       (secondary-color "#e9e9e9")
       (sub-color "#888")
       (sub-item-color "#999")
       (inverted-primary-color almost-black)
       (inverted-primary-dark-color "#eee")
       (primary-dark-color almost-black)
       (shadow-color "#888")
       (heavy-shadow-color "#111")
       (anchor-color "#ddd")
       (card-background-color "#f5f5f5")
       (card-border-color "#ccc")
       (page-background-color "white")

       (article-card-viewed-background-color "#f5f5f5")
       (article-card-category-background-color white)
       (article-card-category-color almost-black)
       )
  (use scss)

  (define *font-sizes*
    (map-in-order
     (lambda (x) (string-append (number->string x) "rem"))
     (fold
      (lambda (i o)
        ;; Round down to 3 digits after the decimal.
        (cons (* (inexact->exact (round (* (car o) font-proportion-ratio 1000))) 0.001) o))
           `(,largest-font-size)
           (iota 9))))
  (define (font-size size)
    (if (number? size)
        (list-ref *font-sizes* size)
        (case size
          ('largest (list-ref *font-sizes* 9))
          ('extra-large (list-ref *font-sizes* 7))
          ('large (list-ref *font-sizes* 6))
          ('medium (list-ref *font-sizes* 4))
          ('small (list-ref *font-sizes* 2))
          ('tiny (list-ref *font-sizes* 1))
          ('smallest (list-ref *font-sizes 0)))))

  ;; So SCSS can't currently handle media queries. This is a terrible
  ;; hack to make it work. The syntax is the same as regular SCSS for
  ;; the body of the media query. Also note that part of the hack is
  ;; adding a bogus selector and rule to the end with id
  ;; nil-and-nil-and-nil. You probably want to avoid using that as an
  ;; ID in your document. :) See usage example below.
  ;;
  ;; ,(mq '|@media only screen and (max-width: 40rem)|
  ;;      '(.p (font red) (font-size 10px))
  ;;      '(a (text-decoration none)))
  (define (mq query . body)
    `(,query
      (,(string-append
         (fold (lambda (scss o)
                 (string-append (scss->css (cons 'css+ (list scss))) " " o))
               ""
               body)
         " #nil-and-nil-and-nill { font")
       "inherit }")))

`(css+

;; BEGIN GENERIC STYLES
((h1 h2 h3 h4 h5 h6)
 (margin-top 0.5rem)
 (margin-bottom 0.1rem))

(h1
 (font-size ,(font-size 7)))
(h2
 (font-size ,(font-size 6)))
(h3
 (font-size ,(font-size 5)))
(h4
 (font-size ,(font-size 4)))
(h5
 (font-size ,(font-size 3)))
(h6
 (font-size ,(font-size 2)))

(a
 (text-decoration none)
 (color ,primary-light-color))

((|input[type=\"text\"]|
  |input[type=\"password\"]|
  |input[type=\"email\"]|)
 (padding 0.2rem)
 (margin-bottom 1rem)
 (width 100%))

(select
  (padding 0.2rem)
  (margin-bottom 1rem))

(|input[type=\"email\"]|
 (margin-right 0.3rem)
 (verticle-align middle))

(.expand
 (width 100%))

(.button
 (font-weight bold)
 (cursor pointer)
 (background-color ,primary-light-color)
 (font-size ,(font-size 3))
 (padding 0.5rem)
 (border "1px solid #2284A1")
 (box-shadow "0px 1px 0px rgba(255, 255, 255, 0.5) inset")
 (color white)
 (transition "background-color 300ms ease-out 0s"))

(|.button:hover|
 (background-color "#2284A1"))

(.button.secondary
 (background-color "#ccc")
 (border "0.1rem solid #999"))

(.button-small
 (font-size ,(font-size 2))
 (padding 0.2rem))

(.button.right
 (margin-top 0.6rem)
 (margin-right 0.2rem))

(.button-shadowed
 (background-color inherit)
 (padding 0.2rem)
 (margin 0.2rem)
 (box-shadow 0 0 1px 1px ,sub-item-color)
 (border-radius 0.2rem))

(.horizontal-spacer
 (height 1rem))

(.vertical-spacer
 (width 1rem)
 (display inline-block))

(.font-small
 (text-align center))

(.center
 (text-align center))

(p.small-font
 (font-size ,(font-size 'small))
 (line-height 1.125rem)
 (margin-top 0.2rem)
 (margin-bottom 0.2rem))

(p.tiny-font
 (font-size ,(font-size 'tiny))
 (line-height 0.75rem)
 (margin-top 0.2rem)
 (margin-bottom 0.2rem))

(.overflow-hidden
 (overflow hidden))

(.small-font
 (font-size ,(font-size 'small))
 (line-height 1.25rem))

(.inline
 (display inline))

(.unstyled-link
 (text-decoration inherit !important)
 (color inherit !important)
 (font-family inherit !important)
 (font-weight inherit !important)
 (font-style inherit !important)
 (line-height inherit !important)
 (background-color inherit !important))

(.fixed
 (position fixed))

(.hidden
 (visibility hidden))

(.icon-button
 (border 0)
 (background inherit))

(.display-none
 (display none))

(.inline
 (display inline-block))

(.accordion-container
 (list-style none)
 (margin-left 0))

(|.accordion:first-child|
 (border-top 0.1rem solid ,sub-color))

(.accordion
 (border 0.1rem solid ,sub-color)
 (border-top 0)
 (padding 0.3rem)
 (list-style none)
 (background ,anchor-color))

(.accordion-selected
 (background inherit))

(.accordion-header
 (cursor pointer))

(code
 (font-size ,(font-size 'small)))

;; END GENERIC STYLES

;; BEGIN NEWS STYLES

(|#api-landing-background-container|
 (display flex)
 (|-webkit-flex| flex)
 (flex-direction column)
 (|-webkit-flex-direction| column)
 (height 610px))

(|#api-landing-background-text-container|
 (flex 1 1 auto)
 (|-webkit-flex| 1 1 auto)
 (display "-webkit-flex")
 (display flex)
 (flex-direction column)
 (|-webkit-flex-direction| column)
 (justify-content center)
 (|-webkit-justify-content| center)
 (text-shadow "0 2px rgba(62,71,76,0.4)")
 (text-shadow "0 0px 5px rgba(62,71,76,0.4), 2px 2px 4px black")
 (text-align center)
 ((// |h1,h3|)
  (color white)))

(.api-landing-background
 (position absolute)
 (top 0)
 (left 0)
 (right 0)
 (height 610px))

(|#api-landing-background-overlay|
 (background "rgba(115, 115, 115, 0.7)"))

(|#api-landing-background-image|
 (background-image "url('/res/img/raster/newspaper.jpg')")
 (background-position center)
 (background-repeat no-repeat)
 (background-size cover))

(|#api-landing-background-credits-container|
 (position absolute)
 (bottom 3px)
 (left 3px)
 (color ,anchor-color)
 (font-size ,(font-size 2))
 ((// a)
  (color ,anchor-color)))

(|.row .request-invite-row|
 (margin-top 1rem)
 (margin-bottom 1rem)
 (border-top 0.35rem solid ,almost-black)
 (border-bottom 0.35rem solid ,almost-black))

(|.row .tall|
 (margin-top 7rem)
 (margin-bottom 7rem))

(.unsubscribe-topic-icon
 (margin-right 0.3rem)
 (color ,primary-light-color))

(.remove-topic
 (display inline-block)
 (margin-top 0.3rem))

(.headline
 (font-weight bold)
 (font-family "georgia, 'times new roman', times, serif"))

(.byline
 (color ,sub-item-color)
 (text-transform uppercase)
 ((// a)
  (color ,sub-item-color)
  (text-decoration underline)))

(.source-line
 (color ,sub-item-color)
 ((// img)
  (opacity 0.5)
  (margin-right 0.2rem))
 ((// span)
  (vertical-align middle))
 ((// a)
  (color ,sub-item-color)))

(.logo-normal
 (margin-top 0.2rem))

(.follow-icon-container
 (display inline-block)
 (padding 0.2rem)
 (margin 0.4rem)
 (margin-bottom 0.8rem)
 ((// img)
  (width 18px)
  (height 18px)))

(.add-follow-label
 (cursor pointer))

(.selection-checkbox-container
 (margin 0.5rem)
 (font-size ,(font-size 2))
 ((// img)
  (width 18px)
  (height 18px)))

(.selection-checkbox
 (display none))

(|.selection-label-container|
 (cursor pointer)
 (display inline-block)
 (padding 0.2rem)
 (padding-left 0.1rem))

(|.selection-checkbox + label:before|
 (display inline-block)
 (font "normal normal normal 14px/1 FontAwesome")
 (font-size inherit)
 (text-rendering auto)
 ("-webkit-font-smoothing" antialiased)
 ("-moz-osx-font-smoothing" grayscale)
 (transform "translate(0, 0)")
 (content "'\\f067'"))

(|.selection-checkbox:checked + label:before|
 (display inline-block)
 (font "normal normal normal 14px/1 FontAwesome")
 (font-size inherit)
 (text-rendering auto)
 ("-webkit-font-smoothing" antialiased)
 ("-moz-osx-font-smoothing" grayscale)
 (transform "translate(0, 0)")
 (content "'\\f14a'"))

(.interest-icon-add
 ((// fa-plus)
  (color black))
 ((// fa-check-square)
  (background-color black)
  (color white)))

(|#add-interest-input|
 (margin-bottom 0)
 (z-index 3)
 (position relative))

(.select-interests-container
 (display none)
 (background white)
 (position absolute)
 (z-index 3)
 (margin-right 0.2rem)
 (overflow-y auto))

(.extra-interests-container
 ((// li)
  (list-style-type none)))

(.interest-element-label
 ((// input)
  (margin-right 0.2rem)))

(.interest-image-container
 (position relative)
 (cursor pointer)
 (color white)
 (text-shadow 1px 1px ,shadow-color)
 ((// img)
  (width 100%)
  (height 150px)))

(.interest-element-shadow
 (box-shadow 0 0 4px ,almost-black)
 (border 1px solid ,almost-black))

(.interest-image-text
 (font-weight bold)
 (position absolute)
 (bottom 0)
 (z-index 2)
 (color white)
 (width "100%"))

(.interest-image-overlay
 (position absolute)
 (background "rgba(115, 115, 115, 0.45)")
 (top 0)
 (left 0)
 (width "100%")
 (height "100%")
 (z-index 1))

(.interest-image-checkmark-container
 (position absolute)
 (top 0)
 (right 0)
 (color white)
 (z-index 3)
 (padding 0.5rem))

(.level-3
 (z-index 3)
 (position relative))

(.flow-button
 (box-shadow 0 0 1px 1px ,sub-item-color)
 (border-radius 0.2rem)
 (background-color ,almost-black)
 (padding 0.3rem)
 (border 0px)
 (font-size ,(font-size 3))
 (color white))

(.add-interest
 (box-shadow 0 0 1px 1px "#999")
 (border-radius 0.2rem))

(.follow-icons-outer-container
 (margin 0.2rem)
 (display inline-block)
 (background transparent))

(.top-bar-container
 (color ,inverted-primary-color)
 (background ,primary-color))

(.top-bar-title
 (font-family "Georgia, serif")
 (padding-bottom 0)
 (margin-bottom 0)
 (text-align center)
 (font-size ,(font-size 'medium))
 (color ,inverted-primary-color)
 (font-weight bold))

(.menu-bars
 ,@(let ((radius '0.3rem))
     `((border-top-left-radius ,radius)
       (border-top-right-radius ,radius)
       (margin-left 0.2rem)
       (margin-top 0.55rem)
       (color ,sub-color)
       (cursor pointer))))

(.menu-header
 (font-weight bold)
 (color ,almost-black)
 (border-bottom 0.2rem solid ,almost-black))

(.menu-bars-open
 (background ,white)
 (color ,almost-black)
 (border 0.1rem solid ,almost-black)
 (border-bottom 0.2rem solid ,white))

(.menu-container
 (margin-top -0.05rem)
 (color ,primary-dark-color)
 (display none)
 (border-top 0.1rem solid ,almost-black)
 (border-bottom 0.2rem solid ,almost-black)

 ((// .fa)
  (margin-right 0.4rem))

 ((// ul)
  (list-style none)
  (margin 0)
  (padding 0)

  ((// li)
   (line-height 2rem)
   (border-bottom 0.15rem solid ,inverted-primary-dark-color)
   (padding 0.5rem)

   ((// a)
    (display block)
    (width 100%)))))

(.filter-tags-container
 (text-align center)
 (padding 0.2rem)
 (padding-top 0))

,(mq '|@media only screen and (max-width: 40rem)|
     `(.filter-tags-container
       (font-size ,(font-size 'medium))
       (overflow-x auto)
       (white-space nowrap))
     `(.filter-item-selected
       (border-bottom 0.2rem solid ,inverted-primary-color)))

,(mq '|@media only screen and (min-width: 40rem)|
     `(.filter-tags-container
       (font-size 'medium))
     `(.filter-item-selected
       (border-bottom 0.1rem solid ,inverted-primary-color)))

(.filter-item
 (color ,inverted-primary-color)
 (display inline-block)
 (padding 0.2rem)
 (padding-top 0.6rem)
 (padding-bottom 0.1rem))

(.subscribe-container
 (color ,inverted-primary-color)
 (background ,primary-dark-color)
 (padding 0)
 (padding-top 0.4rem)
 (padding-bottom 0.5rem)
 (display inline-block))

(.outer-subscribe-container
 (background-color ,page-background-color))

(.top-bar-icon
 (font-weight initial)
 (cursor pointer)
 (padding-right 0.2rem))

(.subscribe-button
 (padding 0.2rem)
 (padding-top 0.3rem)
 (margin-top 0.55rem)
 (font-size ,(font-size 'small))
 (margin-right 0.5rem)
 (padding-left 0.6rem)
 (padding-right 0.6rem))

(.unread-only-label
 (padding-left 0.1rem)
 (font-size ,(font-size 3))
 (color ,inverted-primary-color))

(.unread-only-container
 (padding-top 0.2rem))

(.top-fixed-container
 (z-index 1)
 (width 100%)
 (left 0))

(.article-card
 ,@(let ((spacing "0.6rem"))
     `((margin-bottom ,spacing !important)
       (padding-bottom ,spacing)
       (border-bottom 0.1rem dotted ,almost-black))))

(.thumbnail
 (background-size cover !important)
 (height 4rem)
 (width 5rem)
 (margin-right 0.5rem))

(.flex-container
 (display flex))

(.flex-align-center
 (align-items center))

(.filler-image
 (opacity 0.05))

;; (.thumbnail-extra-large
;;  (height 20rem)
;;  (width 37rem))

;; (.thumbnail-large
;;  (height 15.5rem)
;;  (width 18.3rem))

;; (.thumbnail-medium
;;  (height 12rem)
;;  (width 14rem))

;; (.thumbnail-small
;;  (height 7rem)
;;  (width 8rem))

;; (.thumbnail-extra-small
;;  (height 4rem)
;;  (width 5rem))

(.article-card-title
 (padding-left 0.2rem !important)
 (padding-right 0.2rem !important))

(.article-card-viewed
 ((// .article-card-image-container)
   ((// .thumbnail)
    (opacity 0.5)))
 ((// .article-card-title)
  (opacity 0.5)))

(|#personalize-tooltip|
 (position absolute)
 (top 3.2rem)
 (right 1rem)
 (width 10rem)
 (z-index 5)
 (background white)
 (padding 0.4rem)
 (border 0.15rem solid ,almost-black)
 (border-radius 0.3rem)
 (box-shadow 2px 2px 2px grey)
 (display none)
 ((// .triangle-up)
  (position absolute)
  (top -1rem)
  (right 0.15rem)))

(.triangle-up
 (width 0)
 (height 0)
 (border-left 0.5rem solid transparent)
 (border-right 0.5rem solid transparent)
 (border-bottom 1rem solid black))

(.article-card-category
 (position absolute)
 (background-color ,article-card-category-background-color)
 (padding 0.2rem)
 (color ,article-card-category-color)
 (font-weight bold)
 (opacity 0.8))

(.empty-column-title
 (border-top 0.1rem solid ,almost-black)
 (margin-top 0.6rem))

(.column-title
 (padding 0.4rem 0 0.4rem 0)
 (margin 0.6rem 0 0.6rem 0)
 (border-top 0.1rem solid ,almost-black)
 (border-bottom 0.1rem dashed ,sub-color)
 (font-weight bold))

(.lightbox
 ;; (visibility hidden)
 (position fixed)
 (z-index 2)
 (width "100%")
 (height "100%")
 (opacity 0.7)
 (background grey)
 (display none))

(.lightbox-body-container
 (position fixed)
 (width 100%)
 (height 100%)
 (z-index 3)
 (display none))

(.lightbox-body
 (min-width 15rem)
 (position absolute)
 (height auto)
 (width auto)
 (left "50%")
 (top "50%")
 (background white)
 (border 0.2rem solid ,almost-black)
 (transform "translate(-50%, -50%)")
 (|-webkit-transform| "translate(-50%, -50%)")
 (|-moz-transform| "translate(-50%, -50%)")
 (|-ms-transform| "translate(-50%, -50%)")
 (padding 1rem)
 (padding-top 0.1rem)
 (z-index 3)
 (max-height "100%")
 (overflow-x scroll))

(.lightbox-full-width
 (width "100%")
 (height "100%"))

(|#submit-email-sign-up|
 (width "100%")
 (color white))

(.close-lightbox
 (cursor pointer))

(.add-content-button
 (width 100%)
 (background inherit)
 (border 0.1rem solid black)
 (font-size ,(font-size 2))
 (box-shadow 0 0 1px 1px "#999")
 (border-radius 0.2rem))

(|#add-interests-container|
 (display none))

,(mq '|@media only screen and (max-width: 40rem)|
     `(.column-title
       (padding-left 0.3rem)
       (border-top inherit)
       (border-bottom inherit)
       (background-color ,almost-black)
       (color ,white)))

(.upvote
 (cursor pointer)
 (margin-right 0.1rem))

(.slick-next
 (right 72px)
 (left 25px))

,(mq '|@media only screen and (min-width: 40rem)|
     `(.row.right-collapse-medium
       (padding-right 0)
       (padding-left 1.875rem))
     `(.article-card-image-container
       (float left)
       (margin-right 0.7rem)))

;; ,(mq '|@media only screen and (max-width: 64.063em)|
;;      `(.thumbnail-small
;;        (height 14rem)))


,(mq '|@media only screen and (max-width: 40rem)|
     `(.row.collapse-small
       (width auto)
       (margin 0)
       (max-width none))
     `(|.row.collapse-small>.columns|
         (padding-left 0)
         (padding-right 0))
     `(.row.right-collapse-small-half
        (padding-right 0)
        (padding-left 0.935rem))
     `(.row.left-collapse-small-half
        (padding-right 0)
        (padding-right 0.935rem))
     `(h6
       (font-size ,(font-size 'small))))



;; END NEWS STYLES


))