docs: Clean up some CSS

testdeck · Sep 8, 2022 · 0c20e87 · 0c20e87
1 parent b093dd4
commit 0c20e87
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 28 deletions.
diff --git a/docs/README.md b/docs/README.md
@@ -1,7 +1,3 @@
-# testdeck
-
-The JavaScript OOP style tests!
-
 ``` typescript
 import { suite, test } from "@testdeck/mocha";
 ```
@@ -17,20 +13,20 @@ import { suite, test } from "@testdeck/jasmine";
 ```
 {: .jasmine}
 
+Pure OOP TypeScript testing
 ``` typescript
-// Switch gears from functional:
-describe("Hello", () => {
-  it("world", () => {
-    expect(false).to.be.true;
-  });
-});
-
-// To pure OOP awesomeness:
 @suite class Hello {
   @test world() {
-    assert(false == true);
+    assert(false);
   }
 }
+```
 
-// And you can mix and match!
+Compatible with functional TDD interfaces
+``` typescript
+suite("Hello", () => {
+  test("world", () => {
+    assert(false);
+  }
+});
 ```
diff --git a/docs/_includes/framework.html b/docs/_includes/framework.html
@@ -0,0 +1,5 @@
+            <ul class="framework">
+                <li><a class="mocha" href="javascript: void selectTestFramework('mocha')"><img src="{{ site.baseurl }}/assets/mocha.svg" alt="Mocha"/></a></li>
+                <li><a class="jest" href="javascript: void selectTestFramework('jest')"><img src= "{{ site.baseurl }}/assets/jest.svg" alt="Jest"/></a></li>
+                <li><a class="jasmine" href="javascript: void selectTestFramework('jasmine')"><img src = "{{ site.baseurl }}/assets/jasmine.svg" alt="Jasmine"/></a></li>
+            </ul>
diff --git a/docs/_layouts/default.html b/docs/_layouts/default.html
@@ -32,11 +32,11 @@
     {% include cookies.html %}
     <header>
         <h1><a href="{{ site.baseurl }}/"><img src="{{ site.baseurl }}/assets/testdeck-wide.svg" alt="{{ site.name }}" /></a></h1>
-        <p>{{ site.description }}</p>
 
-        <a class="mocha" href="javascript: void selectTestFramework('mocha')"><img src="{{ site.baseurl }}/assets/mocha.svg" alt="Mocha"/></a>
-        <a class="jest" href="javascript: void selectTestFramework('jest')"><img src= "{{ site.baseurl }}/assets/jest.svg" alt="Jest"/></a>
-        <a class="jasmine" href="javascript: void selectTestFramework('jasmine')"><img src = "{{ site.baseurl }}/assets/jasmine.svg" alt="Jasmine"/></a>
+        <div class="framework">
+            +
+            {% include framework.html %}
+        </div>
     </header>
     <nav>
         <ul>

diff --git a/docs/style.scss b/docs/style.scss
@@ -47,26 +47,52 @@ h4 {
   font-size: 18px;
 }
 
+header h1 {
+  float: left;
+
+  @include mobile {
+    float: none;
+    text-align: center;
+    margin: auto;
+  }
+}
 header h1 img {
   width: 270px;
   height: 48px;
 }
 
-a.mocha>img,
-a.jest>img,
-a.jasmine>img {
+header div.framework {
+  float: right;
+  @include mobile {
+    float: none;
+    text-align: center;
+    margin: auto;
+  }
+}
+
+ul.framework {
+  list-style-type: none;
+  margin: 0px;
+  padding: 0px;
+  display: flex;
+}
+ul.framework a.mocha>img,
+ul.framework a.jest>img,
+ul.framework a.jasmine>img {
   width: 32px;
   height: 32px;
 }
-
-body.mocha a.mocha {
-  border: 1px solid red;
+ul.framework a.mocha {
+  border-bottom: 3px solid transparent;
+}
+body.mocha ul.framework a.mocha {
+  border-bottom: 3px solid black;
 }
-body.jest a.jest {
-  border: 1px solid red;
+body.jest ul.framework a.jest {
+  border-bottom: 3px solid black;
 }
-body.jasmine a.jasmine {
-  border: 1px solid red;
+body.jasmine ul.framework a.jasmine {
+  border-bottom: 3px solid black;
 }
 
 body.mocha div.jest,