diff options
| -rw-r--r-- | lib/app.rb | 2 | ||||
| -rw-r--r-- | lib/views/index.erb | 107 |
2 files changed, 103 insertions, 6 deletions
@@ -1,5 +1,5 @@ -require 'sinatra' require 'github/markup' +require 'sinatra' get '/' do @content = IO.read("README.md") diff --git a/lib/views/index.erb b/lib/views/index.erb index 52e1a0a..7066b41 100644 --- a/lib/views/index.erb +++ b/lib/views/index.erb @@ -1,9 +1,106 @@ -<html> +<!DOCTYPE html> +<html lang="en"> <head> - <meta http-equiv="content-type" content="text/html; charset=utf-8"> - <title></title> + <meta charset="utf-8"> + <meta http-equiv="X-UA-Compatible" content="IE=edge"> + <meta name="viewport" content="width=device-width, initial-scale=1"> + <title>COMP-325 Assignment 3 - System Administration - mo khan (3431709)</title> + <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/3.0.1/github-markdown.min.css" integrity="sha256-HbgiGHMLxHZ3kkAiixyvnaaZFNjNWLYKD/QG6PWaQPc=" crossorigin="anonymous" /> + <style type="text/css" media="screen"> +html, +body { + height: 100%; + width: 100%; + margin: 0; + padding: 0; + left: 0; + top: 0; + font-size: 100%; +} + +* { + font-family: 'Lato', Helvetica, sans-serif; + color: #333447; + line-height: 1.5; +} + +h1 { font-size: 2.5rem; } +h2 { font-size: 2rem; } +h3 { font-size: 1.375rem; } +h4 { font-size: 1.125rem; } +h5 { font-size: 1rem; } +h6 { font-size: 0.875rem; } +p { + font-size: 1.125rem; + font-weight: 200; + line-height: 1.8; +} +.font-light { font-weight: 300; } +.font-regular { font-weight: 400; } +.font-heavy { font-weight: 700; } +.left { text-align: left; } +.right { text-align: right; } +.center { + text-align: center; + margin-left: auto; + margin-right: auto; +} +.justify { text-align: justify; } +.container { + width: 90%; + margin-left: auto; + margin-right: auto; +} +.row { + position: relative; + width: 100%; +} +.row [class^="col"] { + float: left; + margin: 0.5rem 2%; + min-height: 0.125rem; +} +.col-1, +.col-2, +.col-3, +.col-4, +.col-5, +.col-6, +.col-7, +.col-8, +.col-9, +.col-10, +.col-11, +.col-12 { + width: 96%; +} +.link { text-decoration: none; } +.text-center { text-align: center; } +@media only screen and (min-width: 33.75em) { .container { width: 80%; } } +@media only screen and (min-width: 45em) { + .col-1 { width: 4.33%; } + .col-2 { width: 12.66%; } + .col-3 { width: 21%; } + .col-4 { width: 29.33%; } + .col-5 { width: 37.66%; } + .col-6 { width: 46%; } + .col-7 { width: 54.33%; } + .col-8 { width: 62.66%; } + .col-9 { width: 71%; } + .col-10 { width: 79.33%; } + .col-11 { width: 87.66%; } + .col-12 { width: 96%; } +} +@media only screen and (min-width: 60em) { .container { width: 75%; max-width: 60rem; } } + </style> </head> - <body> - <%= GitHub::Markup.render_s(GitHub::Markups::MARKUP_MARKDOWN, @content) %> + <body class='markdown-body'> + <div class="container"> + <div class="row"> + <div class="col-12"> + <%= GitHub::Markup.render_s(GitHub::Markups::MARKUP_MARKDOWN, @content) %> + </div> + </div> + </div> </body> </html> |