/*
- __ __
-/\ \ /\ \
-\ \ \___ __ __ \_\ \ __
- \ \ _ `\/\ \/\ \ /'_` \ /'__`\
- \ \ \ \ \ \ \_\ \/\ \_\ \/\ __/
- \ \_\ \_\/`____ \ \___,_\ \____\
- \/_/\/_/`/___/> \/__,_ /\/____/
- /\___/
- \/__/
-
-Hyde is an elegant, open source, mobile first theme for Jekyll. It includes
-lightweight styles and placeholder content to get you up and running with a
-simple blog in no time.
-
-Designed, built, and released under MIT license by @mdo.
-
-Learn more at http://andhyde.com or https://github.com/mdo/hyde.
-
-*/
+ * __ __
+ * /\ \ /\ \
+ * \ \ \___ __ __ \_\ \ __
+ * \ \ _ `\/\ \/\ \ /'_` \ /'__`\
+ * \ \ \ \ \ \ \_\ \/\ \_\ \/\ __/
+ * \ \_\ \_\/`____ \ \___,_\ \____\
+ * \/_/\/_/`/___/> \/__,_ /\/____/
+ * /\___/
+ * \/__/
+ *
+ * Designed, built, and released under MIT license by @mdo. Learn more at
+ * https://github.com/poole/hyde.
+ */
/*
* Contents
*
- * Body resets
- * Custom type
- * Links
- * Masthead
+ * Global resets
+ * Sidebar
* Container
- * Posts
- * Error page
- * Pagination
+ * Reverse layout
* Themes
*/
/*
- * Body resets
+ * Global 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: "PT Sans", Helvetica, Arial, sans-serif;
}
-
-body {
- font-family: "Open Sans", Helvetica, Arial, sans-serif;
- font-size: 16px;
- line-height: 1.5;
- color: #454441;
- background-color: #fff;
-}
-@media (min-width: 990px) {
- body {
- font-size: 18px;
+@media (min-width: 48rem) {
+ html {
+ font-size: 16px;
}
}
-
-h1, h2, h3, h4, h5, h6 {
- margin: 0 0 10px;
- font-weight: 600;
- line-height: 1.25;
- text-rendering: optimizeLegibility;
-}
-h1 {
- font-size: 40px;
-}
-h2 {
- margin-top: 20px;
- font-size: 32px;
-}
-h3 {
- margin-top: 24px;
- font-size: 24px;
-}
-h4, h5, h6 {
- margin-top: 16px;
- font-size: 16px;
-}
-
-p {
- margin: 0 0 15px;
-}
-
-ul, ol {
- margin-bottom: 15px;
-}
-
-hr {
- position: relative;
- margin: 40px 0;
- border: 0;
- border-top: 1px solid #eee;
- border-bottom: 1px solid #fff;
-}
-
-strong {
- color: #222;
-}
-
-abbr {
- background-color: #eee;
- display: inline-block;
- padding: 3px;
- font-size: 13px;
- font-weight: bold;
- color: #555;
- text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5);
- text-transform: uppercase;
- border-radius: 3px;
-}
-
-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: 0 0 14px;
- padding: 15px 20px;
- font-size: 16px;
- 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;
-}
-.highlight {
- margin-bottom: 15px;
- border-radius: 4px;
-}
-.highlight pre {
- margin-bottom: 0;
-}
-
-/* Quotes */
-blockquote {
- padding: 5px 30px 5px 25px;
- margin: 15px 0;
- border-left: 5px solid #eee;
-}
-blockquote p {
- margin-bottom: 0;
- color: #7a7a7a;
- text-indent: -0.4em;
-}
-blockquote p:before {
- content: '\201C';
-}
-blockquote p:after {
- content: '\201D';
-}
-
-img {
- display: block;
- margin: 0 0 15px;
- border-radius: 5px;
-}
-
-
-/*
- * Custom type
- *
- * Extend paragraphs with `.lead` for larger introductory text.
- */
-
-.lead {
- font-size: 20px;
- font-weight: 300;
-}
-@media (min-width: 990px) {
- .lead {
- font-size: 24px;
+@media (min-width: 58rem) {
+ html {
+ font-size: 20px;
}
}
/*
- * Links
+ * Sidebar
*
- * No `:visited` state is required by default (browsers will use `a`). `:focus`
- * is linked to `:hover` for basic accessibility.
+ * 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.
*/
-a {
- font-weight: 600;
- color: #222;
- text-decoration: none;
+.sidebar {
+ text-align: center;
+ padding: 2rem 1rem;
+ color: rgba(255,255,255,.5);
+ background-color: #202020;
}
-a:hover,
-a:focus {
- text-decoration: underline;
+@media (min-width: 48rem) {
+ .sidebar {
+ position: fixed;
+ top: 0;
+ left: 0;
+ bottom: 0;
+ width: 18rem;
+ text-align: left;
+ }
}
-
-/*
- * Masthead
- *
- * Sidebar banner for housing site name, intro, and colophon (footer).
- */
-
-/* Sidebar masthead */
-.masthead {
+/* Sidebar links */
+.sidebar a {
color: #fff;
- background-color: #2a2a2a;
-}
-.masthead-inner {
- padding: 20px;
}
-/* Masthead content */
-.masthead h1 {
- margin-top: 0;
- font-family: "Abril Fatface";
-}
-.masthead .lead {
- margin-bottom: 0;
-}
-.masthead a {
+/* About section */
+.sidebar-about h1 {
color: #fff;
+ margin-top: 0;
+ font-family: "Abril Fatface", serif;
+ font-size: 3.25rem;
}
-/* Footer area of masthead */
-.colophon {
- margin-top: 20px;
- color: rgba(255,255,255,.5);
-}
-.colophon-links {
+/* Sidebar nav */
+.sidebar-nav {
padding-left: 0;
list-style: none;
}
-.colophon-links li {
- color: inherit;
+.sidebar-nav-item {
+ display: block;
}
-
-/* Responsive masthead */
-@media (min-width: 768px) {
- .masthead-inner {
- padding: 40px;
- }
+a.sidebar-nav-item:hover,
+a.sidebar-nav-item:focus {
+ text-decoration: underline;
}
-@media (min-width: 990px) {
- /* Fix the masthead to the side for impact and awesomeness */
- .masthead {
- position: fixed;
- top: 0;
- left: 0;
- bottom: 0;
- width: 25%;
- margin-bottom: 0;
- }
- .masthead-inner {
+.sidebar-nav-item.active {
+ font-weight: bold;
+}
+
+/* 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: 48rem) {
+ .sidebar-sticky {
position: absolute;
- bottom: 0;
- right: 0;
- left: 0;
- }
- .masthead h1 {
- font-size: 64px;
- }
- .colophon {
- margin-top: 40px;
+ 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 `.masthead`.
+ * with a 25%-wide `.sidebar`.
*/
.content {
- padding: 40px 20px;
+ padding-top: 4rem;
+ padding-bottom: 4rem;
}
-/* Center container in available real estate */
-@media (min-width: 990px) {
+@media (min-width: 48rem) {
.content {
- padding: 60px 0;
- }
- .container {
- width: 55%;
- margin-left: 35%;
- margin-right: 10%;
+ max-width: 38rem;
+ margin-left: 20rem;
+ margin-right: 2rem;
}
}
-
-/*
- * Posts
- *
- * Each post is wrapped in `.post`. Used on default and post layouts.
- */
-
-/* Single post */
-.post {
- margin-bottom: 40px;
-}
-@media (min-width: 990px) {
- .post {
- margin-bottom: 60px;
- }
-}
-
-/* Meta data line below post title */
-.post-date {
- display: block;
- margin: -10px 0 10px;
- color: #9a9a9a;
-}
-
-/* Related posts */
-.related {
- padding-top: 20px;
- padding-bottom: 40px;
- border-top: 1px solid #eee;
-}
-.related-posts {
- padding-left: 0;
- list-style: none;
-}
-.related-posts h3 {
- margin-top: 0;
-}
-.related-posts li small {
- font-size: 75%;
- color: #999;
-}
-.related-posts li a:hover {
- color: #000;
- text-decoration: none;
-}
-.related-posts li a:hover small {
- color: inherit;
-}
-
-
-/*
- * Pagination
- *
- * Super lightweight (HTML-wise) blog pagination. `span`s are provide for when
- * there are no more previous or next posts to show.
- */
-
-.pagination {
- overflow: hidden; /* clearfix */
- margin-top: 40px;
- font-weight: bold;
- color: #ccc;
- text-align: center;
- border-top: 1px solid #eee;
-}
-/* Pagination should float when space is plentiful */
-@media (min-width: 990px) {
- .pagination {
- margin-bottom: 60px;
- border: 1px solid #eee;
+@media (min-width: 64rem) {
+ .content {
+ margin-left: 22rem;
+ margin-right: 4rem;
}
}
-.pagination a,
-.pagination span {
- float: left;
- width: 50%;
- padding: 20px;
-}
-.pagination a:first-child,
-.pagination span:first-child {
- border-right: 1px solid #eee;
-}
-.pagination a:hover {
- text-decoration: none;
- background-color: #f5f5f5;
-}
-
/*
* Reverse layout
*
- * Flip the orientation of the page by placing the `.masthead` on the right.
+ * Flip the orientation of the page by placing the `.sidebar` on the right.
*/
-@media (min-width: 990px) {
- .layout-reverse .masthead {
+@media (min-width: 48rem) {
+ .layout-reverse .sidebar {
left: auto;
right: 0;
}
- .layout-reverse .container {
- margin-left: 10%;
- margin-right: 35%;
+ .layout-reverse .content {
+ margin-left: 2rem;
+ margin-right: 20rem;
}
}
+@media (min-width: 64rem) {
+ .layout-reverse .content {
+ margin-left: 4rem;
+ margin-right: 22rem;
+ }
+}
+
+
/*
* Themes
/* Base16 (http://chriskempson.github.io/base16/#default) */
/* Red */
-.theme-base-08 .masthead {
+.theme-base-08 .sidebar {
background-color: #ac4142;
}
-.theme-base-08 .container a,
+.theme-base-08 .content a,
.theme-base-08 .related-posts li a:hover {
color: #ac4142;
}
/* Orange */
-.theme-base-09 .masthead {
+.theme-base-09 .sidebar {
background-color: #d28445;
}
-.theme-base-09 .container a,
+.theme-base-09 .content a,
.theme-base-09 .related-posts li a:hover {
color: #d28445;
}
/* Yellow */
-.theme-base-0a .masthead {
+.theme-base-0a .sidebar {
background-color: #f4bf75;
}
-.theme-base-0a .container a,
+.theme-base-0a .content a,
.theme-base-0a .related-posts li a:hover {
color: #f4bf75;
}
/* Green */
-.theme-base-0b .masthead {
+.theme-base-0b .sidebar {
background-color: #90a959;
}
-.theme-base-0b .container a,
+.theme-base-0b .content a,
.theme-base-0b .related-posts li a:hover {
color: #90a959;
}
/* Cyan */
-.theme-base-0c .masthead {
+.theme-base-0c .sidebar {
background-color: #75b5aa;
}
-.theme-base-0c .container a,
+.theme-base-0c .content a,
.theme-base-0c .related-posts li a:hover {
color: #75b5aa;
}
/* Blue */
-.theme-base-0d .masthead {
+.theme-base-0d .sidebar {
background-color: #6a9fb5;
}
-.theme-base-0d .container a,
+.theme-base-0d .content a,
.theme-base-0d .related-posts li a:hover {
color: #6a9fb5;
}
/* Magenta */
-.theme-base-0e .masthead {
+.theme-base-0e .sidebar {
background-color: #aa759f;
}
-.theme-base-0e .container a,
+.theme-base-0e .content a,
.theme-base-0e .related-posts li a:hover {
color: #aa759f;
}
/* Brown */
-.theme-base-0f .masthead {
+.theme-base-0f .sidebar {
background-color: #8f5536;
}
-.theme-base-0f .container a,
+.theme-base-0f .content a,
.theme-base-0f .related-posts li a:hover {
color: #8f5536;
}
--- /dev/null
+/*
+ * ___
+ * /\_ \
+ * _____ ___ ___\//\ \ __
+ * /\ '__`\ / __`\ / __`\\ \ \ /'__`\
+ * \ \ \_\ \/\ \_\ \/\ \_\ \\_\ \_/\ __/
+ * \ \ ,__/\ \____/\ \____//\____\ \____\
+ * \ \ \/ \/___/ \/___/ \/____/\/____/
+ * \ \_\
+ * \/_/
+ *
+ * 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: 38rem) {
+ 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;
+}
+/* `: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;
+}
+.highlight {
+ margin-bottom: 1rem;
+ border-radius: 4px;
+}
+.highlight pre {
+ margin-bottom: 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: 30rem) {
+ blockquote {
+ padding-right: 5rem;
+ padding-left: 1.25rem;
+ }
+}
+
+img {
+ display: block;
+ margin: 0 0 1rem;
+ border-radius: 5px;
+ max-width: 100%;
+}
+
+/* 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;
+}
+.related-posts li small {
+ font-size: 75%;
+ color: #999;
+}
+.related-posts li a:hover {
+ color: #268bd2;
+ text-decoration: none;
+}
+.related-posts li a:hover small {
+ color: inherit;
+}
+
+
+/*
+ * Pagination
+ *
+ * Super lightweight (HTML-wise) blog pagination. `span`s are provide for when
+ * there are no more previous or next posts to show.
+ */
+
+.pagination {
+ overflow: hidden; /* clearfix */
+ margin-left: -1rem;
+ margin-right: -1rem;
+ font-family: "PT Sans", Helvetica, Arial, sans-serif;
+ color: #ccc;
+ text-align: center;
+}
+
+/* Pagination items can be `span`s or `a`s */
+.pagination-item {
+ display: block;
+ padding: 1rem;
+ border: 1px solid #eee;
+}
+.pagination-item:first-child {
+ margin-bottom: -1px;
+}
+
+/* Only provide a hover state for linked pagination items */
+a.pagination-item:hover {
+ background-color: #f5f5f5;
+}
+
+@media (min-width: 30rem) {
+ .pagination {
+ margin: 3rem 0;
+ }
+ .pagination-item {
+ float: left;
+ width: 50%;
+ }
+ .pagination-item:first-child {
+ margin-bottom: 0;
+ border-top-left-radius: 4px;
+ border-bottom-left-radius: 4px;
+ }
+ .pagination-item:last-child {
+ margin-left: -1px;
+ border-top-right-radius: 4px;
+ border-bottom-right-radius: 4px;
+ }
+}
projects / hyde.git / commitdiff
