nice

public/generative-energy/static/styles.css

@@ -0,0 +1,198 @@
+:root {
+    --text-color: #313131;
+    --bg-color-box: #ffffff;
+    --bg-color: #f6f9f6;
+}
+
+body {
+    font-family: "Roboto", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
+    color: #313131;
+    background-color: var(--bg-color);
+}
+
+h1, h2, h3, h4, h5 {
+    font-family: "Roboto Slab", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
+}
+
+a.home-btn {
+    display: block;
+    text-align: center;
+
+    &.hide {
+        visibility: hidden;
+    }
+}
+
+.ge-article {
+    .header {
+        margin-top: 20px;
+        display: flex;
+        justify-content: space-between;
+    }
+
+    p {
+        position: relative;
+        transition: background 0.15s;
+    }
+
+    p.swap {
+        background-color: #bde4ff;
+    }
+
+    button.swap {
+        background-color: white;
+        height: 25px;
+        width: 25px;
+        font-size: 16px;
+        border-radius: 3px;
+        border: solid 1px gray;
+        cursor: pointer;
+        position: absolute;
+        top: 5px;
+        right: 5px;
+        opacity: 0%;
+        transition: opacity 150ms;
+    }
+
+    button.swap:hover {
+        background-color: lightgray;
+    }
+
+    p:hover > button.swap {
+        opacity: 100%;
+    }
+
+    .lang-en p.swap > span:lang(de) {
+        display: revert;
+    }
+
+    .lang-en p.swap > span:lang(en) {
+        display: none;
+    }
+
+    .lang-de p.swap > span:lang(en) {
+        display: revert;
+    }
+
+    .lang-de p.swap > span:lang(de) {
+        display: none;
+    }
+
+    .lang-en *:lang(de) {
+        display: none;
+    }
+
+    .lang-de *:lang(en) {
+        display: none;
+    }
+}
+
+main {
+    width: 100%;
+}
+
+@media (min-width: 600px) {
+    main {
+        max-width: 1340px;
+        margin: auto;
+        min-width: 600px;
+        width: 60%;
+    }
+}
+
+header {
+    margin: auto;
+    text-align: center;
+}
+
+article {
+    margin: auto;
+}
+
+.text-slab {
+    margin-bottom: 15px;
+    background-color: white;
+    border-radius: 5px;
+    padding: 10px;
+}
+
+.text-slab > p:first-of-type {
+    margin-top: 0;
+}
+.text-slab > p:last-of-type {
+    margin-bottom: 0;
+}
+
+form {
+    display: block;
+    text-align: center;
+    margin: 40px;
+}
+
+label {
+    display: block;
+}
+
+hr {
+    border: 0;
+    border-bottom: 1px dashed #ccc;
+    background: #999;
+}
+
+footer .bottom {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+}
+
+footer {
+    margin-bottom: 20px;
+}
+
+
+
+.ge-calculator {
+    table {
+        border-collapse: separate;
+        margin: auto;
+        margin-top: 20px;
+        margin-bottom: 20px;
+        border-radius: 5px;
+        border-spacing: 0;
+        border: 1px solid var(--text-color);
+    }
+
+    input {
+        width: 70px;
+    }
+    tr:last-of-type td {
+        border-bottom: none;
+    }
+    td {
+        border-bottom: 1px solid var(--text-color);
+        border-right: 1px solid var(--text-color);
+        padding: 10px;
+    }
+    td:last-of-type {
+        border-right: none;
+    }
+    .breathe {
+        padding-left: 4px;
+        padding-right: 4px;
+    }
+    @media (min-width: 600px) {
+        td.right div {
+            display: inline-block;
+        }
+    }
+}
+
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.5s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}