Update style a bit

src/components/Elements/HZero.js

@@ -1,10 +0,0 @@
-import style from "./HZero.less";
-import concatClass from "../../utils/concatClass";
-
-export default function (props) {
-	return (
-		<div class={concatClass(style.h0, props.class)}>
-			{props.children}
-		</div>
-	);
-}

src/components/Elements/HZero.less

@@ -1,9 +0,0 @@
-@import "../../styles/constants.less";
-
-.h0 {
-    display: block;
-    text-align: center;
-    color: @accent;
-    font-family: @title;
-    font-size: 48px;
-}

src/components/Elements/Image.js

@@ -1,7 +1,10 @@
+import style from "./Image.less";
+import {concatClass} from "../../index";
+
 export default function(props) {
     return (
         <a href={props.src} title={props.alt} target={"_blank"} class={props.aClass}>
-            <img src={props.src} alt={props.alt} class={props.imgClass}/>
+            <img src={props.src} alt={props.alt} class={concatClass(style.img, props.imgClass)}/>
         </a>
     )
 }

src/components/Elements/Image.less

@@ -0,0 +1,5 @@
+.img {
+  max-width: 100%;
+  max-height: 300px;
+  border-radius: 4px;
+}

src/components/Elements/Timer.less

@@ -1,3 +1,4 @@
+@import "../../styles/mixins.less";
 @import "../../styles/constants.less";
 
 .timer {
@@ -9,8 +10,8 @@
     margin-bottom: 8px;
     padding: 8px;
     grid-template-columns: 80px 80px 80px 80px;
-    border: 2px solid @plusplus;
-    border-radius: 4px;
+
+    .bordered(@fg, @bg);
 }
 
 .days {
@@ -41,8 +42,7 @@
 }
 
 .unknown {
-    color: @magenta;
-    border: 2px solid fade(@magenta, 20%);
+    .bordered(@magenta, @bg);
 
     .count {
         color: @magenta;
@@ -50,8 +50,7 @@
 }
 
 .expired {
-    color: @red;
-    border: 2px solid fade(@red, 20%);
+    .bordered(@red, @bg);
 
     .count {
         color: @red;

src/components/Elements/Todo.less

@@ -1,9 +1,6 @@
+@import "../../styles/mixins.less";
 @import "../../styles/constants.less";
 
 .todo {
-    border: 1px yellow solid;
-    border-radius: 2px;
-    padding: 1px;
-    background-color: black;
-    color: yellow;
+    .bordered(yellow, black);
 }

src/components/Panels/Box.less

@@ -9,41 +9,41 @@
 }
 
 .default {
-  background-color: fade(@fg, 5%);
+  border: 2px solid fade(@fg, 10%);
   color: @fg;
 }
 
 .red {
-  background-color: fade(@red, 5%);
+  border: 2px solid fade(@red, 10%);
   color: @red;
 }
 
 .orange {
-  background-color: fade(@orange, 5%);
+  border: 2px solid fade(@orange, 10%);
   color: @orange;
 }
 
 .yellow {
-  background-color: fade(@yellow, 5%);
+  border: 2px solid fade(@yellow, 10%);
   color: @yellow;
 }
 
 .lime {
-  background-color: fade(@lime, 5%);
+  border: 2px solid fade(@lime, 10%);
   color: @lime;
 }
 
 .cyan {
-  background-color: fade(@cyan, 5%);
+  border: 2px solid fade(@cyan, 10%);
   color: @cyan;
 }
 
 .blue {
-  background-color: fade(@blue, 5%);
+  border: 2px solid fade(@blue, 10%);
   color: @blue;
 }
 
 .magenta {
-  background-color: fade(@magenta, 5%);
+  border: 2px solid fade(@magenta, 10%);
   color: @magenta;
 }

src/components/Panels/Panel.js

@@ -1,13 +1,12 @@
-import style from "./Panel.less";
 import Box from "./Box";
 
 export default function(props) {
 	return (
 		<Box color={props.color} class={props.class}>
-			<h3 class={style.title}>
+			<h3>
 				{props.title}
 			</h3>
-			<div class={style.contents}>
+			<div>
 				{props.children}
 			</div>
 		</Box>

src/components/Panels/Panel.less

@@ -1,10 +0,0 @@
-@import "../../styles/constants.less";
-
-.title {
-    font-family: @title;
-
-}
-
-.contents {
-    font-family: @text;
-}

src/components/Panels/Section.js

@@ -1,15 +1,14 @@
 import Split from "../Layout/Split";
-import {Fragment} from "preact";
 
 export default function (props) {
     return (
-        <Fragment>
+        <div>
             <h2>
                 {props.title}
             </h2>
             <Split>
                 {props.children}
             </Split>
-        </Fragment>
+        </div>
     );
 }

src/components/Rendering/Markdown.less

@@ -7,6 +7,6 @@
 
   h1 {
     padding-bottom: 2px;
-    border-bottom: 1px solid @plusplusplus;
+    border-bottom: 1px solid fade(@fg, 15%);
   }
 }

src/index.js

@@ -9,7 +9,6 @@ import FormButton from "./components/Forms/FormButton";
 import FormInput from "./components/Forms/FormInput";
 import FormRow from "./components/Forms/FormRow";
 import getEventValue from "./utils/getEventValue";
-import HZero from "./components/Elements/HZero";
 import ILatex from "./components/Rendering/ILatex";
 import Image from "./components/Elements/Image";
 import isString from "./utils/isString";
@@ -58,7 +57,6 @@ export {
     FormInput,
     FormRow,
     getEventValue,
-    HZero,
     ILatex,
     Image,
     isString,

src/routes/Sample.js

@@ -30,28 +30,44 @@ export default function (props) {
             </h1>
             <Section title={"Panels"}>
                 <Panel title={"Default"}>
+                    <p>
                         This is a default panel.
+                    </p>
                 </Panel>
                 <Panel title={"Red"} color={BoxColors.RED}>
+                    <p>
                         This is a red panel.
+                    </p>
                 </Panel>
                 <Panel title={"Orange"} color={BoxColors.ORANGE}>
+                    <p>
                         This is a orange panel.
+                    </p>
                 </Panel>
                 <Panel title={"Yellow"} color={BoxColors.YELLOW}>
+                    <p>
                         This is a yellow panel.
+                    </p>
                 </Panel>
                 <Panel title={"Lime"} color={BoxColors.LIME}>
+                    <p>
                         This is a lime panel.
+                    </p>
                 </Panel>
                 <Panel title={"Cyan"} color={BoxColors.CYAN}>
+                    <p>
                         This is a cyan panel.
+                    </p>
                 </Panel>
                 <Panel title={"Blue"} color={BoxColors.BLUE}>
+                    <p>
                         This is a blue panel.
+                    </p>
                 </Panel>
                 <Panel title={"Magenta"} color={BoxColors.MAGENTA}>
+                    <p>
                         This is a magenta panel.
+                    </p>
                 </Panel>
             </Section>
             <Section title={"Code"}>

src/styles/constants.less

@@ -1,7 +1,4 @@
 @bg: #0d193b;
-@bg-light: #142245;
-@bg-lighter: #1c2b4f;
-@bg-lightest: #233358;
 @fg: #a0ccff;
 @accent: #ffffff;
 
@@ -9,11 +6,6 @@
 @linkhover: #00ffff;
 @linkactive: #a0ffff;
 
-@plus: fade(@fg, 5%);
-@plusplus: fade(@fg, 10%);
-@plusplusplus: fade(@fg, 15%);
-@plusplusplusplus: fade(@fg, 20%);
-
 @red: #ff7d7d;
 @orange: #ffbb7d;
 @yellow: #ffff7d;
@@ -30,10 +22,3 @@
 @warningbg: #231c00;
 @errorfg: @red;
 @errorbg: #330e00;
-
-@sans: "Arial", sans-serif;
-@text: "Calibri", sans-serif;
-@title: "Verdana", sans-serif;
-@mono: "Consolas", "SFMono-Regular", "Liberation Mono", "Menlo", monospace;
-
-@example: #d3a1ff;

src/styles/mixins.less

@@ -1,43 +1,24 @@
-@import "constants.less";
-
-.h(@hfg; @hbg) {
+/// A bordered item
+.bordered(@hfg; @hbg) {
   color: @hfg;
   background-color: @hbg;
-}
-
-.hb(@hfg; @hbg) {
-  .h(@hfg; @hbg);
   border: 1px solid fade(@hfg, 10%);
 }
 
-.hh(@hfg; @hbg) {
-  .hb(@hfg; @hbg);
-
+/// A hoverable element
+.hoverable(@hfg, @hbg) {
   &:hover, &.hover {
     background-color: overlay(fade(@hfg, 10%), @hbg);
     border: 1px solid @hfg;
-    color: @hfg;
-  }
-
-  &:active, &.active {
-    background-color: overlay(fade(@accent, 20%), @hbg);
-    border: 1px solid @accent;
-    color: @accent;
+    color: screen(@hfg, #808080);
   }
 }
 
-.hnh(@hfg; @hbg) {
-  .hb(@hfg; @hbg);
-
-  &:hover, &.hover {
-    background-color: @hbg;
-    border: 1px solid fade(@hfg, 10%);
-    color: @hfg;
-  }
-
+/// A clickable element
+.clickable(@hfg, @hbg) {
   &:active, &.active {
-    background-color: @hbg;
-    border: 1px solid fade(@hfg, 10%);
-    color: @hfg;
+    background-color: overlay(rgba(255, 255, 255, 0.2), @hbg);
+    border: 1px solid white;
+    color: white;
   }
 }

src/styles/theme.less

@@ -4,17 +4,14 @@
 .bluelib {
     background-color: @bg;
     color: @fg;
-    font-family: @sans;
+    font-family: sans-serif;
 
     * {
         box-sizing: border-box;
     }
 
     h1, h2, h3, h4, h5, h6 {
-        margin-top: 4px;
-        margin-bottom: 4px;
         color: @accent;
-        font-family: @title;
         font-weight: normal;
         text-align: center;
     }
@@ -37,119 +34,61 @@
         }
     }
 
-    img, iframe {
-        max-width: 100%;
-        max-height: 300px;
-        border-radius: 4px;
-    }
-
     pre, code {
-        font-family: @mono;
+        font-family: monospace;
         font-size: 14px;
     }
 
     blockquote {
         color: @fg;
-        border-left: 3px solid @plusplusplusplus;
-        background-color: @plus;
+        border-left: 3px solid fade(@fg, 20%);
+        background-color: fade(@fg, 5%);
         padding: 4px 4px 4px 8px;
         margin: 8px 0;
     }
 
-    input[type="text"], input[type="password"] {
-        .hb(@fg; @bg);
+    input:not([type="checkbox"]):not([type="radio"]) {
+        .bordered(@fg; @bg);
 
         border-radius: 4px;
         padding: 4px;
         font-size: medium;
     }
 
-    button {
-        .hh(@fg, @bg);
+    button, input[type="button"], input[type="submit"] {
+        .bordered(@fg; @bg);
+
+        :not([disabled]) {
+            .hoverable(@fg; @bg);
+            .clickable(@fg; @bg);
+        }
 
         border-radius: 4px;
         padding: 4px;
         font-size: medium;
     }
 
-    .ok {
-        color: @okfg;
-
-        input[type="text"], input[type="password"] {
-            .hb(@okfg; @okbg);
-        }
-
-        button {
-            .hh(@okfg, @okbg);
-        }
-    }
-
-    .warning {
-        color: @warningfg;
-
-        input[type="text"], input[type="password"] {
-            .hb(@warningfg; @warningbg);
-        }
-
-        button {
-            .hh(@warningfg, @warningbg);
-        }
-    }
-
-    .error {
-        color: @errorfg;
-
-        input[type="text"], input[type="password"] {
-            .hb(@errorfg; @errorbg);
-        }
-
-        button {
-            .hh(@errorfg; @errorbg);
-        }
-    }
-
-    .disabled {
-        color: @disabledfg;
-        cursor: not-allowed;
-
-        input[type="text"], input[type="password"] {
-            .hb(@disabledfg; @disabledbg);
-        }
-
-        button {
-            .hnh(@disabledfg, @disabledbg);
-        }
-    }
-
-    input[type="text"][disabled], input[type="password"][disabled] {
-        .hb(@disabledfg; @disabledbg);
-    }
-
-    button[disabled] {
-        .hnh(@disabledfg, @disabledbg);
-    }
-
     hr {
-        border: 1px solid @plusplusplusplus;
+        border: 1px solid fade(@fg, 20%);
         margin-top: 24px;
         margin-bottom: 24px;
     }
 
     table {
         border-spacing: 0;
-        border: 2px solid @plusplus;
-        background-color: @plus;
+        border: 2px solid fade(@fg, 10%);
+        background-color: fade(@fg, 5%);
         border-collapse: collapse;
 
         thead, tbody {
             th, td {
                 padding: 4px;
-                border: 1px solid @plusplus;
+                border: 1px solid fade(@fg, 10%);
             }
         }
 
         thead {
-            background-color: @plusplus;
+            background-color: fade(@fg, 10%);
             color: @accent;
         }
     }
@@ -170,7 +109,7 @@
         margin: 4px 0;
         padding: 4px;
         font-size: smaller;
-        background-color: @plus;
+        background-color: fade(@fg, 5%);
         border-radius: 4px;
     }
 }