public
/
website
5
0
Fork 0
Code Issues Pull Requests 3 Packages Projects Releases Wiki Activity

WIP: begin migration towards sexy looking homepage #14

Draft
ryan wants to merge 7 commits from ryansquared/layouts into main
pull from: ryansquared/layouts
merge into: public:main
Conversation 1 Commits 7 Files Changed 10 +77 -85
10 changed files with 77 additions and 85 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
_includes/head.html
View File

@ -1,7 +1,7 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="icon" type="image/png" sizes="32x32" href="/assets/favicons/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="32x32" href="/assets/favicons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="/assets/favicons/favicon-96x96.png"> <link rel="icon" type="image/png" sizes="96x96" href="/assets/favicons/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="/assets/favicons/favicon-16x16.png"> <link rel="icon" type="image/png" sizes="16x16" href="/assets/favicons/favicon-16x16.png">

4
_includes/header.html
View File

@ -1,7 +1,7 @@
{%- assign page_paths = site.header_pages | default: default_paths -%} {%- assign page_paths = site.header_pages | default: default_paths -%}
<header> <header>
<div class="menu"> <div class="menu">
<div> <div class="left-menu">
<a id="home-link" href="/index.html"> <a id="home-link" href="/index.html">
<img class="menu-logo" src="assets/base/distrust-text-white.svg" <img class="menu-logo" src="assets/base/distrust-text-white.svg"
alt="Distrust broken chain logo with white text" /> alt="Distrust broken chain logo with white text" />
@ -18,7 +18,7 @@
{%- endif -%} {%- endif -%}
{%- endfor -%} {%- endfor -%}
<li class="show"> <li class="show">
<a href="/contact.html" class="action-button">Free Consultation</a> <a href="/contact.html" class="mega button">Free Consultation</a>
</li> </li>
</ul> </ul>
<div id="hamburger-menu" class="hide menu-button-container" for="menu-toggle"> <div id="hamburger-menu" class="hide menu-button-container" for="menu-toggle">

11
_layouts/about.html
View File

@ -4,10 +4,9 @@
{%- include head.html -%} {%- include head.html -%}
<body> <body>
<div class="container">
{%- include header.html -%} {%- include header.html -%}
<div class="container">
<main> <main>
<section> <section>
<h2>About Distrust</h2> <h2>About Distrust</h2>
@ -35,13 +34,11 @@
<li>How do you know the offline laptop with the keys to the kingdom has not been tampered with?</li> <li>How do you know the offline laptop with the keys to the kingdom has not been tampered with?</li>
<li>Do you have a plan for <i>when</i> your production systems are compromised?</li> <li>Do you have a plan for <i>when</i> your production systems are compromised?</li>
</ul> </ul>
<br /> <div class="button-container">
<br /> <a href="/contact.html" class="mega button">Free Consultation</a>
<a href="/contact.html" class="action-button">Free Consultation</a> </div>
</section> </section>
<hr />
<section> <section>
<h2>Values</h2> <h2>Values</h2>

4
_layouts/contact.html
View File

@ -3,9 +3,9 @@
{%- include head.html -%} {%- include head.html -%}
<body> <body>
<div class="container">
{%- include header.html -%} {%- include header.html -%}
<div class="container">
<main> <main>
<h2>What are your biggest security challenges?</h2> <h2>What are your biggest security challenges?</h2>
<hr /> <hr />

19
_layouts/landing.html
View File

@ -3,10 +3,9 @@
{%- include head.html -%} {%- include head.html -%}
<body> <body>
<div class="container">
{%- include header.html -%} {%- include header.html -%}
<div class="container">
<main> <main>
<section class="flex-container"> <section class="flex-container">
<div class="flex-container-inner"> <div class="flex-container-inner">
@ -14,7 +13,7 @@
<h2>Understand and mitigate security threats others won't see coming.</h2> <h2>Understand and mitigate security threats others won't see coming.</h2>
<p>We believe security compromises to your systems and personnel are <b>inevitable</b>. Allow our team of experienced security engineers to help you reduce the likelihood and impact of risks by thinking from first principles.</p> <p>We believe security compromises to your systems and personnel are <b>inevitable</b>. Allow our team of experienced security engineers to help you reduce the likelihood and impact of risks by thinking from first principles.</p>
<br /> <br />
<a href="/contact.html" class="action-button">Free Consultation</a> <a href="/contact.html" class="mega button">Free Consultation</a>
<br /> <br />
</div> </div>
</div> </div>
@ -27,8 +26,6 @@
</div> </div>
</section> </section>
<hr />
<section class=""> <section class="">
<div class="flex-container-inner"> <div class="flex-container-inner">
<div class="text-well"> <div class="text-well">
@ -129,16 +126,14 @@
</div> </div>
</section> </section>
<hr/>
<section class=""> <section class="">
<div class="flex-container-inner" style="align-items: baseline"> <div class="flex-container-inner" style="align-items: baseline">
<div class="text-well"> <div class="text-well">
<h1>Services</h1> <h1>Services</h1>
<p>Distrust offers a wide range of services which are tailored to your organization. Whether you need a complete security assessment, want to create or improve an open source security tool, or want to focus on assessing a specific aspect of your organization or system - we are here to help. Our experienced staff will collaborate closely with you to understand your unique needs and create a tailor made solution that works for you.</p> <p>Distrust offers a wide range of services which are tailored to your organization. Whether you need a complete security assessment, want to create or improve an open source security tool, or want to focus on assessing a specific aspect of your organization or system - we are here to help. Our experienced staff will collaborate closely with you to understand your unique needs and create a tailor made solution that works for you.</p>
<div class="button-container"> <div class="button-container">
<a class="action-button" href="/services.html">Learn more</a> <a class="button" href="/services.html">Learn more</a>
<a href="/contact.html" class="action-button">Free Consultation</a> <a href="/contact.html" class="mega button">Free Consultation</a>
</div> </div>
</div> </div>
</div> </div>
@ -182,9 +177,9 @@
</div> </div>
</div> </div>
<br /> <div class="button-container">
<br /> <a href="/contact.html" class="mega button">Free Consultation</a>
<a href="/contact.html" class="action-button">Free Consultation</a> </div>
</section> </section>
</main> </main>
{%- include footer.html -%} {%- include footer.html -%}

17
_layouts/services.html
View File

@ -4,27 +4,24 @@
{%- include head.html -%} {%- include head.html -%}
<body> <body>
<div class="container">
{%- include header.html -%} {%- include header.html -%}
<div class="container">
<main> <main>
<section class="flex-container"> <section class="flex-container">
<div class="flex-container-inner"> <div class="flex-container-inner">
<div class="text-well"> <div class="text-well">
<h2>How can we help you?</h2> <h2>How can we help you?</h2>
<p>Distrust offers a wide range of services which are tailored to your organization. Whether you need a complete security assessment, want to create or improve an open source security tool, or want to focus on assessing a specific aspect of your organization or system - we are here to help. Our experienced staff will collaborate closely with you to understand your unique needs and create a tailor made solution that works for you.</p> <p>Distrust offers a wide range of services which are tailored to your organization. Whether you need a complete security assessment, want to create or improve an open source security tool, or want to focus on assessing a specific aspect of your organization or system - we are here to help. Our experienced staff will collaborate closely with you to understand your unique needs and create a tailor made solution that works for you.</p>
<br /> <div class="button-container">
<a href="/contact.html" class="action-button">Free Consultation</a> <a href="/contact.html" class="mega button">Free Consultation</a>
<br /> </div>
</div> </div>
</div> </div>
<div class="flex-container-inner"> <div class="flex-container-inner">
</div> </div>
</section> </section>
<hr />
<section class="flex-container"> <section class="flex-container">
<div class="flex-container-inner"> <div class="flex-container-inner">
<div class="text-well"> <div class="text-well">
@ -43,8 +40,6 @@
</div> </div>
</section> </section>
<hr />
<section class="flex-container"> <section class="flex-container">
<div class="flex-container-inner"> <div class="flex-container-inner">
<div class="text-well"> <div class="text-well">
@ -64,8 +59,6 @@
</div> </div>
</section> </section>
<hr />
<section class="flex-container"> <section class="flex-container">
<div class="flex-container-inner"> <div class="flex-container-inner">
<div class="text-well"> <div class="text-well">
@ -84,8 +77,6 @@
</div> </div>
</section> </section>
<hr />
<section class="flex-container"> <section class="flex-container">
<div class="flex-container-inner"> <div class="flex-container-inner">
<div class="text-well"> <div class="text-well">

13
_layouts/tools.html
View File

@ -5,10 +5,9 @@
{%- include head.html -%} {%- include head.html -%}
<body> <body>
<div class="container">
{%- include header.html -%} {%- include header.html -%}
<div class="container">
<main> <main>
<section class="flex-container"> <section class="flex-container">
<div class="flex-container-inner"> <div class="flex-container-inner">
@ -23,8 +22,6 @@
</div> </div>
</section> </section>
<hr />
<section class="flex-container"> <section class="flex-container">
<div class="flex-container-inner"> <div class="flex-container-inner">
<div class="text-well"> <div class="text-well">
@ -44,8 +41,6 @@
</div> </div>
</section> </section>
<hr />
<section class="flex-container"> <section class="flex-container">
<div class="flex-container-inner"> <div class="flex-container-inner">
<div class="text-well"> <div class="text-well">
@ -64,8 +59,6 @@
</div> </div>
</section> </section>
<hr />
<section class="flex-container"> <section class="flex-container">
<div class="flex-container-inner"> <div class="flex-container-inner">
<div class="text-well"> <div class="text-well">
@ -84,8 +77,6 @@
</div> </div>
</section> </section>
<hr />
<section class="flex-container"> <section class="flex-container">
<div class="flex-container-inner"> <div class="flex-container-inner">
<div class="text-well"> <div class="text-well">
@ -104,8 +95,6 @@
</div> </div>
</section> </section>
<hr />
<section class="flex-container"> <section class="flex-container">
<div class="flex-container-inner"> <div class="flex-container-inner">
<div class="text-well"> <div class="text-well">

7
_sass/_dark.scss
View File

@ -3,14 +3,17 @@
*/ */
:root { :root {
--base-color: #FFFFFF; --base-color: rgba(255, 255, 255, 0.87);
--header-color: #ffffff;
--border: solid 2px rgba(219, 219, 219, 0.9); --border: solid 2px rgba(219, 219, 219, 0.9);
--selection-background: rgba(219, 219, 219, 0.99); --selection-background: rgba(219, 219, 219, 0.99);
--selection-text: #000; --selection-text: #000;
--background-color: #282828; --background-color: #141414;
--text-color: var(--base-color); --text-color: var(--base-color);
--placeholder-color: rgba(0, 0, 0, 0.5); --placeholder-color: rgba(0, 0, 0, 0.5);
--link-color: var(--base-color); --link-color: var(--base-color);
/* yoinkt from Material Design 2014, Deep Purple A200 */
--mega-color: #7c4dff;
--code-color-1: #aaaaaa; --code-color-1: #aaaaaa;
--code-color-2: #ffffcc; --code-color-2: #ffffcc;
--code-color-3: #F00000; --code-color-3: #F00000;

3
_sass/_light.scss
View File

@ -3,7 +3,8 @@
*/ */
:root { :root {
--base-color: #000; --base-color: rgba(0, 0, 0, 0.87);
--header-color: rgba(0, 0, 0, 0);
--border: dashed 1px rgba(0, 0, 0, 1); --border: dashed 1px rgba(0, 0, 0, 1);
--selection-background: rgba(0, 0, 0, 0.99); --selection-background: rgba(0, 0, 0, 0.99);
--selection-text: #FFF; --selection-text: #FFF;

70
_sass/base.scss
View File

@ -65,7 +65,7 @@ h6 {
margin-top: 0px; margin-top: 0px;
margin-bottom: 12px; margin-bottom: 12px;
font-weight: bold; font-weight: bold;
color: var(--text-color); color: var(--header-color);
} }
p, p,
@ -78,6 +78,7 @@ ol {
a { a {
text-decoration: underline; text-decoration: underline;
color: var(--link-color); color: var(--link-color);
transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
} }
a:hover { a:hover {
@ -121,8 +122,9 @@ footer {
} }
header { header {
margin-top: 24px; padding: 24px;
margin-bottom: 24px; margin-bottom: 24px;
border-bottom: 1px solid rgba(255, 255, 255, 0.13);
} }
header p { header p {
@ -142,7 +144,7 @@ hr {
* Navbar * Navbar
*/ */
.menu-logo { .menu-logo {
height: 60px; height: 48px;
} }
#home-link:hover { #home-link:hover {
@ -163,6 +165,16 @@ hr {
.header-page-links a:hover { .header-page-links a:hover {
background-color: transparent; background-color: transparent;
color: lightgrey; color: lightgrey;
text-decoration: underline;
}
.left-menu {
display: flex;
align-items: center;
}
.left-menu img {
display: flex;
} }
.right-menu { .right-menu {
@ -225,7 +237,7 @@ hr {
.menu-content { .menu-content {
position: absolute; position: absolute;
display: none; display: none;
background: #282828; background: var(--background-color);
text-align: right; text-align: right;
margin-top: 100px; margin-top: 100px;
width: 100%; width: 100%;
@ -283,22 +295,35 @@ hr {
/** /**
* Buttons * Buttons
*/ */
.action-button { .button {
display: inline-block; display: inline-block;
padding: 10px 20px 9px 20px; padding: 10px 20px 9px 20px;
margin-top: 10px; margin-top: 10px;
border-color: white; color: var(--base-color);
border: solid 1px; background-color: var(--background-color);
color: black; border: 2px solid white;
background-color: white;
text-decoration: none; text-decoration: none;
transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
} }
.action-button:hover { .button:hover {
background-color: transparent; /* invert */
border-color: white; background-color: var(--base-color);
border: solid 1px; color: var(--background-color);
color: white; transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
}
/* important button */
.mega.button {
background-color: var(--mega-color);
color: var(--base-color);
border: 2px solid var(--mega-color);
}
.mega.button:hover {
/* invert */
background-color: color-mix(in srgb, var(--mega-color), white 10%);
color: var(--base-color);
} }
.button-container { .button-container {
@ -344,17 +369,13 @@ hr {
* Header/Navigation * Header/Navigation
*/ */
.menu { .menu {
border-bottom: var(--border); /* border-bottom: var(--border); */
margin-bottom: 20px;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
padding-bottom: 25px;
} }
.menu ul { .menu ul {
margin-top: 12px;
margin-bottom: 12px;
padding-left: 0px; padding-left: 0px;
list-style-type: none; list-style-type: none;
text-align: right; text-align: right;
@ -499,12 +520,7 @@ textarea {
section { section {
margin-top: 48px; margin-top: 48px;
margin-bottom: 48px; margin-bottom: 96px;
}
.extra-spacing {
margin-top: 70px;
margin-bottom: 70px;
} }
.companies { .companies {
@ -537,7 +553,7 @@ section {
} }
.text-well { .text-well {
max-width: 600px; max-width: 100%;
padding-right: 35px; padding-right: 35px;
} }
@ -898,7 +914,7 @@ pre {
.carousel-item { .carousel-item {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: start;
max-width: 400px; max-width: 400px;
height: 80px; height: 80px;
width: 100%; width: 100%;