Datenanbindung und Kategorie Komponente implementiert.

app/styles/app.css

@@ -119,7 +119,7 @@ p {
   bottom: 5px;
 }
 
-.zettel label span {
+.kategorie label span {
   font-size: 140%;
   margin: 50px auto 20px;
   display: block;
@@ -127,7 +127,7 @@ p {
   font-style: italic;
 }
 
-.zettel input {
+.kategorie input {
   padding: 11px;
   font-size: 18px;
   width: 500px;
@@ -220,10 +220,10 @@ p {
 }
 
 /**
- * Individual zettel Listing
+ * Individual kategorie Listing
  */
 
-.zettel {
+.kategorie {
   margin-top: 15px;
   background-color: #f6f6f6;
   padding: 20px 25px;
@@ -233,22 +233,22 @@ p {
   flex-wrap: wrap;
 }
 
-.zettel:hover {
+.kategorie:hover {
   background-color: #f3f3f3;
 }
 
-.zettel img {
+.kategorie img {
   border-radius: 5px;
 }
 
-.zettel .image {
+.kategorie .image {
   flex-grow: 0;
   flex-basis: 150px;
   margin: 20px 25px;
   text-align: center;
 }
 
-.zettel button.image {
+.kategorie button.image {
   position: relative;
   cursor: pointer;
   border: none;
@@ -256,11 +256,11 @@ p {
   z-index: 1;
 }
 
-.zettel button.image:focus {
+.kategorie button.image:focus {
   outline: none;
 }
 
-.zettel button.image:after {
+.kategorie button.image:after {
   content: "";
   position: absolute;
   top: 0;
@@ -276,20 +276,20 @@ p {
   transition: opacity 0.25s ease-in-out;
 }
 
-.zettel button.image:focus:after, .zettel button.image:hover:after {
+.kategorie button.image:focus:after, .kategorie button.image:hover:after {
   opacity: 0.1;
 }
 
-.zettel .image img {
+.kategorie .image img {
   max-width: 100%;
 }
 
-.zettel .image.large {
+.kategorie .image.large {
   margin: 30px 25px 50px 25px;
   flex-basis: 100%;
 }
 
-.zettel .image small {
+.kategorie .image small {
   display: block;
   margin-top: 5px;
   margin-bottom: -15px;
@@ -300,13 +300,13 @@ p {
   position: relative;
 }
 
-.zettel .image.large small {
+.kategorie .image.large small {
   margin-top: 10px;
   margin-bottom: 0px;
   font-size: 110%;
 }
 
-.zettel .details {
+.kategorie .details {
   flex-basis: 50%;
   flex-grow: 2;
   display: flex;
@@ -317,108 +317,108 @@ p {
   align-content: space-around;
 }
 
-.zettel h3 {
+.kategorie h3 {
   flex-basis: 100%;
 }
 
-.zettel h3 a {
+.kategorie h3 a {
   display: inline;
 }
 
-.zettel .detail {
+.kategorie .detail {
   flex-basis: 50%;
   font-weight: 300;
   font-style: italic;
   white-space: nowrap;
 }
 
-.zettel .detail span {
+.kategorie .detail span {
   font-weight: 400;
   font-style: normal;
 }
 
-.zettel .map {
+.kategorie .map {
   flex-grow: 0;
   flex-basis: 150px;
   font-size: 0;
   margin: 0px 25px;
 }
 
-.zettel .map img {
+.kategorie .map img {
   width: 150px;
   height: 150px;
 }
 
-.zettel.detailed {
+.kategorie.detailed {
   background: none;
   align-items: flex-start;
 }
 
-.zettel.detailed .image {
+.kategorie.detailed .image {
   flex-basis: 320px;
 }
 
-.zettel.detailed .image.large {
+.kategorie.detailed .image.large {
   margin: 30px 25px 50px 25px;
   flex-basis: 100%;
 }
 
-.zettel.detailed .details {
+.kategorie.detailed .details {
   height: auto;
 }
 
-.zettel.detailed h3 {
+.kategorie.detailed h3 {
   font-size: 200%;
   margin-bottom: 10px;
 }
 
-.zettel.detailed .detail {
+.kategorie.detailed .detail {
   margin: 5px 0px;
   flex-basis: 100%;
   flex-shrink: 2;
 }
 
-.zettel.detailed .description {
+.kategorie.detailed .description {
   white-space: normal;
   flex-basis: 100%;
   flex-shrink: 1;
 }
 
-.zettel.detailed .map {
+.kategorie.detailed .map {
   flex-basis: 100%;
   margin: 50px 25px 25px 25px;
 }
 
-.zettel.detailed .map img {
+.kategorie.detailed .map img {
   width: 100%;
   height: auto;
 }
 
 @media only screen and (max-width: 919px) {
-  .zettel.detailed .image, .zettel.detailed .image.large {
+  .kategorie.detailed .image, .kategorie.detailed .image.large {
     margin: 30px 25px 25px 25px;
     flex-basis: 100%;
     cursor: default;
   }
 
-  .zettel.detailed .image:hover {
+  .kategorie.detailed .image:hover {
     flex-basis: 100%;
     cursor: default;
   }
 
-  .zettel.detailed .image small {
+  .kategorie.detailed .image small {
     display: none;
   }
 
-  .zettel.detailed button.image:hover:after {
+  .kategorie.detailed button.image:hover:after {
     opacity: 0;
   }
 
-  .zettel.detailed button.image:focus:after {
+  .kategorie.detailed button.image:focus:after {
     opacity: 0.1;
   }
 
-  .zettel.detailed .map {
+  .kategorie.detailed .map {
     margin-top: 25px;
   }
 }