Responsive menu, general responsive fixes, concatenate scss
|
After Width: | Height: | Size: 117 KiB |
|
After Width: | Height: | Size: 149 KiB |
|
After Width: | Height: | Size: 99 KiB |
|
After Width: | Height: | Size: 166 KiB |
|
After Width: | Height: | Size: 169 KiB |
|
After Width: | Height: | Size: 109 KiB |
|
After Width: | Height: | Size: 152 KiB |
|
After Width: | Height: | Size: 144 KiB |
|
After Width: | Height: | Size: 184 KiB |
@ -1,15 +1,9 @@
|
||||
---
|
||||
title: "Workgroup Overview"
|
||||
title: 'Workgroup Overview'
|
||||
date: 2021-03-06
|
||||
draft: false
|
||||
---
|
||||
|
||||
At the foundation we have 2 different distinct types of working groups.
|
||||
|
||||
|
||||
A __Technical Workgroup (TWG)__ is a workgroup that provides technical specifications and will help define next-generation of the specifications,
|
||||
definitions, and the compliance of these specifications with primary output being specification documents.
|
||||
|
||||
|
||||
A __Special Integration Group (SIG)__ is a workgroup that provides an implementation of technical specifications with the goal to produce reference designs.
|
||||
A SIG will normally provide a reference design, a finished product, or help maintain project for direct usage.
|
||||
promo-h1: At the foundation we have 2 different distinct types of working groups.
|
||||
promo-p1: A <strong>Technical Workgroup (TWG)</strong> is a workgroup that provides technical specifications and will help define next-generation of the specifications, definitions, and the compliance of these specifications with primary output being specification documents.
|
||||
promo-p2: A <strong>Special Integration Group (SIG)</strong> is a workgroup that provides an implementation of technical specifications with the goal to produce reference designs. A SIG will normally provide a reference design, a finished product, or help maintain project for direct usage.
|
||||
---
|
||||
|
||||
@ -0,0 +1,14 @@
|
||||
.footer {
|
||||
padding: 3.75rem 0 7.5rem;
|
||||
|
||||
@media screen and (max-width: $lg) {
|
||||
padding: 2.35rem 0 2.5rem;
|
||||
}
|
||||
|
||||
@media screen and (min-width:$lg) and (max-width: $xl) {
|
||||
padding: 3.75rem 0 4.5rem;
|
||||
}
|
||||
|
||||
color: #fff;
|
||||
background-color: #02123e;
|
||||
}
|
||||
@ -0,0 +1,28 @@
|
||||
|
||||
main {
|
||||
&.groups {
|
||||
@media screen and (max-width: $lg) {
|
||||
padding-top:50px;
|
||||
padding-bottom: 40px;
|
||||
}
|
||||
|
||||
@media screen and (min-width: $lg) and (max-width: $xl) {
|
||||
padding-top:70px;
|
||||
padding-bottom: 40px;
|
||||
}
|
||||
|
||||
@media screen and (min-width: $xl) {
|
||||
padding-bottom: 50px;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.promo__section {
|
||||
align-items: center;
|
||||
&.groups {
|
||||
h1 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,27 +1,54 @@
|
||||
.promo__section {
|
||||
position: relative;
|
||||
min-height: 820px;
|
||||
color: #fff;
|
||||
background-position: 50% 50%;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover; }
|
||||
.promo__section::before {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
content: '';
|
||||
background-color: rgba(24, 38, 54, 0.4); }
|
||||
.promo {
|
||||
&__section {
|
||||
position: relative;
|
||||
min-height: 820px;
|
||||
@media screen and (max-width: $lg) {
|
||||
min-height:460px;
|
||||
}
|
||||
|
||||
.promo__container {
|
||||
position: relative; }
|
||||
@media screen and (min-width: $lg) and (max-width: $xl) {
|
||||
min-height:580px;
|
||||
}
|
||||
|
||||
.promo__title._large {
|
||||
font-size: calc(1.525rem + 3.3vw); }
|
||||
@media (min-width: 1200px) {
|
||||
.promo__title._large {
|
||||
font-size: 4rem; } }
|
||||
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;
|
||||
@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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,10 @@
|
||||
// Variables
|
||||
|
||||
// Bootstrap breakpoints
|
||||
|
||||
$xs: 0;
|
||||
$sm: 576px;
|
||||
$md: 768px;
|
||||
$lg: 992px;
|
||||
$xl: 1200px;
|
||||
$xxl: 1300px;
|
||||
@ -0,0 +1,12 @@
|
||||
<section class="promo__section groups d-flex"
|
||||
style="background-image:url(../img/promo-1.jpg)">
|
||||
<div class="promo__container container">
|
||||
<div class="d-flex justify-content-start">
|
||||
<div class="promo-wrapper p-3 p-lg-0">
|
||||
<h1>{{ .Param "promo-h1" }}</h1>
|
||||
<p>{{ .Param "promo-p1" | safeHTML }}</p>
|
||||
<p>{{ .Param "promo-p2" | safeHTML }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@ -1,8 +1,8 @@
|
||||
<section class="promo__section d-flex flex-column justify-content-center"
|
||||
style="background-image:url(./img/hero_homepage.jpg)">
|
||||
<section class="home promo__section d-flex flex-column justify-content-center"
|
||||
style="background-image:url(./img/hero_homepage.jpg)" >
|
||||
<div class="promo__container container text-center">
|
||||
<h1>{{ .Param "promo-h1" }}</h1>
|
||||
<p>{{ .Param "promo-p1" }}</p>
|
||||
<p><a class="btn btn-light" href="/">{{ .Param "promo-cta" }}</a></p>
|
||||
<p><a class="btn btn-light" href="/join">{{ .Param "promo-cta" }}</a></p>
|
||||
</div>
|
||||
</section>
|
||||