diff --git a/.github/workflows/static.yml b/.github/workflows/static.yml new file mode 100644 index 0000000..0ba8230 --- /dev/null +++ b/.github/workflows/static.yml @@ -0,0 +1,43 @@ +# Simple workflow for deploying static content to GitHub Pages +name: Deploy static content to Pages + +on: + # Runs on pushes targeting the default branch + push: + branches: ["master"] + + # Allows you to run this workflow manually from the Actions tab + workflow_dispatch: + +# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages +permissions: + contents: read + pages: write + id-token: write + +# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued. +# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete. +concurrency: + group: "pages" + cancel-in-progress: false + +jobs: + # Single deploy job since we're just deploying + deploy: + environment: + name: github-pages + url: ${{ steps.deployment.outputs.page_url }} + runs-on: ubuntu-latest + steps: + - name: Checkout + uses: actions/checkout@v4 + - name: Setup Pages + uses: actions/configure-pages@v5 + - name: Upload artifact + uses: actions/upload-pages-artifact@v3 + with: + # Upload entire repository + path: '.' + - name: Deploy to GitHub Pages + id: deployment + uses: actions/deploy-pages@v4 diff --git a/stylesheet.css b/stylesheet.css index 7ed4aeb..6e69146 100644 --- a/stylesheet.css +++ b/stylesheet.css @@ -1,77 +1,172 @@ -@import url('https://fonts.googleapis.com/css?family=Roboto:400,400i,700'); +/* 90s-era Retro Stylesheet */ + +/* Base styles */ body { - font-family: 'Roboto', Arial, sans-serif; + font-family: "Times New Roman", Times, serif; + line-height: 1.4; + color: #000000; + background-color: #C0C0C0; /* Classic grey background */ + margin: 0; + padding: 10px; } -.paper_title { - font-style: italic; + +/* Links */ +a { + color: #0000FF; /* Bright blue links */ + text-decoration: underline; } -.paper_date { - font-weight: bold; + +a:visited { + color: #800080; /* Purple visited links */ } -#toc_container { - background: #f9f9f9 none repeat scroll 0 0; - border: 1px solid #aaa; - display: table; - font-size: 95%; - padding-top: 20px; - padding-left: 20px; - padding-right: 20px; - padding-bottom: 8px; - width: auto; -} -.toc_title { - font-weight: 700; - font-size: 18pt; - text-align: left; + +a:hover { + color: #FF0000; /* Red hover for links */ + text-decoration: none; } -#toc_container ul { - list-style: outside none none !important; margin-left: -40px; + +/* Header */ +h1 { + font-size: 2.5em; + text-align: center; + border-bottom: 2px solid #000000; + padding-bottom: 10px; + margin-bottom: 20px; } -.h2_explainer { - margin-bottom: 2px; + +h1 img { + width: 40px; /* simple fixed size */ + height: 40px; + vertical-align: middle; + margin: 0 5px; + display: inline; /* Keep images inline for header */ } + +h2 { + font-size: 2em; + border-bottom: 1px solid #000000; + padding-bottom: 5px; + margin-top: 30px; +} + h3 { - margin-bottom: 2px; + font-size: 1.5em; } -.h3_explainer { - padding-bottom: 10px; - padding-top: 5px; + +/* Article layout */ +article { + border: 2px outset #808080; /* Classic 3D border */ + background-color: #FFFFFF; + padding: 15px; + margin-bottom: 20px; } -.transcript { + +.paper_date { + font-weight: bold; font-style: italic; + color: #333333; } -.text_e2e { - font-style: italic; - color: #666666; - font-size: 11pt; + +.paper_title { + font-size: 1.2em; + font-weight: bold; + display: block; + margin: 5px 0; } -/* padding causes text to overlap buttons on e2e page */ -.text_gst { - font-style: italic; - color: #666666; - font-size: 11pt; - padding-bottom: 10px; - padding-top: 15px; +article ul { + list-style-type: disc; + padding-left: 40px; /* Standard indent for lists */ + margin: 10px 0 0 0; } -/* for e2e page */ -td.reference { - text-wrap: overflow; - min-width: 500px; - max-width: 500px; +article li { + margin-bottom: 5px; } -td.reference button { - margin-left: 10px; + +/* Tables */ +table { + width: 100%; + border: 2px solid #000000; + border-collapse: collapse; + margin: 15px 0; } -td.algorithm { - text-align: right; + +td, th { + border: 1px solid #000000; + padding: 8px; + text-align: left; } + +td.algorithm, td.synthesis { + text-align: left; /* override original alignment */ +} + +/* Audio player */ +audio { + border: 2px outset #808080; +} + +/* Player - remove fixed positioning */ #player { - position: fixed; - top: 0; - right: 0; + display: none; /* The floating player is too modern */ } -td.synthesis { - text-align:center; + +/* Responsive Images */ +img { + max-width: 100%; + height: auto; +} + +/* Utility classes */ +.transcript, .text_e2e, .text_gst, .h2_explainer, .h3_explainer { + font-style: italic; + color: #333333; } + +/* Responsive Styles */ +@media (max-width: 768px) { + body { + padding: 5px; + } + + h1 { + font-size: 2em; + } + + h2 { + font-size: 1.5em; + } + + /* Responsive tables */ + table, + tbody, + tr, + td { + display: block; + width: 100%; + } + + table tr { + margin-bottom: 15px; + border: none; /* Remove row borders in mobile view */ + } + + table td { + text-align: left !important; + border: 1px solid #000000; /* Add borders to cells */ + } + + table td:first-child { + border-top: 2px solid #000000; + } + + table td:last-child { + border-bottom: 2px solid #000000; + } + + table audio { + width: 100%; + } + } +