Initial commit.
This commit is contained in:
785
res/scss/news.scss
Normal file
785
res/scss/news.scss
Normal file
@@ -0,0 +1,785 @@
|
||||
;; -*- 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
|
||||
|
||||
|
||||
))
|
||||
Reference in New Issue
Block a user