fix 3 column

en/static/css/app.css

@@ -53,7 +53,7 @@ html, body {
 body {
   padding: 0;
   margin: 0;
-  color: #181A1B;
+  color: #000;
   font-size: 1em;
   line-height: 1.4;
   font-family: ClearSans;
@@ -64,10 +64,14 @@ body {
   .container {
     max-width: 960px;
   }
+
+  .wide .container {
+    max-width: 1150px;
+  }
 }
 
 a {
-  color: #17191A;
+  color: #800;
   text-decoration: underline;
 }
 
@@ -84,15 +88,57 @@ nav a,
   text-decoration: none;
 }
 
+nav {
+  text-align: center;
+}
+
+nav a {
+  display: inline-block;
+}
+
 nav a.text-dark:hover,
 nav a.text-dark:focus {
-  color: #17191A !important;
+  color: #800 !important;
 }
 
 .avatar {
   max-width: 250px;
 }
 
+.team {
+  display: grid;
+  grid-template-columns: repeat(1, 1fr);
+  grid-column-gap: 15px;
+  grid-row-gap: 15px;
+  margin-top: 15px;
+}
+
+.alumni {
+  opacity: 0.6;
+}
+
+.person-avatar {
+  max-width: 80px;
+  border-radius: 50%;
+  margin-right: 15px;
+  float: left;
+}
+
+.person-name {
+  display: block;
+  font-weight: bold;
+  padding-bottom: 10px;
+}
+
+.person-links {
+  display: inline-block;
+  font-size: 1.3rem;
+}
+
+.person-links a:not(:last-child) {
+  margin-right: 5px;
+}
+
 .page {
   min-height: 100%;
   margin-bottom: -92px;
@@ -108,16 +154,30 @@ nav a.text-dark:focus {
   font-weight: bold;
 }
 
+.section {
+  text-decoration: underline;
+}
+
 .services {
   display: grid;
-  grid-template-columns: auto auto;
+  grid-template-columns: auto;
   grid-column-gap: 40px;
   grid-row-gap: 40px;
 }
 
-@media (max-width: 768px) {
+@media (min-width: 768px) {
   .services {
-    grid-template-columns: auto;
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  .team {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+@media (min-width: 1200px) {
+  .services {
+    grid-template-columns: repeat(3, 1fr);
   }
 }
 
@@ -127,6 +187,18 @@ nav a.text-dark:focus {
   padding-right: 10px;
 }
 
+.tools h5 {
+  border-bottom: 1px solid gray;
+}
+
+.tool-img {
+  max-height: 80px;
+}
+
+.tools a.btn {
+  text-decoration: none;
+}
+
 .card-footer {
   padding: 0 1.25rem 1rem 1.25rem;
   background-color: transparent;
@@ -143,7 +215,45 @@ nav a.text-dark:focus {
   margin: inherit;
 }
 
+.beta {
+  color: gray;
+}
+
+pre,
+code {
+  background-color: #f6f8fa;
+  line-height: 1.45;
+  font-size: 0.9rem;
+  padding: 5px;
+  color: #e83e8c;
+}
+
+pre > code {
+  padding: 0;
+}
+
+.extra a {
+  text-decoration: none;
+}
+
 footer {
-  margin: 10px auto 0;
   text-align: center;
 }
+
+.footer-link {
+  display: block;
+  font-size: 1.1rem;
+  margin-bottom: 8px;
+}
+
+.footer-col {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+  align-items: center;
+}
+
+.footer-col a,
+.footer-avatar {
+  max-width: 80px;
+}

es/static/css/app.css

@@ -64,6 +64,10 @@ body {
   .container {
     max-width: 960px;
   }
+
+  .wide .container {
+    max-width: 1150px;
+  }
 }
 
 a {
@@ -84,6 +88,14 @@ nav a,
   text-decoration: none;
 }
 
+nav {
+  text-align: center;
+}
+
+nav a {
+  display: inline-block;
+}
+
 nav a.text-dark:hover,
 nav a.text-dark:focus {
   color: #800 !important;
@@ -93,6 +105,40 @@ nav a.text-dark:focus {
   max-width: 250px;
 }
 
+.team {
+  display: grid;
+  grid-template-columns: repeat(1, 1fr);
+  grid-column-gap: 15px;
+  grid-row-gap: 15px;
+  margin-top: 15px;
+}
+
+.alumni {
+  opacity: 0.6;
+}
+
+.person-avatar {
+  max-width: 80px;
+  border-radius: 50%;
+  margin-right: 15px;
+  float: left;
+}
+
+.person-name {
+  display: block;
+  font-weight: bold;
+  padding-bottom: 10px;
+}
+
+.person-links {
+  display: inline-block;
+  font-size: 1.3rem;
+}
+
+.person-links a:not(:last-child) {
+  margin-right: 5px;
+}
+
 .page {
   min-height: 100%;
   margin-bottom: -92px;
@@ -108,16 +154,30 @@ nav a.text-dark:focus {
   font-weight: bold;
 }
 
+.section {
+  text-decoration: underline;
+}
+
 .services {
   display: grid;
-  grid-template-columns: auto auto;
+  grid-template-columns: auto;
   grid-column-gap: 40px;
   grid-row-gap: 40px;
 }
 
-@media (max-width: 768px) {
+@media (min-width: 768px) {
   .services {
-    grid-template-columns: auto;
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  .team {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+@media (min-width: 1200px) {
+  .services {
+    grid-template-columns: repeat(3, 1fr);
   }
 }
 
@@ -127,6 +187,18 @@ nav a.text-dark:focus {
   padding-right: 10px;
 }
 
+.tools h5 {
+  border-bottom: 1px solid gray;
+}
+
+.tool-img {
+  max-height: 80px;
+}
+
+.tools a.btn {
+  text-decoration: none;
+}
+
 .card-footer {
   padding: 0 1.25rem 1rem 1.25rem;
   background-color: transparent;
@@ -143,7 +215,45 @@ nav a.text-dark:focus {
   margin: inherit;
 }
 
+.beta {
+  color: gray;
+}
+
+pre,
+code {
+  background-color: #f6f8fa;
+  line-height: 1.45;
+  font-size: 0.9rem;
+  padding: 5px;
+  color: #e83e8c;
+}
+
+pre > code {
+  padding: 0;
+}
+
+.extra a {
+  text-decoration: none;
+}
+
 footer {
-  margin: 10px auto 0;
   text-align: center;
 }
+
+.footer-link {
+  display: block;
+  font-size: 1.1rem;
+  margin-bottom: 8px;
+}
+
+.footer-col {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+  align-items: center;
+}
+
+.footer-col a,
+.footer-avatar {
+  max-width: 80px;
+}

fr/static/css/app.css

@@ -53,7 +53,7 @@ html, body {
 body {
   padding: 0;
   margin: 0;
-  color: #181A1B;
+  color: #000;
   font-size: 1em;
   line-height: 1.4;
   font-family: ClearSans;
@@ -64,10 +64,14 @@ body {
   .container {
     max-width: 960px;
   }
+
+  .wide .container {
+    max-width: 1150px;
+  }
 }
 
 a {
-  color: #17191A;
+  color: #800;
   text-decoration: underline;
 }
 
@@ -84,15 +88,57 @@ nav a,
   text-decoration: none;
 }
 
+nav {
+  text-align: center;
+}
+
+nav a {
+  display: inline-block;
+}
+
 nav a.text-dark:hover,
 nav a.text-dark:focus {
-  color: #17191A !important;
+  color: #800 !important;
 }
 
 .avatar {
   max-width: 250px;
 }
 
+.team {
+  display: grid;
+  grid-template-columns: repeat(1, 1fr);
+  grid-column-gap: 15px;
+  grid-row-gap: 15px;
+  margin-top: 15px;
+}
+
+.alumni {
+  opacity: 0.6;
+}
+
+.person-avatar {
+  max-width: 80px;
+  border-radius: 50%;
+  margin-right: 15px;
+  float: left;
+}
+
+.person-name {
+  display: block;
+  font-weight: bold;
+  padding-bottom: 10px;
+}
+
+.person-links {
+  display: inline-block;
+  font-size: 1.3rem;
+}
+
+.person-links a:not(:last-child) {
+  margin-right: 5px;
+}
+
 .page {
   min-height: 100%;
   margin-bottom: -92px;
@@ -108,16 +154,30 @@ nav a.text-dark:focus {
   font-weight: bold;
 }
 
+.section {
+  text-decoration: underline;
+}
+
 .services {
   display: grid;
-  grid-template-columns: auto auto;
+  grid-template-columns: auto;
   grid-column-gap: 40px;
   grid-row-gap: 40px;
 }
 
-@media (max-width: 768px) {
+@media (min-width: 768px) {
   .services {
-    grid-template-columns: auto;
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  .team {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+@media (min-width: 1200px) {
+  .services {
+    grid-template-columns: repeat(3, 1fr);
   }
 }
 
@@ -127,6 +187,18 @@ nav a.text-dark:focus {
   padding-right: 10px;
 }
 
+.tools h5 {
+  border-bottom: 1px solid gray;
+}
+
+.tool-img {
+  max-height: 80px;
+}
+
+.tools a.btn {
+  text-decoration: none;
+}
+
 .card-footer {
   padding: 0 1.25rem 1rem 1.25rem;
   background-color: transparent;
@@ -143,7 +215,45 @@ nav a.text-dark:focus {
   margin: inherit;
 }
 
+.beta {
+  color: gray;
+}
+
+pre,
+code {
+  background-color: #f6f8fa;
+  line-height: 1.45;
+  font-size: 0.9rem;
+  padding: 5px;
+  color: #e83e8c;
+}
+
+pre > code {
+  padding: 0;
+}
+
+.extra a {
+  text-decoration: none;
+}
+
 footer {
-  margin: 10px auto 0;
   text-align: center;
 }
+
+.footer-link {
+  display: block;
+  font-size: 1.1rem;
+  margin-bottom: 8px;
+}
+
+.footer-col {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+  align-items: center;
+}
+
+.footer-col a,
+.footer-avatar {
+  max-width: 80px;
+}

it/static/css/app.css

@@ -53,7 +53,7 @@ html, body {
 body {
   padding: 0;
   margin: 0;
-  color: #181A1B;
+  color: #000;
   font-size: 1em;
   line-height: 1.4;
   font-family: ClearSans;
@@ -64,10 +64,14 @@ body {
   .container {
     max-width: 960px;
   }
+
+  .wide .container {
+    max-width: 1150px;
+  }
 }
 
 a {
-  color: #17191A;
+  color: #800;
   text-decoration: underline;
 }
 
@@ -84,15 +88,57 @@ nav a,
   text-decoration: none;
 }
 
+nav {
+  text-align: center;
+}
+
+nav a {
+  display: inline-block;
+}
+
 nav a.text-dark:hover,
 nav a.text-dark:focus {
-  color: #17191A !important;
+  color: #800 !important;
 }
 
 .avatar {
   max-width: 250px;
 }
 
+.team {
+  display: grid;
+  grid-template-columns: repeat(1, 1fr);
+  grid-column-gap: 15px;
+  grid-row-gap: 15px;
+  margin-top: 15px;
+}
+
+.alumni {
+  opacity: 0.6;
+}
+
+.person-avatar {
+  max-width: 80px;
+  border-radius: 50%;
+  margin-right: 15px;
+  float: left;
+}
+
+.person-name {
+  display: block;
+  font-weight: bold;
+  padding-bottom: 10px;
+}
+
+.person-links {
+  display: inline-block;
+  font-size: 1.3rem;
+}
+
+.person-links a:not(:last-child) {
+  margin-right: 5px;
+}
+
 .page {
   min-height: 100%;
   margin-bottom: -92px;
@@ -108,16 +154,30 @@ nav a.text-dark:focus {
   font-weight: bold;
 }
 
+.section {
+  text-decoration: underline;
+}
+
 .services {
   display: grid;
-  grid-template-columns: auto auto;
+  grid-template-columns: auto;
   grid-column-gap: 40px;
   grid-row-gap: 40px;
 }
 
-@media (max-width: 768px) {
+@media (min-width: 768px) {
   .services {
-    grid-template-columns: auto;
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  .team {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+@media (min-width: 1200px) {
+  .services {
+    grid-template-columns: repeat(3, 1fr);
   }
 }
 
@@ -127,6 +187,18 @@ nav a.text-dark:focus {
   padding-right: 10px;
 }
 
+.tools h5 {
+  border-bottom: 1px solid gray;
+}
+
+.tool-img {
+  max-height: 80px;
+}
+
+.tools a.btn {
+  text-decoration: none;
+}
+
 .card-footer {
   padding: 0 1.25rem 1rem 1.25rem;
   background-color: transparent;
@@ -143,7 +215,45 @@ nav a.text-dark:focus {
   margin: inherit;
 }
 
+.beta {
+  color: gray;
+}
+
+pre,
+code {
+  background-color: #f6f8fa;
+  line-height: 1.45;
+  font-size: 0.9rem;
+  padding: 5px;
+  color: #e83e8c;
+}
+
+pre > code {
+  padding: 0;
+}
+
+.extra a {
+  text-decoration: none;
+}
+
 footer {
-  margin: 10px auto 0;
   text-align: center;
 }
+
+.footer-link {
+  display: block;
+  font-size: 1.1rem;
+  margin-bottom: 8px;
+}
+
+.footer-col {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+  align-items: center;
+}
+
+.footer-col a,
+.footer-avatar {
+  max-width: 80px;
+}

static/css/app.css

@@ -53,7 +53,7 @@ html, body {
 body {
   padding: 0;
   margin: 0;
-  color: #181A1B;
+  color: #000;
   font-size: 1em;
   line-height: 1.4;
   font-family: ClearSans;
@@ -64,10 +64,14 @@ body {
   .container {
     max-width: 960px;
   }
+
+  .wide .container {
+    max-width: 1150px;
+  }
 }
 
 a {
-  color: #17191A;
+  color: #800;
   text-decoration: underline;
 }
 
@@ -84,15 +88,57 @@ nav a,
   text-decoration: none;
 }
 
+nav {
+  text-align: center;
+}
+
+nav a {
+  display: inline-block;
+}
+
 nav a.text-dark:hover,
 nav a.text-dark:focus {
-  color: #17191A !important;
+  color: #800 !important;
 }
 
 .avatar {
   max-width: 250px;
 }
 
+.team {
+  display: grid;
+  grid-template-columns: repeat(1, 1fr);
+  grid-column-gap: 15px;
+  grid-row-gap: 15px;
+  margin-top: 15px;
+}
+
+.alumni {
+  opacity: 0.6;
+}
+
+.person-avatar {
+  max-width: 80px;
+  border-radius: 50%;
+  margin-right: 15px;
+  float: left;
+}
+
+.person-name {
+  display: block;
+  font-weight: bold;
+  padding-bottom: 10px;
+}
+
+.person-links {
+  display: inline-block;
+  font-size: 1.3rem;
+}
+
+.person-links a:not(:last-child) {
+  margin-right: 5px;
+}
+
 .page {
   min-height: 100%;
   margin-bottom: -92px;
@@ -108,16 +154,30 @@ nav a.text-dark:focus {
   font-weight: bold;
 }
 
+.section {
+  text-decoration: underline;
+}
+
 .services {
   display: grid;
-  grid-template-columns: auto auto;
+  grid-template-columns: auto;
   grid-column-gap: 40px;
   grid-row-gap: 40px;
 }
 
-@media (max-width: 768px) {
+@media (min-width: 768px) {
   .services {
-    grid-template-columns: auto;
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  .team {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+@media (min-width: 1200px) {
+  .services {
+    grid-template-columns: repeat(3, 1fr);
   }
 }
 
@@ -127,6 +187,18 @@ nav a.text-dark:focus {
   padding-right: 10px;
 }
 
+.tools h5 {
+  border-bottom: 1px solid gray;
+}
+
+.tool-img {
+  max-height: 80px;
+}
+
+.tools a.btn {
+  text-decoration: none;
+}
+
 .card-footer {
   padding: 0 1.25rem 1rem 1.25rem;
   background-color: transparent;
@@ -143,7 +215,45 @@ nav a.text-dark:focus {
   margin: inherit;
 }
 
+.beta {
+  color: gray;
+}
+
+pre,
+code {
+  background-color: #f6f8fa;
+  line-height: 1.45;
+  font-size: 0.9rem;
+  padding: 5px;
+  color: #e83e8c;
+}
+
+pre > code {
+  padding: 0;
+}
+
+.extra a {
+  text-decoration: none;
+}
+
 footer {
-  margin: 10px auto 0;
   text-align: center;
 }
+
+.footer-link {
+  display: block;
+  font-size: 1.1rem;
+  margin-bottom: 8px;
+}
+
+.footer-col {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+  align-items: center;
+}
+
+.footer-col a,
+.footer-avatar {
+  max-width: 80px;
+}