some website tweakage
This commit is contained in:
leah
parent
1102dd1261
commit
008e0cc5af
|
|
@ -0,0 +1,8 @@
|
|||
paths = [
|
||||
{ name = "join", path = "/signup" },
|
||||
{ name = "code of conduct", path = "/coc" },
|
||||
{ name = "docs + guides", path = "https://library.southlondon.cc"},
|
||||
{ name = "code", path = "https://tildegit.org/southlondon"},
|
||||
{ name = "x", path = "https://x.southlondon.cc"},
|
||||
|
||||
]
|
||||
|
|
@ -6,7 +6,7 @@
|
|||
|
||||
:root {
|
||||
--bg: white;
|
||||
--fg: rgb(5, 5, 5);
|
||||
--fg: rgb(40, 40, 40);
|
||||
--highlight: rgb(220, 220, 220);
|
||||
|
||||
--border: 1px solid var(--highlight);
|
||||
|
|
@ -23,7 +23,8 @@ body {
|
|||
}
|
||||
|
||||
body {
|
||||
font-family: 'Recursive', sans-serif;
|
||||
font-family:'Recursive', sans-serif;
|
||||
color: var(--fg);
|
||||
}
|
||||
|
||||
main {
|
||||
|
|
@ -56,8 +57,9 @@ footer {
|
|||
|
||||
a,
|
||||
a:visited {
|
||||
color: inherit;
|
||||
color: black;
|
||||
text-decoration: underline var(--highlight) dashed 2px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
|
|
|
|||
|
|
@ -1,23 +1,47 @@
|
|||
{% set paths = load_data(path="paths.toml") %}
|
||||
|
||||
<header>
|
||||
<nav class="nav">
|
||||
<a href="/">south london</a> ·
|
||||
<a href="/signup">join</a> ·
|
||||
<a href="/coc">code of conduct</a> ·
|
||||
<a href="https://library.southlondon.cc">docs + guides</a> ·
|
||||
<a href="https://tildegit.org/southlondon">code</a>·
|
||||
<a href="https://x.southlondon.cc">x</a>
|
||||
|
||||
{% if current_path == "/" %}
|
||||
<span><a href="/" class="active">south london</a></span>
|
||||
{% else %}
|
||||
<span><a href="/">south london</a></span>
|
||||
{% endif %}
|
||||
{% for path in paths.paths %}
|
||||
{% if current_path is starting_with(path.path) %}
|
||||
<span><a href="{{ path.path }}" class="active">{{ path.name }}</a></span>
|
||||
{% else %}
|
||||
<span><a href="{{ path.path }}">{{ path.name }}</a></span>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</nav>
|
||||
|
||||
</header>
|
||||
|
||||
<style>
|
||||
.nav {
|
||||
padding: 0.5em 0;
|
||||
header {
|
||||
background: white;
|
||||
}
|
||||
|
||||
nav>a {
|
||||
margin: 1em;
|
||||
.nav {
|
||||
padding: 0.5em 0;
|
||||
}
|
||||
|
||||
nav > span > a {
|
||||
white-space: nowrap;
|
||||
}
|
||||
</style>
|
||||
|
||||
a.active {
|
||||
color: #8360c3;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
nav > span::after {
|
||||
content: " · ";
|
||||
margin: 0 1rem;
|
||||
}
|
||||
|
||||
nav > span:last-of-type::after {
|
||||
content: "";
|
||||
}
|
||||
</style>
|
||||
|
|
@ -6,20 +6,13 @@
|
|||
|
||||
{% block content %}
|
||||
|
||||
{% include "index/header.html" %}
|
||||
{% include "header.html" %}
|
||||
<main>
|
||||
{% include "index/section1.html" %}
|
||||
</main>
|
||||
{% include "index/userlist.html" %}
|
||||
|
||||
|
||||
<style>
|
||||
body {
|
||||
background: #44A08D;
|
||||
background: -webkit-linear-gradient(to bottom, #093637, #44A08D);
|
||||
background: linear-gradient(to bottom, #093637, #44A08D);
|
||||
|
||||
background-repeat: no-repeat;
|
||||
background-attachment: fixed;
|
||||
}
|
||||
|
||||
@media (max-width: 1000px) {
|
||||
header {
|
||||
grid-template-columns: 1fr;
|
||||
|
|
@ -29,7 +22,6 @@
|
|||
header>.title {
|
||||
border-bottom: var(--border);
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
{% endblock content %}
|
||||
|
|
@ -1,68 +0,0 @@
|
|||
<header>
|
||||
<a href="/" class="title">
|
||||
south london
|
||||
</a>
|
||||
<nav class="split">
|
||||
<nav class="nav">
|
||||
<a href="/">home</a> ·
|
||||
<a href="/signup">join</a> ·
|
||||
<a href="/coc">code of conduct</a> ·
|
||||
<a href="https://library.southlondon.cc">docs + guides</a> ·
|
||||
<a href="https://tildegit.org/southlondon">code</a> ·
|
||||
<a href="https://x.southlondon.cc">x</a>
|
||||
</nav>
|
||||
<div class="intro">
|
||||
south london is a shared unix system that tries its best to be a comfy place to piss about with computery things.
|
||||
we're based in the uk so if you're in or around there you should get much better ping than pubnixes located
|
||||
in places that aren't the uk.
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<style>
|
||||
header {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 2fr;
|
||||
padding: 0;
|
||||
height: 150px;
|
||||
background: white;
|
||||
}
|
||||
|
||||
|
||||
header>.title {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
font-weight: 700;
|
||||
font-variation-settings: 'slnt'-15;
|
||||
letter-spacing: -4px;
|
||||
font-size: 3.5em;
|
||||
text-align: center;
|
||||
|
||||
border-right: var(--border);
|
||||
}
|
||||
|
||||
header>.split {
|
||||
display: flex;
|
||||
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
|
||||
header>.split>.nav {
|
||||
place-items: center left;
|
||||
border-bottom: var(--border);
|
||||
padding: 1em 0;
|
||||
}
|
||||
|
||||
header>.split>.intro {
|
||||
padding: 1em;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
nav>a {
|
||||
margin: 1em;
|
||||
white-space: nowrap;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
<div class="title">
|
||||
<h1>south london</h1>
|
||||
<p>strand-type computing</p>
|
||||
</div>
|
||||
|
||||
<section>
|
||||
<p>hello! we're a small little very tiny community of people who like to use computers to make things. <a
|
||||
href="/signup">come join us!</a></p>
|
||||
<p>this page is served from a shared linux-based computer that all members have access to. it's pretty modest
|
||||
resource-wise but it should be able to handle all your favourite-command line tools without any trouble.</p>
|
||||
<p>right now we have: </p>
|
||||
<ul>
|
||||
<li>many text editors</li>
|
||||
<li>https:// and gemini:// page hosting</li>
|
||||
<li>tools for a variety of progamming languages</li>
|
||||
<li>some irc clients</li>
|
||||
<li>a <a href="https://library.southlondon.cc">mediawiki instance</a></li>
|
||||
</ul>
|
||||
|
||||
</section>
|
||||
|
||||
<style>
|
||||
.title {
|
||||
margin: 2rem 0;
|
||||
}
|
||||
|
||||
.title>h1,
|
||||
.title>p {
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
<div class="pages">
|
||||
<h4 class="text">our esteemed users</h4>
|
||||
{% set user_data = load_data(path="users.toml") %}
|
||||
<h3 style="margin-bottom: 2em;"> <span class="text"> our esteemed users </span> </h3>
|
||||
<ul>
|
||||
<ul class="users">
|
||||
{% for u in user_data.all -%}
|
||||
<a href="/~{{ u }}/">
|
||||
<li><span class="text">~{{ u }}</span></li>
|
||||
|
|
@ -23,33 +23,44 @@
|
|||
<style>
|
||||
.pages {
|
||||
padding: 1em 2em;
|
||||
|
||||
/* background: #44A08D;
|
||||
background: -webkit-linear-gradient(to bottom, #093637, #44A08D);
|
||||
background: linear-gradient(to bottom, #093637, #44A08D);
|
||||
|
||||
background-repeat: no-repeat;
|
||||
background-attachment: fixed; */
|
||||
|
||||
max-width: 72rem;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
ul {
|
||||
display: grid;
|
||||
.users {
|
||||
display: flex;
|
||||
|
||||
padding: 0;
|
||||
padding: 2rem 0;
|
||||
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
|
||||
list-style: none;
|
||||
gap: 4em 24px;
|
||||
gap: 4rem 2rem;
|
||||
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
ul>a:hover {
|
||||
.users>a:hover {
|
||||
color: #8360c3;
|
||||
background: none;
|
||||
}
|
||||
|
||||
ul>a:hover>img {
|
||||
box-shadow: 0 0 0 6px rgba(0, 0, 0, 0.8);
|
||||
transform: scale(1.04);
|
||||
.users>a:hover>img {
|
||||
box-shadow: 0 0 0 8px rgba(0, 0, 0, 0.8);
|
||||
transform: scale(1.02);
|
||||
}
|
||||
|
||||
ul>a:active>img {
|
||||
transform: scale(0.96);
|
||||
.users>a:active>img {
|
||||
transform: scale(0.98);
|
||||
}
|
||||
|
||||
.text {
|
||||
|
|
@ -57,37 +68,28 @@
|
|||
border-radius: 15px;
|
||||
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.8);
|
||||
padding: 0.5em 1em;
|
||||
width: max-content;
|
||||
}
|
||||
|
||||
img {
|
||||
margin-top: 1em;
|
||||
background: white;
|
||||
box-shadow: 0 2px 18px 2px rgba(0, 0, 0, 0.4);
|
||||
box-shadow: 0 0 0px 2px rgba(0, 0, 0, 0.1);
|
||||
transition: 0.1s cubic-bezier(0.785, 0.135, 0.15, 0.86);
|
||||
|
||||
width: 250px;
|
||||
height: 250px;
|
||||
border-radius: 40px;
|
||||
width: 12rem;
|
||||
height: 12rem;
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
@media (min-width: 1600px) {
|
||||
ul {
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
|
||||
}
|
||||
}
|
||||
@media (max-width: 1200px) {
|
||||
ul {
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
ul {
|
||||
.users {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
}
|
||||
@media (max-width: 600px) {
|
||||
ul {
|
||||
.users {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Reference in New Issue