Printable PyCon 2023 schedule

Want to print out the PyCon US 2023 schedule? Paper doesn’t run out of batteries, is easy to scribble on, and stuff into a pocket.

Here’s some custom CSS and JavaScript to make it nicely printable.

1. Install the Styler browser extension

2. View a PyCon schedule page such as https://us.pycon.org/2023/schedule/talks/ and click the Styler extension’s S icon

3. Paste this CSS into the upper box:

<span>body</span><span>.pycon-schedule</span> <span>aside</span><span>.sidebar</span><span>,</span>
<span>body</span><span>.pycon-schedule</span> <span>div</span><span>.badges</span><span>,</span>
<span>body</span><span>.pycon-schedule</span> <span>button</span><span>.menu-button.open-menu</span><span>,</span>
<span>body</span><span>.pycon-schedule</span> <span>button</span><span>#theme-switch</span><span>,</span>
<span>body</span><span>.pycon-schedule</span> <span>footer</span> <span>{</span>
  <span>display</span><span>:</span> <span>none</span><span>;</span>
<span>}</span>
<span>body</span><span>.pycon-schedule</span> <span>{</span>
  <span>font-size</span><span>:</span> <span>14px</span><span>;</span>
<span>}</span>
<span>body</span><span>.pycon-schedule</span> <span>main</span> <span>{</span>
  <span>padding</span><span>:</span> <span>0</span> <span>!important</span><span>;</span>
<span>}</span>
<span>body</span><span>.pycon-schedule</span> <span>.calendar</span> <span>{</span>
    <span>left</span><span>:</span> <span>auto</span> <span>!important</span><span>;</span>
  <span>width</span><span>:</span> <span>100%</span> <span>!important</span><span>;</span>
<span>}</span>
<span>@media</span> <span>print</span> <span>{</span>
    <span>a</span><span>:</span><span>after</span> <span>{</span> <span>content</span><span>:</span><span>''</span><span>;</span> <span>}</span>
    <span>a</span><span>[</span><span>href</span><span>]</span><span>:after</span> <span>{</span> <span>content</span><span>:</span> <span>none</span> <span>!important</span><span>;</span> <span>}</span>
<span>}</span>
<span>body</span><span>.pycon-schedule</span> <span>aside</span><span>.sidebar</span><span>,</span>
<span>body</span><span>.pycon-schedule</span> <span>div</span><span>.badges</span><span>,</span>
<span>body</span><span>.pycon-schedule</span> <span>button</span><span>.menu-button.open-menu</span><span>,</span>
<span>body</span><span>.pycon-schedule</span> <span>button</span><span>#theme-switch</span><span>,</span>
<span>body</span><span>.pycon-schedule</span> <span>footer</span> <span>{</span>
  <span>display</span><span>:</span> <span>none</span><span>;</span>
<span>}</span>
<span>body</span><span>.pycon-schedule</span> <span>{</span>
  <span>font-size</span><span>:</span> <span>14px</span><span>;</span>
<span>}</span>
<span>body</span><span>.pycon-schedule</span> <span>main</span> <span>{</span>
  <span>padding</span><span>:</span> <span>0</span> <span>!important</span><span>;</span>
<span>}</span>
<span>body</span><span>.pycon-schedule</span> <span>.calendar</span> <span>{</span>
    <span>left</span><span>:</span> <span>auto</span> <span>!important</span><span>;</span>
  <span>width</span><span>:</span> <span>100%</span> <span>!important</span><span>;</span>
<span>}</span>
<span>@media</span> <span>print</span> <span>{</span>
    <span>a</span><span>:</span><span>after</span> <span>{</span> <span>content</span><span>:</span><span>''</span><span>;</span> <span>}</span>
    <span>a</span><span>[</span><span>href</span><span>]</span><span>:after</span> <span>{</span> <span>content</span><span>:</span> <span>none</span> <span>!important</span><span>;</span> <span>}</span>
<span>}</span>
body.pycon-schedule aside.sidebar,
body.pycon-schedule div.badges,
body.pycon-schedule button.menu-button.open-menu,
body.pycon-schedule button#theme-switch,
body.pycon-schedule footer {
  display: none;
}
body.pycon-schedule {
  font-size: 14px;
}
body.pycon-schedule main {
  padding: 0 !important;
}
body.pycon-schedule .calendar {
    left: auto !important;
  width: 100% !important;
}
@media print {
    a:after { content:''; }
    a[href]:after { content: none !important; }
}

Enter fullscreen mode Exit fullscreen mode

1. Paste this JavaScript into the lower box:

<span>$</span><span>(</span><span>document</span><span>).</span><span>ready</span><span>(</span><span>function</span><span>()</span> <span>{</span>
    <span>if </span><span>(</span><span>window</span><span>.</span><span>location</span><span>.</span><span>pathname</span><span>.</span><span>match</span><span>(</span><span>'</span><span>2023/schedule/</span><span>'</span><span>)</span> <span>&&</span> 
       <span>!</span><span>window</span><span>.</span><span>location</span><span>.</span><span>pathname</span><span>.</span><span>match</span><span>(</span><span>'</span><span>2023/schedule/presentation/</span><span>'</span><span>))</span> <span>{</span>
        <span>$</span><span>(</span><span>"</span><span>body</span><span>"</span><span>).</span><span>addClass</span><span>(</span><span>"</span><span>pycon-schedule</span><span>"</span><span>);</span>
    <span>}</span>
<span>});</span>
<span>$</span><span>(</span><span>document</span><span>).</span><span>ready</span><span>(</span><span>function</span><span>()</span> <span>{</span>
    <span>if </span><span>(</span><span>window</span><span>.</span><span>location</span><span>.</span><span>pathname</span><span>.</span><span>match</span><span>(</span><span>'</span><span>2023/schedule/</span><span>'</span><span>)</span> <span>&&</span> 
       <span>!</span><span>window</span><span>.</span><span>location</span><span>.</span><span>pathname</span><span>.</span><span>match</span><span>(</span><span>'</span><span>2023/schedule/presentation/</span><span>'</span><span>))</span> <span>{</span>
        <span>$</span><span>(</span><span>"</span><span>body</span><span>"</span><span>).</span><span>addClass</span><span>(</span><span>"</span><span>pycon-schedule</span><span>"</span><span>);</span>
    <span>}</span>
<span>});</span>
$(document).ready(function() {
    if (window.location.pathname.match('2023/schedule/') && 
       !window.location.pathname.match('2023/schedule/presentation/')) {
        $("body").addClass("pycon-schedule");
    }
});

Enter fullscreen mode Exit fullscreen mode

1. Print!

It’ll run on any of the https://us.pycon.org/2023/schedule/* pages, but not the individual presentation pages such as https://us.pycon.org/2023/schedule/presentation/88/

Once printed, you can click the Styler icon and the x button to disable Styler for the site so you can browse the original version.

原文链接：Printable PyCon 2023 schedule