iridium/redsunlib
iridium/redsunlib
2
2
Fork 0
Code Issues 3 Pull Requests Packages Projects Releases 3 Wiki Activity

Make Design More Compact

Browse Source
This commit is contained in:
spikecodes 2021-01-03 19:44:44 -08:00
parent 4124fa87d3
commit a422a74747
7 changed files with 106 additions and 87 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

102
static/style.css
View File

@ -24,6 +24,7 @@
body { body {
background: var(--background); background: var(--background);
font-size: 15px;
} }
nav { nav {
@ -88,10 +89,14 @@ img[src=""] {
aside { aside {
flex-grow: 1; flex-grow: 1;
margin: 20px 20px 0 20px; margin: 20px 20px 0 10px;
max-width: 350px; max-width: 350px;
} }
.panel {
border: 1px solid var(--highlighted);
}
/* User & Subreddit */ /* User & Subreddit */
#user, #subreddit, #sidebar { #user, #subreddit, #sidebar {
@ -99,7 +104,6 @@ aside {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
padding: 20px;
height: max-content; height: max-content;
background: var(--outside); background: var(--outside);
border-radius: 5px; border-radius: 5px;
@ -108,15 +112,10 @@ aside {
#user *, #subreddit * { text-align: center; } #user *, #subreddit * { text-align: center; }
#subreddit { padding: 0; } #user, #sub_meta, #sidebar_contents { padding: 20px; }
#sub_meta { padding: 20px; }
#sidebar, #sidebar_contents { margin-top: 20px; } #sidebar, #sidebar_contents { margin-top: 10px; }
#sidebar_label { padding: 10px; }
#sidebar_label {
border: 2px solid var(--highlighted);
padding: 10px;
}
#user_icon, #sub_icon { #user_icon, #sub_icon {
width: 100px; width: 100px;
@ -135,10 +134,12 @@ aside {
#user_description, #sub_description { #user_description, #sub_description {
margin: 0 20px; margin: 0 20px;
font-size: 15px;
} }
#user_name, #sub_name, #user_icon, #sub_icon, #user_description, #sub_description { margin-bottom: 20px; } #user_name, #user_description:not(:empty), #user_icon
#sub_name, #sub_icon, #sub_description:not(:empty) {
margin-bottom: 20px;
}
#user_details, #sub_details { #user_details, #sub_details {
display: grid; display: grid;
@ -148,7 +149,6 @@ aside {
#user_details > label, #sub_details > label { #user_details > label, #sub_details > label {
color: var(--accent); color: var(--accent);
font-size: 15px;
} }
/* Wiki Pages */ /* Wiki Pages */
@ -160,7 +160,6 @@ aside {
#top { #top {
background: var(--highlighted); background: var(--highlighted);
font-size: 18px;
width: 100%; width: 100%;
display: flex; display: flex;
} }
@ -168,8 +167,8 @@ aside {
#top > * { #top > * {
flex-grow: 1; flex-grow: 1;
text-align: center; text-align: center;
height: 40px; height: 35px;
line-height: 40px; line-height: 35px;
} }
#top > div { #top > div {
@ -183,10 +182,9 @@ select {
} }
select, #search { select, #search {
border: 0; border: none;
padding: 0 15px; padding: 0 15px;
height: 40px; height: 40px;
font-size: 15px;
appearance: none; appearance: none;
border-radius: 5px 0px 0px 5px; border-radius: 5px 0px 0px 5px;
} }
@ -209,7 +207,6 @@ select, #search {
#inside { #inside {
display: flex; display: flex;
font-size: 15px;
align-items: center; align-items: center;
border-right: 2px var(--outside) solid; border-right: 2px var(--outside) solid;
height: 40px; height: 40px;
@ -227,8 +224,13 @@ select:hover { background: var(--foreground); }
input[type="submit"]:hover { color: var(--accent); } input[type="submit"]:hover { color: var(--accent); }
#timeframe { #timeframe {
border-radius: 5px 0px 0px 5px; margin: 0 2px;
border-radius: 0;
}
#sort_options + #timeframe:not(#search_sort > #timeframe) {
margin-left: 10px; margin-left: 10px;
border-radius: 5px 0px 0px 5px;
} }
#search_sort { #search_sort {
@ -242,6 +244,8 @@ input[type="submit"]:hover { color: var(--accent); }
background: transparent; background: transparent;
} }
#search_sort > *, #searchbox > * { font-size: 15px; }
#search_sort > :not(:first-child), #search_sort > #sort_options { #search_sort > :not(:first-child), #search_sort > #sort_options {
margin: 0; margin: 0;
border-radius: 0; border-radius: 0;
@ -294,6 +298,8 @@ input[type="submit"]:hover { color: var(--accent); }
display: flex; display: flex;
} }
.post:not(:last-child) { margin-bottom: 10px; }
.post.highlighted { .post.highlighted {
margin: 20px 0; margin: 20px 0;
} }
@ -317,7 +323,6 @@ input[type="submit"]:hover { color: var(--accent); }
background: var(--foreground); background: var(--foreground);
border-radius: 5px 0 0 5px; border-radius: 5px 0 0 5px;
min-width: 50px; min-width: 50px;
padding: 5px;
} }
.post_score { .post_score {
@ -344,33 +349,17 @@ input[type="submit"]:hover { color: var(--accent); }
margin-right: 15px; margin-right: 15px;
} }
.nsfw {
color: #FF5C5D;
margin-top: 20px;
border: 1px solid #FF5C5D;
padding: 5px;
font-size: 12px;
border-radius: 5px;
font-weight: bold;
}
.stickied {
--accent: #5cff85;
border: 1px solid #5cff85;
padding: 5px;
}
.post_subreddit { .post_subreddit {
font-weight: bold; font-weight: bold;
} }
.post_title { .post_title {
font-size: 18px; font-size: 16px;
line-height: 1.5; line-height: 1.5;
} }
.post_right { .post_right {
padding: 20px 25px; padding: 15px 20px;
flex-grow: 1; flex-grow: 1;
flex-shrink: 1; flex-shrink: 1;
} }
@ -398,8 +387,9 @@ input[type="submit"]:hover { color: var(--accent); }
object-fit: cover; object-fit: cover;
width: auto; width: auto;
flex-shrink: 0; flex-shrink: 0;
padding: 10px; margin: 10px;
border-radius: 15px; border-radius: 5px;
border: 1px solid var(--foreground);
max-width: 20%; max-width: 20%;
} }
@ -412,13 +402,27 @@ input[type="submit"]:hover { color: var(--accent); }
font-weight: bold; font-weight: bold;
} }
.nsfw {
color: #FF5C5D;
margin-top: 20px;
border: 1px solid #FF5C5D;
padding: 5px;
font-size: 12px;
border-radius: 5px;
font-weight: bold;
}
.stickied {
--accent: #5cff85;
border: 1px solid #5cff85;
}
/* Comment */ /* Comment */
.comment { .comment {
margin-top: 15px; margin: 10px 0;
border-radius: 5px; border-radius: 5px;
display: flex; display: flex;
font-size: 15px;
} }
.comment_left, .comment_right { .comment_left, .comment_right {
@ -535,7 +539,6 @@ input[type="submit"]:hover { color: var(--accent); }
margin-top: 20px; margin-top: 20px;
} }
.md p { font-size: 15px; }
.md h1 { font-size: 22px; } .md h1 { font-size: 22px; }
.md h2 { font-size: 20px; } .md h2 { font-size: 20px; }
.md h3 { font-size: 18px; } .md h3 { font-size: 18px; }
@ -544,8 +547,8 @@ input[type="submit"]:hover { color: var(--accent); }
.md h6 { font-size: 12px; } .md h6 { font-size: 12px; }
.md blockquote { .md blockquote {
padding-left: 8px; padding-left: 6px;
margin: 4px 0 4px 8px; margin: 4px 0 4px 5px;
border-left: 4px solid var(--highlighted); border-left: 4px solid var(--highlighted);
} }
@ -564,6 +567,10 @@ input[type="submit"]:hover { color: var(--accent); }
box-shadow: var(--black-contrast); box-shadow: var(--black-contrast);
} }
.md table {
margin: 5px;
}
.md code { .md code {
font-family: monospace; font-family: monospace;
font-size: 14px; font-size: 14px;
@ -599,7 +606,7 @@ td, th {
} }
.post_score { .post_score {
margin-top: 0; margin: 5px 0;
} }
.post_thumbnail { .post_thumbnail {
@ -622,6 +629,7 @@ td, th {
padding: 10px; padding: 10px;
margin: 10px 0; margin: 10px 0;
} }
nav { nav {
flex-direction: column; flex-direction: column;
padding: 10px; padding: 10px;

2
templates/base.html
View File

@ -12,12 +12,14 @@
{% endblock %} {% endblock %}
</head> </head>
<body> <body>
<!-- NAVIGATION BAR -->
<nav> <nav>
<a id="logo" href="/"><span id="lib">lib</span>reddit. <span id="version">v{{ env!("CARGO_PKG_VERSION") }}</span></a> <a id="logo" href="/"><span id="lib">lib</span>reddit. <span id="version">v{{ env!("CARGO_PKG_VERSION") }}</span></a>
{% block search %}{% endblock %} {% block search %}{% endblock %}
<a id="github" href="https://github.com/spikecodes/libreddit">GITHUB</a> <a id="github" href="https://github.com/spikecodes/libreddit">GITHUB</a>
</nav> </nav>
<!-- MAIN CONTENT -->
{% block body %} {% block body %}
<main> <main>
{% block content %} {% block content %}

59
templates/post.html
View File

@ -13,8 +13,8 @@
<meta name="author" content="u/{{ post.author }}"> <meta name="author" content="u/{{ post.author }}">
{% endblock %} {% endblock %}
<!-- OPEN COMMENT MACRO -->
{% macro comment(item) -%} {% macro comment(item) -%}
<div id="{{ item.id }}" class="comment"> <div id="{{ item.id }}" class="comment">
<div class="comment_left"> <div class="comment_left">
<p class="comment_score">{{ item.score }}</p> <p class="comment_score">{{ item.score }}</p>
@ -28,18 +28,24 @@
&bull; <span class="datetime">{{ item.time }}</span> &bull; <span class="datetime">{{ item.time }}</span>
</summary> </summary>
<p class="comment_body">{{ item.body }}</p> <p class="comment_body">{{ item.body }}</p>
{%- endmacro %} {%- endmacro %}
<!-- CLOSE COMMENT MACRO -->
{% macro close() %}
</details></div>
{% endmacro %}
{% block content %} {% block content %}
<div id="column_one"> <div id="column_one">
<div class="post highlighted">
<!-- POST CONTENT -->
<div class="post highlighted panel">
<div class="post_left"> <div class="post_left">
<p class="post_score">{{ post.score }}</p> <p class="post_score">{{ post.score }}</p>
{% if post.flags.nsfw %}<div class="nsfw">NSFW</div>{% endif %} {% if post.flags.nsfw %}<div class="nsfw">NSFW</div>{% endif %}
</div> </div>
<div class="post_right"> <div class="post_right">
<p> <p class="post_header">
<b><a class="post_subreddit" href="/r/{{ post.community }}">r/{{ post.community }}</a></b> <b><a class="post_subreddit" href="/r/{{ post.community }}">r/{{ post.community }}</a></b>
&bull; &bull;
<a class="post_author" href="/u/{{ post.author }}">u/{{ post.author }}</a> <a class="post_author" href="/u/{{ post.author }}">u/{{ post.author }}</a>
@ -71,35 +77,38 @@
</div> </div>
</div> </div>
</div> </div>
<!-- SORT FORM -->
<form id="sort"> <form id="sort">
<select name="sort"> <select name="sort">
{% call utils::options(sort, ["confidence", "top", "new", "controversial", "old"], "") %} {% call utils::options(sort, ["confidence", "top", "new", "controversial", "old"], "") %}
</select><input id="sort_submit" type="submit" value="&rarr;"> </select><input id="sort_submit" type="submit" value="&rarr;">
</form> </form>
<!-- COMMENTS -->
{% for c in comments -%} {% for c in comments -%}
<div class="thread"> <div class="thread">
{% call comment(c) %} <!-- EACH COMMENT -->
<div class="replies"> {% call comment(c) %}
{% for reply1 in c.replies %} <div class="replies">{% for reply1 in c.replies %}{% call comment(reply1) %}
{% call comment(reply1) %} <!-- FIRST-LEVEL REPLIES -->
<div class="replies"> <div class="replies">{% for reply2 in reply1.replies %}{% call comment(reply2) %}
{% for reply2 in reply1.replies %} <!-- SECOND-LEVEL REPLIES -->
{% call comment(reply2) %} <div class="replies">{% for reply3 in reply2.replies %}{% call comment(reply3) %}
<div class="replies"> <!-- THIRD-LEVEL REPLIES -->
{% for reply3 in reply2.replies %} {% if reply3.replies.len() > 0 %}
{% call comment(reply3) %} <!-- LINK TO CONTINUE REPLIES -->
{% if reply3.replies.len() > 0 %} <a class="deeper_replies" href="{{ post.permalink }}{{ reply3.id }}">&rarr; More replies</a>
<a class="deeper_replies" href="{{ post.permalink }}{{ reply3.id }}">&rarr; More replies</a> {% endif %}
{% endif %} {% call close() %}
</details></div>
{% endfor %}
</div></details></div>
{% endfor %}
</div></details></div>
{% endfor %} {% endfor %}
</div></details></div> </div>{% call close() %}
</div> {% endfor %}
</div>{% call close() %}
{% endfor %}
</div>{% call close() %}
</div>
{%- endfor %} {%- endfor %}
</div> </div>
{% endblock %} {% endblock %}

8
templates/search.html
View File

@ -21,13 +21,13 @@
</form> </form>
{% for post in posts %} {% for post in posts %}
{% if post.title != "Comment" %} {% if post.title != "Comment" %}
<div class="post"> <div class="post panel">
<div class="post_left"> <div class="post_left">
<p class="post_score">{{ post.score }}</p> <p class="post_score">{{ post.score }}</p>
{% if post.flags.nsfw %}<div class="nsfw">NSFW</div>{% endif %} {% if post.flags.nsfw %}<div class="nsfw">NSFW</div>{% endif %}
</div> </div>
<div class="post_right"> <div class="post_right">
<p> <p class="post_header">
<b><a class="post_subreddit" href="/r/{{ post.community }}">r/{{ post.community }}</a></b> <b><a class="post_subreddit" href="/r/{{ post.community }}">r/{{ post.community }}</a></b>
&bull; <a class="post_author" href="/u/{{ post.author }}">u/{{ post.author }}</a> &bull; <a class="post_author" href="/u/{{ post.author }}">u/{{ post.author }}</a>
{% if post.author_flair.0 != "" %} {% if post.author_flair.0 != "" %}
@ -43,7 +43,7 @@
</p> </p>
</div> </div>
<img class="post_thumbnail" src="{{ post.media }}"> <img class="post_thumbnail" src="{{ post.media }}">
</div><br> </div>
{% else %} {% else %}
<div class="comment"> <div class="comment">
<div class="comment_left"> <div class="comment_left">
@ -57,7 +57,7 @@
</summary> </summary>
<p class="comment_body">{{ post.body }}</p> <p class="comment_body">{{ post.body }}</p>
</details> </details>
</div><br> </div>
{% endif %} {% endif %}
{% endfor %} {% endfor %}

10
templates/subreddit.html
View File

@ -28,13 +28,13 @@
</select>{% endif %} </select>{% endif %}
</form> </form>
{% for post in posts %} {% for post in posts %}
<div class="post {% if post.flags.stickied %}stickied{% endif %}"> <div class="post {% if post.flags.stickied %}stickied{% endif %} panel">
<div class="post_left"> <div class="post_left">
<p class="post_score">{{ post.score }}</p> <p class="post_score">{{ post.score }}</p>
{% if post.flags.nsfw %}<div class="nsfw">NSFW</div>{% endif %} {% if post.flags.nsfw %}<div class="nsfw">NSFW</div>{% endif %}
</div> </div>
<div class="post_right"> <div class="post_right">
<p> <p class="post_header">
<b><a class="post_subreddit" href="/r/{{ post.community }}">r/{{ post.community }}</a></b> <b><a class="post_subreddit" href="/r/{{ post.community }}">r/{{ post.community }}</a></b>
&bull; <a class="post_author" href="/u/{{ post.author }}">u/{{ post.author }}</a> &bull; <a class="post_author" href="/u/{{ post.author }}">u/{{ post.author }}</a>
{% if post.author_flair.0 != "" %} {% if post.author_flair.0 != "" %}
@ -50,7 +50,7 @@
</p> </p>
</div> </div>
<img class="post_thumbnail" src="{{ post.media }}"> <img class="post_thumbnail" src="{{ post.media }}">
</div><br> </div>
{% endfor %} {% endfor %}
<footer> <footer>
@ -65,7 +65,7 @@
</div> </div>
{% if sub.name != "" %} {% if sub.name != "" %}
<aside> <aside>
<div id="subreddit"> <div class="panel" id="subreddit">
{% if sub.wiki %} {% if sub.wiki %}
<div id="top"> <div id="top">
<div>Posts</div> <div>Posts</div>
@ -85,7 +85,7 @@
</div> </div>
</div> </div>
</div> </div>
<details id="sidebar"> <details class="panel" id="sidebar">
<summary id="sidebar_label">Sidebar</summary> <summary id="sidebar_label">Sidebar</summary>
<div id="sidebar_contents">{{ sub.info }}</div> <div id="sidebar_contents">{{ sub.info }}</div>
</details> </details>

10
templates/user.html
View File

@ -18,13 +18,13 @@
</form> </form>
{% for post in posts %} {% for post in posts %}
{% if post.title != "Comment" %} {% if post.title != "Comment" %}
<div class='post'> <div class="post panel">
<div class="post_left"> <div class="post_left">
<p class="post_score">{{ post.score }}</p> <p class="post_score">{{ post.score }}</p>
{% if post.flags.nsfw %}<div class="nsfw">NSFW</div>{% endif %} {% if post.flags.nsfw %}<div class="nsfw">NSFW</div>{% endif %}
</div> </div>
<div class="post_right"> <div class="post_right">
<p> <p class="post_header">
<b><a class="post_subreddit" href="/r/{{ post.community }}">r/{{ post.community }}</a></b> <b><a class="post_subreddit" href="/r/{{ post.community }}">r/{{ post.community }}</a></b>
&bull; <a class="post_author" href="/u/{{ post.author }}">u/{{ post.author }}</a> &bull; <a class="post_author" href="/u/{{ post.author }}">u/{{ post.author }}</a>
{% if post.author_flair.0 != "" %} {% if post.author_flair.0 != "" %}
@ -42,7 +42,7 @@
</p> </p>
</div> </div>
<img class="post_thumbnail" src="{{ post.media }}"> <img class="post_thumbnail" src="{{ post.media }}">
</div><br> </div>
{% else %} {% else %}
<div class="comment"> <div class="comment">
<div class="comment_left"> <div class="comment_left">
@ -56,7 +56,7 @@
</summary> </summary>
<p class="comment_body">{{ post.body }}</p> <p class="comment_body">{{ post.body }}</p>
</details> </details>
</div><br> </div>
{% endif %} {% endif %}
{% endfor %} {% endfor %}
<footer> <footer>
@ -70,7 +70,7 @@
</footer> </footer>
</div> </div>
<aside> <aside>
<div id="user"> <div class="panel" id="user">
<img id="user_icon" src="{{ user.icon }}"> <img id="user_icon" src="{{ user.icon }}">
<p id="user_title">{{ user.title }}</p> <p id="user_title">{{ user.title }}</p>
<p id="user_name">u/{{ user.name }}</p> <p id="user_name">u/{{ user.name }}</p>

2
templates/wiki.html
View File

@ -12,7 +12,7 @@
{% block body %} {% block body %}
<main> <main>
<div id="column_one"> <div class="panel" id="column_one">
<div id="top"> <div id="top">
<a href="/r/{{ sub }}">Posts</a> <a href="/r/{{ sub }}">Posts</a>
<div>Wiki</div> <div>Wiki</div>