Merge pull request #6 from islami00/gh-pages

First release
chocolatenetwork · Jan 23, 2022 · 35721db · 35721db
2 parents c2f9994 + c509f44
commit 35721db
Show file tree

Hide file tree

Showing 12 changed files with 133 additions and 87 deletions.
diff --git a/_data/siteconfig.yaml b/_data/siteconfig.yaml
@@ -7,4 +7,4 @@
 - medium:
  user:
 - litepaper:
- link:
+ link: https://github.com/chocolatenetwork/docs/tree/main/litepaper
diff --git a/_includes/nav.html b/_includes/nav.html
@@ -12,31 +12,31 @@
 <nav class="nav nav_social" aria-label="social links">
  <ul>
  <li>
- <a href="{{discord.link}}" class="link " target="_blank"><i class="fab light fa-discord fa-fw"></i></a>
+ <a href="{{discord.link}}" class="link link--dark " target="_blank"><i class="fab light fa-discord fa-fw"></i></a>
  </li>
  <li>
- <a href="https://www.linkedin.com/company/{{linkedin.company}}" class="link " target="_blank"><i class="fab fa-linkedin fa-fw"></i></a>
+ <a href="https://www.linkedin.com/company/{{linkedin.company}}" class="link link--dark " target="_blank"><i class="fab fa-linkedin fa-fw"></i></a>
  </li>
  <li>
- <a href="https://twitter.com/{{twitter.user}}" class="link " target="_blank"><i class="fab fa-twitter fa-fw"></i></a>
+ <a href="https://twitter.com/{{twitter.user}}" class="link link--dark " target="_blank"><i class="fab fa-twitter fa-fw"></i></a>
  </li>
  <li>
- <a href="{{medium.user}}" class="link " target="_blank"><i class="fab fa-medium fa-fw"></i></a>
+ <a href="{{medium.user}}" class="link link--dark " target="_blank"><i class="fab fa-medium fa-fw"></i></a>
  </li>
  </ul>
 </nav>
-<div class="nav-wrap--main">
+<hr class="nav_hr">
 <nav class="nav nav_main" aria-label="Site menu">
  <a class="logo link" href={{'/#home' | relative_url}}
  ><i class="chocolate"></i><span class="text--light">chocolate <b>network</b></span></a
  >
  <ul>
- <li><a href={{'/#home' | relative_url}} class="link link--dark">home</a></li>
- <li><a href={{'/#about' | relative_url}} class="link link--dark">about</a></li>
- <li><a href={{'/#footer' | relative_url}} class="link link--dark">contact</a></li>
+ <li><a href={{'/#home' | relative_url}} class="link link--light">home</a></li>
+ <li><a href={{'/#about' | relative_url}} class="link link--light">about</a></li>
+ <li><a href={{'/#footer' | relative_url}} class="link link--light">contact</a></li>
  </ul>
 </nav>
-</div>
+<hr class="nav_hr">
 <script>
  // make link active if url matches
  const links = document.querySelectorAll('.nav_main ul li a');

diff --git a/_layouts/default.html b/_layouts/default.html
@@ -6,14 +6,24 @@
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>{{ page.title }}</title>
- <link rel="stylesheet" href="{{'/assets/css/styles.css' | relative_url}}" />
-
+ <link rel="stylesheet" href="{{'/assets/css/styles.css' | relative_url }}" />
+ <link rel="manifest" href="{{'/manifest.json' | relative_url }}" />
+ <link rel="icon" type="image/x-icon" href="{{'/favicon.ico' | relative_url }}" />
  <title>Document</title>
  </head>
  <body>
  <header class="head">{% include nav.html %}</header>
  <main class="container">{{ content }}</main>
  <footer>
+ <iframe
+ src="https://embeds.beehiiv.com/fa097289-2153-4053-98fe-67403641861d"
+ data-test-id="beehiiv-embed"
+ width="100%"
+ height="320"
+ frameborder="0"
+ scrolling="no"
+ style="margin: 0; background-color: transparent"
+ ></iframe>
  <div class="footlinks"></div>
  <section class="foot_copyright">
  <p>© chocolate network - 2021</p>

diff --git a/_layouts/home.html b/_layouts/home.html
@@ -23,10 +23,10 @@ <h1><span class="text--thick">Building a safer Web 3.0 future</span> for all.</h
  <ul>
  <!-- Inherit columns up to here -->
  <!-- Select each and make them span one col. Select thee last and make it span 2-->
- <li><a href="{{discord.link}}" target="_blank" rel="noopener noreferrer" class="button button--transparent"><i class="fab fa-discord fa-fw fa-big"></i></a></li>
- <li><a href="https://twitter.com/{{twitter.user}}" target="_blank" rel="noopener noreferrer" class="button button--transparent"><i class="fab fa-twitter fa-fw fa-big"></i></a></li>
- <li><a href="{{medium.user}}" target="_blank" rel="noopener noreferrer" class="button button--transparent"><i class="fab fa-medium fa-fw fa-big"></i></a></li>
- <li><a href="{{litepaper.link}}" target="_blank" rel="noopener noreferrer" class="button">Lite Paper</a></li>
+ <li><a href="{{discord.link}}" target="_blank" rel="noopener noreferrer" class="link button button--transparent"><i class="fab fa-discord fa-fw fa-big"></i></a></li>
+ <li><a href="https://twitter.com/{{twitter.user}}" target="_blank" rel="noopener noreferrer" class="link button button--transparent"><i class="fab fa-twitter fa-fw fa-big"></i></a></li>
+ <li><a href="{{medium.user}}" target="_blank" rel="noopener noreferrer" class="link button button--transparent"><i class="fab fa-medium fa-fw fa-big"></i></a></li>
+ <li><a href="{{litepaper.link}}" target="_blank" rel="noopener noreferrer" class="link button">Lite Paper</a></li>
  <!-- The latter styled as a regular button, the formers styled as fitting buttons -->
  </ul>
  </div>

diff --git a/_sass/_molecule_utils.scss b/_sass/_molecule_utils.scss
@@ -27,17 +27,4 @@
  }
  }
 }
-// ----- Effects ------
-@mixin lighten-on-hover {
- // update if text is black by default
- color: darken($nav-link-text, 10%);
- &:hover {
- color: $nav-link-text;
- }
-}
-@mixin darken-on-hover {
- color: $nav-link-text;
- &:hover {
- color: darken($nav-link-text, 10%);
- }
-}
+
diff --git a/_sass/_molecules.scss b/_sass/_molecules.scss
@@ -6,16 +6,7 @@
 @import 'primitives';
 @import 'molecule_utils';
 
-@mixin light-link {
- @include link {
- @include lighten-on-hover;
- }
-}
-@mixin dark-link {
- @include link {
- @include darken-on-hover;
- }
-}
+
 
 @mixin nav-li {
  margin-left: 1rem;
@@ -29,12 +20,7 @@
  display: flex;
  align-items: center;
 }
-@mixin main-nav-wrapper {
- width: 100%;
- @include grid-h-center;
- // underline -- create a before el to do this
- @include border(1px, 1px);
-}
+
 @mixin nav {
  width: 100%;
  max-width: $grid-size;
@@ -58,8 +44,6 @@
  // always-max
  width: 100%;
  height: 50px; // change if footer grows
- background-color: $wrap-red;
-
  text-transform: uppercase;
  // outline
  @include border(1px, 0px); // only one: re: moxilla
@@ -75,20 +59,13 @@
  padding: 10px;
  height: 30px;
 }
-.nav-wrap--main {
- @include main-nav-wrapper;
-}
+
 .nav_main {
  @include nav;
  height: 70px;
  @include apply-body-pad(false);
 }
-.link {
- @include light-link;
-}
-.link--dark {
- @include dark-link;
-}
+
 .nav .link {
  @include nav_link;
 }
@@ -100,6 +77,8 @@
  @include hr-list-of-links;
  align-items: start;
  height: 100%;
+ flex-wrap: wrap;
+ row-gap: 0.5rem;
 
  & > li:not(:first-child) {
  margin-left: 0.5rem;

diff --git a/_sass/_organisms.scss b/_sass/_organisms.scss
@@ -91,7 +91,7 @@ footer {
 }
 .land_image {
  grid-area: three;
- @include responsive-image(320px, 420px);
+ @include responsive-image(200px, 420px);
  justify-self: center;
  align-self: end;
 }

diff --git a/_sass/primitives/_atoms.scss b/_sass/primitives/_atoms.scss
@@ -22,27 +22,48 @@
 @mixin transparent-highlight {
  background-color: $highlight-color;
 }
+// ----- Effects ------
+@mixin lighten-on-hover {
+ // update if text is black by default
+ color: darken($nav-link-text, 10%);
+ &:hover {
+ color: $nav-link-text;
+ }
+}
+@mixin darken-on-hover {
+ color: $nav-link-text;
+ &:hover {
+ color: darken($nav-link-text, 10%);
+ }
+}
 /*Element atoms*/
 @mixin link {
  text-decoration: none;
  transition: color 0.3s ease;
  font-weight: $headingBold;
- @content;
- &:active {
- // Todo: Color visibility
-  color: $wrap-red;
- }
+ color: $text-color;
+}
+@mixin underline {
+ // Get a cool underline effect for nav link current that also fits for a regular link text underline
+ // Then create a variant of link that is no-underline
 }
 @mixin nav_link {
  &.current {
  color: $wrap-red;
  }
 }
+@mixin hop {
+ bottom: 1px;
+ position: relative;
+ left: 0.5px;
+}
 //--- mixin vars
+$btn-border: 0.1rem;
 $transition-duration: 0.3s;
 $transition-style: ease;
 @mixin button {
- @include link;
+ // No, most styles here aren't for button, include in html instead.
+ font-size: $tiny-text;
  font-weight: $thick;
  background-color: $text-color;
  color: $primary;
@@ -53,21 +74,21 @@ $transition-style: ease;
  box-sizing: border-box;
  cursor: pointer;
  text-transform: uppercase;
- transition: background-color, border, $transition-duration $transition-style;
+ transition: background-color, border, bottom, left, $transition-duration $transition-style;
  &:hover {
- background-color: $wrap-red;
- border: $btn-border solid transparent;
- color: white;
+ border-color: transparent;
+ // Do a little hop
+ @include hop;
  }
 }
 
-// vars---&mixin
-$btn-border: 0.1rem;
+
 @mixin button--transparent {
  background-color: transparent;
  color: $text-color;
  &:hover {
- color: white;
+ color: $primary;
+ background-color: $text-color;
  }
 }
 
@@ -100,11 +121,28 @@ $btn-border: 0.1rem;
  }
 }
 
-@mixin border($top, $bottom) {
+@mixin border($top: 1px, $bottom: 1px, $style: solid) {
  // outline
  border-width: $top 0px $bottom; // only one: re: moxilla
- border-style: solid;
- border-color: darken($nav-link-text, 30%);
+ border-style: $style;
+ border-color: $greyish;
+}
+// Currently used only for the nav's usecase.
+@mixin hor-rule($thickness) {
+ // Remove extra space
+ margin: 0;
+ padding: 0;
+ // Removing sizing issue and fix height in place of border
+ width: 100%;
+ box-sizing: border-box;
+ height: $thickness;
+ border: 0px;
+ // Same color as prev iter.
+ background-color: $greyish;
+}
+
+.nav_hr {
+ @include hor-rule(1px);
 }
 ::selection {
  @include transparent-highlight;
@@ -115,6 +153,18 @@ $btn-border: 0.1rem;
 .text--thick {
  @include thick-text;
 }
+// Clickables
+.link {
+ @include link;
+}
+.link--light {
+ // Modifier, hence it stands alone
+ @include darken-on-hover;
+}
+.link--dark {
+ // Modifier, hence it stands alone
+ @include lighten-on-hover;
+}
 // misc traits describing behaviour of organisms (cannot standalone, hence atomic).
 html:focus-within {
  @include smooth-scroll;

diff --git a/_sass/primitives/_colors.scss b/_sass/primitives/_colors.scss
@@ -6,15 +6,15 @@ $brown: hsl(30, 100%, 29%);
 $wrap-red: hsl(351, 77%, 42%);
 
 $premium-dark: hsl(0, 0%, 15%);
-// Nav-link color:
+// Nav-link color: Make it pop
 $nav-link-text: white;
 $nav-logo-text: white;
 
 // text
 $text-color: #f5f5f6;
-// barely transparent
-$highlight-color: hsla(0, 0%, 100%, 0.2);
-
+$highlight-color: hsla(0, 0%, 100%, 0.2); // barely transparent
+// Decals
+$greyish: darken($nav-link-text, 30%);
 body {
  background-color: $primary;
  color: $text-color;

diff --git a/_sass/primitives/_typography.scss b/_sass/primitives/_typography.scss
@@ -7,17 +7,18 @@ html {
 
 // sizes
 // regular text -p, ...and the like
-$regularText: 1rem;
-$smaller-text: 0.8rem; // readable labels, the like.
-$tiny-text: 0.64rem;
+$paragraphText: 1rem;
+$smaller-text: 0.8rem; // This feels right for nav. <Following fireship.>
+$tiny-text: 0.64rem; // This is the go-to for button text, labels and the like.
 // headings
-$hugeTitle: 4.768rem;
-$title: 3.052rem; // first on typescale -> semantic h1
-$headingOne: 2.441rem;
-$headingTwo: 1.953rem;
-$headingThree: 1.563rem;
+$hugeTitle: 3.052rem; // first on typescale -> semantic h1. Too big, in the 70s
+$title: 2.441rem; // Good? Pretty much. In the 40s
+$headingOne: 1.953rem; // 30s
+$headingTwo: 1.563rem; // 30s
+$headingThree: 1.25rem; // 20s. 25. Round.
+
 // 4 and five are just color variants and indentation
-$headingFour: $regularText;
+$headingFour: $paragraphText;
 $headingFive: $smaller-text;
 
 // weights

diff --git a/favicon.ico b/favicon.ico
diff --git a/manifest.json b/manifest.json
@@ -0,0 +1,19 @@
+{
+ "short_name": "ChocNetwork",
+
+ "name": "Chocolate Network",
+
+ "icons": [
+ {
+ "src": "favicon.ico",
+
+ "sizes": "64x64 48x48 32x32 16x16",
+
+ "type": "image/x-icon"
+ }
+ ],
+ "start_url": ".",
+ "display": "standalone",
+ "theme_color": "#ffffff",
+ "background_color": "#4b103d"
+}