Adding Mamalade Juice writeup - also adding missing static file, which I didnt realise was being blocked by gitignore

1 files changed, 225 insertions, 0 deletions

diff --git a/theme/static/style.css b/theme/static/style.css
new file mode 100644
index 0000000..f209a2c
--- /dev/null
+++ b/theme/static/style.css
@@ -0,0 +1,225 @@
+:root {
+  /* colors */
+  --cl-border: #E7E7E7;
+  --cl-foreground: #212121;
+  --cl-background: #edebf8;
+  --cl-gray: #828282;
+  --cl-note: #F2FFDD;
+  --cl-link: #E49619;
+
+  /* -- Code Block Colors -- */
+
+  /* --- Monokai Theme */
+  --cl-code-monokai-background:   #272822;
+  --cl-code-monokai-foreground:   #F8F8F2;
+  --cl-code-monokai-comment:      #75715E;
+  --cl-code-monokai-red:          #F92672;
+  --cl-code-monokai-orange:       #FD971F;
+  --cl-code-monokai-light-orange: #E69F66;
+  --cl-code-monokai-yellow:       #E6DB74;
+  --cl-code-monokai-green:        #A6E22E;
+  --cl-code-monokai-blue:         #66D9EF;
+  --cl-code-monokai-purple:       #AE81FF;
+
+  /* --- Theme Variables */
+  --cl-code-background:           var(--cl-code-monokai-background);
+  --cl-code-foreground:           var(--cl-code-monokai-foreground);
+  --cl-code-builtin:              var(--cl-code-monokai-green);
+  --cl-code-comment:              var(--cl-code-monokai-comment);
+  --cl-code-function-name:        var(--cl-code-monokai-green);
+  --cl-code-keyword:              var(--cl-code-monokai-red);
+  --cl-code-string:               var(--cl-code-monokai-yellow);
+  --cl-code-type:                 var(--cl-code-monokai-blue);
+  --cl-code-variable-name:        var(--cl-code-monokai-orange);
+}
+
+body {
+    font-family: 'Lora', serif;
+    background: var(--cl-background);
+    color: var(--cl-foreground);
+    margin: 0;
+    padding: 0 0 0 30 0;
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+    
+    background-position: bottom;
+    background-image: url("footer.png");
+    background-repeat: no-repeat;
+    background-size: contain;
+}
+
+header {
+  background: var(--cl-foreground);
+  color: var(--cl-background);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-bottom: 1px solid var(--cl-border);
+  padding: 10px 100px;
+  margin-bottom: 40px;
+  background-image: url("portrait.png");
+  background-repeat: no-repeat;
+  background-size: 64px;
+  background-position: bottom left;
+}
+header h1 { font-size: 24px; }
+header nav {
+  display: flex;
+  align-items: center;
+}
+header nav ul {
+  margin: 0;
+  padding: 0;
+}
+header nav ul li {
+  display: inline;
+}
+
+/* helper classes */
+.visually-hidden {
+  display: none;
+}
+
+.menu li {
+  padding-left: 50px;
+  cursor: pointer;
+}
+.menu a {
+  color: var(--cl-background);
+  font-size: 16px;
+  font-weight: bold;
+}
+
+/* -- main content -- */
+a { color: var(--cl-link); }
+a:hover {
+    transition: 0.2s;
+    text-decoration: none;
+}
+p {
+    line-height: 25px;
+    font-size: 15px;
+    padding-bottom: 20px;
+}
+h2 {
+    font-size: 24px;
+    font-weight: bold;
+}
+main {
+    width: 600px;
+    margin: 0 auto;
+    flex-grow: 1;
+}
+@media (max-width: 599px) {
+    main {
+        width: calc(100% - 20px);
+        padding: 10px;
+    }
+}
+article h1:first-child { font-size: 36px; }
+.post__meta {
+    font-size: 14px;
+    color: var(--cl-gray);
+}
+
+/* -- table -- */
+main table { width: 100% }
+main table th { text-align: left; }
+
+/* -- Highlight Note Class -- */
+.note {
+    margin-top: 20px;
+    background-color: var(--cl-note);
+    padding: 20px;
+    border-radius: 2px;
+    font-size: 13px;
+    line-height: 22px;
+    margin-bottom: 30px;
+}
+.note p {
+    margin: 0;
+    padding: 0;
+}
+
+/* -- Page -- */
+
+li.post-title {
+  margin-bottom: 20px;
+}
+
+
+/* -- Code Blocks -- */
+.org-builtin          { color: var(--cl-code-builtin); }
+.org-doc              { color: var(--cl-code-doc); }
+.org-function-name    { color: var(--cl-code-function-name); }
+.org-keyword          { color: var(--cl-code-keyword); }
+.org-string           { color: var(--cl-code-string); }
+.org-type             { color: var(--cl-code-type); }
+.org-variable-name    { color: var(--cl-code-variable-name); }
+.org-comment, .org-comment-delimiter { color: var(--cl-code-comment); }
+.org-src-container    { color: var(--cl-code-foreground);
+                        background: var(--cl-code-background);
+                        border: 1px solid var(--cl-border-src);
+                        padding: 0px 15px;
+                        max-width: 100%;
+                        overflow-y: scroll;
+                        border-radius: 5px; }
+
+
+/* -- Footer --*/
+footer {
+/*  background: var(--cl-foreground); */
+  color: var(--cl-background);
+  height: 300px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+
+
+/* -- Polaroid -- */
+.image_inline a {
+    background: #ffffff;
+    display: inline-block;
+    margin: 55px 75px 30px;
+    padding: 15px 15px 30px;
+    text-align: center;
+    text-decoration: none;
+    -webkit-box-shadow: 0 4px 6px rgba(0, 0, 0, .3);
+    -moz-box-shadow: 0 4px 6px rgba(0, 0, 0, .3);
+    box-shadow: 0 4px 6px rgba(0, 0, 0, .3);
+    -webkit-transition: all .20s linear;
+    -moz-transition: all .20s linear;
+    transition: all .20s linear;
+    z-index: 0;
+    position: relative;
+    transform: rotate( 5deg);
+}
+
+.image_inline a:before {
+}
+
+.image_inline a:after {
+    color: #333;
+    font-size: 9px;
+    content: attr(title);
+    position: relative;
+    top: 15px;
+}
+
+.image_inline img {
+    display: block;
+    width: 250px;
+}
+
+.image_inline a:hover {
+    -webkit-transform: scale(1.2);
+    -moz-transform: scale(1.2);
+    transform: scale(1.2);
+    z-index: 10;
+    -webkit-box-shadow: 0 10px 20px rgba(0, 0, 0, .7);
+    -moz-box-shadow: 0 10px 20px rgba(0, 0, 0, .7);
+    box-shadow: 0 10px 20px rgba(0, 0, 0, .7);
+}