paritybit.ca

Unnamed repository; edit this file 'description' to name the repository.
Log | Files | Refs | README | LICENSE

commit 110dac9e6f12e003d564bccb0abdf78b7835b2d3
parent 608d59f12add70d61d6b36db9fd4faa2f1794779
Author: Jake Bauer <jbauer@paritybit.ca>
Date:   Sat, 18 Jan 2020 00:52:31 -0500

Add mobile CSS rules and move css dev folder

Diffstat:
Dbuild/borderlands.css | 106-------------------------------------------------------------------------------
Mbuild/header.html | 2+-
Dbuild/main.css | 210-------------------------------------------------------------------------------
Mpages/test.md | 25++++++++++++++++++++++++-
Rbuild/base.css -> style/base.css | 0
Astyle/borderlands.css | 49+++++++++++++++++++++++++++++++++++++++++++++++++
Rbuild/initiative.css -> style/initiative.css | 0
Astyle/main.css | 281+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
Rbuild/morrowind.css -> style/morrowind.css | 0
Rbuild/roll.css -> style/roll.css | 0
10 files changed, 355 insertions(+), 318 deletions(-)

diff --git a/build/borderlands.css b/build/borderlands.css @@ -1,106 +0,0 @@ -input:not(#tvhm):not(#tvhm2) { - width: 100px; -} - -select { - width: 106px; -} - -.td-label { - text-align: right; - padding-right: 10px; -} - -#grid-container { - display: grid; - grid-gap: 1em; - grid-template-columns: auto auto; - justify-content: center; - align-content: center; -} - -#form-1 { - grid-column: 1; - grid-row: 1; -} - -#form-2 { - grid-column: 2; - grid-row: 1; -} - -#results-1 { - grid-column: 1; - grid-row: 3; -} - -#results-2 { - grid-column: 2; - grid-row: 3; -} - -#calc-button { - grid-column: 1 / span 2; - grid-row: 2; -} - -#flesh, #shields, #armour, #flesh2, #shields2, #armour2 { - margin: 0px; -} - -@media all and (max-width: 900px) { - - input:not(#tvhm){ - width: 7em; - } - - select { - width: 7.5em; - } - - #form-table { - margin-left: -30px; - width: 20em; - } - #results-table2 { - padding-left: 0px; - } - - .grid-item { - margin-left: 10%; - width: 110%; - } - - #grid-container { - display: grid; - grid-gap: 1em; - grid-template-columns: auto; - justify-content: center; - align-content: center; - } - - #form-1 { - grid-column: 1; - grid-row: 1; - } - - #form-2 { - grid-column: 1; - grid-row: 2; - } - - #results-1 { - grid-column: 1; - grid-row: 4; - } - - #results-2 { - grid-column: 1; - grid-row: 5; - } - - #calc-button { - grid-column: 1; - grid-row: 3; - } -} diff --git a/build/header.html b/build/header.html @@ -8,7 +8,7 @@ <title>paritybit.ca</title> </head> <body> - <p id="downtime-banner">The website is currently undergoing a redesign. + <p id="sitewide-banner">The website is currently undergoing a redesign. Please bear with me as I attempt to improve the mobile experience and accessibility.</p> <header id="header"> diff --git a/build/main.css b/build/main.css @@ -1,210 +0,0 @@ -:root { - --bg: #222222; - --fg: #dddddd; - --bg-alt: #424242; - --fg-alt: #eaeaea; - --unvis-link: #ffffb3; /*#3399ff?*/ - --vis-link: #bb7777; - --hov-link: #aaaaff; - --kbd-bg: #b4b4b4; - --kbd-fg: #333333; - --warn-bg: #bb0000; - --warn-fg: #ffffff; - --border-dark: #585858; - /* LIGHT THEME COLOURS */ - --bg-light: #ffffff; - --fg-light: #111111; - --bg-alt-light: #dfdfdf; - --fg-alt-light: #151515; - --unvis-link-light: #0066aa; - --vis-link-light: #666633; /* NEEDS IMPROVEMENT */ - --hov-link-light: #cc9900; -} - -body { - background-color: var(--bg); - color: var(--fg); - font-family: "DejaVu Sans", sans-serif; - font-size: 18px; - width: 50rem; - max-width: 60rem; - margin: auto; -} - -p { - line-height: 1.3em; -} - -nav { - text-align: center; -} - -nav > a { - padding: 0 0.5em; - font-size: 1.1em; - text-decoration: none; -} - -a { - background-color: transparent; - color: var(--unvis-link); - font-weight: bold; -} - -a:visited { - color: var(--vis-link); -} - -a:hover { - text-decoration: underline; - color: var(--hov-link); -} - -pre { - background-color: var(--bg-alt); - font-family: "DejaVu Sans Mono", monospace; - overflow-x: auto; - border: 3px #585858 solid; - box-shadow: inset 0 0 0 2px rgba(40, 40, 40, 0.5); - padding: 1em; - text-indent: -0.25em; /*Needed otherwise first line indented for some reason*/ -} - -code { - background-color: var(--bg-alt); - color: var(--fg-alt); - font-size: 0.9em; - padding: 1px 4px; -} - -img { - border: 0; -} - -kbd { - background-color: var(--kbd-bg); - color: var(--kbd-fg); - border-radius: 3px; - display: inline-block; - font-size: 0.9em; - font-weight: 700; - padding: 0 4px; -} - -.back-to-top, .back-to-top:hover, .back-to-top:visited { - color: var(--unvis-link); - font-size: 1.2em; - text-decoration: none; -} - -.back-to-top:hover { - text-shadow: 2px 2px var(--vis-link); -} - -.spoiler { - background-color: #000; - color: #000; -} - -.spoiler:hover{ - color: #fff; -} - -.eff-banner { - float: right; - width: 75px; - height: 75px; -} - -.debian-banner { - float: left; - width: 68px; - height: 85px; -} - -.rss-icon { - display: inline-block; - margin-left: 0.5em; -} - -.feed-wrapper { - height: 3em; -} - -.feed-title { - display: inline-block; -} - -#downtime-banner { - background-color: var(--warn-bg); - color: var(--warn-fg); - font-weight: bold; - font-size: 0.9em; - text-align: center; - padding: 1em; - margin: auto; -} - -#header { - text-align: center; - clear: both; - margin: 1em auto; - font-size: 1.1em; -} - -#header a, #header a:visited { - color: var(--fg); - text-decoration: none; -} - -#table-of-contents { - float: right; - margin: 0 0 1em 1em; - width: 40%; - border: 3px var(--border-dark) solid; - background-color: var(--kbd-fg); -} - -#table-of-contents a { - text-decoration: none; -} - -#toc-title { - font-size: 1.1em; - font-weight: bold; - padding-left: 10px; -} - -#footer { - clear: both; -} - -#footer > p { - text-align: center; - font-size: .8em; - padding: 0 6em; -} - -/* @media (prefers-color-scheme: light) { */ -/* body { background-color: var(--bg-light); color: var(--fg-light); } */ - -/* a { color: var(--unvis-link-light); } */ - -/* a:visited { color: var(--vis-link-light); } */ - -/* a:hover { color: var(--hov-link-light); } */ - -/* pre { background-color: var(--bg-alt-light); } */ - -/* code { background-color: var(--bg-alt-light); color: var(--fg-alt-light); } */ - -/* kbd { background-color: var(--kbd-bg); color: var(--kbd-fg); } */ - -/* .back-to-top, .back-to-top:hover, .back-to-top:visited { color: var(--unvis-link); } */ - -/* .back-to-top:hover { text-shadow: 2px 2px var(--vis-link); } */ - -/* #header a, #header a:visited { color: var(--fg); } */ - -/* #table-of-contents { background-color: var(--kbd-fg); } */ -/* } */ diff --git a/pages/test.md b/pages/test.md @@ -22,7 +22,7 @@ like. src="/img/feed-icon.png" width="15" height="15" alt="Click for RSS"/> </a> </div> -2020-01-08 <a href="guides/firefox-new-tab-dark">New Guide: How to Make the New Tab Page Dark Themed in Firefox</a> +2020-01-08 <a class="feed-item" href="guides/firefox-new-tab-dark">New Guide: How to Make the New Tab Page Dark Themed in Firefox</a> <p class="spoiler">This is a spoiler.</p> @@ -85,6 +85,29 @@ vulputate sapien nec sagittis aliquam malesuada. Augue lacus viverra vitae congue eu consequat. Vulputate enim nulla aliquet porttitor lacus luctus accumsan. +<div class="inline-notice"> +<b>NOTE:</b> +<p>This is a notice. Here is some text to fill the space. Everything is calm and +orderly and nothing is going wrong.</p> +</div> + +<hr> + +<div class="inline-warning"> +<b>WARNING:</b> +<p>This is a warning. It is a level of severity in between notice and danger. +It's used for less extreme cautions, something that won't result in data loss or +system destruciton if it's not followed.</p> +</div> + +<hr> + +<div class="inline-danger"> +<b>DANGER:</b> +<p>Danger! Something bad could happen if you don't follow this guideline or take +these special precautions. Something something dd = disk destroyer!!!!!</p> +</div> + Tempus iaculis urna id volutpat. Non consectetur a erat nam at lectus. Aliquet nec ullamcorper sit amet risus nullam eget felis eget. Suspendisse in est ante in nibh mauris cursus mattis molestie. Mi quis hendrerit dolor magna eget. Dolor diff --git a/build/base.css b/style/base.css diff --git a/style/borderlands.css b/style/borderlands.css @@ -0,0 +1,49 @@ +input:not(#tvhm):not(#tvhm2) { + width: 100px; +} + +select { + width: 106px; +} + +.td-label { + text-align: right; + padding-right: 10px; +} + +#grid-container { + display: grid; + grid-gap: 1em; + grid-template-columns: auto auto; + justify-content: center; + align-content: center; +} + +#form-1 { + grid-column: 1; + grid-row: 1; +} + +#form-2 { + grid-column: 2; + grid-row: 1; +} + +#results-1 { + grid-column: 1; + grid-row: 3; +} + +#results-2 { + grid-column: 2; + grid-row: 3; +} + +#calc-button { + grid-column: 1 / span 2; + grid-row: 2; +} + +#flesh, #shields, #armour, #flesh2, #shields2, #armour2 { + margin: 0px; +} diff --git a/build/initiative.css b/style/initiative.css diff --git a/style/main.css b/style/main.css @@ -0,0 +1,281 @@ +:root { + --bg: #222222; + --fg: #dddddd; + --bg-alt: #424242; + --fg-alt: #eaeaea; + --unvis-link: #ffffb3; /*#3399ff?*/ + --vis-link: #bb7777; + --hov-link: #aaaaff; + --kbd-bg: #b4b4b4; + --kbd-fg: #333333; + --danger-bg: #880000; + --warning-bg: #9d3700; + --notice-bg: #224499; + --info-fg: #ffffff; + --border-dark: #585858; + --shadow: #000000; + /* LIGHT THEME COLOURS */ + --bg-light: #ffffff; + --fg-light: #111111; + --bg-alt-light: #dfdfdf; + --fg-alt-light: #151515; + --unvis-link-light: #0066aa; + --vis-link-light: #666633; /* NEEDS IMPROVEMENT */ + --hov-link-light: #cc9900; +} + +body { + background-color: var(--bg); + color: var(--fg); + font-family: "DejaVu Sans", "Open Sans", "Noto Sans", "Roboto", "Droid Sans", sans-serif; + font-size: 18px; + width: 50rem; + max-width: 60rem; + margin: auto; +} + +p { + line-height: 1.3em; +} + +nav { + text-align: center; +} + +nav > a { + padding: 0 0.5em; + font-size: 1.1em; + text-decoration: none; +} + +a { + background-color: transparent; + color: var(--unvis-link); + font-weight: bold; +} + +a:visited { + color: var(--vis-link); +} + +a:hover { + text-decoration: underline; + color: var(--hov-link); +} + +li a, .feed-item { + text-decoration: none; +} + +pre { + background-color: var(--bg-alt); + font-family: "DejaVu Sans Mono", monospace; + overflow-x: auto; + border: 3px #585858 solid; + box-shadow: inset 0 0 0 2px rgba(40, 40, 40, 0.5); + padding: 1em; + text-indent: -0.25em; /*Needed otherwise first line indented for some reason*/ +} + +code { + background-color: var(--bg-alt); + color: var(--fg-alt); + font-size: 0.9em; + padding: 1px 4px; +} + +kbd { + background-color: var(--kbd-bg); + color: var(--kbd-fg); + border-radius: 3px; + display: inline-block; + font-size: 0.9em; + font-weight: 700; + padding: 0 4px; +} + +img { + width: 100%; +} + +.rss-icon > img { + width: 15px; + height: 15px; +} + +.byline { + font-size: 0.8em; +} + +.back-to-top, .back-to-top:hover, .back-to-top:visited { + color: var(--unvis-link); + font-size: 1.2em; + text-decoration: none; +} + +.back-to-top:hover { + text-shadow: 2px 2px var(--vis-link); +} + +.spoiler { + background-color: #000; + color: #000; +} + +.spoiler:hover{ + color: #fff; +} + +.eff-banner { + float: right; + width: 75px; + height: 75px; +} + +.debian-banner { + float: left; + width: 68px; + height: 85px; +} + +.rss-icon { + display: inline-block; + margin-left: 0.5em; +} + +.feed-wrapper { + height: 3em; +} + +.feed-title { + display: inline-block; +} + +#sitewide-banner { + background-color: var(--danger-bg); + color: var(--info-fg); + font-weight: bold; + font-size: 0.9em; + text-align: center; + padding: 1em; + margin: auto; +} + +.inline-notice, .inline-warning, .inline-danger { + color: var(--info-fg); + font-size: 0.9em; + padding: 0.5em; + margin: auto; + width: 50%; + border-radius: 10px; + box-shadow: 4px 4px 4px var(--shadow); +} + +.inline-notice > p, .inline-warning > p, .inline-danger > p { + margin: 0; +} + +.inline-notice { + background-color: var(--notice-bg); +} + +.inline-warning { + background-color: var(--warning-bg); +} + +.inline-danger { + background-color: var(--danger-bg); +} + +#header { + text-align: center; + clear: both; + margin: 1em auto; + font-size: 1.1em; +} + +#header a, #header a:visited { + color: var(--fg); + text-decoration: none; +} + +#table-of-contents { + float: right; + margin: 0 0 1em 1em; + width: 40%; + border: 3px var(--border-dark) solid; + background-color: var(--kbd-fg); +} + +#toc-title { + font-size: 1.1em; + font-weight: bold; + padding-left: 10px; +} + +#footer { + clear: both; +} + +#footer > p { + text-align: center; + font-size: .8em; + padding: 0 6em; +} + +@media print { + body { + font-size: 14px; + } +} + +@media only screen and (max-width: 820px) { + body { + width: 90%; + } + + nav > a { + line-height: 1.5em; + } + + .inline-notice, .inline-warning, .inline-danger { + width: 80%; + } +} + +@media only screen and (max-width: 480px) { + body { + font-size: 16px; + width: 95%; + } + #table-of-contents { + width: 70%; + float: none; + margin: auto; + margin-top: 0.5em; + } +} + +/* @media (prefers-color-scheme: light) { */ +/* body { background-color: var(--bg-light); color: var(--fg-light); } */ + +/* a { color: var(--unvis-link-light); } */ + +/* a:visited { color: var(--vis-link-light); } */ + +/* a:hover { color: var(--hov-link-light); } */ + +/* pre { background-color: var(--bg-alt-light); } */ + +/* code { background-color: var(--bg-alt-light); color: var(--fg-alt-light); } */ + +/* kbd { background-color: var(--kbd-bg); color: var(--kbd-fg); } */ + +/* .back-to-top, .back-to-top:hover, .back-to-top:visited { color: var(--unvis-link); } */ + +/* .back-to-top:hover { text-shadow: 2px 2px var(--vis-link); } */ + +/* #header a, #header a:visited { color: var(--fg); } */ + +/* #table-of-contents { background-color: var(--kbd-fg); } */ +/* } */ diff --git a/build/morrowind.css b/style/morrowind.css diff --git a/build/roll.css b/style/roll.css