The CSS for remy.blog

remy-dot-blog.less

@text: #757575;
@content: #000;

html {
  background: white;
  font-size: 14px;
  color: @text;
  font-family: 'Source Code Pro', monospace !important
}

body {
  margin: 0 auto 3rem auto;
}

@media all and (min-width: 0px) {
  #page {
    display: flex;
    justify-content: center;
    flex-direction: column-reverse;
  }

  #content {
    margin: 0 20px;
    margin: 0 2vw;
  }

  #sidebar {
    border-top: 2px solid @text;
    max-width: none;
    margin-right: 0;
  }
}

@media all and (min-width: 720px) {
  #page {
    flex-direction: row;
  }

  #sidebar {
    border-top: 0;
    min-width: 180px;
		max-width: 20%;
  }

  #content {
    margin-right: 20px;
    margin-right: 2vw;
  }
}

@media all and (min-width: 1024px) {
  #content {
    margin-right: 10%;
  }
}

#sidebar {
  opacity: 0.7;
  position: relative !important;
  margin-right: 20px;
  margin-right: 2vw;  
  flex-shrink: 1;
  
  &:hover {
    opacity: 1;
    color: @content;
    h2 a,
    h2,
    h1 a {
      color: @content;
    }

    h2 a:hover,
    h1 a:hover {
      text-decoration: underline;  
    }
  }

  font-size: 0.8rem;
  ol,
  ul,
  .widget-title,
	.textwidget,
  header {
    margin: 0 10px;
  }

  ul, ol {
    padding: 0;
    list-style: none;
    line-height: 1.2rem;
  
    li {
      margin: 0.5rem 0;
    }
  }

  .site-branding {
    button {
      display: none;
    }
  }

  .widget-title {
    text-transform: uppercase;
    font-size: 1rem;
    margin-bottom: 0;
    margin-top: 2rem;
  
    a {
      text-decoration: none;
    }
  }
}

#content {
  max-width: 640px;
  max-width: 80ch;

  font-size: 1.1rem;
  line-height: 2rem;
  
  .entry-title {
    color: @content;
    font-size: 2rem;
    
    a {
      color: @content;
    }
    
    &:before {
      content: '# '
    }
  }

  .entry-content {
    color: @content;
    
    em {
      font-style: none;
     
      &:before,
      &:after {
       content: '_';
      }
    }

    strong {
      font-weight: 700;
     
      &:before,
      &:after {
       content: '*';
      }
    }

    footer {
      color: @text;
    }
  }
}

.widget.widget_wpcom_social_media_icons_widget li {
  display: inline-block;
  padding: 5px;
  &:first-child {
    padding-left: 0;
  }
}

.navigation {
  margin: 3rem 0;
  color: @text;
  a {
    color: @text;
    &:hover {
      color: @content;
    }
  }
  a.next,
  a.previous {
    display: inline;
  }
	
	.nav-next a:hover .post-title,
	.nav-previous a:hover .post-title {
		color: @content;
	}
	
	.nav-links > * {
		background: none;
		color: @text;
		
		a,
		span.post-title {
			color: @text;
			&:hover {
				color: @content;
			}
		}
	}

  h2,
  .page-numbers {
    display: none;
  }
}

a {
  color: @text;
  &:hover {
    color: @content;
  }
}

.site-title {
	color: @content;
	font-size: 2em;
	font-weight: bold;
	margin: 0.67em 0;
	
	a {
		text-decoration: none;
		color: @content;
		
		&:hover {
			text-decoration: underline;	
		}
	}
}

img.size-full,
.post-thumbnail img {
  max-width: 100%;
	width: 100%;
	height: 100%;
  border-radius: 3px;
	display: block;
	margin: 0 auto;
}

.post-thumbnail img {
	border-top-left-radius: 0;
	border-top-right-radius: 0;
}

// hidden stuff
.skip-link,
.byline,
time.updated,
.rsswidget img,
.author-info,
.meta-nav,
.cat-links,
.tags-links,
#colophon,
_ {
  display: none;
}