rjawesome / team-8-frontend

https://csa.rohanj.dev
MIT License
0 stars 2 forks source link

Team 8: Code Cards

Code Cards 🃏 is a revolutionary studying tool, letting anyone learn anything.

Features:

Previews:

Login

Secure Login System

Search

Huge Flashcard Database

Flashcards 1

Flashcards 2

Flashcards

Quizzes

Practice Quizzes

Importing

Importing from Quizlet

Start studying with Code Cards 🃏 today!

https://csa.rohanj.dev/

If your ubuntu version is old, upgrading ruby

wget http://ftp.ruby-lang.org/pub/ruby/2.7/ruby-2.7.1.tar.gz
tar -xzvf ruby-2.7.1.tar.gz
cd ruby-2.7.1/
./configure
make
sudo make install

Installation

apt install ruby-bundler
bundle install

Also update ruby initially to make sure there is compatibility, then install the bundler to be able to use the gemfile and install packages.

Usage

  1. Midnight Theme. Use the GitHub Pages Midnight Theme as a resource. This project started with customization of _layouts/default.html from the Midnight Theme. If you wanted to use a different GitHub Pages Themes, you would similarly change _layouts/default.html from repo used to support that theme. Observe comment at top of _layouts/default.html ...
<!-- 
  _layouts/default.html
  customization to original Midnight theme 
  found through GitHub Pages Themes
 -->
  1. Preview Site (Option A) - Testing your GitHub Pages site locally with Jekyll. This instruction provides instructions for ruby Gemfile,bundle install. As an addition add .gitignore to avoid seeing build files in commit. After pre-requisites run this command to obtain prompt for web server ...
bundle exec jekyll serve -H 0.0.0.0 -P 4001 # -H and -P are optional
  1. Preview Site (Option B) - GitHub Pages Ruby Gem has additional information on making a local server. Ruby requirements are the same: Gemfile,bundle install. This README looks like basis of FastPages make server as it uses Docker and shows how to setup a Makefile.

  2. Customizing style (CSS). This project uses /assets/css/style.scss as the location to customize your CSS. To avoid warnings in VSCode make sure you install SCSS IntelliSense plugin. To understand default style, make sure you Preview Site and refer to build generated _site/assets/css/style.css (this is worth 1000 lectures). For the reunion site gallery.md uses custom style from assets/css/style.css to support 3 images per row. Observe file and position of import and custom CSS, order is important as clarified in Midnight Theme readme. ...

---
---

@import "{{ site.theme }}";

/* "row style" is flexible size and aligns pictures in center */
.row {
    align-items: center;
    display: flex;
  }

  /* "column style" is one-third of the width with padding */
  .column {
    flex: 33.33%;
    padding: 5px;
  }