Mobile breakpoint pass -- header especially
This commit is contained in:
		
							parent
							
								
									6de8b05f67
								
							
						
					
					
						commit
						84e10c22fa
					
				
					 3 changed files with 59 additions and 33 deletions
				
			
		| 
						 | 
				
			
			@ -17,8 +17,6 @@ html {
 | 
			
		|||
}
 | 
			
		||||
 | 
			
		||||
body {
 | 
			
		||||
	margin: 0 auto;
 | 
			
		||||
	
 | 
			
		||||
	background: $white;
 | 
			
		||||
  font: 18px/1.4 $helvetica;
 | 
			
		||||
  color: $darkGray;
 | 
			
		||||
| 
						 | 
				
			
			@ -27,7 +25,7 @@ body {
 | 
			
		|||
.container {
 | 
			
		||||
  margin: 0 auto;
 | 
			
		||||
  max-width: 740px;
 | 
			
		||||
  padding: 0 20px;
 | 
			
		||||
  //padding: 0 20px;
 | 
			
		||||
  width: 100%;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
| 
						 | 
				
			
			@ -44,9 +42,6 @@ h1, h2, h3, h4, h5, h6 {
 | 
			
		|||
h1 {  
 | 
			
		||||
  font-weight: 400;
 | 
			
		||||
  font-size: 32px;
 | 
			
		||||
  @include mobile {
 | 
			
		||||
    font-size: 32px;
 | 
			
		||||
  }
 | 
			
		||||
  a {
 | 
			
		||||
    color: inherit;
 | 
			
		||||
  }
 | 
			
		||||
| 
						 | 
				
			
			@ -54,16 +49,10 @@ h1 {
 | 
			
		|||
 | 
			
		||||
h2 {  
 | 
			
		||||
  font-size: 26px;
 | 
			
		||||
  @include mobile {
 | 
			
		||||
    font-size: 24px;
 | 
			
		||||
  }
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
h3 {  
 | 
			
		||||
  font-size: 22px;
 | 
			
		||||
  @include mobile {
 | 
			
		||||
    font-size: 20px;
 | 
			
		||||
  }
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
h4 {  
 | 
			
		||||
| 
						 | 
				
			
			@ -154,14 +143,25 @@ img {
 | 
			
		|||
 | 
			
		||||
.masthead {
 | 
			
		||||
  padding: 25px 0;
 | 
			
		||||
  @include mobile {
 | 
			
		||||
    text-align: center;
 | 
			
		||||
  }
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.avatar {
 | 
			
		||||
  float: left;
 | 
			
		||||
  width: 70px;
 | 
			
		||||
 | 
			
		||||
  margin-right: 15px;
 | 
			
		||||
  border-radius: 5px;
 | 
			
		||||
 | 
			
		||||
  @include mobile {
 | 
			
		||||
    float: none;
 | 
			
		||||
    display: block;
 | 
			
		||||
    margin: 0 auto;
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
  img {
 | 
			
		||||
    border-radius: 5px;
 | 
			
		||||
  }
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.site-name {
 | 
			
		||||
| 
						 | 
				
			
			@ -172,7 +172,8 @@ img {
 | 
			
		|||
  font-size: 28px;
 | 
			
		||||
  letter-spacing: 1px;
 | 
			
		||||
  @include mobile {
 | 
			
		||||
    font-size: 22px;
 | 
			
		||||
    float: none;
 | 
			
		||||
    display: block;
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
  text-decoration: none;
 | 
			
		||||
| 
						 | 
				
			
			@ -180,6 +181,7 @@ img {
 | 
			
		|||
  color: $darkGray;
 | 
			
		||||
  &:hover, &:active {
 | 
			
		||||
    text-decoration: none;
 | 
			
		||||
    
 | 
			
		||||
  }
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
| 
						 | 
				
			
			@ -189,6 +191,12 @@ img {
 | 
			
		|||
  margin: 0;
 | 
			
		||||
  margin-top: -5px;
 | 
			
		||||
  color: $darkGray;
 | 
			
		||||
 | 
			
		||||
  @include mobile {
 | 
			
		||||
    float: none;
 | 
			
		||||
    display: block;
 | 
			
		||||
    margin: 3px 0;
 | 
			
		||||
  }
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
nav {
 | 
			
		||||
| 
						 | 
				
			
			@ -198,7 +206,10 @@ nav {
 | 
			
		|||
  font-family: $helveticaNeue; 
 | 
			
		||||
  font-size: 18px;
 | 
			
		||||
  @include mobile {
 | 
			
		||||
    font-size: 18px;
 | 
			
		||||
    float: none;
 | 
			
		||||
    display: block;
 | 
			
		||||
    margin-top: 15px;
 | 
			
		||||
    font-size: 16px;
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
  // nav has it's own link highlighting
 | 
			
		||||
| 
						 | 
				
			
			@ -214,6 +225,10 @@ nav {
 | 
			
		|||
      cursor: pointer;
 | 
			
		||||
      color: $darkGray;
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    @include mobile {
 | 
			
		||||
      margin: 0 10px;
 | 
			
		||||
    }
 | 
			
		||||
  }
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
| 
						 | 
				
			
			@ -250,6 +265,7 @@ nav {
 | 
			
		|||
}
 | 
			
		||||
 | 
			
		||||
.wrapper-footer {
 | 
			
		||||
  margin-top: 50px;
 | 
			
		||||
  background-color: #eee;
 | 
			
		||||
  border-top: 1px solid #ddd;
 | 
			
		||||
}
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
		Loading…
	
	Add table
		Add a link
		
	
		Reference in a new issue