more styling

arthur-schnitzler · Nov 17, 2023 · ae9f0fa · ae9f0fa
1 parent d2c85e6
commit ae9f0fa
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 37 deletions.
diff --git a/dumper/templates/dumper/index.html b/dumper/templates/dumper/index.html
@@ -5,10 +5,10 @@
     <div class="carousel-inner">
         <div class="carousel-item active">
             <div class="container">
-                <div class="carousel-caption text-start">
-                    <h1>Example headline.</h1>
-                    <p>Some representative placeholder content for the first slide of the carousel.</p>
-                    <p><a class="btn btn-lg btn-primary" href="#">Sign up today</a></p>
+                <div class="carousel-caption text-center">
+                    <h1 class="display-2">PMB</h1>
+                    <h2 class="display-3">Personen der Moderne Basis </h2>
+                    <p class="fs-3">Durch die Normdatei PMB wird ein Webservice für Personen, Werke, Institutionen, Orte und Ereignisse speziell für Wien um 1900 zur Verfügung gestellt. </p>
                 </div>
             </div>
         </div>
@@ -19,7 +19,7 @@ <h1>Example headline.</h1>
         <div class="col-lg-4">
             <p class="text-center">
                 <a class="icon-link" href="{% url 'apis:apis_entities:generic_entities_list' 'person' %}">
-                    <i class="bi bi-people"></i>
+                    <i class="bi bi-people apis-person big-icons"></i>
                 </a>
             </p>
             <h2>Personen</h2>
@@ -29,7 +29,7 @@ <h2>Personen</h2>
         <div class="col-lg-4">
             <p class="text-center">
                 <a class="icon-link" href="{% url 'apis:apis_entities:generic_entities_list' 'place' %}">
-                    <i class="bi bi-map" style="font-size: 120px; color:#f5db9e"></i>
+                    <i class="bi bi-map apis-place big-icons"></i>
                 </a>
             </p>
             <h2>Orte</h2>
@@ -39,7 +39,7 @@ <h2>Orte</h2>
         <div class="col-lg-4">
             <p class="text-center">
                 <a class="icon-link" href="persons.html">
-                    <i class="bi bi-book" style="font-size: 120px; color:#668cb9"></i>
+                    <i class="bi bi-book apis-work big-icons"></i>
                 </a>
             </p>
             <h2>Werke</h2>

diff --git a/static/css/style.css b/static/css/style.css
@@ -1,40 +1,53 @@
-/* GLOBAL STYLES
--------------------------------------------------- */
-/* Padding below the footer and lighter body text */
+:root {
+    --person: #ad3f58;
+    --place: #f5db9e;
+    --work: #668cb9;
+  }
+/* COLORS FOR ENTITIES */
+
+.apis-person {
+    color: var(--person)
+}
+
+.apis-place {
+    color: var(--place)
+}
+
+.apis-work {
+    color: var(--work)
+}
 
-body {
-    color: #5a5a5a;
+.big-icons {
+    font-size: 120px;
 }
 
+.navbar {
+    border-bottom: 5px solid #9B5F98;
+  }
+.navbar .navbar-brand img {
+    max-height: none;
+    height: 4rem;
+    max-width: 100%;
+  }
 
 /* CUSTOMIZE THE CAROUSEL
   -------------------------------------------------- */
 #myCarousel {
     background-image: url('/static/img/title-img.jpg');
 }
 
-/* Carousel base class */
-.carousel {
-    margin-bottom: 4rem;
-}
-
 /* Since positioning the image, we need to help out the caption */
 .carousel-caption {
-    bottom: 3rem;
+    padding: 2em;
+
     z-index: 10;
+    background-color: #aa3c5569;
+    border-radius: 25% 10%;
 }
 
 /* Declare heights because of positioning of img element */
 .carousel-item {
-    height: 32rem;
-}
-
-.carousel-item>img {
-    position: absolute;
-    top: 0;
-    left: 0;
-    min-width: 100%;
-    height: 32rem;
+    height: 35rem;
 }
 
 .marketing .col-lg-4 {
@@ -69,12 +82,3 @@ body {
     width: 8rem;
     height: 8rem;
 }
-
-.icon-wrapper .bi {
-    color: blue;
-}
-
-.bi-people {
-    font-size: 120px;
-    color: #ad3f58
-}
diff --git a/templates/partials/navbar.html b/templates/partials/navbar.html
@@ -2,7 +2,9 @@
 <header>
     <nav class="navbar navbar-expand-lg navbar-light bg-light">
         <div class="container-fluid">
-            <a class="navbar-brand" href="/">PMB</a>
+            <a class="navbar-brand" href="#">
+                <img src="{% static 'img/project-logo.svg' %}" alt="PMB-Logo" />
+              </a>          
             <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
                 data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
                 aria-label="Toggle navigation">