summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorJulien Dessaux2021-10-29 00:58:16 +0200
committerJulien Dessaux2021-10-29 00:58:16 +0200
commitbb7a2c66ee07a0049f319cc7ded8bb34e790802a (patch)
treee4ffd108c9bc784ace1ae41c62e630a6ef08ac5f
parentCleaned main file (diff)
downloadshort-bb7a2c66ee07a0049f319cc7ded8bb34e790802a.tar.gz
short-bb7a2c66ee07a0049f319cc7ded8bb34e790802a.tar.bz2
short-bb7a2c66ee07a0049f319cc7ded8bb34e790802a.zip
Updated css
Diffstat
-rw-r--r--src/templates/index.html13
-rw-r--r--src/templates/partials/footer.html7
-rw-r--r--src/templates/partials/master.html9
-rw-r--r--src/templates/partials/nav.html16
-rw-r--r--static/all.css525
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 %}
<h1>Shorten a URL</h1>
<form action="/" method="post">
- <input class="fullwidth" type="text" placeholder="Enter a title here" name="title" value="{{ $req.Title }}" minlength="3" maxlength="64" required autofocus><br>
- <input class="fullwidth" type="url" placeholder="Enter the URL to shorten here" name="url" value="{{ $req.Url }}" minlength="3" maxlength="512" required><br>
- <label for="expires">Expires in:</label>
- <select id="expires" name="expires">
+ <label>Title:<input name="title" value="{{ $req.Title }}" minlength="3" maxlength="64" required autofocus type="text" placeholder="Enter a title here"></label>
+ <label>URL:<input type="url" placeholder="Enter the URL to shorten here" name="url" value="{{ $req.Url }}" minlength="3" maxlength="512" required></label>
+ <label>Expires in:<select name="expires">
<option value="5">5 minutes</option>
<option value="10">10 minutes</option>
<option value="60">1 hour</option>
@@ -14,9 +13,7 @@
<option value="44640">1 month</option>
<option value="263520">6 months</option>
<option value="527040">1 year</option>
- </select>
- <input type="submit" value="shorten">
+ </select></label>
+ <button type="submit">shorten</button>
</form>
-<ul>
-</ul>
{% 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 @@
<footer>
- <p>
- &copy; 2021 | Julien (Adyxax) Dessaux | <a href="https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12" title="EUPL 1.2">Some rights reserved</a>
- </p>
+ <hr>
+ <p>
+ <center><small>&copy; 2021 | <a href="https://www.adyxax.org/docs/about-me/">Julien (Adyxax) Dessaux</a> | <a href="https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12" title="EUPL 1.2">Some rights reserved</a></small></center>
+ </p>
</footer>
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 @@
<!doctype html>
<html class="no-js" lang="en">
<head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="/static/favicon.ico">
<link rel="stylesheet" href="{{ $cssRoute }}">
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
<title>short.adyxax.org</title>
</head>
<body>
- {% importnwt "templates/partials/nav.html" %}
+ <header>
+ {% importnwt "templates/partials/nav.html" %}
+ </header>
<main id="main">
+ <hr>
{% block content %}{% endblock %}
</main>
{% 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 @@
-<header>
- <nav>
- <ul>
- <li class="nav-menu-title"><a href="/">short.adyxax.org</a></li>
- <li class="nav-menu-margin-left">
- <a href="/about">About</a>
- </li>
- </ul>
- </nav>
-</header>
+<nav>
+ <a href="/">short.adyxax.org</a>
+ <ul>
+ <li><a href="/about">About</a></li>
+ </ul>
+</nav>
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;
}
generated by cgit v1.2.3 (git 2.39.1) at 2024-11-21 14:10:29 +0000