Add header

h2/app.r

@@ -2,14 +2,23 @@ source("./global.r")
 
 ui <- fluidPage(
   includeCSS("./components/layout/style copy.css"),
+  tags$div(class = "container",
+           tags$img(src = "images/earth-header.png", height = "300px", width = "100%", class = "earth", alt = "Earth's atmosphere"),
+           tags$div(
+               a(
+                   img(src = "images/GCIMS_logo_alt.svg", class = "logo"), href = "https://gcims.pnnl.gov/", target = "_blank"),
+               h1("HectorUI", class = "header-text-title"),
+               h2("An Interactive Climate Model", class = "header-text-sub", style = "font-weight:normal; "),
+           ),
+  ),
   navbarPage(
     id = "nav",
     title = "",
     collapsible = TRUE,
     tabPanel(title = "Home",
              includeHTML("./components/layout/homepage.html")),
     tabPanel(title = "Guides"),
-    tabPanel(title = "Explore Hector",
+    tabPanel(title = "Run Hector",
              fluidRow(
                  run_ui("run_1"),
                  #download_ui("download_1"),

h2/components/layout/style copy.css

@@ -1,8 +1,90 @@
 
-.test {
-    font-family:"Barlow Regular", Sans-Serif !important;
-}
-
 h5 {
   font-weight: bold;
 }
+
+body
+{
+	font-family:"Barlow Regular", Sans-Serif !important;
+	font-size: 20px;
+}
+
+.about-info
+{
+    font-size: 12px;
+}
+
+.c-emissions
+{
+    font-size: 14px;
+}
+
+.container {
+    position: relative;
+    width:100%;
+}
+
+.header-text-title
+{
+    position: absolute;
+    color: #FFFFFF;
+    top: 40%;
+    left: 50%;
+    text-align: center;!important
+    max-width: 120px;
+    margin-right: -50%;
+    transform: translate(-50%, -50%)
+}
+
+.header-text-sub
+{
+    position: absolute;
+    color: #FFFFFF;
+    text-align: center;
+    font-size: 100%;
+    top: 60%;
+    left: 50%;
+    margin-right: -50%;
+    transform: translate(-50%, -50%)
+}
+
+.home-text
+{
+    font-size: 16px;
+}
+
+.hrNav
+{
+    font-size: 50px;
+}
+
+.logo
+{
+
+    position: absolute;
+    top: 2rem;
+    left: 2rem;
+    margin:20px;
+  padding:0px 8px;
+  width:5em;
+}
+
+.maps
+{
+    font-size: 16px;
+}
+
+.nav-tabs
+{
+    font-size: 14px;
+}
+
+.output-vars
+{
+    font-size: 16px;
+}
+
+.params
+{
+    font-size: 14px;
+}