From bb7a2c66ee07a0049f319cc7ded8bb34e790802a Mon Sep 17 00:00:00 2001 From: Julien Dessaux Date: Fri, 29 Oct 2021 00:58:16 +0200 Subject: Updated css --- src/templates/index.html | 13 +- src/templates/partials/footer.html | 7 +- src/templates/partials/master.html | 9 +- src/templates/partials/nav.html | 16 +- static/all.css | 525 +++++++++++++++++++++++++++++++------ 5 files changed, 470 insertions(+), 100 deletions(-) diff --git a/src/templates/index.html b/src/templates/index.html index 2c27a14..bd0f853 100644 --- a/src/templates/index.html +++ b/src/templates/index.html @@ -2,10 +2,9 @@ {% block content %}

Shorten a URL

-
-
- - + + +
- {% endblock %} diff --git a/src/templates/partials/footer.html b/src/templates/partials/footer.html index 6ae4459..555e0d1 100644 --- a/src/templates/partials/footer.html +++ b/src/templates/partials/footer.html @@ -1,5 +1,6 @@ diff --git a/src/templates/partials/master.html b/src/templates/partials/master.html index 78e3211..cebdd61 100644 --- a/src/templates/partials/master.html +++ b/src/templates/partials/master.html @@ -1,16 +1,19 @@ - - + + short.adyxax.org - {% importnwt "templates/partials/nav.html" %} +
+ {% importnwt "templates/partials/nav.html" %} +
+
{% block content %}{% endblock %}
{% importnwt "templates/partials/footer.html" %} diff --git a/src/templates/partials/nav.html b/src/templates/partials/nav.html index 8882ff0..a4132e0 100644 --- a/src/templates/partials/nav.html +++ b/src/templates/partials/nav.html @@ -1,10 +1,6 @@ -
- -
+ diff --git a/static/all.css b/static/all.css index 728d3b6..725ec80 100644 --- a/static/all.css +++ b/static/all.css @@ -1,101 +1,474 @@ +/* MVP.css v1.8 - https://github.com/andybrewer/mvp */ + +:root { + --active-brightness: 0.85; + --border-radius: 5px; + --box-shadow: 2px 2px 10px; + --color: #839496; + --color-accent: #93a1a1; + --color-bg: #002b36; + --color-bg-secondary: #073642; + --color-link: #b58900; + --color-secondary: #eee8d5; + --color-secondary-accent: #fdf6e3; + --color-shadow: #eee8d5; + --color-table: #859900; + --color-text: #839496; + --color-text-secondary: #93a1a1; + --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; + --hover-brightness: 1.2; + --justify-important: center; + --justify-normal: left; + --line-height: 1.5; + --width-card: 285px; + --width-card-medium: 460px; + --width-card-wide: 800px; + --width-content: 1080px; +} + * { - box-sizing: border-box; + box-sizing: border-box; +} + +/* Layout */ +article aside { + background: var(--color-secondary-accent); + border-left: 4px solid var(--color-secondary); + padding: 0.01rem 0.8rem; } + body { - display: grid; - grid-template-rows: auto 1fr auto; + background: var(--color-bg); + color: var(--color-text); + font-family: var(--font-family); + line-height: var(--line-height); + margin: 0; + overflow-x: hidden; + padding: 0; + font-feature-settings: "kern" 1; + font-kerning: normal; +} - font-family: BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; +footer, +header, +main { + margin: 0 auto; + max-width: var(--width-content); + padding: 0; +} - font-feature-settings: "kern" 1; - font-kerning: normal; +hr { + background-color: var(--color-bg-secondary); + border: none; + height: 1px; + margin: 1rem 0; + width: 100%; } -#main { - padding-left:1em; - padding-right:1em; + +section { + display: flex; + flex-wrap: wrap; + justify-content: var(--justify-important); } -p { - text-align: justify; - hyphens: auto; - text-justify: inter-character; - overflow-wrap: anywhere; + +section img, +article img { + max-width: 100%; +} + +section pre { + overflow: auto; +} + +section aside { + border: 1px solid var(--color-bg-secondary); + border-radius: var(--border-radius); + box-shadow: var(--box-shadow) var(--color-shadow); + margin: 1rem; + padding: 1.25rem; + width: var(--width-card); +} + +section aside:hover { + box-shadow: var(--box-shadow) var(--color-bg-secondary); +} + +[hidden] { + display: none; +} + +/* Headers */ +article header, +div header, +main header { + padding-top: 0; +} + +header { + text-align: var(--justify-important); +} + +header a b, +header a em, +header a i, +header a strong { + margin-left: 0.5rem; + margin-right: 0.5rem; +} + +header nav img { + margin: 1rem 0; +} + +section header { + padding-top: 0; + width: 100%; } -h1, h2, h3, h4, h5 { - font-family: open, serif; + +/* Nav */ +nav { + align-items: center; + display: flex; + font-weight: bold; + justify-content: space-between; +} + +nav ul { + list-style: none; + padding: 0; +} + +nav ul li { + display: inline-block; + margin: 0 0.5rem; + position: relative; + text-align: left; +} + +/* Nav Dropdown */ +nav ul li:hover ul { + display: block; +} + +nav ul li ul { + background: var(--color-bg); + border: 1px solid var(--color-bg-secondary); + border-radius: var(--border-radius); + box-shadow: var(--box-shadow) var(--color-shadow); + display: none; + height: auto; + left: -2px; + padding: .5rem 1rem; + position: absolute; + top: 1.7rem; + white-space: nowrap; + width: auto; + z-index: 1; +} + +nav ul li ul::before { + /* fill gap above to make mousing over them easier */ + content: ""; + position: absolute; + left: 0; + right: 0; + top: -0.5rem; + height: 0.5rem; +} + +nav ul li ul li, +nav ul li ul li a { + display: block; +} + +/* Typography */ +code, +samp { + background-color: var(--color-accent); + border-radius: var(--border-radius); + color: var(--color-text); + display: inline-block; + margin: 0 0.1rem; + padding: 0 0.5rem; } -@media only screen and (min-width: 60rem) { - body { - max-width:60rem; - margin-left: auto; - margin-right: auto; - } + +details { + margin: 1.3rem 0; } -.fullwidth { - width: 100%; + +details summary { + font-weight: bold; + cursor: pointer; } -footer { - background-color: #002b36; - padding: 10px; + +h1, +h2, +h3, +h4, +h5, +h6 { + line-height: var(--line-height); } -footer p { - color: #859900; - text-align: center; + +mark { + padding: 0.1rem; } -footer a { - color: #859900; + +ol li, +ul li { + padding: 0.2rem 0; } -html { - background-color: #002b36; - color: #839496; + +p { + margin: 0.75rem 0; + padding: 0; + width: 100%; } -body, main { - background-color: #073642; + +pre { + margin: 1rem 0; + max-width: var(--width-card-wide); + padding: 1rem 0; } -code { - background-color: #073642; + +pre code, +pre samp { + display: block; + max-width: var(--width-card-wide); + padding: 0.5rem 2rem; + white-space: pre-wrap; +} + +small { + color: var(--color-text-secondary); } + +sup { + background-color: var(--color-secondary); + border-radius: var(--border-radius); + color: var(--color-bg); + font-size: xx-small; + font-weight: bold; + margin: 0.2rem; + padding: 0.2rem 0.3rem; + position: relative; + top: -2px; +} + +/* Links */ a { - color: #b58900; + color: var(--color-link); + display: inline-block; + font-weight: bold; + text-decoration: none; } -a:visited { - color: #cb4b16; + +a:active { + filter: brightness(var(--active-brightness)); + text-decoration: underline; } + a:hover { - color: #cb4b16; + filter: brightness(var(--hover-brightness)); + text-decoration: underline; } -h1 { - color: #cb4b16; + +a b, +a em, +a i, +a strong, +button { + border-radius: var(--border-radius); + display: inline-block; + font-size: medium; + font-weight: bold; + line-height: var(--line-height); + margin: 0.5rem 0; + padding: 0.5rem 2rem; } -header { - background-color: #002b36; -} -header nav ul { - list-style-type: none; - margin: 0; - padding: 0; - overflow: hidden; - font-size: 1.25rem; -} -header nav ul li { - display: inline; - float: right; -} -header nav ul li a { - display: block; - text-align: center; - padding: 14px 16px; - text-decoration: none; -} -header nav ul li a:hover { - background-color: #073642; -} -.nav-menu-title { - float: left; - text-transform: uppercase; - font-weight: 700; - margin-right: 4px; -} -.nav-menu-margin-left { - margin-left: 4px; +button { + font-family: var(--font-family); +} + +button:active { + filter: brightness(var(--active-brightness)); +} + +button:hover { + cursor: pointer; + filter: brightness(var(--hover-brightness)); +} + +a b, +a strong, +button { + background-color: var(--color-link); + border: 2px solid var(--color-link); + color: var(--color-bg); +} + +a em, +a i { + border: 2px solid var(--color-link); + border-radius: var(--border-radius); + color: var(--color-link); + display: inline-block; + padding: 1rem 2rem; +} + +article aside a { + color: var(--color-secondary); +} + +/* Images */ +figure { + margin: 0; + padding: 0; +} + +figure img { + max-width: 100%; +} + +figure figcaption { + color: var(--color-text-secondary); +} + +/* Forms */ + +button:disabled, +input:disabled { + background: var(--color-bg-secondary); + border-color: var(--color-bg-secondary); + color: var(--color-text-secondary); + cursor: not-allowed; +} + +button[disabled]:hover { + filter: none; +} + +form { + border: 1px solid var(--color-bg-secondary); + border-radius: var(--border-radius); + box-shadow: var(--box-shadow) var(--color-shadow); + display: block; + max-width: var(--width-card-wide); + min-width: var(--width-card-wide); + padding: 1.5rem; + text-align: var(--justify-normal); +} + +form header { + margin: 1.5rem 0; + padding: 1.5rem 0; +} + +input[type=text], input[type=url] { + width: 100%; +} +input, +label, +select, +textarea { + display: block; + font-size: inherit; + max-width: var(--width-card-wide); +} + +input[type="checkbox"], +input[type="radio"] { + display: inline-block; +} + +input[type="checkbox"]+label, +input[type="radio"]+label { + display: inline-block; + font-weight: normal; + position: relative; + top: 1px; +} + +input, +select, +textarea { + border: 1px solid var(--color-bg-secondary); + border-radius: var(--border-radius); + margin-bottom: 1rem; + padding: 0.4rem 0.8rem; +} + +input[readonly], +textarea[readonly] { + background-color: var(--color-bg-secondary); +} + +label { + font-weight: bold; + margin-bottom: 0.2rem; +} + +/* Tables */ +table { + border: 1px solid var(--color-bg-secondary); + border-radius: var(--border-radius); + border-spacing: 0; + display: inline-block; + max-width: 100%; + overflow-x: auto; + padding: 0; + white-space: nowrap; +} + +table td, +table th, +table tr { + padding: 0.4rem 0.8rem; + text-align: var(--justify-important); +} + +table thead { + background-color: var(--color-table); + border-collapse: collapse; + border-radius: var(--border-radius); + color: var(--color-bg); + margin: 0; + padding: 0; +} + +table thead th:first-child { + border-top-left-radius: var(--border-radius); +} + +table thead th:last-child { + border-top-right-radius: var(--border-radius); +} + +table thead th:first-child, +table tr td:first-child { + text-align: var(--justify-normal); +} + +table tr:nth-child(even) { + background-color: var(--color-accent); +} + +/* Quotes */ +blockquote { + display: block; + font-size: x-large; + line-height: var(--line-height); + margin: 1rem auto; + max-width: var(--width-card-medium); + padding: 1.5rem 1rem; + text-align: var(--justify-important); +} + +blockquote footer { + color: var(--color-text-secondary); + display: block; + font-size: small; + line-height: var(--line-height); + padding: 1.5rem 0; } -- cgit v1.2.3