jefklakscodex/themes/jefklak-creative-portfolio/assets/sass/_codex.sass

html
	font-size: 1.0rem
	@media (min-width: 960px)
		font-size: 1.15rem


body, h1, h2, h3, h4, article p, article li, .box-masonry .box-masonry-text p, .copyright, .copyright p.credit a
	color: var(--textcolor)

.latest-all
	float: right
	margin-top: -20px
	margin-bottom: 20px

.logo
	max-width: 100%
	height: auto

.box-masonry .box-masonry-text p
	font-size: 0.9rem

body
	background-color: var(--bglight)
	line-height: 1.7
	height: 100%

	@media (min-width: 960px)
		font-size: inherit

html body, h1, h2, h3, h4, h5, h6
  font-family: $font-stack

.meel, a.internal
  cursor: pointer

.support
  font-size: 1rem
  margin-bottom: 4rem
  noscript
    border-left: 5px solid darkred
    padding: 0.5rem

.avatar
  float: right
  margin-top: 0rem
  margin-left: 1.5rem
  img
    border-radius: 50%



.rfloat 
	float: right

.metatitle
	color: grey
	font-weight: bold

h1, .h1 
	font-size: 2.5rem
	font-weight: 700
	margin-bottom: 2rem

h2, .h2 
	font-size: 2rem
	font-weight: 700
	margin-top: 2rem
	margin-bottom: 2rem

h3, .h3 
	font-size: 1.7rem
	font-weight: 700
	margin-top: 2rem
	margin-bottom: 2rem

h4, .h4 
	font-size: 1.2rem
	font-weight: 700

ul, ol 
	margin-bottom: 2rem


blockquote 
	font-size: 1.1rem
	font-style: italic
	border-left: 7px solid var(--accent)
	background-color: var(--bglightshade)
	border-radius: 5px


button 
	background-color: var(--accent) !important
	color: white !important
	border-color: darkgrey !important

.sorted
	box-shadow: 5px 5px 5px 1px rgba(0,0,0,0.35)

	&-asc:before
		content: "​ ▼ ​"
	&-desc:before
		content: "​ ▲ ​"


.small-navbar button 
	position: fixed
	z-index: 99
	margin-top: -1rem
	margin-left: 1rem


hr 
	border-top: 1px solid var(--accent)


#rsslink 
	position: absolute
	right: 0
	z-index: 99

	visibility: hidden
	@media only screen and (min-width: 1200px)
		visibility: visible

footer 
	position: fixed
	bottom: 0
	right: 0
	margin: 0
	height: 140px

	.img-responsive
		margin: 0

	visibility: hidden
	@media only screen and (min-width: 1200px)
		visibility: visible


.content-column 
	padding-left: 30px
	padding-right: 30px
	padding-top: 30px

	@media (min-width: 1200px)
		padding-left: 5rem
	
	&-content
		@media (min-width: 1200px)
			padding: 0

	div.row 
		padding-bottom: 14px


.col-lg-8
	@media (min-width: 1200px) 
		width: 72%
	

a.external
		background-image: url(/img/external.png)
		background-position: center right
		background-repeat: no-repeat
		padding-right: 13px
		border-bottom: 1px dotted #526A43

		&-no
			background: none
			padding-right: 0

		&:hover
			text-decoration: none

.footnotes
	font-size: 0.9em
	

article
	figure
		margin-top: 1.5rem
		margin-bottom: 1.5rem

		figcaption
			padding: 10px
			text-align: center
			font-style: italic
			color: grey

	img 
		border: 1px solid black
		border-radius: 5px

	.video-mask
		padding-top: 1.2rem
		padding-bottom: 1.2rem
	    width: 100%
	    border-radius: 5px
	    overflow: hidden

	a:hover 
		text-decoration: none

	a:not([href]) 
		padding-right: 0
		background-image: none

	p, li 
		text-align: left !important

main li
	list-style-type: circle

.no-border
	border: none !important

.modal-header 
	display: none


a, .box-masonry h4 a, .link
	color: var(--textlink)
	text-decoration: none
	border-bottom: 1px solid darkgrey

a:hover, .box-masonry h4 a:hover, .link:hover
	color: var(--textlink)
	background-color: #d1d3bd
 

.container-fluid 
	padding-left: 0
	height: 100%


.box-masonry 
	background-color: var(--bglightshade)
	border: 1px solid var(--accent)
	border-radius: 5px

	&:hover
		box-shadow: 0 0 5px black
		.box-masonry-hover-text-header, .box-masonry-hover-center
			opacity: 1
		.box-masonry-image.with-hover-overlay:before
			opacity: 0.3
		.box-masonry-image.with-hover-icon:after
			opacity: 1

	.box-masonry-image 
		background: none
		padding-top: 10px


.img-inactive 
	display: block
	width: 100%


.img-active 
	display: none
	width: 100%


.pages
	color: var(--accent)

.pagination > .disabled > span
	background-color: var(--bgdarker)

.pagination > li > a, .pagination > li > span
	background-color: var(--bgdark)
	border: 1px solid var(--bgdarker)
	color: #333

.pagination > .active > a
	background-color: var(--bglight)
	color: #333


.categories
	padding-top: 1.5rem
	color: var(--textlinktag)

	kbd
		padding: 0.2rem 0.5rem 0.2rem 0.5rem
		background-color: var(--bgdark)
		color: var(--textlinktag)

#skiptocontent
  a
    z-index: 99
    padding: 6px
    position: absolute
    top: -50px
    left: 0px
    color: white
    border 1px solid white
    border-top-right-radius: 8px
    border-bottom-right-radius: 8px
    background: black
    -webkit-transition: top 1s ease-out
    transition: top 1s ease-out

    &:focus
      position: absolute
      left: 0px
      top: 0px
      outline-color: transparent
      -webkit-transition: top .1s ease-in
      transition: top .1s ease-in

.sl-wrapper
	.sl-counter
		font-weight: bold

	.sl-caption
		text-align: center
		background: rgba(0,0,0,0.65) !important

.score
	border: none
	width: 1em
	&-on
		opacity: 1
	&-off
		opacity: 0.2