Add Plugins Page to microsite (#2144)

* Add Plugins Page to microsite * Updates to microsite Plugins Page * Correct plugin authors and documentation links * Add category to UI * Move documentation from README to the docs website * Use external urls for logos * Updates to microsite Plugins Page * trailing whitespace * Run prettier on new markdown * Updates to microsite Plugins Page * Move plugins link * Clarify category field * Updates to microsite Plugins Page * Add authorUrl field to plugin config * Render author as a muted link like those in the site map * Updates to microsite Plugins Page * Add authorUrl field to example in docs * Updates to microsite Plugins Page * Add npmPackageName field - intended for future use * Updates to microsite Plugins Page * Add npmPackageName field - intended for future use * Updates to microsite Plugins Page * Use correct docs link
2020-08-31 13:30:43 +01:00
parent 6a22efc31b
commit b284cb38e3
10 changed files with 259 additions and 2 deletions
@@ -0,0 +1,111 @@
+.PluginCard {
+    background-color: #272822;
+    height: 100%;
+    padding: 16px;
+    display: flex;
+    flex-direction: column;
+}
+
+.grid {
+    display: grid;
+    grid-gap: 1rem;
+    grid-template-columns: repeat(4, 1fr);
+    grid-auto-rows: 1fr;
+    padding-top: 32px;
+}
+
+@media (max-width: 1200px) {
+    .grid {
+        grid-template-columns: repeat(3, 1fr);
+    }
+}
+
+@media only screen and (max-width: 815px) {
+    .grid {
+        grid-template-columns: repeat(2, 1fr);
+    }
+}
+
+.PluginCard img {
+    float: left;
+    margin: 0px 16px 8px 0px;
+    height: 100px;
+    width: 100px;
+}
+
+.PluginCardHeader {
+    max-height: fit-content;
+    min-height: fit-content;
+}
+
+.PluginCardTitle {
+    color:  white;
+    vertical-align: top;
+    margin: 8px 0px 0px 16px;
+}
+
+.PluginAddNewButton {
+    position: absolute;
+    bottom: 16px;
+    right: 0px;
+}
+
+.ButtonFilled {
+    padding: 4px 8px;
+    border-radius: 4px;
+    background-color: #36BAA2;
+    color: white;
+    margin-top: 36px;
+}
+
+.ButtonFilled:hover {
+    border: 1px solid #36BAA2;
+    background-color: transparent;
+}
+
+.ChipOutlined {
+    font-size: small;
+    border-radius: 16px;
+    padding: 2px 8px;
+    border: 1px solid #36BAA2;
+    color: #36BAA2;
+}
+
+.PluginCardLink {
+    padding: 2px 8px;
+    position: absolute;
+    bottom: 0;
+    right: 0;
+}
+
+.PluginPageLayout {
+    margin: auto;
+    max-width: 1430px;
+    padding: 20px;
+}
+
+.PluginPageHeader {
+    position: relative;
+}
+
+.PluginPageHeader h2 {
+    display: inline-block;
+}
+
+.PluginCardBody {
+    padding-top: 8px;
+}
+
+.PluginCardFooter {
+    position: relative;
+    min-height: 2em;
+}
+
+.Author, .Author a {
+    margin-bottom: 0.25em;
+    color: rgba(255,255,255, 0.6);
+}
+
+ .Author a:hover {
+    color: white;
+}