jrtechs
/
jrtechs-github-graphs
mirror of https://github.com/jrtechs/github-graphs.git
1
0
Fork 0
Code Issues 0 Releases 1 Wiki Activity
Browse Source

Re-arranged html and css to modify on screen width to better suit mobile clients.

pull/11/head
CetaceanNation 5 years ago
parent
f9baece4fb
commit
98a22fc393
7 changed files with 162 additions and 114 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +23
    -21
      public/404.html
  2. +27
    -25
      public/FriendsGraph.html
  3. +5
    -0
      public/about.css
  4. +25
    -22
      public/about.html
  5. BIN
      public/img/graphExample.png
  6. +28
    -26
      public/index.html
  7. +54
    -20
      public/style.css

+ 23
- 21
public/404.html View File

@ -1,4 +1,4 @@
<!doctype html>
<!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
@ -10,28 +10,30 @@
<div id="header-bar" class="d-flex flex-column flex-md-row shadow-sm align-items-center"> <div id="header-bar" class="d-flex flex-column flex-md-row shadow-sm align-items-center">
<div id="header-title"> <div id="header-title">
<a href="./index.html"> <a href="./index.html">
<img id="logo" class="text-center" src="./logo.svg" />
<img id="logo" src="./logo.svg" />
</a> </a>
</div> </div>
<ul id="navigation" class="nav justify-content-end">
<li class="nav-item">
<a href="./GraphTest.html">
Generate graphs
</a>
</li>
<div class="nav-sep"></div>
<li class="nav-item">
<a href="https://github.com/jrtechs/github-graphs">
View on GitHub
</a>
</li>
<div class="nav-sep"></div>
<li class="nav-item">
<a href="./about.html">
About
</a>
</li>
</ul>
<div id="navigation">
<ul class="nav">
<li class="nav-item">
<a href="./FriendsGraph.html">
Generate graphs
</a>
</li>
<div class="nav-sep"></div>
<li class="nav-item">
<a href="https://github.com/jrtechs/github-graphs">
View on GitHub
</a>
</li>
<div class="nav-sep"></div>
<li class="nav-item">
<a href="./about.html">
About
</a>
</li>
</ul>
</div>
</div> </div>
<div class="main"> <div class="main">
<div id="content" class="error container text-center"> <div id="content" class="error container text-center">

+ 27
- 25
public/FriendsGraph.html View File

@ -22,32 +22,34 @@
</head> </head>
<body> <body>
<div id="header-bar" class="d-flex flex-column flex-md-row shadow-sm align-items-center">
<div id="header-title">
<a href="./index.html">
<img id="logo" class="text-center" src="./logo.svg" />
</a>
</div>
<ul id="navigation" class="nav justify-content-end">
<li class="nav-item">
<a href="./GraphTest.html">
Generate graphs
</a>
</li>
<div class="nav-sep"></div>
<li class="nav-item">
<a href="https://github.com/jrtechs/github-graphs">
View on GitHub
</a>
</li>
<div class="nav-sep"></div>
<li class="nav-item">
<a href="./about.html">
About
<div id="header-bar" class="d-flex flex-column flex-md-row shadow-sm align-items-center">
<div id="header-title">
<a href="./index.html">
<img id="logo" src="./logo.svg" />
</a> </a>
</li>
</ul>
</div>
</div>
<div id="navigation">
<ul class="nav">
<li class="nav-item">
<a href="./FriendsGraph.html">
Generate graphs
</a>
</li>
<div class="nav-sep"></div>
<li class="nav-item">
<a href="https://github.com/jrtechs/github-graphs">
View on GitHub
</a>
</li>
<div class="nav-sep"></div>
<li class="nav-item">
<a href="./about.html">
About
</a>
</li>
</ul>
</div>
</div>
<div class="main container"> <div class="main container">
<div class="row" id="searchBarTop"> <div class="row" id="searchBarTop">

+ 5
- 0
public/about.css View File

@ -46,4 +46,9 @@
} }
.plink { .plink {
color: rgb(250, 152, 33); color: rgb(250, 152, 33);
}
@media (max-width: 767px) {
#content-title {
height: 40px;
}
} }

+ 25
- 22
public/about.html View File

@ -3,6 +3,7 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>GitHub Graphs</title>
<link rel="icon" href="./favicon.ico" type="image/x-icon" /> <link rel="icon" href="./favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="./favicon.ico" type="image/x-icon" /> <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
@ -13,28 +14,30 @@
<div id="header-bar" class="d-flex flex-column flex-md-row shadow-sm align-items-center"> <div id="header-bar" class="d-flex flex-column flex-md-row shadow-sm align-items-center">
<div id="header-title"> <div id="header-title">
<a href="./index.html"> <a href="./index.html">
<img id="logo" class="text-center" src="./logo.svg" />
<img id="logo" src="./logo.svg" />
</a> </a>
</div> </div>
<ul id="navigation" class="nav justify-content-end">
<li class="nav-item">
<a href="./FriendsGraph.html">
Generate graphs
</a>
</li>
<div class="nav-sep"></div>
<li class="nav-item">
<a href="https://github.com/jrtechs/github-graphs">
View on GitHub
</a>
</li>
<div class="nav-sep"></div>
<li class="nav-item">
<a href="./about.html">
About
</a>
</li>
</ul>
<div id="navigation">
<ul class="nav">
<li class="nav-item">
<a href="./FriendsGraph.html">
Generate graphs
</a>
</li>
<div class="nav-sep"></div>
<li class="nav-item">
<a href="https://github.com/jrtechs/github-graphs">
View on GitHub
</a>
</li>
<div class="nav-sep"></div>
<li class="nav-item">
<a href="./about.html">
About
</a>
</li>
</ul>
</div>
</div> </div>
<div> <div>
<div id="content" class="container"> <div id="content" class="container">
@ -131,12 +134,12 @@
</a> </a>
</div> </div>
<div class="col"> <div class="col">
<a href="mailto:axn5966@rit.edu">
<a href="https://www.linkedin.com/in/a-noel/">
<img class="link-ico" src="./img/linkedin.png" /> <img class="link-ico" src="./img/linkedin.png" />
</a> </a>
</div> </div>
<div class="col"> <div class="col">
<a href="https://github.com/CetaceanNation">
<a href="mailto:axn5966@rit.edu">
<img class="link-ico" src="./img/email.png" /> <img class="link-ico" src="./img/email.png" />
</a> </a>
</div> </div>

BIN
public/img/graphExample.png View File

Before After
Width: 1292  |  Height: 1418  |  Size: 765 KiB Width: 1292  |  Height: 1418  |  Size: 1.1 MiB

+ 28
- 26
public/index.html View File

@ -12,37 +12,39 @@
<div id="header-bar" class="d-flex flex-column flex-md-row shadow-sm align-items-center"> <div id="header-bar" class="d-flex flex-column flex-md-row shadow-sm align-items-center">
<div id="header-title"> <div id="header-title">
<a href="./index.html"> <a href="./index.html">
<img id="logo" class="text-center" src="./logo.svg" />
<img id="logo" src="./logo.svg" />
</a> </a>
</div> </div>
<ul id="navigation" class="nav justify-content-end">
<li class="nav-item">
<a href="./FriendsGraph.html">
Generate graphs
</a>
</li>
<div class="nav-sep"></div>
<li class="nav-item">
<a href="https://github.com/jrtechs/github-graphs">
View on GitHub
</a>
</li>
<div class="nav-sep"></div>
<li class="nav-item">
<a href="./about.html">
About
</a>
</li>
</ul>
<div id="navigation">
<ul class="nav">
<li class="nav-item">
<a href="./FriendsGraph.html">
Generate graphs
</a>
</li>
<div class="nav-sep"></div>
<li class="nav-item">
<a href="https://github.com/jrtechs/github-graphs">
View on GitHub
</a>
</li>
<div class="nav-sep"></div>
<li class="nav-item">
<a href="./about.html">
About
</a>
</li>
</ul>
</div>
</div> </div>
<div class="main container">
<div class="row">
<div class="side-txt">
<div class="text-title text-center" style="padding-top: 15px;">
<div class="main container-fluid text-center">
<div class="home-content row align-items-center">
<div class="side-txt col">
<div class="text-title text-center" style="padding: 10px;">
<h1 class="m-title">How to get started:</h1> <h1 class="m-title">How to get started:</h1>
</div> </div>
<div class="text-content"> <div class="text-content">
<p style="position: relative; padding-left: 10px; padding-right: 10px;">
<p style="position: relative; padding: 10px;">
Head over to the 'Generate graphs' page and enter Head over to the 'Generate graphs' page and enter
the username of a GitHub user. The space on that the username of a GitHub user. The space on that
page will then populate with the requested GitHub page will then populate with the requested GitHub
@ -51,7 +53,7 @@
</p> </p>
</div> </div>
</div> </div>
<img class="side-img img-fluid" src="./img/graphExample.png" />
<img class="side-img img-fluid col" src="./img/graphExample.png" />
</div> </div>
</div> </div>
</body> </body>

+ 54
- 20
public/style.css View File

@ -19,7 +19,6 @@
background-color: rgb(208, 208, 208); background-color: rgb(208, 208, 208);
} }
#header-title { #header-title {
width: 30%;
font-size: 25px; font-size: 25px;
} }
#logo { #logo {
@ -31,36 +30,25 @@
color: rgb(208, 208, 208); color: rgb(208, 208, 208);
} }
#navigation { #navigation {
width: 70%;
padding-right: 20px !important;
}
.error {
color: rgb(208, 208, 208);
position: absolute;
right: 20px;
} }
#dcimg { #dcimg {
width: 300px; width: 300px;
} }
.error {
color: rgb(208, 208, 208);
}
.big-title { .big-title {
font-family: Comfortaa; font-family: Comfortaa;
font-weight: bold; font-weight: bold;
font-size: 60px; font-size: 60px;
text-wrap: avoid;
} }
.m-title { .m-title {
font-family: Comfortaa; font-family: Comfortaa;
font-weight: normal; font-weight: normal;
font-size: 150%; font-size: 150%;
} }
.text-title {
height: 60px;
background-color: rgb(208, 208, 208);
border-radius: 20px 0px 0px 0px;
}
.text-content {
height: 335px;
background-color: rgb(242, 242, 242);
border-radius: 0px 0px 0px 20px;
}
.nav-sep { .nav-sep {
position: relative; position: relative;
left: 10px; left: 10px;
@ -81,16 +69,31 @@
color: rgb(250, 152, 33); color: rgb(250, 152, 33);
text-decoration: none; text-decoration: none;
} }
.home-content {
padding: 20px;
max-height: 40px;
}
.side-img { .side-img {
display: grid;
display: block;
position: relative; position: relative;
width: 50%; width: 50%;
border-radius: 0px 20px 20px 0px;
height: 100%;
max-height: 500px;
max-width: 500px;
} }
.side-txt { .side-txt {
display: grid;
display: block;
position: relative; position: relative;
width: 50%; width: 50%;
max-width: 500px;
}
.text-title {
background-color: rgb(208, 208, 208);
border-radius: 20px 20px 0px 0px;
}
.text-content {
background-color: rgb(242, 242, 242);
border-radius: 0px 0px 20px 20px;
} }
.main { .main {
position: relative; position: relative;
@ -98,4 +101,35 @@
} }
body { body {
background-color: #232323; background-color: #232323;
}
@media (max-width: 767px) {
.big-title {
font-size: 30px;
}
.side-img {
display: none;
}
#navigation {
position: absolute;
top: 50px;
left: 50%;
transform: translate(-50%, 0%);
width: 400px
}
.nav-item {
font-size: 19px;
}
#header-bar {
height: 100px;
}
#header-title {
left: 0px;
width: 20%;
}
#logo {
position: absolute;
left: 50%;
transform: translate(-50%, 0%);
height: 60px;
}
} }

Write Preview
Loading…
Cancel
Save