Skip to content

Instantly share code, notes, and snippets.

@remy remy/remy-dot-blog.less
Last active Jul 8, 2017

Embed
What would you like to do?
The CSS for remy.blog
@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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.