/*

* CSS customizations for the programming pages theme
*/

/* add cross-platform support for unicode characters used in the theme */ @font-face {

font-family: 'progp-symbol';
src: url('fonts/progp-symbol.woff2') format('woff2'); /* path relative to /assets/site.css */
unicode-range: U+2B8C; /* ⮌ | U+2B8C: ANTICLOCKWISE TRIANGLE-HEADED RIGHT U-SHAPED ARROW */

} .reversefootnote { /* kramdown applies this class to footnote backlinks */

font-family: 'progp-symbol', 'Segoe UI Symbol', sans-serif;
font-size: 80%;

}

/* 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.75rem;
padding-top: 3.75rem;
height: 3.75rem;
visibility: hidden;
pointer-events: none;

} sup:target::before {

display: inline-block;
margin-top: -5rem;
padding-top: 5rem;
height: 5rem;

} /* animate a highlight of the link target to help users orient to new location */ :target {

animation: highlight 2.50s cubic-bezier(0.240, 0.010, 0.235, 0.995); /* https://matthewlein.com/tools/ceaser */

} @keyframes highlight {

0% {   text-shadow: -1px 0 0 rgba(255,221,0, 0.4), 0 1px 0 rgba(255,221,0, 0.4), 1px 0 0 rgba(255,221,0, 0.4); }
20% {  text-shadow: -3px 0 0 rgba(255,221,0, 0.8), 0 5px 0 rgba(255,221,0, 0.8), 3px 0 0 rgba(255,221,0, 0.8); }
100% { text-shadow: -1px 0 0 rgba(255,221,0, 0.0), 0 1px 0 rgba(255,221,0, 0.0), 1px 0 0 rgba(255,221,0, 0.0); }

}

/* 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)));

}

/* sidebar menu styling */ site-search {

width: 14rem;
margin-left: -.5rem;

} site-search .results {

overflow: auto;

} site-search input {

padding-left: 2em;

} sidebar-collection-indices {

padding-bottom: 75vh; /* add space underneath indices so bottom-most item can scroll into view */

} sidebar-collection-indices .ui.large.fixed.menu .item {

padding-top: 1.4em;

} sidebar-collection-indices .ui.tab.segment {

/* adjust tab segment to to fit under n rendered collections */
{% assign n = 0 %}{% for c in site.collections %}{% unless c.label == 'posts' or c.docs.size == 0 %}{% assign n = n | plus: 1 %}{% endunless %}{% endfor %}
top: {{ n | minus: 1 | times: 1.5 | plus: 5 }}rem; /* 1 -> 5 , 2 -> 6.5 , 3 -> 8 , .. */
padding: 0 0 0 .7em;
margin-top: 0;

} sidebar-collection-indices .ui.list .header.item {

font-weight: normal;

} sidebar-collection-tabs {

background-color: #292a2b; /* FIXME: this should be some theme variable for a lightened inverted background */

} sidebar-fixed sidebar-collection-indices .ui.large.fixed.menu {

top: 3.5rem; /* for sidebar fixed, keep search and tabs fixed at top */
width: 15rem;

} sidebar-fixed sidebar-collection-tabs {

top: 5.65rem;

} sidebar-retractable sidebar-collection-indices .ui.large.fixed.menu {

top: 0; /* for sidebar retractable, items still need to be positioned, since they've been fixed */

} sidebar-retractable sidebar-collection-tabs {

top: 2.5rem;

} 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.menu {

min-height: 1em; /* SUI default is too large for a single item, at 2.75em */

}

/* tweaks to existing semantic-ui rules */ .ui.secondary.pointing.menu .item {

padding: .5em .75em;

} .ui.secondary.vertical.pointing.menu .item {

border-bottom: none;/*            same as sui */
border-radius: 0!important;/*     ''          */
border-right: none;/*             switch border from right to left */
border-left-style: solid;
border-left-color: transparent;
border-left-width: 2px;
margin: 0 0 0 -2px;

} .ui.vertical.text.menu .tight.item {

margin: 0;
padding: .5em;

} .ui.vertical.text.menu .very.tight.item {

margin: 0;
padding: .125em;

} .ui.segment {

overflow-x: auto;

} .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, 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%;

} .example.segment {

min-height: 4rem;
background-color: transparent;

} .collapsible.example {

display: block;

} .collapsible.example.collapsed {

display: none;

} .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;

}