Sunday website update
So today I finally found some time to update this website. Granted it's still running an out-of-date version of Ghost, but I finally figured out how to modify the front page.
The default theme for Ghost (Casper) in it's latest version looks like this https://demo.ghost.io/
Which is very pretty in a magazine sort of way. I had a different vision, that was a lot closer to an older Casper theme, especially for the front page. I wanted to combine something with a big header image, which has my name, and a short bio, links to public social media, then scroll down to see any blog posts. Like this post!
I was coming from the below page - identity from HTML5 UP - a great resource for a quick landing page, but not really what I want long term as manually creating pages for blog posts would get tedious and discourage me from writing.
There were a list of changes I wanted to the otherwise bland header page.
- profile photo
- links to social media
- more detailed bio.
So I opened up the index.hbs file that defines the front page of this ghost theme, and got cracking.
<div class="img" style="background-image: url(/blog/content/images/2018/07/profile--2-.jpg)"><span class="hidden">{{name}}'s Picture</span></div>
</figure>
This block of code was inserted above the <h1 class="page-title">{{@blog.title}}</h1> and puts my beautiful face above the header. Ideally I should have been able to copy the ghost snippet to pull in the author image for the whole website, but that wasn't working. Possibly because the index page doesn't have an author - Wasn't able to figure this one out but linking the image directly works fine. I'll revisit if the solution comes to me in a dream.
<h2 class="page-description">
I'm a cancer biology PhD student with a passion for new technologies.
<hr/>
<p>PhD Student @ University of Zürich</p>
<p>IT Team Leader @ <a href="http://lszysn.ch" class="fplink">LSZYSN</a> </p>
<p>Podcaster @ <a href="http://thefutureof.io" class="fplink">thefutureof.io</a></p>
</h2>
The extra text for the subheader was easy, and just HTML. I would like to have put it into the CMS GUI but there was a character limit and it wouldn't process the markup.
I had to add a class to the <a> because it was being coloured too dark to be seen by default. I address this later in the CSS modifications.
</h2>
<ul class="icons">
<li><a href="http://linkedin.com/in/paulmaceoin" class="fa-linkedin">LinkedIn</a></li>
<li><a href="http://twitter.com/pmaceoin" class="fa-twitter">Twitter</a></li>
<li><a href="https://www.instagram.com/theskymoves/" class="fa-instagram">Instagram</a></li>
<li><a href="mailto:paulmaceoin+website@gmail.com" class="fa-envelope-o">Email</a></li>
</ul>
Right underneath the <h2> tag, I add the code for the icons. These are quite clever and completely lifted from my previous site above. The icons come from http://fontawesome.com. The files for the fonts were copied across into the /assets/fonts folder, and the CSS was mostly taken from the original page too. I removed the drop shadow as they were originally white icons on a white background so the shadow was what you were seeing.
I've added my custom CSS below in case someone comes across this site and finds it useful. It's pretty clear though I think.
/* pauls custom CSS for icons*/
@import url(font-awesome.min.css);
figure.author-image {top:-100px;
left:10%;
padding:2px;}
a.fplink{
color:white;
}
/* Icon */
.icon {
text-decoration: none;
position: relative;
border-bottom: none;
}
.icon:before {
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
text-transform: none !important;
}
.icon > .label {
display: none;
}
ul.icons {
cursor: default;
list-style: none;
padding-left: 0;
margin-top: -0.675em;
}
ul.icons li {
display: inline-block;
padding: 0.675em 0.5em;
}
ul.icons li a {
text-decoration: none;
position: relative;
display: block;
width: 3.75em;
height: 3.75em;
border-radius: 100%;
border: solid 1px #c8cccf;
line-height: 3.75em;
overflow: hidden;
text-align: center;
text-indent: 3.75em;
white-space: nowrap;
}
ul.icons li a:before {
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
font-family: FontAwesome !important;
font-style: normal;
font-weight: normal;
text-transform: none !important;
font-size:30px;
}
ul.icons li a:before {
color: #ffffff;
/* text-shadow: 1.25px 0px 0px #c8cccf, -1.25px 0px 0px #c8cccf, 0px 1.25px 0px #c8cccf, 0px -1.25px 0px #c8cccf;*/
}
ul.icons li a:hover:before {
text-shadow: 1.25px 0px 0px #ff7496, -1.25px 0px 0px #ff7496, 0px 1.25px 0px #ff7496, 0px -1.25px 0px #ff7496;
}
ul.icons li a:before {
position: absolute;
top: 0;
left: 0;
width: inherit;
height: inherit;
font-size: 1.85rem;
line-height: inherit;
text-align: center;
text-indent: 0;
}
ul.icons li a:hover {
border-color: #ff7496;
}
@media screen and (max-width: 480px) {
ul.icons li a:before {
font-size: 1.5rem;
}
}
ul.actions {
cursor: default;
list-style: none;
padding-left: 0;
}
ul.actions li {
display: inline-block;
padding: 0 0.75em 0 0;
vertical-align: middle;
}
ul.actions li:last-child {
padding-right: 0;
}
/*end custom CSS*/
