forked from website/openpower.foundation
				
			update home page as per internal dicussions
* change promo p to be html safe * add promo call to action button range which content based * change working groups section to button range which content based * retab all scss files Signed-off-by: Toshaan Bharvani <toshaan@vantosh.com>newmemberlevels
							parent
							
								
									e541722395
								
							
						
					
					
						commit
						294e5b5690
					
				@ -1,84 +1,75 @@
 | 
			
		||||
.home.promo__section {
 | 
			
		||||
  min-height: 820px;
 | 
			
		||||
	 min-height: 820px;
 | 
			
		||||
}
 | 
			
		||||
main { 
 | 
			
		||||
    &.home {
 | 
			
		||||
    @media screen and (max-width: $lg) {
 | 
			
		||||
      padding-top:50px;
 | 
			
		||||
      padding-bottom: 0;
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    @media screen and (min-width: $lg) and (max-width: $xl) {
 | 
			
		||||
      padding-top:70px;
 | 
			
		||||
    }
 | 
			
		||||
  }
 | 
			
		||||
main {
 | 
			
		||||
	&.home {
 | 
			
		||||
		@media screen and (max-width: $lg) {
 | 
			
		||||
			padding-top: 50px;
 | 
			
		||||
			padding-bottom: 0;
 | 
			
		||||
		}
 | 
			
		||||
		@media screen and (min-width: $lg) and (max-width: $xl) {
 | 
			
		||||
			padding-top: 70px;
 | 
			
		||||
		}
 | 
			
		||||
	}
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.post__article {
 | 
			
		||||
  position: relative; 
 | 
			
		||||
  &:not(:last-child) {
 | 
			
		||||
    margin-bottom: 0.75rem;
 | 
			
		||||
  }
 | 
			
		||||
	position: relative; 
 | 
			
		||||
	&:not(:last-child) {
 | 
			
		||||
		margin-bottom: 0.75rem;
 | 
			
		||||
	}
 | 
			
		||||
}
 | 
			
		||||
.post__title {
 | 
			
		||||
  display: block;
 | 
			
		||||
  margin-top: 1em;
 | 
			
		||||
  &::before {
 | 
			
		||||
    position: absolute;
 | 
			
		||||
    left: 0;
 | 
			
		||||
    top: 0;
 | 
			
		||||
    right: 0;
 | 
			
		||||
    bottom: 0;
 | 
			
		||||
    content: ''; 
 | 
			
		||||
  }
 | 
			
		||||
	display: block;
 | 
			
		||||
	margin-top: 1em;
 | 
			
		||||
	&::before {
 | 
			
		||||
		position: absolute;
 | 
			
		||||
		left: 0;
 | 
			
		||||
		top: 0;
 | 
			
		||||
		right: 0;
 | 
			
		||||
		bottom: 0;
 | 
			
		||||
		content: '';
 | 
			
		||||
	}
 | 
			
		||||
}
 | 
			
		||||
.teaser {
 | 
			
		||||
  &__section {
 | 
			
		||||
    padding: 5.625rem 0; 
 | 
			
		||||
    &._dark {
 | 
			
		||||
      color: #fff;
 | 
			
		||||
      background-color: #1b1c1f; 
 | 
			
		||||
 | 
			
		||||
      @media screen and (max-width: $lg) {
 | 
			
		||||
        padding: 3.5rem 0; 
 | 
			
		||||
      }
 | 
			
		||||
    
 | 
			
		||||
      @media screen and (min-width: $lg) and (max-width: $xl) {
 | 
			
		||||
        padding: 4.4rem 0; 
 | 
			
		||||
      }
 | 
			
		||||
    }
 | 
			
		||||
    &._navy {
 | 
			
		||||
      background-color: #acc8fa; 
 | 
			
		||||
    }
 | 
			
		||||
  }
 | 
			
		||||
  &__title {
 | 
			
		||||
    margin-bottom: 1em; 
 | 
			
		||||
 | 
			
		||||
    @media screen and (max-width: $lg) {
 | 
			
		||||
      margin-top: 0.6em;
 | 
			
		||||
    }
 | 
			
		||||
  
 | 
			
		||||
    @media screen and (min-width: $lg) and (max-width: $xl) {
 | 
			
		||||
      margin-top: 0.8em;
 | 
			
		||||
    }
 | 
			
		||||
    
 | 
			
		||||
  }
 | 
			
		||||
  &__form {
 | 
			
		||||
    margin-top: 4.1em;
 | 
			
		||||
 | 
			
		||||
    @media screen and (max-width: $lg) {
 | 
			
		||||
      margin-top: 2em;
 | 
			
		||||
    }
 | 
			
		||||
  
 | 
			
		||||
    @media screen and (min-width: $lg) and (max-width: $xl) {
 | 
			
		||||
      margin-top: 3em;
 | 
			
		||||
    }
 | 
			
		||||
  }
 | 
			
		||||
  &__info {
 | 
			
		||||
    margin: 3.75rem 0;
 | 
			
		||||
    padding: 3.75rem 0;
 | 
			
		||||
    border-width: 1px;
 | 
			
		||||
    border-style: solid none;
 | 
			
		||||
    border-color: #1b1c1f;
 | 
			
		||||
  }
 | 
			
		||||
 }
 | 
			
		||||
	&__section {
 | 
			
		||||
		padding: 5.625rem 0;
 | 
			
		||||
		&._dark {
 | 
			
		||||
			color: #fff;
 | 
			
		||||
			background-color: #1b1c1f;
 | 
			
		||||
			@media screen and (max-width: $lg) {
 | 
			
		||||
				padding: 3.5rem 0;
 | 
			
		||||
			}
 | 
			
		||||
			@media screen and (min-width: $lg) and (max-width: $xl) {
 | 
			
		||||
				padding: 4.4rem 0;
 | 
			
		||||
			}
 | 
			
		||||
		}
 | 
			
		||||
		&._navy {
 | 
			
		||||
			background-color: #acc8fa;
 | 
			
		||||
		}
 | 
			
		||||
	}
 | 
			
		||||
	&__title {
 | 
			
		||||
		margin-bottom: 1em;
 | 
			
		||||
		@media screen and (max-width: $lg) {
 | 
			
		||||
			margin-top: 0.6em;
 | 
			
		||||
		}
 | 
			
		||||
		@media screen and (min-width: $lg) and (max-width: $xl) {
 | 
			
		||||
			margin-top: 0.8em;
 | 
			
		||||
		}
 | 
			
		||||
	}
 | 
			
		||||
	&__form {
 | 
			
		||||
		margin-top: 4.1em;
 | 
			
		||||
		@media screen and (max-width: $lg) {
 | 
			
		||||
			margin-top: 2em;
 | 
			
		||||
		}
 | 
			
		||||
		@media screen and (min-width: $lg) and (max-width: $xl) {
 | 
			
		||||
			margin-top: 3em;
 | 
			
		||||
		}
 | 
			
		||||
	}
 | 
			
		||||
	&__info {
 | 
			
		||||
		margin: 3.75rem 0;
 | 
			
		||||
		padding: 3.75rem 0;
 | 
			
		||||
		border-width: 1px;
 | 
			
		||||
		border-style: solid none;
 | 
			
		||||
		border-color: #1b1c1f;
 | 
			
		||||
	}
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
@ -1,55 +1,53 @@
 | 
			
		||||
.promo {
 | 
			
		||||
  &__section {
 | 
			
		||||
    position: relative;
 | 
			
		||||
    padding-top: 150px;
 | 
			
		||||
    @media screen and (max-width: $lg) {
 | 
			
		||||
      min-height:460px;
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    @media screen and (min-width: $lg) and (max-width: $xl) {
 | 
			
		||||
      min-height:580px;
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    color: #fff;
 | 
			
		||||
    background-position: 50% 50%;
 | 
			
		||||
    background-repeat: no-repeat;
 | 
			
		||||
    background-size: cover; 
 | 
			
		||||
    &::before {
 | 
			
		||||
      position: absolute;
 | 
			
		||||
      left: 0;
 | 
			
		||||
      top: 0;
 | 
			
		||||
      right: 0;
 | 
			
		||||
      bottom: 0;
 | 
			
		||||
      content: '';
 | 
			
		||||
      background-color: rgba(24, 38, 54, 0.4); 
 | 
			
		||||
    }  
 | 
			
		||||
  }
 | 
			
		||||
  &__container {
 | 
			
		||||
    position: relative; 
 | 
			
		||||
    margin-bottom: 70px;
 | 
			
		||||
    @media screen and (max-width: $lg) {
 | 
			
		||||
      padding-top:17.5vw;
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    @media screen and (min-width: $lg) and (max-width: $xl) {
 | 
			
		||||
      padding-top:10vw;
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    .promo-wrapper {
 | 
			
		||||
      width: 50%;
 | 
			
		||||
      @media screen and (max-width: $lg) {
 | 
			
		||||
        width:100%;
 | 
			
		||||
      }
 | 
			
		||||
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
  }
 | 
			
		||||
  &__title {
 | 
			
		||||
    &._large {
 | 
			
		||||
    font-size: calc(1.525rem + 3.3vw); 
 | 
			
		||||
    @media (min-width: 1200px) {
 | 
			
		||||
        font-size: 4rem; 
 | 
			
		||||
      } 
 | 
			
		||||
    }
 | 
			
		||||
  }
 | 
			
		||||
}    
 | 
			
		||||
	&__section {
 | 
			
		||||
		position: relative;
 | 
			
		||||
		padding-top: 150px;
 | 
			
		||||
		@media screen and (max-width: $lg) {
 | 
			
		||||
			min-height: 460px;
 | 
			
		||||
		}
 | 
			
		||||
		@media screen and (min-width: $lg) and (max-width: $xl) {
 | 
			
		||||
			min-height: 580px;
 | 
			
		||||
		}
 | 
			
		||||
		color: #fff;
 | 
			
		||||
		background-position: 50% 50%;
 | 
			
		||||
		background-repeat: no-repeat;
 | 
			
		||||
		background-size: cover;
 | 
			
		||||
		&::before {
 | 
			
		||||
			position: absolute;
 | 
			
		||||
			left: 0;
 | 
			
		||||
			top: 0;
 | 
			
		||||
			right: 0;
 | 
			
		||||
			bottom: 0;
 | 
			
		||||
			content: '';
 | 
			
		||||
			background-color: rgba(24, 38, 54, 0.4);
 | 
			
		||||
		}
 | 
			
		||||
	}
 | 
			
		||||
	&__container {
 | 
			
		||||
		position: relative;
 | 
			
		||||
		margin-bottom: 70px;
 | 
			
		||||
		font-size: 1.5rem;
 | 
			
		||||
		@media screen and (max-width: $lg) {
 | 
			
		||||
			padding-top: 17.5vw;
 | 
			
		||||
		}
 | 
			
		||||
		@media screen and (min-width: $lg) and (max-width: $xl) {
 | 
			
		||||
			padding-top: 10vw;
 | 
			
		||||
		}
 | 
			
		||||
		.promo-wrapper {
 | 
			
		||||
			width: 50%;
 | 
			
		||||
			@media screen and (max-width: $lg) {
 | 
			
		||||
				width: 100%;
 | 
			
		||||
			}
 | 
			
		||||
		}
 | 
			
		||||
		p {
 | 
			
		||||
			margin-bottom: 0;
 | 
			
		||||
		}
 | 
			
		||||
	}
 | 
			
		||||
	&__title {
 | 
			
		||||
		&._large {
 | 
			
		||||
			font-size: calc(1.525rem + 3.3vw);
 | 
			
		||||
			@media (min-width: 1200px) {
 | 
			
		||||
				font-size: 4rem;
 | 
			
		||||
			}
 | 
			
		||||
		}
 | 
			
		||||
	}
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
					Loading…
					
					
				
		Reference in New Issue