Skip to content
This repository has been archived by the owner on Jul 16, 2020. It is now read-only.

Commit

Permalink
Media queries added for responsive behavior
Browse files Browse the repository at this point in the history
  • Loading branch information
@hmontazerimhp
hmontazerimhp committed Apr 6, 2018
1 parent ee067b4 commit 1488668
Showing 1 changed file with 96 additions and 68 deletions.
164 changes: 96 additions & 68 deletions client/src/public/css/main.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,145 +2,173 @@
@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed');
@import url('https://fonts.googleapis.com/css?family=Fira+Sans:200');

html, body {
font-family: 'Fira Sans', sans-serif;
background-color: #fafafa;
html,
body {
font-family: 'Fira Sans', sans-serif;
background-color: #fafafa;
}

div {
user-select: none;
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
-o-user-select: none;
}
user-select: none;
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
-o-user-select: none;
}

.right {
text-align: right;
text-align: right;
}

.left {
text-align: left;
text-align: left;
}

.center {
text-align: center;
text-align: center;
}

.inline {
display: inline-block;
display: inline-block;
}

nav .container {
padding-bottom: 0;
padding-top: 0;
padding-bottom: 0;
padding-top: 0;
}

nav ul li,
nav h1 {
display: inline;
font-size: 1.4rem;
line-height: 5.2rem;
padding: 0;
text-decoration: none;
display: inline;
font-size: 1.4rem;
line-height: 5.2rem;
padding: 0;
text-decoration: none;
}

nav ul li a .icon {
font-size: 2.2rem;
font-size: 2.2rem;
}

nav ul li a {
font-family: 'Lato', sans-serif;
font-family: 'Lato', sans-serif;
}

nav ul {
float: right;
float: right;
}

nav h1 {
font-size: 2.0rem;
color: #606c76;
position: relative;
font-size: 2rem;
color: #606c76;
position: relative;
}

nav h1 .colored {
color: #606c76;
transition-duration: 2s;
color: #606c76;
transition-duration: 2s;
}

nav h1:hover .colored {
color: #9b4dca;
color: #9b4dca;
}

nav ul {
list-style: none;
margin-bottom: 0;
margin-right: 5rem;
list-style: none;
margin-bottom: 0;
margin-right: 5rem;
}

nav ul li {
float: left;
margin-bottom: 0;
margin-left: 2.5rem;
position: relative;
float: left;
margin-bottom: 0;
margin-left: 2.5rem;
position: relative;
}

header {
display: flex;
width: 100%;
align-items: center;
justify-content: center;
position: absolute;
left: 50%;
top: 45%;
transform: translate(-50%, -50%);
display: flex;
width: 100%;
align-items: center;
justify-content: center;
position: absolute;
left: 50%;
top: 45%;
transform: translate(-50%, -50%);
}

header .container {
border-top: 0;
text-align: center;
max-width: 100rem;
width: 50%;
border-top: 0;
text-align: center;
max-width: 100rem;
width: 50%;
}

.colored {
color: #9b4dca;
color: #9b4dca;
}

header .endpoint-controls button {
width: 100%;
width: 100%;
}

header h1 {
font-size: 5.6rem;
font-size: 5.6rem;
}

header .endpoint-controls input {
color: #666;
background-color: white;
color: #666;
background-color: white;
}

footer {
position: absolute;
bottom: 120px;
width: 100%;
text-align: center;
position: absolute;
bottom: 120px;
width: 100%;
text-align: center;
}

footer .heart, footer a {
color: #9b4dca;
margin: 0 10px;
footer .heart,
footer a {
color: #9b4dca;
margin: 0 10px;
}

.instructions {
color: #666;
font-size: 1.6rem;
padding: 0 30px;
margin-top: 30px;
line-height: 30px;
color: #666;
font-size: 1.6rem;
padding: 0 30px;
margin-top: 30px;
line-height: 30px;
}

.instructions h3 {
margin: 0 10px;
color: #606c76;
}
margin: 0 10px;
color: #606c76;
}

/* Media queries for responsive behavior on phone */
@media only screen and (max-device-width: 480px) {
header .container {
width: 100%;
}

header h1 {
margin-top: 6rem;
font-size: 3rem;
}

.endpoint-controls .row .column-60 {
max-width: 100%;
}

footer {
bottom: 10px;
left: 15px;
text-align: left;
}

nav ul {
margin: 0;
}
}

0 comments on commit 1488668

Please sign in to comment.