* fix media query edge case was failing for 768px width before * code review * define responsive breakpoints as less variables * add missing variables.less * rename variables, drop screen constraints * fix less import * Apply suggestions from code review Co-authored-by: silverwind <me@silverwind.io> * code review altough it doesnt matter, LESS lazy evals variables Co-authored-by: zeripath <art27@cantab.net> Co-authored-by: silverwind <me@silverwind.io> Co-authored-by: techknowlogick <techknowlogick@gitea.io>
		
			
				
	
	
		
			62 lines
		
	
	
		
			758 B
		
	
	
	
		
			Plaintext
		
	
	
	
	
	
			
		
		
	
	
			62 lines
		
	
	
		
			758 B
		
	
	
	
		
			Plaintext
		
	
	
	
	
	
.home {
 | 
						|
  .logo {
 | 
						|
    max-width: 220px;
 | 
						|
  }
 | 
						|
 | 
						|
  .hero {
 | 
						|
    @media @mediaSm {
 | 
						|
      h1 {
 | 
						|
        font-size: 3.5em;
 | 
						|
      }
 | 
						|
 | 
						|
      h2 {
 | 
						|
        font-size: 2em;
 | 
						|
      }
 | 
						|
    }
 | 
						|
 | 
						|
    @media @mediaMdAndUp {
 | 
						|
      h1 {
 | 
						|
        font-size: 5.5em;
 | 
						|
      }
 | 
						|
 | 
						|
      h2 {
 | 
						|
        font-size: 3em;
 | 
						|
      }
 | 
						|
    }
 | 
						|
 | 
						|
    .svg {
 | 
						|
      color: var(--color-green);
 | 
						|
      height: 40px;
 | 
						|
      width: 50px;
 | 
						|
      vertical-align: bottom;
 | 
						|
    }
 | 
						|
 | 
						|
    &.header {
 | 
						|
      font-size: 20px;
 | 
						|
    }
 | 
						|
  }
 | 
						|
 | 
						|
  p.large {
 | 
						|
    font-size: 16px;
 | 
						|
  }
 | 
						|
 | 
						|
  .stackable {
 | 
						|
    padding-top: 30px;
 | 
						|
  }
 | 
						|
 | 
						|
  a {
 | 
						|
    color: var(--color-green);
 | 
						|
  }
 | 
						|
}
 | 
						|
 | 
						|
footer {
 | 
						|
  .ui.container .left,
 | 
						|
  .ui.container .right {
 | 
						|
    @media (max-width: 880px) {
 | 
						|
      display: block;
 | 
						|
      text-align: center;
 | 
						|
      float: none;
 | 
						|
    }
 | 
						|
  }
 | 
						|
}
 |