From eebb4d350b07b59e5c61207859bb9b18961c27a6 Mon Sep 17 00:00:00 2001
From: Rohan Sircar <rohansircar@tuta.io>
Date: Thu, 25 Jul 2019 17:58:50 +0530
Subject: [PATCH] added transparency and reduced width of main content

---
 assets/css/page.css | 395 ++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 395 insertions(+)
 create mode 100644 assets/css/page.css

diff --git a/assets/css/page.css b/assets/css/page.css
new file mode 100644
index 0000000..54902ca
--- /dev/null
+++ b/assets/css/page.css
@@ -0,0 +1,395 @@
+/* Entire page */
+/* Screen size selectors match Foundation's for consistency */
+@media screen and (max-width: 39.9375em) {
+    body {
+        background-image: var(--image-bg-sm);
+    }
+
+    #main-nav {
+        display: none;
+    }
+
+    #main-container {
+        border-top: 3px solid var(--color-border-header);
+    }
+    #site-container {
+    	width: 100%;
+    }
+}
+
+@media screen and (min-width: 40em) {
+    body {
+        background-image: var(--image-bg-md);
+    }
+    #site-container {
+    	width: 100%;
+    }
+}
+
+@media screen and (min-width: 64em) {
+    body {
+        background-image: var(--image-bg-lg);
+    }
+    #site-container {
+    	width: 60%;
+    }
+}
+
+::-moz-selection {
+  color: var(--color-fg-accent);
+  background-color: var(--color-bg-accent);
+}
+
+::selection {
+  color: var(--color-fg-accent);
+  background-color: var(--color-bg-accent);
+}
+
+#site-container {
+    margin: auto;
+    background-color: rgba(0,0,0,0.65);
+    max-width: 1080px;
+    margin: 25px auto;
+}
+
+body {
+    background-color: var(--color-bg-page);
+    color: var(--color-fg-main);
+    background-attachment: var(--bg-attach);
+    background-repeat: var(--bg-repeat);
+    background-size: var(--bg-size);
+}
+
+#site-container a:hover {
+    text-decoration: underline;
+}
+
+/* Site header */
+
+#site-header ::-moz-selection, .tag ::-moz-selection {
+    color: var(--color-fg-main);
+    background-color: var(--color-bg-main);
+}
+
+#site-header ::selection, .tag ::selection {
+    color: var(--color-fg-main);
+    background-color: var(--color-bg-main);
+}
+
+header a:hover, header a:active, header a:focus {
+    text-decoration: underline;
+    color: var(--color-fg-main);
+}
+
+header a, header a:link, header a:visited,  {
+    color: var(--color-fg-main);
+    text-decoration: none;
+}
+
+#site-header a:hover, #site-header a:active {
+    text-decoration: none;
+}
+
+#site-header {
+    background-color: var(--color-bg-accent);
+    color: var(--color-fg-accent);
+}
+
+#site-header header {
+    align-items: center;
+    padding: 1rem;
+    vertical-align: middle;
+}
+
+#site-thumbnail {
+    display: block;
+    /* Tested working with multiple sites -
+    no vertical shift when thumbnail loads */
+    max-height: 5.8rem;
+    max-width: 5.8rem;
+    padding-left: 0;
+    padding-right: 0.5rem;
+    border-radius: var(--thumbnail-radius);
+}
+
+#site-header header div {
+    padding-left: var(--site-header-padding);
+}
+
+#site-title, #site-tagline {
+    text-transform: uppercase;
+    font-weight: bold;
+    display:inline-block;
+    color: var(--color-fg-accent);
+    line-height: 1;
+}
+
+#site-title, #site-tagline, #site-title-container {
+    flex-shrink: 1;
+}
+
+#site-title {
+    padding-bottom: var(--site-title-padding-bottom);
+    font-size: var(--site-title-size);
+}
+
+#site-tagline {
+    font-size: 1.2rem;
+    padding: 0.5rem 0;
+    border-top: 1px solid var(--color-fg-accent);
+}
+
+:not(pre) > code {
+    background-color: var(--color-bg-code);
+    color: var(--color-bg-accent);
+    overflow-wrap: break-word;
+    white-space: pre-wrap;
+    display: inline-block;
+    padding: 0 0.2rem;
+    font-size: 0.9rem;
+    border: none;
+}
+
+pre code {
+    padding-left: 0;
+    padding-right: 0;
+}
+
+a code, code a {
+    color: var(--color-bg-accent);
+}
+
+del code {
+    text-decoration: line-through;
+}
+
+a:hover code, code a:hover { text-decoration: underline; }
+
+pre, pre code {
+    background-color: var(--color-bg-alt) !important;
+    color: var(--color-fg-alt);
+    font-size: 0.9rem;
+    border: none;
+}
+
+pre {
+    padding: 1.2rem;
+    overflow-x: auto;
+    margin-bottom: 1em;
+}
+
+#main-container {
+    padding-top: 15px;
+    margin: auto;
+}
+
+#page-header h1 {
+    font-weight: bold;
+    margin-top: 0;
+}
+
+main {
+    padding: 1rem 0.7rem;
+}
+
+main a, main a:hover, .callout a, .callout a:hover {
+    color: var(--color-bg-accent);
+}
+
+main a, .callout a {
+    font-weight: bold;
+}
+
+main header a, main header a:link, main header a:visited, main header a:hover, main header a:active, main header a:focus {
+    color: var(--color-fg-main);
+}
+
+article {
+    margin-bottom: 1rem;
+}
+
+.callout {
+    border: 1px solid var(--color-bg-accent);
+    display: block;
+    background-color: var(--color-bg-alert);
+    padding: 1rem;
+    margin-bottom: 0.5rem;
+    max-width: 100%;
+    width: 100%;
+    color: var(--color-fg-main);
+}
+
+.callout a, .callout a:hover, .callout code {
+    color: var(--color-fg-alert-link);
+}
+
+.callout p:last-child { margin-bottom: 0; }
+
+.callout p:first-child { margin-top: 0; }
+
+/* Sidebar */
+
+aside {
+    padding-bottom: 20px;
+}
+
+aside a:link:not(.button), aside a:visited:not(.button) {
+    color: var(--color-fg-main);
+    text-decoration: none;
+}
+
+aside a:hover, aside a:active, aside a:focus {
+    text-decoration: underline;
+}
+
+/* Footer */
+
+footer {
+    padding: 0.5rem 1rem;
+    background-color: var(--color-bg-alt);
+    color: var(--color-fg-alt);
+    border-top: 3px solid var(--color-border-main);
+}
+
+footer p {
+    margin-bottom: 0;
+}
+
+footer a {
+    color: var(--color-bg-accent);
+}
+
+footer .row { align-items: center; }
+
+#social-icons {
+    font-size: 1.5rem;
+}
+
+#social-icons a:link,
+#social-icons a:visited,
+#social-icons a:active,
+#social-icons a:focus {
+    color: var(--color-fg-alt);
+    text-decoration: none;
+}
+
+#social-icons a:hover {
+    color: var(--color-bg-accent);
+}
+
+#social-icons .fab:not(.fa-square):not(.fa-circle)::before,
+#social-icons .fas:not(.fa-square):not(.fa-circle)::before,
+#social-icons .far:not(.fa-square):not(.fa-circle)::before {
+    color: var(--color-bg-alt);
+}
+
+#social-icons .fab:not(.fa-square):not(.fa-circle):hover::before,
+#social-icons .fas:not(.fa-square):not(.fa-circle):hover::before,
+#social-icons .far:not(.fa-square):not(.fa-circle):hover::before {
+    color: var(--color-fg-accent);
+}
+
+#main-nav {
+    background-color: var(--color-bg-alt);
+    border-top: 2px solid var(--color-border-nav);
+    border-bottom: 2px solid var(--color-border-main);
+}
+
+.dropdown.menu > li {
+    margin-right: 0.5rem;
+}
+
+#off-canvas-toggle {
+    z-index: 1;
+    position: sticky;
+    position: -webkit-sticky;
+    left: 0;
+    top: 0;
+    width: 3rem;
+    height: 3rem;
+}
+
+.off-canvas {
+    background-color: var(--color-bg-alt);
+    color: var(--color-fg-alt);
+}
+
+.drilldown li {
+    width: 100%;
+    max-width: 100%;
+}
+
+.dropdown.menu .button {
+    text-align: left;
+}
+
+.is-dropdown-submenu {
+    border-color: var(--color-fg-alt);
+}
+
+/* Foundation is this specific, so I need to be too */
+
+.drilldown .is-drilldown-submenu {
+    background-color: var(--color-bg-alt);
+}
+
+.dropdown.menu > li.is-dropdown-submenu-parent > a::after {
+    border-top-color: var(--color-fg-alt);
+}
+
+.dropdown.menu > li.is-dropdown-submenu-parent > a:hover::after,
+.dropdown.menu > li.is-dropdown-submenu-parent > a:active::after,
+.dropdown.menu > li.is-dropdown-submenu-parent > a:focus::after,
+.dropdown.menu > li.is-dropdown-submenu-parent > a.active::after {
+    border-top-color: var(--color-fg-accent);
+}
+
+.is-dropdown-submenu .is-dropdown-submenu-parent.opens-right > a::after,
+.is-dropdown-submenu .is-dropdown-submenu-parent.opens-left > a::after {
+    border-left-color: var(--color-fg-alt);
+    border-right-color: var(--color-fg-alt);
+}
+
+.is-dropdown-submenu .is-dropdown-submenu-parent.opens-right > a:hover::after,
+.is-dropdown-submenu .is-dropdown-submenu-parent.opens-right > a:active::after,
+.is-dropdown-submenu .is-dropdown-submenu-parent.opens-right > a:focus::after,
+.is-dropdown-submenu .is-dropdown-submenu-parent.opens-right > a.active::after {
+    border-left-color: var(--color-fg-accent);
+    background-color: var(--color-bg-accent);
+}
+
+.is-dropdown-submenu .is-dropdown-submenu-parent.opens-left > a.button {
+    padding-left: 1rem;
+}
+
+.is-dropdown-submenu .is-dropdown-submenu-parent.opens-left > a:hover::after,
+.is-dropdown-submenu .is-dropdown-submenu-parent.opens-left > a:active::after,
+.is-dropdown-submenu .is-dropdown-submenu-parent.opens-left > a:focus::after,
+.is-dropdown-submenu .is-dropdown-submenu-parent.opens-left > a.active::after {
+    border-left-color: var(--color-fg-accent);
+    border-right-color: var(--color-fg-accent);
+    background-color: var(--color-bg-accent);
+    margin-right: 1rem;
+}
+
+.drilldown .is-drilldown-submenu-parent a::after {
+    border-left-color: var(--color-fg-alt);
+}
+
+.drilldown .is-drilldown-submenu-parent a:hover::after,
+.drilldown .is-drilldown-submenu-parent a:active::after,
+.drilldown .is-drilldown-submenu-parent a:focus::after,
+.drilldown .is-drilldown-submenu-parent a.active::after {
+    border-left-color: var(--color-fg-accent);
+}
+
+.drilldown .is-drilldown-submenu-parent a::before {
+    border-right-color: var(--color-fg-alt);
+}
+
+.drilldown .is-drilldown-submenu-parent a:hover::before,
+.drilldown .is-drilldown-submenu-parent a:active::before,
+.drilldown .is-drilldown-submenu-parent a:focus::before,
+.drilldown .is-drilldown-submenu-parent a.active::before {
+    border-right-color: var(--color-fg-accent);
+}