Browse Source

moar css

main
Evelyn Alicke 2 years ago
parent
commit
ff177cbdbd
  1. 52
      leftists/static/css/index.css
  2. 36
      leftists/static/fonts/index.css
  3. 12
      leftists/templates/base.html
  4. 3
      leftists/templates/interface/create_link.html
  5. 40
      leftists/templates/interface/overview.html

52
leftists/static/css/index.css

@ -7,38 +7,50 @@
} }
body { body {
font-family: 'Recursive', sans; font-family: 'Recursive', monospace;
font-variation-settings: var(--font-mono), var(--font-casl), var(--font-wght), var(--font-slnt), var(--font-rep-roman); font-variation-settings: var(--font-mono), var(--font-casl), var(--font-wght), var(--font-slnt), var(--font-rep-roman);
background: lightgrey; background: lightgrey;
margin: 0;
}
nav {
padding: 1ch;
background-color: white;
display: flex;
border: 1px #666 solid;
border-radius: 0 0 1ch 1ch;
box-shadow: 0.5ch 0.5ch 1ch #bbb;
}
nav > * {
position: relative;
transform: translateX(50%);
} }
header { main {
display: flex;
flex-direction: column;
position: absolute;
top: 25%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
}
th, td {
padding: 0 0.5ch;
} }
main { .section {
border: 1px #666 solid; border: 1px #666 solid;
border-radius: 1ch; border-radius: 1ch;
background: white; background: white;
box-shadow: 0.5ch 0.5ch 1ch #bbb; box-shadow: 0.5ch 0.5ch 1ch #bbb;
padding: 1ch; padding: 1ch;
margin-bottom: 2ch;
} }
th, td { h4 {
padding: 0 0.5ch; margin: 0 0 1ch 0;
}
.vcenter{
position: absolute;
top: 50%;
transform: translateY(-50%)
}
.hcenter{
position:absolute;
left: 50%;
margin-right: -50%;
transform: translateX(-50%)
} }
.cl-form { .cl-form {
@ -60,5 +72,9 @@ th, td {
margin: 0 1ch; margin: 0 1ch;
} }
#id_to { flex-grow: 1;} #id_to { flex-grow: 1;}
.ov-domains {
display: flex;
flex-direction: column;
}

36
leftists/static/fonts/index.css

@ -0,0 +1,36 @@
/* cyrillic-ext */
@font-face {
font-family: 'Recursive';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/fonts/recursive/v34/8vJN7wMr0mhh-RQChyHEH06TlXhq_gukbYrFMk1QuAIcyEwG_X-dpEfaE5YaERmK-CImKsvxvU-MXGX2fSqasNfUvz2xbXfn1uEQadCCk312tQ1TDA.woff2) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* vietnamese */
@font-face {
font-family: 'Recursive';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/fonts/recursive/v34/8vJN7wMr0mhh-RQChyHEH06TlXhq_gukbYrFMk1QuAIcyEwG_X-dpEfaE5YaERmK-CImKsvxvU-MXGX2fSqasNfUvz2xbXfn1uEQadCCk310tQ1TDA.woff2) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Recursive';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/fonts/recursive/v34/8vJN7wMr0mhh-RQChyHEH06TlXhq_gukbYrFMk1QuAIcyEwG_X-dpEfaE5YaERmK-CImKsvxvU-MXGX2fSqasNfUvz2xbXfn1uEQadCCk311tQ1TDA.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Recursive';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/fonts/recursive/v34/8vJN7wMr0mhh-RQChyHEH06TlXhq_gukbYrFMk1QuAIcyEwG_X-dpEfaE5YaERmK-CImKsvxvU-MXGX2fSqasNfUvz2xbXfn1uEQadCCk317tQ0.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

12
leftists/templates/base.html

@ -18,15 +18,13 @@
<body> <body>
<header> <header>
<nav> <nav>
<ul> {# <a href="{% url 'interface.domain.create' %}">+ domain</a>#}
{# <li><a href="{% url 'interface.domain.create' %}">+ domain</a></li>#} <a href="{% url 'interface.overview' %}">Home</a>
<li><a href="{% url 'interface.overview' %}">home</a></li> <a href="{% url 'interface.link.create' %}">Create Lonk</a>
<li><a href="{% url 'interface.link.create' %}">+ link</a></li> {# <a href="{% url '' %}"></a>#}
{# <li><a href="{% url '' %}"></a></li>#}
</ul>
</nav> </nav>
</header> </header>
<main class="vcenter hcenter"> <main>
{% block main %}{% endblock %} {% block main %}{% endblock %}
</main> </main>
{% block js %}{% endblock %} {% block js %}{% endblock %}

3
leftists/templates/interface/create_link.html

@ -1,8 +1,9 @@
{% extends "base.html" %} {% extends "base.html" %}
{% block main %} {% block main %}
<form method="post" class="cl-form"> <form method="post" class="cl-form section">
{% csrf_token %} {% csrf_token %}
<h4>Create new link</h4>
<div class="cl-from"> <div class="cl-from">
{{ form.domain }} <p class="cl-form-deco">/</p> {{ form.location }} {{ form.domain }} <p class="cl-form-deco">/</p> {{ form.location }}
</div> </div>

40
leftists/templates/interface/overview.html

@ -1,27 +1,27 @@
{% extends 'base.html' %} {% extends 'base.html' %}
{% block main %} {% block main %}
<div> <div class="ov-domains section">
managing these domains: <h4>Filter by Domain</h4>
<ul> {% for domain in domains %}
{% for domain in domains %} <a href="{% url 'interface.link.list' domain.fqdn %}">{{ domain.fqdn }}</a></li>
<li><a href="{% url 'interface.link.list' domain.fqdn %}">{{ domain.fqdn }}</a></li> {% endfor %}
{% endfor %} </div>
<div class="ov-table section">
<table> <h4>List of Lonks</h4>
<table>
<tr>
<th></th>
<th>link</th>
<th>to</th>
</tr>
{% for link in links %}
<tr> <tr>
<th></th> <td><code><a href="{% url 'interface.link.update' link.slug %}">[e]</a> | <a href="{% url 'interface.link.delete' link.slug %}">[d]</a></code></td>
<th>link</th> <td>{{ link.link }}</td>
<th>to</th> <td>{{ link.to }}</td>
</tr> </tr>
{% for link in links %} {% endfor %}
<tr> </table>
<td><code><a href="{% url 'interface.link.update' link.slug %}">[e]</a> | <a href="{% url 'interface.link.delete' link.slug %}">[d]</a></code></td>
<td>{{ link.link }}</td>
<td>{{ link.to }}</td>
</tr>
{% endfor %}
</table>
</ul>
</div> </div>
{% endblock %} {% endblock %}
Loading…
Cancel
Save