programming-pages 0.5.8

data/_includes/styles/svg-icons.css

@@ -0,0 +1,520 @@
+/*!
+ * svg-based version of:
+ *   # Semantic UI 2.3.1 - Icon
+ *   http://github.com/semantic-org/semantic-ui/
+ *
+ * Released under the MIT license
+ * http://opensource.org/licenses/MIT
+ */
+
+/*******************************
+
+Changes from Semantic-UI font-based icons:
+
+1. no icon font, no references to font files or font properties
+2. css is defined for <svg> tags, not <i> tags
+3. no icon symbols are defined in css; all icons are defined in svg.html as symbol definitions
+
+specifically, by commented section:
+
+- Icon : tweaked to remove font references
+- Types : same
+- States : same
+- Variations : same
+- Groups : same
+- Icons : removed (see _data/svg_icons.yml for all symbol definitions and ids)
+- Outline Icons : removed (see _data/svg_icons.yml for all symbol definitions and ids)
+- Brand Icons : removed (see _data/svg_icons.yml for all symbol definitions and ids)
+
+Usage:
+
+   font: <i class="info circle icon"></i>
+   svg : {% include icon.liquid id='info-circle' %}
+
+Why?
+
+- https://blog.github.com/2016-02-22-delivering-octicons-with-svg/
+- https://css-tricks.com/icon-fonts-vs-svg/
+
+*******************************/
+
+
+/*******************************
+             SVG Icon
+*******************************/
+
+svg.icon {
+  display: inline-block;
+  position: relative;
+  top: .18em;
+  width: 1.18em;
+  height: 1em;
+  opacity: 1;
+  margin: 0;
+  fill: currentColor;
+  speak: none;
+}
+
+svg.icon:before {
+  background: none !important;
+}
+
+
+/*******************************
+             Types
+*******************************/
+
+
+/*--------------
+    Loading
+---------------*/
+
+svg.icon.loading {
+  height: 1em;
+  line-height: 1;
+  -webkit-animation: icon-loading 2s linear infinite;
+          animation: icon-loading 2s linear infinite;
+}
+@-webkit-keyframes icon-loading {
+  from {
+    -webkit-transform: rotate(0deg);
+            transform: rotate(0deg);
+  }
+  to {
+    -webkit-transform: rotate(360deg);
+            transform: rotate(360deg);
+  }
+}
+@keyframes icon-loading {
+  from {
+    -webkit-transform: rotate(0deg);
+            transform: rotate(0deg);
+  }
+  to {
+    -webkit-transform: rotate(360deg);
+            transform: rotate(360deg);
+  }
+}
+
+
+/*******************************
+             States
+*******************************/
+
+svg.icon.hover {
+  opacity: 1 !important;
+}
+svg.icon.active {
+  opacity: 1 !important;
+}
+svg.emphasized.icon {
+  opacity: 1 !important;
+}
+svg.disabled.icon {
+  opacity: 0.45 !important;
+}
+
+
+/*******************************
+           Variations
+*******************************/
+
+
+/*-------------------
+        Fitted
+--------------------*/
+
+svg.fitted.icon {
+  width: auto;
+  margin: 0em !important;
+}
+
+/*-------------------
+         Link
+--------------------*/
+
+svg.link.icon,
+svg.link.icons {
+  cursor: pointer;
+  opacity: 0.8;
+  -webkit-transition: opacity 0.1s ease;
+  transition: opacity 0.1s ease;
+}
+svg.link.icon:hover,
+svg.link.icons:hover {
+  opacity: 1 !important;
+}
+
+/*-------------------
+      Circular
+--------------------*/
+
+svg.circular.icon {
+  border-radius: 500em !important;
+  line-height: 1 !important;
+  padding: 0.5em 0.5em !important;
+  -webkit-box-shadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset;
+          box-shadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset;
+  width: 2em !important;
+  height: 2em !important;
+}
+svg.circular.inverted.icon {
+  border: none;
+  -webkit-box-shadow: none;
+          box-shadow: none;
+}
+
+/*-------------------
+      Flipped
+--------------------*/
+
+svg.flipped.icon,
+svg.horizontally.flipped.icon {
+  -webkit-transform: scale(-1, 1);
+          transform: scale(-1, 1);
+}
+svg.vertically.flipped.icon {
+  -webkit-transform: scale(1, -1);
+          transform: scale(1, -1);
+}
+
+/*-------------------
+      Rotated
+--------------------*/
+
+svg.rotated.icon,
+svg.right.rotated.icon,
+svg.clockwise.rotated.icon {
+  -webkit-transform: rotate(90deg);
+          transform: rotate(90deg);
+}
+svg.left.rotated.icon,
+svg.counterclockwise.rotated.icon {
+  -webkit-transform: rotate(-90deg);
+          transform: rotate(-90deg);
+}
+
+/*-------------------
+      Bordered
+--------------------*/
+
+svg.bordered.icon {
+  line-height: 1;
+  vertical-align: baseline;
+  width: 2em;
+  height: 2em;
+  padding: 0.5em 0em !important;
+  -webkit-box-shadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset;
+          box-shadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset;
+}
+svg.bordered.inverted.icon {
+  border: none;
+  -webkit-box-shadow: none;
+          box-shadow: none;
+}
+
+/*-------------------
+      Inverted
+--------------------*/
+
+
+/* Inverted Shapes */
+svg.inverted.bordered.icon,
+svg.inverted.circular.icon {
+  background-color: #1B1C1D !important;
+  color: #FFFFFF !important;
+}
+svg.inverted.icon {
+  color: #FFFFFF;
+}
+
+/*-------------------
+       Colors
+--------------------*/
+
+
+/* Red */
+svg.red.icon {
+  color: #DB2828 !important;
+}
+svg.inverted.red.icon {
+  color: #FF695E !important;
+}
+svg.inverted.bordered.red.icon,
+svg.inverted.circular.red.icon {
+  background-color: #DB2828 !important;
+  color: #FFFFFF !important;
+}
+
+/* Orange */
+svg.orange.icon {
+  color: #F2711C !important;
+}
+svg.inverted.orange.icon {
+  color: #FF851B !important;
+}
+svg.inverted.bordered.orange.icon,
+svg.inverted.circular.orange.icon {
+  background-color: #F2711C !important;
+  color: #FFFFFF !important;
+}
+
+/* Yellow */
+svg.yellow.icon {
+  color: #FBBD08 !important;
+}
+svg.inverted.yellow.icon {
+  color: #FFE21F !important;
+}
+svg.inverted.bordered.yellow.icon,
+svg.inverted.circular.yellow.icon {
+  background-color: #FBBD08 !important;
+  color: #FFFFFF !important;
+}
+
+/* Olive */
+svg.olive.icon {
+  color: #B5CC18 !important;
+}
+svg.inverted.olive.icon {
+  color: #D9E778 !important;
+}
+svg.inverted.bordered.olive.icon,
+svg.inverted.circular.olive.icon {
+  background-color: #B5CC18 !important;
+  color: #FFFFFF !important;
+}
+
+/* Green */
+svg.green.icon {
+  color: #21BA45 !important;
+}
+svg.inverted.green.icon {
+  color: #2ECC40 !important;
+}
+svg.inverted.bordered.green.icon,
+svg.inverted.circular.green.icon {
+  background-color: #21BA45 !important;
+  color: #FFFFFF !important;
+}
+
+/* Teal */
+svg.teal.icon {
+  color: #00B5AD !important;
+}
+svg.inverted.teal.icon {
+  color: #6DFFFF !important;
+}
+svg.inverted.bordered.teal.icon,
+svg.inverted.circular.teal.icon {
+  background-color: #00B5AD !important;
+  color: #FFFFFF !important;
+}
+
+/* Blue */
+svg.blue.icon {
+  color: #2185D0 !important;
+}
+svg.inverted.blue.icon {
+  color: #54C8FF !important;
+}
+svg.inverted.bordered.blue.icon,
+svg.inverted.circular.blue.icon {
+  background-color: #2185D0 !important;
+  color: #FFFFFF !important;
+}
+
+/* Violet */
+svg.violet.icon {
+  color: #6435C9 !important;
+}
+svg.inverted.violet.icon {
+  color: #A291FB !important;
+}
+svg.inverted.bordered.violet.icon,
+svg.inverted.circular.violet.icon {
+  background-color: #6435C9 !important;
+  color: #FFFFFF !important;
+}
+
+/* Purple */
+svg.purple.icon {
+  color: #A333C8 !important;
+}
+svg.inverted.purple.icon {
+  color: #DC73FF !important;
+}
+svg.inverted.bordered.purple.icon,
+svg.inverted.circular.purple.icon {
+  background-color: #A333C8 !important;
+  color: #FFFFFF !important;
+}
+
+/* Pink */
+svg.pink.icon {
+  color: #E03997 !important;
+}
+svg.inverted.pink.icon {
+  color: #FF8EDF !important;
+}
+svg.inverted.bordered.pink.icon,
+svg.inverted.circular.pink.icon {
+  background-color: #E03997 !important;
+  color: #FFFFFF !important;
+}
+
+/* Brown */
+svg.brown.icon {
+  color: #A5673F !important;
+}
+svg.inverted.brown.icon {
+  color: #D67C1C !important;
+}
+svg.inverted.bordered.brown.icon,
+svg.inverted.circular.brown.icon {
+  background-color: #A5673F !important;
+  color: #FFFFFF !important;
+}
+
+/* Grey */
+svg.grey.icon {
+  color: #767676 !important;
+}
+svg.inverted.grey.icon {
+  color: #DCDDDE !important;
+}
+svg.inverted.bordered.grey.icon,
+svg.inverted.circular.grey.icon {
+  background-color: #767676 !important;
+  color: #FFFFFF !important;
+}
+
+/* Black */
+svg.black.icon {
+  color: #1B1C1D !important;
+}
+svg.inverted.black.icon {
+  color: #545454 !important;
+}
+svg.inverted.bordered.black.icon,
+svg.inverted.circular.black.icon {
+  background-color: #1B1C1D !important;
+  color: #FFFFFF !important;
+}
+
+/*-------------------
+        Sizes
+--------------------*/
+
+svg.mini.icon,
+svg.mini.icons {
+  line-height: 1;
+  font-size: 0.4em;
+}
+svg.tiny.icon,
+svg.tiny.icons {
+  line-height: 1;
+  font-size: 0.5em;
+}
+svg.small.icon,
+svg.small.icons {
+  line-height: 1;
+  font-size: 0.75em;
+}
+svg.icon,
+svg.icons {
+  font-size: 1em;
+}
+svg.large.icon,
+svg.large.icons {
+  line-height: 1;
+  vertical-align: middle;
+  font-size: 1.5em;
+}
+svg.big.icon,
+svg.big.icons {
+  line-height: 1;
+  vertical-align: middle;
+  font-size: 2em;
+}
+svg.huge.icon,
+svg.huge.icons {
+  line-height: 1;
+  vertical-align: middle;
+  font-size: 4em;
+}
+svg.massive.icon,
+svg.massive.icons {
+  line-height: 1;
+  vertical-align: middle;
+  font-size: 8em;
+}
+
+
+/*******************************
+            Groups
+*******************************/
+
+svg.icons {
+  display: inline-block;
+  position: relative;
+  line-height: 1;
+}
+svg.icons .icon {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  -webkit-transform: translateX(-50%) translateY(-50%);
+          transform: translateX(-50%) translateY(-50%);
+  margin: 0em;
+  margin: 0;
+}
+svg.icons .icon:first-child {
+  position: static;
+  width: auto;
+  height: auto;
+  vertical-align: top;
+  -webkit-transform: none;
+          transform: none;
+  margin-right: 0.25rem;
+}
+
+/* Corner Icon */
+svg.icons .corner.icon {
+  top: auto;
+  left: auto;
+  right: 0;
+  bottom: 0;
+  -webkit-transform: none;
+          transform: none;
+  font-size: 0.45em;
+  text-shadow: -1px -1px 0 #FFFFFF, 1px -1px 0 #FFFFFF, -1px 1px 0 #FFFFFF, 1px 1px 0 #FFFFFF;
+}
+svg.icons .top.right.corner.icon {
+  top: 0;
+  left: auto;
+  right: 0;
+  bottom: auto;
+}
+svg.icons .top.left.corner.icon {
+  top: 0;
+  left: 0;
+  right: auto;
+  bottom: auto;
+}
+svg.icons .bottom.left.corner.icon {
+  top: auto;
+  left: 0;
+  right: auto;
+  bottom: 0;
+}
+svg.icons .bottom.right.corner.icon {
+  top: auto;
+  left: auto;
+  right: 0;
+  bottom: 0;
+}
+svg.icons .inverted.corner.icon {
+  text-shadow: -1px -1px 0 #1B1C1D, 1px -1px 0 #1B1C1D, -1px 1px 0 #1B1C1D, 1px 1px 0 #1B1C1D;
+}
+

data/_includes/styles/tweaks.css

@@ -0,0 +1,195 @@
+/*
+ * CSS customizations for the programming pages template
+ */
+
+/* use flexbox to keep footer stuck to bottom */
+.pusher {
+  display: flex;
+  min-height: 100vh;
+  flex-direction: column;
+}
+#page-container {
+  flex: 1;
+}
+
+/* toggle visibility of menu toggle / sidebar at 'mobile' width */
+#site-title .toggle.item {
+  display: none;
+}
+#sidebar-fixed {
+  overflow-y: auto!important;
+  height: 100%;
+  max-height: 100vh;
+}
+#sidebar-retractable {
+  width: 15rem;
+}
+.pusher #page-container {
+  margin-left: 15rem; /* position page to left of sidebar when it's not retractable */
+}
+@media only screen and (max-width: 767px) {
+  #site-title .toggle.item {
+    display: flex;
+  }
+  .pusher #sidebar-fixed {
+    display: none;
+  }
+  .pusher #page-container {
+    margin-left: 0;
+  }
+}
+
+/* adjust anchor positions so in-page links appear below fixed top menu */
+:target::before {
+  display: block;
+  content: " ";
+  margin-top: -3.5rem;
+  height: 3.5rem;
+  visibility: hidden;
+  pointer-events: none;
+}
+
+/* adjustments to fixed top title */
+#page-container {
+  margin-top: 3.4rem; /* position page under top menu */
+}
+#site-title .header {
+  height: 3.5rem;
+}
+#site-title a.borderless.item svg.icon {
+  top: -.06em;
+  margin-right: .18em;
+}
+/* tighten things up as viewport shrinks */
+#site-title {
+  background-color: #eee;
+  font-size: /* 14 - 18px */ calc(14px + 4 * ((100vw - 320px) / (1910 - 320)));
+}
+#site-title .header .text {
+  max-width: calc(40vw); /* not to exceed 40% of viewport width */
+  width: min-content;    /* but shrink to the smallest width needed by content, after wrapping */
+}
+@media only screen and (min-width: 768px) {
+  #site-title .header .text {
+    max-width: calc(60vw); /* grant up to 60% of viewport width */
+    width: max-content;    /* and contract to the smallest width needed by content without wrapping */
+  }
+}
+#site-title .borderless.item {
+  padding-left: /* 1.5 - 3.5em */ calc(1.5em + 2 * ((100vw - 320px) / (1910 - 320)));
+  padding-right: .25em;
+}
+
+/* responsive adjustments to attribution footer */
+#site-attribution .table {
+  font-size: /* 14 - 18px */ calc(14px + 4 * ((100vw - 320px) / (1910 - 320)));
+}
+#site-attribution .table .license {
+  float: left;
+  padding-right: .25em;
+  margin-top: -.125em;
+}
+#site-attribution .table .license .larger.text {
+  font-size: 220%;
+}
+#site-attribution .table .project-repo {
+  font-size: /* 10 - 14px */ calc(10px + 4 * ((100vw - 320px) / (1910 - 320)));
+}
+
+/* tweaks to existing semantic-ui rules */
+#sidebar-retractable.ui.push.sidebar {
+  z-index: 100; /* underneath top fixed menu */
+}
+#sidebar-retractable.ui.menu {
+  top: 3.5rem; /* below top fixed menu */
+}
+#sidebar-fixed.ui.menu {
+  position: fixed;
+  top: 3.5rem; /* below top fixed menu */
+  left: auto;
+}
+.ui.secondary.pointing.menu .item {
+  padding: .75em .75em;
+}
+.ui.vertical.text.menu .tight.item {
+  margin: 0;
+  padding: .5em;
+}
+.ui.vertical.text.menu .very.tight.item {
+  margin: 0;
+  padding: .125em;
+}
+.ui.tight.header {
+  margin-bottom: .5em;
+}
+.ui.very.tight.header {
+  margin-bottom: .25em;
+}
+.ui.tight.segment {
+  padding: .5em;
+}
+.ui.tight.label {
+  padding: .25em;
+}
+.ui.message {
+  max-width: 45rem;
+}
+.ui.message svg.icon {
+  top: .125em;
+}
+.ui.success.message, .ui.info.message, .ui.warning.message, .ui.error.message {
+  border-left-style: solid;
+  border-left-width: .25em;
+}
+
+/* custom styling */
+blockquote {
+  background: #f9f9f9;
+  border-left: .5em solid #4183c4;
+  margin: 1.5em .5em;
+  padding: .5em .5em;
+}
+blockquote p {
+  display: inline;
+}
+code, kbd, pre, samp {
+  font-family: Consolas,'Lucida Console','Andale Mono',monospace;
+}
+code.highlighter-rouge {
+  padding: 2px 4px;
+  font-size: 90%;
+  color: #d87b00;
+  background-color: #f5f4e8;
+  border-radius: 4px;
+  overflow-x: auto;
+  width: fit-content;
+  max-width: 100%;
+}
+pre.highlight {
+  line-height: 1.18em;
+  overflow-x: auto;
+  width: fit-content;
+  max-width: 100%;
+}
+.larger.text {
+  font-size: 150%;
+}
+.larger.text li, p.larger.text {
+  line-height: 130%;
+  max-width: 50rem;
+}
+.smaller.text {
+  font-size: 80%;
+}
+.smaller.text li, p.smaller.text {
+  line-height: 90%;
+}
+.normal.text {
+  font-weight: normal;
+}
+.ui.tab.segment .link.list .item>.icon {
+  float: right;
+}
+.ui.list .item>.icon {
+  float: left;
+}