aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorFran├žois Kooman <fkooman@tuxed.net>2021-01-20 10:21:10 +0100
committerFran├žois Kooman <fkooman@tuxed.net>2021-01-20 10:21:10 +0100
commit55dd0803432b10d3a38ee2020a21fadf14f50758 (patch)
tree4a7e1efb9ef53f18b31d9f94530f2bdb3955b482
parent30b89b3945b177e2d778562fe3a0decf4e2bed37 (diff)
downloadwww.tuxed.net-55dd0803432b10d3a38ee2020a21fadf14f50758.zip
www.tuxed.net-55dd0803432b10d3a38ee2020a21fadf14f50758.tar.gz
www.tuxed.net-55dd0803432b10d3a38ee2020a21fadf14f50758.tar.xz
switch to simple.css
-rw-r--r--css/bootstrap-reboot.css331
-rw-r--r--css/screen.css140
-rw-r--r--css/simple.css391
-rw-r--r--views/base.php23
4 files changed, 400 insertions, 485 deletions
diff --git a/css/bootstrap-reboot.css b/css/bootstrap-reboot.css
deleted file mode 100644
index 09cf986..0000000
--- a/css/bootstrap-reboot.css
+++ /dev/null
@@ -1,331 +0,0 @@
-/*!
- * Bootstrap Reboot v4.3.1 (https://getbootstrap.com/)
- * Copyright 2011-2019 The Bootstrap Authors
- * Copyright 2011-2019 Twitter, Inc.
- * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
- * Forked from Normalize.css, licensed MIT (https://github.com/necolas/normalize.css/blob/master/LICENSE.md)
- */
-*,
-*::before,
-*::after {
- box-sizing: border-box;
-}
-
-html {
- font-family: sans-serif;
- line-height: 1.15;
- -webkit-text-size-adjust: 100%;
- -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-}
-
-article, aside, figcaption, figure, footer, header, hgroup, main, nav, section {
- display: block;
-}
-
-body {
- margin: 0;
- font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
- font-size: 1rem;
- font-weight: 400;
- line-height: 1.5;
- color: #212529;
- text-align: left;
- background-color: #fff;
-}
-
-[tabindex="-1"]:focus {
- outline: 0 !important;
-}
-
-hr {
- box-sizing: content-box;
- height: 0;
- overflow: visible;
-}
-
-h1, h2, h3, h4, h5, h6 {
- margin-top: 0;
- margin-bottom: 0.5rem;
-}
-
-p {
- margin-top: 0;
- margin-bottom: 1rem;
-}
-
-abbr[title],
-abbr[data-original-title] {
- text-decoration: underline;
- -webkit-text-decoration: underline dotted;
- text-decoration: underline dotted;
- cursor: help;
- border-bottom: 0;
- -webkit-text-decoration-skip-ink: none;
- text-decoration-skip-ink: none;
-}
-
-address {
- margin-bottom: 1rem;
- font-style: normal;
- line-height: inherit;
-}
-
-ol,
-ul,
-dl {
- margin-top: 0;
- margin-bottom: 1rem;
-}
-
-ol ol,
-ul ul,
-ol ul,
-ul ol {
- margin-bottom: 0;
-}
-
-dt {
- font-weight: 700;
-}
-
-dd {
- margin-bottom: .5rem;
- margin-left: 0;
-}
-
-blockquote {
- margin: 0 0 1rem;
-}
-
-b,
-strong {
- font-weight: bolder;
-}
-
-small {
- font-size: 80%;
-}
-
-sub,
-sup {
- position: relative;
- font-size: 75%;
- line-height: 0;
- vertical-align: baseline;
-}
-
-sub {
- bottom: -.25em;
-}
-
-sup {
- top: -.5em;
-}
-
-a {
- color: #007bff;
- text-decoration: none;
- background-color: transparent;
-}
-
-a:hover {
- color: #0056b3;
- text-decoration: underline;
-}
-
-a:not([href]):not([tabindex]) {
- color: inherit;
- text-decoration: none;
-}
-
-a:not([href]):not([tabindex]):hover, a:not([href]):not([tabindex]):focus {
- color: inherit;
- text-decoration: none;
-}
-
-a:not([href]):not([tabindex]):focus {
- outline: 0;
-}
-
-pre,
-code,
-kbd,
-samp {
- font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
- font-size: 1em;
-}
-
-pre {
- margin-top: 0;
- margin-bottom: 1rem;
- overflow: auto;
-}
-
-figure {
- margin: 0 0 1rem;
-}
-
-img {
- vertical-align: middle;
- border-style: none;
-}
-
-svg {
- overflow: hidden;
- vertical-align: middle;
-}
-
-table {
- border-collapse: collapse;
-}
-
-caption {
- padding-top: 0.75rem;
- padding-bottom: 0.75rem;
- color: #6c757d;
- text-align: left;
- caption-side: bottom;
-}
-
-th {
- text-align: inherit;
-}
-
-label {
- display: inline-block;
- margin-bottom: 0.5rem;
-}
-
-button {
- border-radius: 0;
-}
-
-button:focus {
- outline: 1px dotted;
- outline: 5px auto -webkit-focus-ring-color;
-}
-
-input,
-button,
-select,
-optgroup,
-textarea {
- margin: 0;
- font-family: inherit;
- font-size: inherit;
- line-height: inherit;
-}
-
-button,
-input {
- overflow: visible;
-}
-
-button,
-select {
- text-transform: none;
-}
-
-select {
- word-wrap: normal;
-}
-
-button,
-[type="button"],
-[type="reset"],
-[type="submit"] {
- -webkit-appearance: button;
-}
-
-button:not(:disabled),
-[type="button"]:not(:disabled),
-[type="reset"]:not(:disabled),
-[type="submit"]:not(:disabled) {
- cursor: pointer;
-}
-
-button::-moz-focus-inner,
-[type="button"]::-moz-focus-inner,
-[type="reset"]::-moz-focus-inner,
-[type="submit"]::-moz-focus-inner {
- padding: 0;
- border-style: none;
-}
-
-input[type="radio"],
-input[type="checkbox"] {
- box-sizing: border-box;
- padding: 0;
-}
-
-input[type="date"],
-input[type="time"],
-input[type="datetime-local"],
-input[type="month"] {
- -webkit-appearance: listbox;
-}
-
-textarea {
- overflow: auto;
- resize: vertical;
-}
-
-fieldset {
- min-width: 0;
- padding: 0;
- margin: 0;
- border: 0;
-}
-
-legend {
- display: block;
- width: 100%;
- max-width: 100%;
- padding: 0;
- margin-bottom: .5rem;
- font-size: 1.5rem;
- line-height: inherit;
- color: inherit;
- white-space: normal;
-}
-
-progress {
- vertical-align: baseline;
-}
-
-[type="number"]::-webkit-inner-spin-button,
-[type="number"]::-webkit-outer-spin-button {
- height: auto;
-}
-
-[type="search"] {
- outline-offset: -2px;
- -webkit-appearance: none;
-}
-
-[type="search"]::-webkit-search-decoration {
- -webkit-appearance: none;
-}
-
-::-webkit-file-upload-button {
- font: inherit;
- -webkit-appearance: button;
-}
-
-output {
- display: inline-block;
-}
-
-summary {
- display: list-item;
- cursor: pointer;
-}
-
-template {
- display: none;
-}
-
-[hidden] {
- display: none !important;
-}
-/*# sourceMappingURL=bootstrap-reboot.css.map */ \ No newline at end of file
diff --git a/css/screen.css b/css/screen.css
deleted file mode 100644
index 257bbee..0000000
--- a/css/screen.css
+++ /dev/null
@@ -1,140 +0,0 @@
-body {
- margin: 0 auto;
- background-color: #eeeeee;
- max-width: 850px;
-}
-
-@media (min-width: 850px) {
- div.header {
- padding-top: 1em;
- background: url(../img/train.jpg) no-repeat;
- width: 850px;
- height: 225px;
- }
-
- div.header h1, div.header h2 {
- text-align: center;
- color: #fff;
- }
-}
-
-div.content {
- text-align: justify;
- padding: 1em 1.5em;
- background-color: #fff;
-}
-
-ul.pages {
- padding: 0;
- margin-top: 5em;
- text-align: center;
-}
-
-ul.pages li {
- list-style: none;
- display: inline-block;
- padding: 1em;
-}
-
-ul.pages li.active a {
- background-color: #444;
- color: #fff;
-}
-
-ul.pages li a {
- background-color: #fff;
- color: #444;
- padding: 1em;
- text-decoration: none;
- font-weight: bold;
-}
-
-div.content a {
- text-decoration: underline;
- color: #b58422;
-}
-
-ul.index {
- padding: 0;
-}
-
-ul.index li {
- list-style: none;
- margin: 0.5em 0;
-}
-
-div.footer {
- margin: 1.5em 0;
- color: #888;
- font-size: 75%;
- text-align: center;
-}
-
-div.footer a {
- color: #888;
-}
-
-div.content img, div.content video, div.content audio {
- display: block;
- margin: 0 auto;
- max-width: 95%;
-}
-
-div.content a img {
- margin: 0;
-}
-
-code, pre {
- background-color: #eee;
-}
-
-blockquote {
- border-left: 2px solid #ddd;
- padding: 1em 0.5em 0.5em 1em;
- background-color: #eee;
-}
-
-code {
- padding: 0.1em;
-}
-
-pre {
- margin: 0;
- padding: 1em;
- border: 1px dotted #bbb;
-}
-
-pre {
- white-space: pre-wrap;
- font-size: 0.9em;
- margin-bottom: 1em;
-}
-
-table {
- border: 1px solid #ccc;
- width: 100%;
- border-collapse: collapse;
- margin: 1em 0;
-}
-
-thead tr {
- background-color: #eee;
- color: #555;
-}
-
-td, th {
- padding: 0.8em 0.5em;
-}
-
-tbody tr:nth-child(even) {
- background-color: #f4f4f4;
-}
-
-p.center {
- text-align: center;
-}
-
-small {
- color: gray;
- font-size: 80%;
-}
diff --git a/css/simple.css b/css/simple.css
new file mode 100644
index 0000000..e69585f
--- /dev/null
+++ b/css/simple.css
@@ -0,0 +1,391 @@
+/* Set the global variables for everything. Change these to use your own fonts/colours. */
+:root {
+
+ /* Set sans-serif & mono fonts */
+ --sans-font: -apple-system, BlinkMacSystemFont, "Avenir Next", Avenir, "Nimbus Sans L", Roboto, Noto, "Segoe UI", Arial, Helvetica, "Helvetica Neue", sans-serif;
+ --mono-font: Consolas, Menlo, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
+
+ /* Body font size. By default, effectively 18.4px, based on 16px as 'root em' */
+ --base-fontsize: 1.15rem;
+
+ /* Major third scale progression - see https://type-scale.com/ */
+ --header-scale: 1.25;
+
+ /* Line height is set to the "Golden ratio" for optimal legibility */
+ --line-height: 1.618;
+
+ /* Default (light) theme */
+ --bg: #FFF;
+ --accent-bg: #F5F7FF;
+ --text: #212121;
+ --text-light: #585858;
+ --border: #D8DAE1;
+ --accent: #0D47A1;
+ --accent-light: #90CAF9;
+ --code: #D81B60;
+}
+
+/* Dark theme */
+@media (prefers-color-scheme: dark) {
+ :root {
+ --bg: #212121;
+ --accent-bg: #2B2B2B;
+ --text: #DCDCDC;
+ --text-light: #ABABAB;
+ --border: #666;
+ --accent: #FFB300;
+ --accent-light: #FFECB3;
+ --code: #F06292;
+ }
+
+ img {
+ opacity: .6;
+ }
+}
+
+* {
+ /* Set the font globally */
+ font-family: var(--sans-font);
+}
+
+html {
+ font-size: 16px;
+}
+
+/* Make the body a nice central block */
+body {
+ color: var(--text);
+ background: var(--bg);
+ font-size: var(--base-fontsize);
+ line-height: var(--line-height);
+ margin: 0;
+}
+
+/* Make the main element a nice central block */
+main {
+ margin: 1rem auto 0;
+ max-width: 45rem;
+ padding: 0 .5rem;
+}
+
+/* Make the header bg full width, but the content inline with body */
+header {
+ background: var(--accent-bg);
+ border-bottom: 1px solid var(--border);
+ padding: 1.5rem 15rem;
+ margin-bottom: 3rem;
+}
+
+/* Reduces header padding on smaller screens */
+@media only screen and (max-width: 1200px) {
+ header {
+ padding: 1rem;
+ }
+
+ nav {
+ text-align: center;
+ }
+}
+
+/* Remove margins for header text */
+header h1,
+header p {
+ margin: 0;
+}
+
+/* Format navigation */
+nav {
+ font-size: 1rem;
+ line-height: 2;
+ padding: 1rem 0;
+}
+
+nav a {
+ margin: 1rem 1rem 0 0;
+ border: 1px solid var(--border);
+ border-radius: 5px;
+ color: var(--text) !important;
+ display: inline-block;
+ padding: .1rem 1rem;
+ text-decoration: none;
+ transition: .4s;
+}
+
+nav a:hover {
+ color: var(--accent) !important;
+ border-color: var(--accent);
+}
+
+nav a.current:hover {
+ text-decoration: none;
+}
+
+footer {
+ margin-top: 4rem;
+ padding: 2rem 1rem 1.5rem 1rem;
+ color: var(--text-light);
+ font-size: .9rem;
+ text-align: center;
+ border-top: 1px solid var(--border);
+}
+
+/* Format headers */
+h1 {
+ font-size: calc(var(--base-fontsize) * var(--header-scale) * var(--header-scale) * var(--header-scale) * var(--header-scale));
+ margin-top: calc(var(--line-height) * 1.5rem);
+}
+
+h2 {
+ font-size: calc(var(--base-fontsize) * var(--header-scale) * var(--header-scale) * var(--header-scale));
+ margin-top: calc(var(--line-height) * 1.5rem);
+}
+
+h3 {
+ font-size: calc(var(--base-fontsize) * var(--header-scale) * var(--header-scale));
+ margin-top: calc(var(--line-height) * 1.5rem);
+}
+
+h4 {
+ font-size: calc(var(--base-fontsize) * var(--header-scale));
+ margin-top: calc(var(--line-height) * 1.5rem);
+}
+
+h5 {
+ font-size: var(--base-fontsize);
+ margin-top: calc(var(--line-height) * 1.5rem);
+}
+
+h6 {
+ font-size: calc(var(--base-fontsize) / var(--header-scale));
+ margin-top: calc(var(--line-height) * 1.5rem);
+}
+
+/* Format links & buttons */
+a,
+a:visited {
+ color: var(--accent);
+}
+
+a:hover {
+ text-decoration: none;
+}
+
+a button,
+button,
+input[type="submit"],
+input[type="reset"],
+input[type="button"] {
+ border: none;
+ border-radius: 5px;
+ background: var(--accent);
+ font-size: 1rem;
+ color: var(--bg);
+ padding: .7rem .9rem;
+ margin: .5rem 0;
+ transition: .4s;
+}
+
+a button[disabled],
+button[disabled],
+input[type="submit"][disabled],
+input[type="reset"][disabled],
+input[type="button"][disabled] {
+ cursor: default;
+ opacity: .5;
+ cursor: not-allowed;
+}
+
+/* Set the cursor to '?' while hovering over an abbreviation */
+abbr {
+ cursor: help;
+}
+
+button:focus,
+button:enabled:hover,
+input[type="submit"]:focus,
+input[type="submit"]:enabled:hover,
+input[type="reset"]:focus,
+input[type="reset"]:enabled:hover,
+input[type="button"]:focus,
+input[type="button"]:enabled:hover {
+ opacity: .8;
+}
+
+/* Format the expanding box */
+details {
+ padding: .6rem 1rem;
+ background: var(--accent-bg);
+ border: 1px solid var(--border);
+ border-radius: 5px;
+ margin-bottom: 1rem;
+}
+
+summary {
+ cursor: pointer;
+ font-weight: bold;
+}
+
+details[open] {
+ padding-bottom: .75rem;
+}
+
+details[open] summary {
+ margin-bottom: .5rem;
+}
+
+details[open]>*:last-child {
+ margin-bottom: 0;
+}
+
+/* Format tables */
+table {
+ border-collapse: collapse;
+ width: 100%
+}
+
+td,
+th {
+ border: 1px solid var(--border);
+ text-align: left;
+ padding: .5rem;
+}
+
+th {
+ background: var(--accent-bg);
+ font-weight: bold;
+}
+
+tr:nth-child(even) {
+ /* Set every other cell slightly darker. Improves readability. */
+ background: var(--accent-bg);
+}
+
+table caption {
+ font-weight: bold;
+ margin-bottom: .5rem;
+}
+
+/* Lists */
+ol,
+ul {
+ padding-left: 3rem;
+}
+
+/* Format forms */
+textarea,
+select,
+input {
+ font-size: inherit;
+ font-family: inherit;
+ padding: .5rem;
+ margin-bottom: .5rem;
+ color: var(--text);
+ background: var(--bg);
+ border: 1px solid var(--border);
+ border-radius: 5px;
+ box-shadow: none;
+ box-sizing: border-box;
+ width: 60%;
+}
+
+/* Make the textarea wider than other inputs */
+textarea {
+ width: 80%
+}
+
+/* Makes input fields wider on smaller screens */
+@media only screen and (max-width: 720px) {
+ textarea,
+ select,
+ input {
+ width: 100%;
+ }
+}
+
+/* Ensures the checkbox and radio inputs do not have a set width like other input fields */
+input[type="checkbox"], input[type="radio"]{
+ width: auto;
+}
+
+/* Without this any HTML using <fieldset> shows ugly borders and has additional padding/margin. (Issue #3) */
+fieldset {
+ border: 0;
+ padding: 0;
+ margin: 0;
+}
+
+/* Misc body elements */
+
+hr {
+ color: var(--border);
+ border-top: 1px;
+ margin: 1rem auto;
+}
+
+mark {
+ padding: 3px 6px;
+ background: var(--accent-light);
+}
+
+main img {
+ max-width: 100%;
+ border-radius: 5px;
+}
+
+figure {
+ margin: 0;
+}
+
+figcaption {
+ font-size: .9rem;
+ color: var(--text-light);
+ text-align: center;
+ margin-bottom: 1rem;
+}
+
+blockquote {
+ margin: 2rem 0 2rem 2rem;
+ padding: .4rem .8rem;
+ border-left: .35rem solid var(--accent);
+ opacity: .8;
+ font-style: italic;
+}
+
+cite {
+ font-size: 0.9rem;
+ color: var(--text-light);
+ font-style: normal;
+}
+
+/* Use mono font for code like elements */
+code,
+pre,
+kbd,
+samp {
+ font-family: var(--mono-font);
+ color: var(--code);
+}
+
+kbd {
+ border: 1px solid var(--code);
+ border-bottom: 3px solid var(--code);
+ border-radius: 5px;
+ padding: .1rem;
+}
+
+pre {
+ padding: 1rem 1.4rem;
+ max-width: 100%;
+ overflow: auto;
+ background: var(--accent-bg);
+ border: 1px solid var(--border);
+ border-radius: 5px;
+}
+
+/* Fix embedded code within pre */
+pre code {
+ color: var(--text);
+ background: none;
+ margin: 0;
+ padding: 0;
+}
diff --git a/views/base.php b/views/base.php
index dc52cd7..068de03 100644
--- a/views/base.php
+++ b/views/base.php
@@ -6,35 +6,30 @@
<!-- Generated on <?php echo $this->e($generatedOn); ?> -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<title><?php echo $this->e($blogTitle); ?> - <?php echo $this->e($pageTitle); ?></title>
- <link rel="stylesheet" type="text/css" href="<?php echo $this->e($requestRoot); ?>css/bootstrap-reboot.css">
- <link rel="stylesheet" type="text/css" href="<?php echo $this->e($requestRoot); ?>css/screen.css">
+ <link rel="stylesheet" type="text/css" href="<?php echo $this->e($requestRoot); ?>css/simple.css">
</head>
<body>
- <div class="header">
+<header>
<h1><?php echo $this->e($blogTitle); ?></h1>
<?php if ('' !== $blogDescription): ?>
<h2><?php echo $this->e($blogDescription); ?></h2>
<?php endif; ?>
- <ul class="pages">
+<nav>
<?php foreach ($pagesList as $p): ?>
<?php if ($p['fileName'] === $activePage): ?>
- <li class="active">
<a href="<?php echo $this->e($requestRoot); ?><?php echo $this->e($p['fileName']); ?>"><?php echo $this->e($p['title']); ?></a>
- </li>
<?php else: ?>
- <li>
<a href="<?php echo $this->e($requestRoot); ?><?php echo $this->e($p['fileName']); ?>"><?php echo $this->e($p['title']); ?></a>
- </li>
<?php endif; ?>
<?php endforeach; ?>
- </ul>
- </div> <!-- /header -->
- <div class="content">
+</nav>
+</header>
+<main>
<?php echo $this->section('content'); ?>
- </div> <!-- /content -->
+</main>
- <div class="footer">
+<footer>
<p>&copy; <?php echo $this->e($currentYear); ?> <?php echo $this->e($blogAuthor); ?></p>
- </div> <!-- /footer -->
+</footer>
</body>
</html>