This is site is based on http://github.io/t413/SinglePaged Template is Jekyll 3.0
The following directory and its content is copyright of City Evangelical Church. You may not reuse anything therein without the church's written permission:
/img
Materialize css is used to build the grids/columns, accordions, etc E.g: Responsive grids for Mobile & desktop
<div class="row">
<div class="col s12"><p>s12</p></div> #full size grid
<div class="col s12 m4 l2"><p>s12 m4</p></div> #
<div class="col s12 m4 l8"><p>s12 m4</p></div>
<div class="col s12 m4 l2"><p>s12 m4</p></div>
</div>
<div class="row">
<div class="col s12 m6 l3"><p>s12 m6 l3</p></div>
<div class="col s12 m6 l3"><p>s12 m6 l3</p></div>
<div class="col s12 m6 l3"><p>s12 m6 l3</p></div>
<div class="col s12 m6 l3"><p>s12 m6 l3</p></div>
</div>
There are two ways to load a video you can embed the video in a the div below:
<div class="icontain"><iframe title="The title of the video" src="//www.youtube-nocookie.com/embed/8SLeE2a6Q4" allowfullscreen></iframe></div>
Or there is a script that will tranform a Youtube or Vimeo URL in the content (on a new line) into an embedded video. It also detects URL’s that point to mp3 files and replaces them with a default HTML5 player. This uses ([Jekyll Codex] (https://jekyllcodex.org/without-plugin/open-embed/)) script.
E.g.
https://www.mymusic.mp3
// or
https://www.youtube.com/watch?v=1ZM-jnXh4uw
Forestry.io is linked to this site to enable content editors to use a CMS. https://forestry.io. Forestry is built on Git so that Developers and Content editor can use the same workflow and toolset. The folder called .forestry manages this connection. This can be deleted if it is not needed.
https://realfavicongenerator.net
Insert the following code in the section of your index.html (and config.yml:
<link rel="apple-touch-icon" sizes="180x180" href="/img/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/img/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/img/favicon-16x16.png">
<link rel="manifest" href="/img/site.webmanifest">
<link rel="mask-icon" href="/img/safari-pinned-tab.svg" color="#f29526">
<link rel="shortcut icon" href="/img/favicon.ico">
<meta name="msapplication-TileColor" content="#009ddf">
<meta name="msapplication-config" content="/img/browserconfig.xml">
<meta name="theme-color" content="#009ddf">
- The original demo site is also a live demo, see it at t413.com/SinglePaged
- Education:
- Global Health Project for Public Health class at UIC (student project) (source)
- Bioinformatics at Harvard Medical School -- (source)
- Dutch Introduction to Electronics class (source) (translation)
- Innovation Lab + Smart Data Hack 5-day student challenge at University of Edinburgh, Turkey (source)
- Open Source Projects:
- ALM A cloud ready IDE for TypeScript (source)
- argon.js JS framework for adding augmented reality to web apps (source)
- Mockito mocking framework for unit tests in Java (source)
- REMnux Electronic lab notebook (source)
- REMnux A Linux Toolkit for Reverse-Engineering and Analyzing Malware (source)
- Langmuir Charge transfer simulations in organic electronics. (source)
- SMS-Tools is another project of mine that uses this template (source)
- HTML Tidy Advocacy Community Group (source)
- AfriLeaks (since changed, still cool!) - secure whistleblowers confidential submition project page (source when single-paged)
- FitNesse Eclipse Plugin (source)
- Lazy Dubuntu (source)
- The Rosette Platform- git-based, internationalization framework (Ruby) (source)
- PHP Cat PHP Developer Group in Catalan (grup de desenvolupadors PHP de llengua catalana) (source)
- Alt.Net Australia User Group (source)
- FeedReader Desktop RSS client (source)
- Coala Analyzer command-line interface for linting (source)
- Easy Shell Linux and Shell Commands the Easy Way (source)
- Events / Conferences
- CodeWeek 15 @ DI CodeWeek at the University of Minho in 2015 by CeSIUM - (source)
- Innovation Lab + Smart Data Hack 5-day student challenge at University of Edinburgh, Turkey (source)
- FSU Festival of New Music (17th Biennial) (source)
- Code Across 2015 @Seoul 전 세계 시빅해커들과 함께 하는 -> since changed, (source)
- Personal:
- Products:
- Pawan Kumar film info page (source)
- Helpers in Korea (source)
- Zeno- internet for gamers original teaser page: (source)
- Original DEVISSCHER web design page (source)
- Resumes:
- magiciansanfrancisco.com professional page (source)
- Lia Bogoev UX designer from utah (source)
- Bill Ryan's homepage is a snazzy personal example! (source)
- Christophe Gabard resume (source)
- Leppotone Electrical Recordings temporary homepage (source)
- Michael A. Schmidt particle physics lecturer at the University of Sydney (source)
- Jin Li MS student in Systems and Information Engineering @ UVA (source)
- Let me know of more!
Make an easy single-page site to show it all off. SinglePaged uses jekyll niceties to make a polished, modular, and beautiful single page site.
- Each vertical section is a markdown file in _posts/ directory.
- They're sorted by 'date'. (we don't use date anywhere, it only sorts)
- Each vertical section sets it's own color, header icon (or image), title, and easy-to-write markdown body.
- Only two things to edit:
- Edit
_config.yml
to set the site title, description, etc - Add _posts/*.md to make each vertical section. Copy some examples and add the sections from your README.md for a fast start!
- Edit
- Easy adding of SEO terms, favicon & such, and google analytics token.
Sound good? Let's go!
There are three way to get started: (links jump to that section)
- Make a user homepage (or organization)
- Make a standalone project page
- Go click fork on the github project page
- Click the template button to add a new repository
- Rename your new repository to
**username**.github.io
. (click settings in the right column)
Now hop over to Usage to get it running with your own stuff!
- Go click fork on the github project page
- Click the template button to add a new repository
- Rename your new repository to
whatever you want
. (click settings in the right column)- It will go live at yourusername.github.io/WhateverYouWant
- Make sure your branch set to gh-pages in settings for the webpage to be published
Now hop over to Usage to get it running with your own stuff!
Alright, you've got a clean copy and are ready to push some schmancy pages for the world to ogle at.
- Edit
_config.yml
to change your title, keywords, and description. - Create a new file in
_posts/
called2014-01-01-intro.md
Edit it, and add:
---
title: "home"
bg: white #defined in _config.yml, can use html color like '#010101'
color: black #text color
style: center
---
# Example headline!
and so on..
- Create a second post called
2014-01-02-art.md
with an divider image this time:
---
title: "Art"
bg: turquoise #defined in _config.yml, can use html color like '#0fbfcf'
color: white #text color
fa-icon: paint-brush
---
#### A new section- oh the humanity!
Note: That part fa-icon: paint-brush
will use a font-awesome icon of paint-brush. You can use any icon from this font-awesome icon directory.
- install Jekyll with
sudo gem install github-pages
- run
jekyll serve -w
- visit localhost:4000 to see a live locally served preview.
- Push changes and see them live!
- In each post file you can define
bg: mycolor
andcolor: myothercolor
to change the background and text colors for that section. - mycolor can be a quoted html color like
'#0fbfcf'
or a key to a special color defined in _config.yml under 'colors'.- Note: Changes to _config.yml require a manual restart to your local server with
^C
andjekyll serve -w
.
- Note: Changes to _config.yml require a manual restart to your local server with
Nifty, right!
So you've got a copy running and there's some new update? Let's update!
- Checkout your github-pages branch
git checkout gh-pages
for a standalone or existing pagegit checkout master
for a username.github.io page
- run
git remote | grep -q "singlepage" || git remote add -t publish singlepage https://github.com/t413/SinglePaged.git
to be sure you have access to this repository (you can run this command at any time). git fetch singlepage
to fetch-in-place new changes.- Update to the new base (using merge)
git merge singlepage/publish
- You can alternatively update using rebase. This rewrites history (bad), but it is cleaner.
git rebase singlepage/publish
Visit: https://jekyllcodex.org/without-plugin/accordion/ To create an accordion, add the following code to the front matter of your page:
---
accordion:
- title: this is item 1
content: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- title: this is item 2
content: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
---
The code uses no javascript and uses the CSS ‘checkbox hack’ to toggle the content. The accordion deliberately refrains from setting the height of the content blocks. Calculating this height with javascript is required to add animation (slide down), but adds a lot of complexity.
Step 1. The accordion file is called Accordion.html Step 2. Save the file in the ‘_includes’ directory of your project Step 3. Make sure your front matter of your page looks like the example above Step 4. Add the following line to your layout on the place where you want the form to appear:
{% include Accordion.html %}
This site uses Font Awesome 4.7 icons. To reference an icon inline use:
<i class="fa fa-external-link" aria-hidden="true" style="color:black"></i>
This site uses Kramdown, visit https://about.gitlab.com/blog/2016/07/19/markdown-kramdown-tips-and-tricks/#font-awesome for tips.