mmistakes / jekyll-theme-hpstr Goto Github PK
View Code? Open in Web Editor NEWA Jekyll theme with some tumble-log tendencies.
Home Page: https://mmistakes.github.io/jekyll-theme-hpstr/
License: MIT License
A Jekyll theme with some tumble-log tendencies.
Home Page: https://mmistakes.github.io/jekyll-theme-hpstr/
License: MIT License
Hello,
I have deployed your (excellent btw) theme on my personal blog, but I am having a problem. I can't get the floating menu to work.
Now, I have triaged the bug on my site myself, and it seems to be an issue with the url
entry in the _config.yml
file. If I leave it to localhost
or just plain comment it out on my local machine, the floating menu works great, however, when I am trying to use it on the online site, it just doesn't seem to work at all.
I have tried to use different values for the url
entry, but to no avail sadly. Neither www.fotiskoutoulakis.com
nor nlightnfotis.github.io
works. Am I missing something here or does it need different configuration?
(Sorry for the bug report, but I'm not a web developer, and my web development skill could take me so far before I need to use some help)
Thanks in advance.
when performing a octopress new draft "title goes here"
it does not respect the _octopress.yml file conditions for posts using the .md file extension. However, if you copy/paste this into the _config.yml it performs as expected. This just may be an Octopress issue not looking at the _octopress.yml file, but I would suggest to just copy/paste the contents into one file.
I don't have a feature image or thumbnail assigned to a post (http://www.ehsalazar.com/complete-site-makeover/) but I also don't want site.owner.avatar
used when sharing the link. I tried commenting out the {% if page.image.feature %}
section on the head.html but that hasn't seemed to work. I appreciate the great theme and your work.
This might be a problem with my setup, but it's pretty close to stock setup. Try clicking on the stack exchange link here: http://blazingaddles.com/
It doesn't redirect to stack exchange. Instead, it tries to redirect to http://blazingaddles.com/dlpolanco
Is it possible to add search on this theme like your other themes? Sorry for my English.
This isn't so much an issue (I kind of think it is, but nothing is broken per se) as it is a question about a design decision.
The .font(@size)
mixin defines the line-height
property on an object according to the variables @doc-font-size
and @doc-line-height
. Specifically, the mixin is defined like this (source):
.font(@size) {
font-size: 0px + @size;
font-size: 0rem + @size / @doc-font-size;
line-height: 0 + round(@doc-line-height / @size*10000) / 10000;
}
This means that as @size
gets larger, the line-height
property actually gets smaller, to the point where if you specify any size larger than @doc-line-height
(which is set to 26 by default), your line height is actually less than one.
Is there a reason why such an inverse relationship between @size
and line-height
was chosen?
Google ended it's Authorship program in August 2014. Link to https://plus.google.com/authorship in _config.yml
now redirects to https://support.google.com/webmasters/answer/6083347?hl=en, which states
Authorship markup is no longer supported in web search.
Line in head.html
should be removed:
{% if site.owner.google_plus %}<link rel="author" href="https://google.com/{{ site.owner.google_plus }}?rel=author">{% endif %}
Obviously low priority, but worth mentioning. Google offers alternatives, but maybe Open Graph and Twitter Cards are enough?
I just want my article show a part of it in the home page,what should I do?
I want to display titles only on my homepage. Is it possible to remove article details on homepage without modifying the code? i.e with just some jekyll config.
Currently this page will be in all blogs that are a direct fork of your repo. I think this should be excluded?
Hello, unfortunately when I try and create a new post I'm getting Errno::ENOENT: No such file or directory @ rb_sysopen
.
I have no issue when creating a new page.
Any ideas? I've had a google and come up short. Thanks for the theme too its great.
$:rake new_post --trace
** Invoke new_post (first_time)
** Execute new_post
Enter a title for your post: Hello World
Enter tags to classify your post (comma separated): misc, meta
Creating new post: _posts/2014-09-09-hello-world.md
rake aborted!
Errno::ENOENT: No such file or directory @ rb_sysopen - _posts/2014-09-09-hello-world.md
/media/Data/Programming/linux/git/cgza.github.io/Rakefile.rb:31:in `initialize'
/media/Data/Programming/linux/git/cgza.github.io/Rakefile.rb:31:in `open'
/media/Data/Programming/linux/git/cgza.github.io/Rakefile.rb:31:in `block in <top (required)>'
/home/cgza/.gem/ruby/2.1.0/gems/rake-10.3.2/lib/rake/task.rb:240:in `call'
/home/cgza/.gem/ruby/2.1.0/gems/rake-10.3.2/lib/rake/task.rb:240:in `block in execute'
/home/cgza/.gem/ruby/2.1.0/gems/rake-10.3.2/lib/rake/task.rb:235:in `each'
/home/cgza/.gem/ruby/2.1.0/gems/rake-10.3.2/lib/rake/task.rb:235:in `execute'
/home/cgza/.gem/ruby/2.1.0/gems/rake-10.3.2/lib/rake/task.rb:179:in `block in invoke_with_call_chain'
/usr/lib/ruby/2.1.0/monitor.rb:211:in `mon_synchronize'
/home/cgza/.gem/ruby/2.1.0/gems/rake-10.3.2/lib/rake/task.rb:172:in `invoke_with_call_chain'
/home/cgza/.gem/ruby/2.1.0/gems/rake-10.3.2/lib/rake/task.rb:165:in `invoke'
/home/cgza/.gem/ruby/2.1.0/gems/rake-10.3.2/lib/rake/application.rb:150:in `invoke_task'
/home/cgza/.gem/ruby/2.1.0/gems/rake-10.3.2/lib/rake/application.rb:106:in `block (2 levels) in top_level'
/home/cgza/.gem/ruby/2.1.0/gems/rake-10.3.2/lib/rake/application.rb:106:in `each'
/home/cgza/.gem/ruby/2.1.0/gems/rake-10.3.2/lib/rake/application.rb:106:in `block in top_level'
/home/cgza/.gem/ruby/2.1.0/gems/rake-10.3.2/lib/rake/application.rb:115:in `run_with_threads'
/home/cgza/.gem/ruby/2.1.0/gems/rake-10.3.2/lib/rake/application.rb:100:in `top_level'
/home/cgza/.gem/ruby/2.1.0/gems/rake-10.3.2/lib/rake/application.rb:78:in `block in run'
/home/cgza/.gem/ruby/2.1.0/gems/rake-10.3.2/lib/rake/application.rb:176:in `standard_exception_handling'
/home/cgza/.gem/ruby/2.1.0/gems/rake-10.3.2/lib/rake/application.rb:75:in `run'
/home/cgza/.gem/ruby/2.1.0/gems/rake-10.3.2/bin/rake:33:in `<top (required)>'
/home/cgza/.gem/ruby/2.1.0/bin/rake:23:in `load'
/home/cgza/.gem/ruby/2.1.0/bin/rake:23:in `<main>'
Tasks: TOP => new_post
Hi i'm trying to translate this theme most work is done (when finish i will put a new branch for it ^^) but I encounter a proble with {{ site.owner.name }} it outputs "by" and the name configures in config.yml. I cant find a way to translate it so i was hopping you can point me to somewher nice job by the way
ps the trasnlation will be for spanish
Hi!
I've been using your theme for a couple of days and it's amazingly beautiful and clean. Thank you so much.
While I've found several bugs concerning responsive design: one is for overlay of "ul".
The convenience of markdown make creating tables easy by things like
*1
*2
_3(I'm not typing space after _ since github issue enables markdown)
and jekyll automatically generate the .md mark into "ul" "li" format. However the default overlay layout of "ul" is to disable srcolling and set all overlay things visible. So if someone use a very long table components (like a long name, or a long sentence), and the display is not so that wide (like on iPhone), the "ul" part will occupy a space wider that the device screen and make the web explorer scrollable left-and-right.
I see you have responsively designed the overlay behavior of codes, and it works well. But there're more things would not break into lines (for example, I'm using mathjax.js for display math), and hence maybe a more flexcible solution is to set all components under ".entry-content" a overflow-x distribution and give them a -webkit-scroller setting.
When there are 4 or less items in the about-menu it works flawlessly. If there are 5 or more, it shows a vertical scrollbar. This scrollbar was not visible on January 15th of 2014 version; one of the commits since then has changed the menu height. Reason for the current behavior is at main.css
@media only screen and (min-width: 48em) {
.dl-menuwrapper .dl-menu {
max-height: 650px;
Tested and reproducible with Chrome 35, IE 11, and FF 28.
Hey I just noticed you included this in your example post:
"If you place it somewhere else or are hotlinking from the web, just include the full http(s):// URL."
However, the revised code I've submitted and you've merged removed that functionality.
background-image:url({{ site.url }}/images/[...]
Perhaps I've misunderstood but when you suggested some revisions I understood that you wanted all images hosted in /images with no exceptions, so I removed the hotlinking functionality.
Do you want me to submit a new pull request adding that functionality back in? I could make it so that if the background:
value contains http(s):// it will hotlink, else it will pull from /images locally.
My source are:
- edit
_config.yml
{% highlight html %}
markdown=kramdown
{% endhighlight %}- edit
Gemfile
{% highlight html %}
gem ‘kramdown’
{% endhighlight %}
But, I got two difference list. All are counted from 1.
like this:
_config.yml
Gemfile
How should I fix it?
Hi there @mmistakes, really digging this theme and am using it to teach myself more about jekyll (and maintaining static site content in general).
I was wondering if there's a way to change the default behavior of the dl-menu so that it is open by default, or open by default for a given page? I'm currently experimenting in dl-menu.less. Any advice appreciated. Thanks!
I hate to leave a vague question here, but no matter what I try I can not seem to get my version of this blog to load on heroku. Anyone have any thoughts? Here is what I have been trying so far:
config.ru
require 'rack/contrib/try_static'
require 'rack/contrib/not_found'
require 'rack/rewrite'
use Rack::TryStatic,
urls: %w[/],
root: "_site",
try: ['index.html', '/index.html'],
header_rules: [
[["html"], {'Content-Type' => 'text/html; charset=utf-8'}],
[["css"], {'Content-Type' => 'text/css'}],
[["js"], {'Content-Type' => 'text/javascript'}],
[["png"], {'Content-Type' => 'image/png'}],
["/assets", {'Cache-Control' => 'public, max-age=31536000'}],
]
run Rack::NotFound.new('_site/404.html')
Gemfile
source 'https://rubygems.org'
ruby '2.0.0'
# ------------------------------------------------------------------------------------
# >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
# ------------------------------------------------------------------------------------
gem 'rake'
gem 'jekyll'
gem "jekyll-assets"
gem "rack-contrib"
gem "rack-rewrite"
gem "puma"
gem "kramdown"
# ------------------------------------------------------------------------------------
# >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
# ------------------------------------------------------------------------------------
group :production do
gem "newrelic_rpm"
end
Procfile
web: bundle exec puma -p $PORT config.ru 3:5
Rakefile
namespace :assets do
desc 'Precompile assets'
task :precompile do
sh "bundle exec jekyll build"
end
end
I tried to add _progress-bars.scss in the /_sass/
_progress-bars.scss
[
//
// Progress bars
// --------------------------------------------------
// Bar animations
// -------------------------
// WebKit
@-webkit-keyframes progress-bar-stripes {
from { background-position: 40px 0; }
to { background-position: 0 0; }
}
// Spec and IE10+
@Keyframes progress-bar-stripes {
from { background-position: 40px 0; }
to { background-position: 0 0; }
}
// Bar itself
// -------------------------
// Outer container
.progress {
overflow: hidden;
height: $line-height-computed;
margin-bottom: $line-height-computed;
background-color: $progress-bg;
border-radius: $progress-border-radius;
@include box-shadow(inset 0 1px 2px rgba(0,0,0,.1));
}
// Bar of progress
.progress-bar {
float: left;
width: 0%;
height: 100%;
font-size: $font-size-small;
line-height: $line-height-computed;
color: $progress-bar-color;
text-align: center;
background-color: $progress-bar-bg;
@include box-shadow(inset 0 -1px 0 rgba(0,0,0,.15));
@include transition(width .6s ease);
}
// Striped bars
//
// .progress-striped .progress-bar
is deprecated as of v3.2.0 in favor of the
// .progress-bar-striped
class, which you just add to an existing
// .progress-bar
.
.progress-striped .progress-bar,
.progress-bar-striped {
@include gradient-striped;
background-size: 40px 40px;
}
// Call animation for the active one
//
// .progress.active .progress-bar
is deprecated as of v3.2.0 in favor of the
// .progress-bar.active
approach.
.progress.active .progress-bar,
.progress-bar.active {
@include animation(progress-bar-stripes 2s linear infinite);
}
// Variations
// -------------------------
.progress-bar-success {
@include progress-bar-variant($progress-bar-success-bg);
}
.progress-bar-info {
@include progress-bar-variant($progress-bar-info-bg);
}
.progress-bar-warning {
@include progress-bar-variant($progress-bar-warning-bg);
}
.progress-bar-danger {
@include progress-bar-variant($progress-bar-danger-bg);
}
]
And add [@import “progress-bars”] in the /assets/css/main.scss
but it didn’t work .
I really have no ideal of it.
I love this theme, and it's minimalist design (as your other jekyll themes) -- I just wish it had an (optional?) static navbar.
I like the foldaway navbar and the flashy animation, I just worry that some of my not-so-tech-savvy visitors might be confused about the navigation.
Does that make sense?
Is that something you would consider design-wise or does that not sit with your idea of hpstr?
I've noticed that on a few pages the "Home" button just points to the current page you are on and not the site root. I noticed it on the /about/ page before, but I can't seem to reproduce it right now.
I'll update this issue when I can reproduce it reliably.
p.s. awesome theme!
When you click on a post from say: /blog/ and it takes you to /blog/postname/, it prints raw text on a white page. No theming! Would appreciate some help here. example, click on the post and the bug occurs.
Reading time is super wrong on every post. Jekyll 2.x related? Investigate.
Thank you very much for sharing the theme, I like it very much and like hacking on it. So being a novice to the Jekyll world I was wondering if it's possible to have post tags show up in individual posts, instead of only in the tag archive page?
It can be resolved by add a line to _sass/_page.scss. As below.
#post-index {
#main {
margin: 40px 2px 20px 2px;
// add this line: overflow: hidden
overflow: hidden;
@media #{$medium} {
margin-left: 20px;
margin-right: 20px;
}
@media #{$large} {
max-width: 800px;
margin-top: 50px;
margin-left: auto;
margin-right: auto;
}
}
Not sure what's going on. Installed Jekyll 2.5.1 on OSX. Used the following commands:
git clone https://github.com/mmistakes/hpstr-jekyll-theme.git
cd hpstr-jekyll-theme/
bundle install
bundle exec jekyll build
Configuration file: /Users/foo/Code/hpstr-jekyll-theme/_config.yml
Source: /Users/foo/Code/hpstr-jekyll-theme
Destination: /Users/foo/Code/hpstr-jekyll-theme/_site
Generating...
jekyll 2.4.0 | Error: undefined method `in_source_dir' for #<Jekyll::Site:0x007ff12af7e180>
Any thoughts?
^_^ chinese english ,please use Google translate. THANK U
for an instance:
from:
`<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
to:
<script type="text/javascript" src="//lib.sinaapp.com/js/jquery/1.5.2/jquery.min.js"></script> <script type="text/javascript">window.jQuery || document.write('<script type="text/javascript>
Request URL:http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js
Request Headers CAUTION: Provisional headers are shown.
Accept:/
Cache-Control:max-age=0
Referer:http://ericsens.github.io/
User-Agent:Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/35.0.1916.153 Safari/537.36
I cloned this repository in my PC And found this by chance. But it behaves correctly in http://mmistakes.github.io/hpstr-jekyll-theme/. The main distinction is there is no sub directory in my copy.
Is it possible to make About menu always visible unless the size of the window is too small (for example on smartphones) ?
Jekyll 2.0 gives the following warning when serving with jekyll serve
:
Deprecation: The 'pygments' configuration option has been renamed to 'highlighter'.
Please update your config file accordingly.
The allowed values are 'rouge', 'pygments' or null.
您好,我把你的仓库clone到本地,用本地搭建的jekyll环境来测试,发现本地打开后页面显示空白,这是为什么?
我的ruby的版本是2.0.0p481,jekyll的版本是2.1.1。期待您的回复!
Hi Michael,
First, thank you very much for the HPSTR theme, it's beautiful.
I used it to create http://brunoruviaro.github.io/ardour3-floss-tutorial/ but ran into one problem: images are not showing on the first page of blog roll (scroll down to What Is Digital Audio? where first images should show).
On Page 2 of the blog roll they show up normally: http://brunoruviaro.github.io/ardour3-floss-tutorial/page2/
Also, images also show up normally if you click on an individual post from page 1 (http://brunoruviaro.github.io/ardour3-floss-tutorial/what-is-digital-audio/).
I can't figure out why they don't show on the first page only. Any hints appreciated. Thank you so much!
Bruno
The "Home" link in the navbar does not work in local mode, because we need to comment out the url tag in _config.yml and therefore the variable {{ site.url }} is not defined.
I have fixed this in my website by following the same method that was used in the So Simple theme: instead of adding the Home link in _includes/navigation.html you add it in the links section of _config.yml like this:
links:
- title: Home
url: /
Hope it helped!
After messing with the feature image and header title the credit link went missing. Investigate CSS and fix.
Hi,i like this theme and decide to use it in my blog.as i follow the setup instrcutions,replace the _post folder with my own.and then i check my blog in browse,things goes wrong,the blog info is still the previous blog ,i can't find my own blog which i had put in the _post.
I think maybe i hava some mistake in the _config.yaml,i am puzzled about the url,in my _config,i set url as 'http://jwchennlp.github.com'.can you explain it.
I was wondering if you would have any thoughts on how to integrate a Google (or other hosted) search solution for a Jekyll site?
Thanks.
When you press the about menu icon (the one with three lines representing it by default) and then click out, the icon disappears and only reappears if you manage to hover over its invisible box.
Issue reproducible in Safari, but not Chrome
I've changed the reading-time conditional on a page so that I can turn it off when needed. For example:
{% if site.reading_time and page.reading_time != false %}
If that's something you think is worth including in the source, I'll send in a PR and update the docs as well.
I have noticed that the first line when viewing a page is considerably larger than the preceding ones following it:
^ The "general notes.." line is larger than the "and then install Jekyll..." line.
Not sure if this is an intended feature or a bug, in my opinion they are both just plain text and should be the same size no matter where they are positioned on the page.
Google Pagespeed is reporting assets/js/vendor/modernizr-2.6.2.custom.min.js
, http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js
and assets/js/scripts.min.js
to be render-blocking.
Do you think it's at all possible to refactor the code to avoid this without breaking functionality? It's not a major issue but would be nice regardless.
When using feature images, on both Chrome and Safari the image is adjusted so the middle 400px show. On Firefox, however, the image isn't adjusted, so only the top 400px show. I started cropping images to use only the 400px I wanted, but that came with a bunch of other difficulties, and the images then looked weird on mobile device. I'm using photos taken w/ my iPhone in landscape - 2048 x 1536.
Tested on FF 33.0.1 and 34.0 on OSX.
No idea what the IE behavior is yet.
I'm not a CSS expert, but was confused when I found in the _page.scss for the .tag section, there are two lines for "color:"
https://github.com/mmistakes/hpstr-jekyll-theme/blob/master/_sass/_page.scss#L175-177
Also, the default color is $white which does not display with a white background. If you replace one of the $white with $text-color it does display, however, I want to make sure these are the right lines of CSS to modify, thus:
// color: $white;
@include rounded(3px);
color: $text-color;
Do you have any recommendations for a Contact Form that plays nice with Jekyll sites? Thanks.
Front-matters, which is the stuff thing at the begining of every post, like things below:
---
layout: post
title: Blogging Like a Hacker
anything more ?
---
As far as I know, it includes:
---
layout: post
title: Sample Post
description: "Just about everything you'll need to style in the theme: headings, paragraphs, blockquotes, tables, code blocks, and more."
modified: 2013-05-31
tags: [sample post]
image:
feature: abstract-3.jpg
credit: dargadgetz
creditlink: http://www.dargadgetz.com/ios-7-abstract-wallpaper-pack-for-iphone-5-and-ipod-touch-retina/
comments: true
share: true
---
Do we have anything more ?
I'm enjoying this template and am currently refurb-ing my existing GH pages site with it - thanks so much for providing it. I was wondering if you could give some advise on how to tastefully integrate some Adsense advertising on the post pages?
Thanks in advance.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.