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
	color: $textcolor

.copyright
	color: $textcolor
	font-size: 0.8rem
	p.credit a
		color: $textcolor

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

.logo
	max-width: 100%
	height: auto


body
	background-color: var(--bglight)
	line-height: 1.7
	margin: 0
	box-sizing: border-box
	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
	color: lighten($textcolor, 10%)
	font-size: 2.5rem
	font-weight: 700
	margin-bottom: 2rem
	margin-top: 0

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

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

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
	padding: 0.8rem
	margin: 0 0 24px

	p
		margin: 0

p
  margin: 0 0 24px


button
	display: inline-block
	padding: 6px 12px
	font-size: 1rem
	touch-action: manipulation
	cursor: pointer
	font-weight: 400
	text-align: center 
	background-color: var(--accent)
	color: white
	border: 1px solid transparent
	border-color: darkgrey
	border-radius: 4px
	transition: all 0.2s ease-out

	&:hover
		box-shadow: 0 0 5px grey


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


hr
	border: 0 
	border-top: 1px solid var(--accent)
	margin-top: 24px
	margin-bottom: 24px

.img-responsive
	max-width: 100%
	height: auto
	margin: 0 auto
	display: block

#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

a
	&.lbox
		border-bottom: none

		&:hover
			background-color: unset

	&.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: 1.5rem
		@media (min-width: 992px)
			margin: 1.5rem 0 1.5rem 0

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

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

	.dualscreens
		display: grid
		grid-template-columns: repeat(2, 1fr)
		grid-column-gap: 10px

		figure
			margin: 0

	.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
	ul li
		list-style-type: circle

.no-border
	border: none !important

.modal-header 
	display: none


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

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

.pages
	color: var(--accent)


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

	kbd
		padding: 0.2rem 0.5rem 0.2rem 0.5rem
		background-color: var(--bgdark)
		border-radius: 5px
		box-shadow: inset 0 -1px 0 rgba(0,0,0,.25)
		font-size: 90%
		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
	height: 1.1em
	margin-bottom: -4px