Code Monkey home page Code Monkey logo

website's Introduction

Delta Leonis website

Getting started

The site is build using Jekyll and gulp.js and hosted here on GitHub Pages. In order to develop using Jekyll make sure ruby, and npm are installed on your system.

Run the following commands

gem install jekyll
npm install
gulp serve
# => Now browse to http://localhost:4000/website

If you install a livereload-plugin for your browser (firefox, chrome, safari) your browser will autoreload whenever files are changed.

Gulp tasks

task description
css bundle and transpile stylesheet (to dist/main.css)
js bundle, autoprefix, browserify, and babelify javascript (to dist/javascript.js)
assets run css and js tasks
jekyll build the site without assets
build run jekyll and assets tasks
watch start jekyll in watchmode, and watch _scss and _js folder for changes. reload browser on change
serve run assets and watch tasks.

Directory structure

.
├── _includes        ; partial layout files
│   └── ...
├── _layouts         ; layout files
│   └── ...
├── _page_collection ; site content in markdown
│   └── ...
├── _scss            ; scss stylesheets
│   └── ...
├── assets           ; static files
│   └── ...
├── .circleci        ; CI configuration and scripts
│   └── ...
├── _site            ; build destination
│   └── ...
├── gulpfile.js      ; gulp tasks
├── _config.yml      ; Jekyll config
└── index.md         ; entry point of the website

Deployment

Run .circleci/deploy-ghpages.sh in oder to build the site and deploy it to http://delta-leonis.github.io/website. Make sure you have Jekyll setup.

website's People

Contributors

diggerhub avatar thumbnail avatar

Watchers

 avatar  avatar

Forkers

xvilo

website's Issues

favicon

image

The current icon has too much detail. would've put this as a comment to #5 if it wasn't instamerged.

suggestion is a transparent background and just the head in black/white (or even just black / transparent). which probably gives a more clear effect

add assets pipeline

  • use gulp or something
  • use package.json for js dependencies
    • Remove vendorized libs
  • add autoprefixer to remove vendor-prefixes from source

Refactor js

refactoring svgbuilder.js should use classes in order to remove more duplication.
we should also refactor main.js to make the navigation clearer.

html anchor offset mobile

Browser will scroll down after using one of the navigation links.

This is expected behavior for html anchors but it makes the mobile experience very annoying.

I would like to avoid and the negative offset workarounds since the best approach would be to disable this behavior.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.