Skip to content
GitLab
Projects
Groups
Snippets
/
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
Menu
Open sidebar
spf
pelican-hyde
Commits
f946b964
Commit
f946b964
authored
Oct 25, 2015
by
José Guilherme Vanz
Browse files
Base pelican-hyde theme
parent
832c2933
Changes
9
Hide whitespace changes
Inline
Side-by-side
static/css/hyde.css
0 → 100644
View file @
f946b964
/*
* __ __
* /\ \ /\ \
* \ \ \___ __ __ \_\ \ __
* \ \ _ `\/\ \/\ \ /'_` \ /'__`\
* \ \ \ \ \ \ \_\ \/\ \_\ \/\ __/
* \ \_\ \_\/`____ \ \___,_\ \____\
* \/_/\/_/`/___/> \/__,_ /\/____/
* /\___/
* \/__/
*
* Designed, built, and released under MIT license by @mdo. Learn more at
* https://github.com/poole/hyde.
*/
/*
* Contents
*
* Global resets
* Sidebar
* Container
* Reverse layout
* Themes
*/
/*
* Global resets
*
* Update the foundational and global aspects of the page.
*/
html
{
font-family
:
"PT Sans"
,
Helvetica
,
Arial
,
sans-serif
;
}
@media
(
min-width
:
48em
)
{
html
{
font-size
:
16px
;
}
}
@media
(
min-width
:
58em
)
{
html
{
font-size
:
20px
;
}
}
/*
* Sidebar
*
* Flexible banner for housing site name, intro, and "footer" content. Starts
* out above content in mobile and later moves to the side with wider viewports.
*/
.sidebar
{
text-align
:
center
;
padding
:
2rem
1rem
;
color
:
rgba
(
255
,
255
,
255
,
.5
);
background-color
:
#202020
;
}
@media
(
min-width
:
48em
)
{
.sidebar
{
position
:
fixed
;
top
:
0
;
left
:
0
;
bottom
:
0
;
width
:
18rem
;
text-align
:
center
;
}
}
/* Sidebar links */
.sidebar
a
{
color
:
#fff
;
}
/* About section */
.sidebar-about
h1
{
color
:
#fff
;
margin-top
:
0
;
font-family
:
"Abril Fatface"
,
serif
;
font-size
:
3rem
;
}
.sidebar-about
.lead
{
font-size
:
.8rem
;
}
.sidebar-about
.profile-picture
{
margin
:
0
auto
;
border-radius
:
50%
;
border
:
2px
solid
#5b8da2
;
max-width
:
5rem
;
}
/* Sidebar nav */
.sidebar-nav
{
margin-bottom
:
1rem
;
}
.sidebar-nav-item
{
display
:
block
;
padding
:
.25rem
0.5rem
;
background
:
#7dafc4
;
margin
:
0
.2rem
;
border-radius
:
.25rem
;
text-transform
:
uppercase
;
font-size
:
.8rem
;
font-weight
:
bold
;
float
:
left
;
width
:
17%
;
}
a
.sidebar-nav-item
:hover
,
a
.sidebar-nav-item
:focus
{
background
:
#6096ac
;
text-decoration
:
none
;
}
.sidebar-nav-item.active
{
color
:
#6096ac
;
background
:
#fff
;
}
a
.sidebar-nav-item.active
:hover
,
a
.sidebar-nav-item.active
:focus
{
color
:
#fff
;
}
/* Sticky sidebar
*
* Add the `sidebar-sticky` class to the sidebar's container to affix it the
* contents to the bottom of the sidebar in tablets and up.
*/
@media
(
min-width
:
48em
)
{
.sidebar-sticky
{
position
:
absolute
;
right
:
1rem
;
bottom
:
1rem
;
left
:
1rem
;
}
}
/* Container
*
* Align the contents of the site above the proper threshold with some margin-fu
* with a 25%-wide `.sidebar`.
*/
.content
{
padding-top
:
4rem
;
padding-bottom
:
4rem
;
}
@media
(
min-width
:
48em
)
{
.content
{
max-width
:
38rem
;
margin-left
:
20rem
;
margin-right
:
2rem
;
}
}
@media
(
min-width
:
64em
)
{
.content
{
margin-left
:
22rem
;
margin-right
:
4rem
;
}
}
/*
* Reverse layout
*
* Flip the orientation of the page by placing the `.sidebar` on the right.
*/
@media
(
min-width
:
48em
)
{
.layout-reverse
.sidebar
{
left
:
auto
;
right
:
0
;
}
.layout-reverse
.content
{
margin-left
:
2rem
;
margin-right
:
20rem
;
}
}
@media
(
min-width
:
64em
)
{
.layout-reverse
.content
{
margin-left
:
4rem
;
margin-right
:
22rem
;
}
}
/*
* Themes
*
* As of v1.1, Hyde includes optional themes to color the sidebar and links
* within blog posts. To use, add the class of your choosing to the `body`.
*/
/* Base16 (http://chriskempson.github.io/base16/#default) */
/* Red */
.theme-base-08
.sidebar
{
background-color
:
#ac4142
;
}
.theme-base-08
.content
a
,
.theme-base-08
.related-posts
li
a
:hover
{
color
:
#ac4142
;
}
/* Orange */
.theme-base-09
.sidebar
{
background-color
:
#d28445
;
}
.theme-base-09
.content
a
,
.theme-base-09
.related-posts
li
a
:hover
{
color
:
#d28445
;
}
/* Yellow */
.theme-base-0a
.sidebar
{
background-color
:
#f4bf75
;
}
.theme-base-0a
.content
a
,
.theme-base-0a
.related-posts
li
a
:hover
{
color
:
#f4bf75
;
}
/* Green */
.theme-base-0b
.sidebar
{
background-color
:
#90a959
;
}
.theme-base-0b
.content
a
,
.theme-base-0b
.related-posts
li
a
:hover
{
color
:
#90a959
;
}
/* Cyan */
.theme-base-0c
.sidebar
{
background-color
:
#75b5aa
;
}
.theme-base-0c
.content
a
,
.theme-base-0c
.related-posts
li
a
:hover
{
color
:
#75b5aa
;
}
/* Blue */
.theme-base-0d
.sidebar
{
background-color
:
#6a9fb5
;
}
.theme-base-0d
.content
a
,
.theme-base-0d
.related-posts
li
a
:hover
{
color
:
#6a9fb5
;
}
/* Magenta */
.theme-base-0e
.sidebar
{
background-color
:
#aa759f
;
}
.theme-base-0e
.content
a
,
.theme-base-0e
.related-posts
li
a
:hover
{
color
:
#aa759f
;
}
/* Brown */
.theme-base-0f
.sidebar
{
background-color
:
#8f5536
;
}
.theme-base-0f
.content
a
,
.theme-base-0f
.related-posts
li
a
:hover
{
color
:
#8f5536
;
}
static/css/poole.css
0 → 100644
View file @
f946b964
/*
* ___
* /\_ \
* _____ ___ ___\//\ \ __
* /\ '__`\ / __`\ / __`\\ \ \ /'__`\
* \ \ \_\ \/\ \_\ \/\ \_\ \\_\ \_/\ __/
* \ \ ,__/\ \____/\ \____//\____\ \____\
* \ \ \/ \/___/ \/___/ \/____/\/____/
* \ \_\
* \/_/
*
* Designed, built, and released under MIT license by @mdo. Learn more at
* https://github.com/poole/poole.
*/
/*
* Contents
*
* Body resets
* Custom type
* Messages
* Container
* Masthead
* Posts and pages
* Pagination
* Reverse layout
* Themes
*/
/*
* Body resets
*
* Update the foundational and global aspects of the page.
*/
*
{
-webkit-box-sizing
:
border-box
;
-moz-box-sizing
:
border-box
;
box-sizing
:
border-box
;
}
html
,
body
{
margin
:
0
;
padding
:
0
;
}
html
{
font-family
:
"Helvetica Neue"
,
Helvetica
,
Arial
,
sans-serif
;
font-size
:
16px
;
line-height
:
1.5
;
}
@media
(
min-width
:
38em
)
{
html
{
font-size
:
20px
;
}
}
body
{
color
:
#515151
;
background-color
:
#fff
;
-webkit-text-size-adjust
:
100%
;
-ms-text-size-adjust
:
100%
;
}
/* No `:visited` state is required by default (browsers will use `a`) */
a
{
color
:
#268bd2
;
text-decoration
:
none
;
}
a
strong
{
color
:
inherit
;
}
/* `:focus` is linked to `:hover` for basic accessibility */
a
:hover
,
a
:focus
{
text-decoration
:
underline
;
}
/* Headings */
h1
,
h2
,
h3
,
h4
,
h5
,
h6
{
margin-bottom
:
.5rem
;
font-weight
:
bold
;
line-height
:
1.25
;
color
:
#313131
;
text-rendering
:
optimizeLegibility
;
}
h1
{
font-size
:
2rem
;
}
h2
{
margin-top
:
1rem
;
font-size
:
1.5rem
;
}
h3
{
margin-top
:
1.5rem
;
font-size
:
1.25rem
;
}
h4
,
h5
,
h6
{
margin-top
:
1rem
;
font-size
:
1rem
;
}
/* Body text */
p
{
margin-top
:
0
;
margin-bottom
:
1rem
;
}
strong
{
color
:
#303030
;
}
/* Lists */
ul
,
ol
,
dl
{
margin-top
:
0
;
margin-bottom
:
1rem
;
}
dt
{
font-weight
:
bold
;
}
dd
{
margin-bottom
:
.5rem
;
}
/* Misc */
hr
{
position
:
relative
;
margin
:
1.5rem
0
;
border
:
0
;
border-top
:
1px
solid
#eee
;
border-bottom
:
1px
solid
#fff
;
}
abbr
{
font-size
:
85%
;
font-weight
:
bold
;
color
:
#555
;
text-transform
:
uppercase
;
}
abbr
[
title
]
{
cursor
:
help
;
border-bottom
:
1px
dotted
#e5e5e5
;
}
/* Code */
code
,
pre
{
font-family
:
Menlo
,
Monaco
,
"Courier New"
,
monospace
;
}
code
{
padding
:
.25em
.5em
;
font-size
:
85%
;
color
:
#bf616a
;
background-color
:
#f9f9f9
;
border-radius
:
3px
;
}
pre
{
display
:
block
;
margin-top
:
0
;
margin-bottom
:
1rem
;
padding
:
1rem
;
font-size
:
.8rem
;
line-height
:
1.4
;
white-space
:
pre
;
white-space
:
pre-wrap
;
word-break
:
break-all
;
word-wrap
:
break-word
;
background-color
:
#f9f9f9
;
}
pre
code
{
padding
:
0
;
font-size
:
100%
;
color
:
inherit
;
background-color
:
transparent
;
}
/* Pygments via Jekyll */
.highlight
{
margin-bottom
:
1rem
;
border-radius
:
4px
;
}
.highlight
pre
{
margin-bottom
:
0
;
}
/* Gist via GitHub Pages */
.gist
.gist-file
{
font-family
:
Menlo
,
Monaco
,
"Courier New"
,
monospace
!important
;
}
.gist
.markdown-body
{
padding
:
15px
;
}
.gist
pre
{
padding
:
0
;
background-color
:
transparent
;
}
.gist
.gist-file
.gist-data
{
font-size
:
.8rem
!important
;
line-height
:
1.4
;
}
.gist
code
{
padding
:
0
;
color
:
inherit
;
background-color
:
transparent
;
border-radius
:
0
;
}
/* Quotes */
blockquote
{
padding
:
.5rem
1rem
;
margin
:
.8rem
0
;
color
:
#7a7a7a
;
border-left
:
.25rem
solid
#e5e5e5
;
}
blockquote
p
:last-child
{
margin-bottom
:
0
;
}
@media
(
min-width
:
30em
)
{
blockquote
{
padding-right
:
5rem
;
padding-left
:
1.25rem
;
}
}
img
{
display
:
block
;
max-width
:
100%
;
margin
:
0
0
1rem
;
border-radius
:
5px
;
}
/* Tables */
table
{
margin-bottom
:
1rem
;
width
:
100%
;
border
:
1px
solid
#e5e5e5
;
border-collapse
:
collapse
;
}
td
,
th
{
padding
:
.25rem
.5rem
;
border
:
1px
solid
#e5e5e5
;
}
tbody
tr
:nth-child
(
odd
)
td
,
tbody
tr
:nth-child
(
odd
)
th
{
background-color
:
#f9f9f9
;
}
/*
* Custom type
*
* Extend paragraphs with `.lead` for larger introductory text.
*/
.lead
{
font-size
:
1.25rem
;
font-weight
:
300
;
}
/*
* Messages
*
* Show alert messages to users. You may add it to single elements like a `<p>`,
* or to a parent if there are multiple elements to show.
*/
.message
{
margin-bottom
:
1rem
;
padding
:
1rem
;
color
:
#717171
;
background-color
:
#f9f9f9
;
}
/*
* Container
*
* Center the page content.
*/
.container
{
max-width
:
38rem
;
padding-left
:
1rem
;
padding-right
:
1rem
;
margin-left
:
auto
;
margin-right
:
auto
;
}
/*
* Masthead
*
* Super small header above the content for site name and short description.
*/
.masthead
{
padding-top
:
1rem
;
padding-bottom
:
1rem
;
margin-bottom
:
3rem
;
}
.masthead-title
{
margin-top
:
0
;
margin-bottom
:
0
;
color
:
#505050
;
}
.masthead-title
a
{
color
:
#505050
;
}
.masthead-title
small
{
font-size
:
75%
;
font-weight
:
400
;
color
:
#c0c0c0
;
letter-spacing
:
0
;
}
/*
* Posts and pages
*
* Each post is wrapped in `.post` and is used on default and post layouts. Each
* page is wrapped in `.page` and is only used on the page layout.
*/
.page
,
.post
{
margin-bottom
:
4em
;
}
/* Blog post or page title */
.page-title
,
.post-title
,
.post-title
a
{
color
:
#303030
;
}
.page-title
,
.post-title
{
margin-top
:
0
;
}
/* Meta data line below post title */
.post-date
{
display
:
block
;
margin-top
:
-.5rem
;
margin-bottom
:
1rem
;
color
:
#9a9a9a
;
}
/* Related posts */
.related
{
padding-top
:
2rem
;
padding-bottom
:
2rem
;
border-top
:
1px
solid
#eee
;
}
.related-posts
{
padding-left
:
0
;
list-style
:
none
;
}
.related-posts
h3
{
margin-top
:
0
;
}