View packaging in progress

view-webapp/src/main/sass/main.scss

@@ -1,51 +1,77 @@
-body {
-  font-size : clamp(1rem, 3vw, 3rem);
-  width: 100vw;
-  height: 100vh;
-  margin: 0;
-  padding: 0;
-}
+@import "/lib/fomantic-ui-2.8.7/semantic.css" layer(semantic);
 
-.flex {
-  display: flex;
-  &.horz {
-    flex-flow: row nowrap;
-    align-items: center;
+@layer pairgoth {
+  body {
+    font-size : clamp(1rem, 3vw, 3rem);
+    width: 100vw;
+    height: 100vh;
+    margin: 0;
+    padding: 0;
   }
-  &.vert {
-    flex-flow: column nowrap;
-    align-items: stretch;
-  }
-}
 
-#header {
-  height: 2em;
-  width: 100%;
-  position: relative;
-  justify-content: space-between;
-  #left-header, #right-header {
-    height: 100%;
+  .flex {
+    display: flex;
+    &.horz {
+      flex-flow: row nowrap;
+      align-items: center;
+    }
+    &.vert {
+      flex-flow: column nowrap;
+      align-items: stretch;
+    }
   }
-  #logo {
-    height: 100%;
-    img {
-      display: inline-block;
-      max-height: 100%;
+
+  #header {
+    height: 2em;
+    width: 100%;
+    position: relative;
+    justify-content: space-between;
+    #left-header, #right-header {
+      height: 100%;
+    }
+    #logo {
+      height: 100%;
+      img {
+        display: inline-block;
+        max-height: 100%;
+      }
+    }
+  }
+
+  #center {
+    max-width: clamp(800px, 80vw, 100vw);
+    margin-left: auto;
+    margin-right: auto;
+    flex: 1;
+  }
+
+  #footer {
+    flex: 0;
+    height: 2em;
+    margin: 0 2em;
+    font-size: 0.8em;
+    justify-content: space-between;
+  }
+
+  .section {
+    padding: 0.5em;
+  }
+
+  button.floating {
+    box-shadow: 0px 8px 8px -5px rgba(0,0,0,35%);
+    transition: all 0.3s;
+    &.white  {
+      border: solid 1px black;
+      background-color: white;
+    }
+    &:hover {
+      box-shadow: 0px 10px 10px -5px rgba(0,0,0,35%);
+      transform: scale(1.05);
+    }
+    &:active {
+      transition: all 0.1s;
+      box-shadow: none;
+      transform: translate(0px, 5px);
     }
   }
 }
-
-#center {
-  max-width: clamp(800px, 80vw, 100vw);
-  margin-left: auto;
-  margin-right: auto;
-  flex: 1;
-}
-
-#footer {
-  flex: 0;
-  height: 2em;
-  margin: 0 2em;
-  font-size: 0.8em;
-  justify-content: space-between;
-}