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