2 files changed, 166 insertions, 0 deletions
diff --git a/src/scss/styles/licenses/_main.scss b/src/scss/styles/licenses/_main.scss
new file mode 100644
index 0000000..76e041d
--- /dev/null
+++ b/src/scss/styles/licenses/_main.scss
@@ -0,0 +1,89 @@
+body {
+    display: grid;
+    grid-gap: 20px;
+    grid-template-areas:
+        "header"
+        "main"
+        "footer";
+    /* Fix height */
+    height: 100vh;
+    grid-template-rows: auto 1fr auto;
+    /* fix top and bottom */
+    margin-left: 1rem;
+    margin-right: 1rem;
+}
+
+.home-link {
+    font-size: 1.5rem;
+}
+
+a:link {
+    color: var(--link);
+}
+
+a:visited {
+    color: var(--link-visited);
+}
+
+header {
+    display: grid;
+    grid-gap: 1px;
+    grid-template-areas:
+        "home";
+    grid-area: header;
+}
+
+.home {
+    grid-area: home;
+    margin-left: auto;
+    margin-right: auto;
+    margin-bottom: 1rem;
+    margin-top: 1rem;
+}
+
+.main {
+    grid-area: main;
+    margin: 0 auto;
+    max-width: 80ch;
+}
+
+.code-error {
+    background: var(--s-background);
+    padding: 1rem;
+}
+
+.footer {
+    grid-area: footer;
+    display: grid;
+    grid-template-columns: auto;
+    align-items: center;
+    justify-content: center;
+    margin: auto;
+    text-align: center;
+}
+
+.footer > p {
+    text-align: center;
+}
+
+@media (min-width: 780px) {
+    body {
+        display: grid;
+        grid-template-columns: 0.3fr 2fr 1fr 0.3fr;
+        grid-template-rows: auto 1fr auto;
+        grid-template-areas:
+            "header header header header"
+            "main   main   main   main"
+            "footer footer footer footer";
+    }
+    .footer {
+        display: grid;
+        grid-template-columns: repeat(3, 1fr);
+        grid-column-gap: 2rem;
+        align-items: center;
+        justify-content: center;
+        text-align: center;
+        margin-top: 1rem;
+        margin-bottom: 1rem;
+    }
+}
diff --git a/src/scss/styles/licenses/_table.scss b/src/scss/styles/licenses/_table.scss
new file mode 100644
index 0000000..cb9df6a
--- /dev/null
+++ b/src/scss/styles/licenses/_table.scss
@@ -0,0 +1,77 @@
+/* ---- ---- Table ---- ---- */
+.table {
+    width: 100%;
+    border-collapse: collapse;
+}
+
+.table caption {
+    margin: 1rem 0;
+    width: 100%;
+}
+
+.table td,.table th {
+    padding: 10px 10px;
+    border: 1px solid var(--s-background);
+    text-align: center;
+}
+
+.table th {
+    background-color: var(--s-background);
+    color: var(--text);
+}
+
+.table tbody tr:nth-child(even) {
+    background-color: var(--s-focus);
+}
+
+.table tbody tr:nth-child(2n+1) {
+    background-color: var(--p-background);
+}
+
+.table thead tr th:nth-last-child(1) {
+    padding: 0;
+}
+
+.table tbody tr td:nth-last-child(1) > button {
+    color: var(--text);
+    width: 40px;
+    height: 30px;
+    background-color: var(--s-background);
+    border: 1px solid var(--s-background);
+    cursor: pointer;
+}
+
+.table tbody tr td:nth-last-child(1) > a {
+    color: var(--text);
+    cursor: pointer;
+    padding: 2px 10px;
+}
+
+/* ---- ---- End table ---- ---- */
+
+/* ---- Table responsive ---- */
+@media (max-width: 580px) {
+    .table thead {
+        display: none;
+    }
+
+    .table tr{
+        margin-bottom:15px;
+    }
+
+    .table,
+    .table tbody,
+    .table caption,
+    .table tr,
+    .table td {
+        display: block;
+        width: auto;
+        text-align: justify;
+    }
+
+    .table td::before {
+        content: attr(data-label) ": ";
+        font-weight: bold;
+    }
+}
+/* End table responsive */