index.styl

@require './font.styl'
@require './config.styl'
@require './code.styl'
@require './wrapper.styl'
@require './sw-popup.styl'


@import '../node_modules/bootstrap-4-stylus/bootstrap.styl'

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap');

$color_1 = rgba(0, 0, 0, 0.54)
$color_2 = rgba(0, 0, 0, 0.44)
$color_3 = rgba(0, 0, 0, 0.8)
$primary_font_family = 'Inter'
$second_font_family = 'Inter'
body
  font-family: $primary_font_family
  padding-top: 120px
  color: $color_3
  background: #fff
.wrapmain
  min-height:600px
.font-secondary
   font-family: $second_font_family
img
  max-width: 100%
a
  color: $accentColor
.navbar-brand
  font-size: 1.6rem
  font-weight: 700
  letter-spacing: -.5px
  img
    width: 30px
.navbar
  position: absolute
  top: 0
  left: 0
  right: 0
  padding: .5rem 1.5rem
  background-color: rgba(255,255,255,.9)
  backdrop-filter: blur(5px)
  .tagline
    color: $color_2
.nav-link
  margin-left: 6px
  margin-right: 6px
  font-size: 0.95rem
.dropdown-item
  font-size: 0.95rem
.navbar-nav
  display: flex
  vertical-align: middle
  align-items: center
.nav-link.withbtn
  padding-left: 0
  padding-right: 0
  .btn-sm
    padding: 0.25rem 1rem
.search-box input
  min-width:14rem
.article-info
  display: flex
  flex-direction: row
  justify-content: space-between
  flex-basis: auto
.article-info-left
  display: flex
.profile-avatar
  display: block
  padding-right: 10px
.avatar-image
  width: 40px
  height: 40px
  display: inline-block
  vertical-align: middle
  border-radius: 100%
.username
  color: $color_3
  font-size: 13px
.date
  color: $color_2
  font-size: 13px
.read-time
  color: $color_2
  font-size: 13px
.card-panel
  display: inline-block
  margin: 30px 0 40px 0
  width: 100%
.card-panel-header
  border-bottom: 1px solid rgba(0, 0, 0, 0.15)
  margin-bottom: 25px
.card-panel-heading
  color: $color_3
  display: inline-block
  font-size: 20px
  line-height: 1.2
  letter-spacing: 0
  font-weight: 700
  font-style: normal
  padding-bottom: 20px
  border-bottom: 1px solid rgba(0, 0, 0, 0.44) !important
.card-container
  margin-bottom: 30px
.card-inside
  margin-bottom: 10px
.card-container.intro
  -ms-flex: 0 0 100%
  flex: 0 0 100%
  max-width: 100%
  .card
    display: flex
    flex-direction: row
    -ms-flex-direction: row
    padding: 0
  .card-header-image
    width: 50%
    margin: 0px
    img
      height: 100%
      min-height: 300px
  .card-subheading
    padding-top: 0
  .card-inside
    width: 50%
    padding: 30px 30px 30px 40px
    .heading
      font-size: 30px
    p
      font-size: 22px
      margin-bottom: 50px
      color: $color_1
  .meta-bottom
    position: absolute
    bottom: 30px
    right: 30px
    left: calc(50% + 40px)
.card
  padding: 20px
  border-radius: 1em
.card-header-image
  display: block
  margin: -20px -20px 0 -20px
  img
    border-radius: 1em 1em 0 0
    object-fit: cover
    object-position: center
    height: 180px
    width: 100%
    cursor: pointer
.card-subheading a
  color: $color_2
  font-size: 13px;
  padding-top: 15px;
  padding-bottom: 5px;
  display: inline-block;

  &:after
    content:','
    margin-right:3px
  &:last-child:after
    content: ''
.heading
  font-family: $second_font_family
  font-size: 22px
  font-weight: 700
  line-height: 1.26
  cursor: pointer
  transition: all .2s
  color:inherit
  &:hover
    text-decoration:none
.article-head, .content__default
    line-height: 1.3
.article-head
    font-weight: 700
    font-family: $second_font_family
.post-meta-tags a
  font-size: 16px
  margin-right:10px
  color:#333
  &:after
    content:''
.content__default
  font-size: 1.125em
  line-height:1.8
  p, pre, iframe, img, div[class*="language-"] pre, div[class*="language-"] pre[class*="language-"]
    margin-top:1.2em
    margin-bottom:1.2em
  p:first-of-type
    margin-top:0
  h1
    font-weight:700
  h1, h2, h3, h4, h5, h6
    font-weight:600
    font-family:$primary_font_family
    margin-top:1.5em
    margin-bottom:.5em
  blockquote
    padding-left: 1.25rem
    border-left: 4px solid rgba(0, 0, 0, 0.125)
  table
    width: 100%
  table td, table th
    padding: .25rem
    border: 1px solid rgba(0, 0, 0, 0.125)
.featured-img
  border-radius:0px
.mt-40
  margin-top:40px;
.mb-40
  margin-bottom:40px
.newsletter
  margin:40px 0 60px
.newsletter__title
  font-weight:700
.newsletter .newsletter__fields
  grid-template-columns: 2fr 1fr;
.lead
  color: $color_1
code
  font-size: .85em
  border-radius: 3px
.themefooter
  background-color: rgba(0, 0, 0, 1)
  margin-top: 80px
  padding: 50px 0
  color: rgba(255, 255, 255, 0.5)
  a
    color: #fff
    transition: all .2s
    &:hover
      color: #fff
      transition: all .2s
  p
    margin-bottom: 10px
  .logofooter
    width: 50px

.blog-tag
  text-decoration: none !important
  display inline-flex
  align-items center
  height 45px
  word-break break-word
  font-size 20px
  margin-right 20px
  margin-bottom 20px
  padding 0 15px
  border-radius 5px
  font-weight 300
  text-align left
  box-sizing border-box
  transition background-color 0.3s
  color $darkTextColor
  border 1px solid $darkBorderColor
  text-decoration none
  transition all 250ms ease-in-out

  &:hover
    color $accentColor !important
    border 1px solid $accentColor
    box-shadow 0 0 5px $accentColor

@media screen and (max-width: 768px)
  .blog-tag
    font-size 14px
    padding 3px 10px
    margin-right 10px
    margin-bottom 10px

h1, .h1
  font-size: 2.625rem

h2, .h2
  font-size: 1.625rem

h3, .h3
  font-size: 1.375rem

h4, .h4
  font-size: 1.25rem

h5, .h5
  font-size: 1.125rem

h6, .h6
  font-size: 1rem