edpibu/saturn
edpibu/saturn
Archived
1
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Updated design and layout

Browse source
This commit is contained in:
Edgar P. Burkhart 2022-01-29 11:08:45 +01:00
parent 356ca1d3bd
commit 2752be164a
Signed by: edpibu
GPG key ID: 9833D3C5A25BD227
5 changed files with 72 additions and 53 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

48
saturn/server/static/css/color.css Normal file
View file

@ -0,0 +1,48 @@
:root {
--ui-background: white;
--ui-01: var(--gray-10);
--ui-04: var(--gray-50);
--text-01: var(--gray-100);
--text-02: var(--gray-70);
--text-03: var(--gray-40);
--text-04: white;
--link-01: var(--blue-60);
--interactive-01: var(--blue-60);
--interactive-02: var(--gray-80);
--field-01: var(--gray-10);
--danger-02: var(--red-60);
--hover-primary: var(--blue-60-hover);
--hover-primary-text: var(--blue-70);
--hover-ui: var(--gray-10-hover);
--active-primary: var(--blue-80);
--active-ui: var(--gray-30);
--focus: var(--blue-60);
--visited-link: var(--purple-60);
--gray-10: #f4f4f4;
--gray-10-hover: #e5e5e5;
--gray-30: #c6c6c6;
--gray-40: #a8a8a8;
--gray-50: #8d8d8d;
--gray-70: #525252;
--gray-80: #393939;
--gray-100: #161616;
--blue-60: #0f62fe;
--blue-60-hover: #0353e9;
--blue-70: #0043ce;
--blue-80: #002d9c;
--purple-60: #8a3ffc;
--red-60: #da1e28;
}

13
saturn/server/static/css/index.css
View file

@ -49,13 +49,19 @@ body > #events {
grid-template-columns:
6rem
1fr;
gap: 1rem;
gap: 0;
background: var(--ui-01);
padding: 1rem;
}
.event * {
.event .description,
.event .date,
.event .other div {
padding: .25rem;
}
.event .description {
overflow-x: hidden;
text-overflow: ellipsis;
overflow-y: hidden;
}
.event > .summary {
font-size: 1.75rem;
@ -94,6 +100,9 @@ body > #events {
.event .other {
color: var(--text-02);
}
.event div {
overflow: visible;
}
.event > .info {
grid-column: 2;
display: grid;

60
saturn/server/static/css/main.css
View file

@ -1,50 +1,3 @@
:root {
--ui-background: white;
--ui-01: var(--gray-10);
--ui-04: var(--gray-50);
--text-01: var(--gray-100);
--text-02: var(--gray-70);
--text-03: var(--gray-40);
--text-04: white;
--link-01: var(--blue-60);
--interactive-01: var(--blue-60);
--field-01: var(--gray-10);
--danger-02: var(--red-60);
--hover-primary: var(--blue-60-hover);
--hover-primary-text: var(--blue-70);
--hover-ui: var(--gray-10-hover);
--active-primary: var(--blue-80);
--active-ui: var(--gray-30);
--focus: var(--blue-60);
--visited-link: var(--purple-60);
--gray-10: #f4f4f4;
--gray-10-hover: #e5e5e5;
--gray-30: #c6c6c6;
--gray-40: #a8a8a8;
--gray-50: #8d8d8d;
--gray-70: #525252;
--gray-100: #161616;
--blue-60: #0f62fe;
--blue-60-hover: #0353e9;
--blue-70: #0043ce;
--blue-80: #002d9c;
--purple-60: #8a3ffc;
--red-60: #da1e28;
}
body {
margin: 0;
font-family: Inter, sans-serif;
@ -73,7 +26,10 @@ a {
color: var(--link-01);
position: relative;
}
a:hover, a:visited:hover {
a:visited {
color: var(--visited-link);
}
a:hover {
color: var(--hover-primary-text);
}
a:active {
@ -82,8 +38,12 @@ a:active {
a:focus {
outline: 1px solid var(--focus);
}
a:visited {
color: var(--visited-link);
a.standalone {
text-decoration: none;
}
a.standalone:hover,
a.standalone:active {
text-decoration: underline;
}
a:before {

1
saturn/server/templates/base.html
View file

@ -10,6 +10,7 @@
<link rel="icon" type="text/svg" href="/static/svg/logo.svg" />
{% block style %}
<link rel="stylesheet" href="/static/css/color.css" />
<link rel="stylesheet" href="/static/css/main.css" />
<link rel="stylesheet" href="/static/icons/remixicon.css" />
{% endblock %}

3
saturn/server/templates/index.html
View file

@ -68,7 +68,8 @@
{% if event.location %}
<div>
<i class="ri-map-pin-line ri-fw ri-sm"></i>
<a href="https://nominatim.openstreetmap.org/ui/search.html?q={{event.location}}">
<a class="standalone"
href="https://nominatim.openstreetmap.org/ui/search.html?q={{event.location}}">
{{ event.location }}
</a>
</div>