Commit fe58fc05 authored by Emma's avatar Emma 🏳🌈

yet another complete redesign

parent 4159b158
Pipeline #57735530 passed with stages
in 7 minutes and 46 seconds
.content-card {
background: var(--card-bg);
box-shadow: var(--card-shadow);
}
.dropdown-card {
background: var(--dropdown-card-bg, var(--card-bg));
box-shadow: var(--dropdown-card-shadow, var(--card-shadow));
}
.sidebar-card {
background: var(--sidebar-card-bg, var(--card-bg));
box-shadow: var(--sidebar-card-shadow, var(--card-shadow));
}
.form-control {
@height: calc(var(--font-size) * var(--line-height) + 1rem + 2px);
background-color: var(--bg-page); // todo
background-color: var(--form-bg);
border: solid 1px var(--border);
border-radius: 0; // disable rounded corners on iOS
color: var(--text);
display: inline-block;
font-size: var(--font-size);
......@@ -11,7 +12,7 @@
transition: background-color .1s, box-shadow .1s, border-color .1s, color .1s;
// work around bug that occurs in chrome (and safari?) when parent line-height
// is less than the widget's.
// is less than the widget's, making the <select> text disappear
line-height: var(--line-height);
@supports (-webkit-overflow-scrolling: touch) {
......@@ -28,9 +29,11 @@
&[type="search"],
&[type="date"],
&[type="time"],
&[type="checkbox"],
&[type="radio"],
textarea& {
-webkit-appearance: none; // disable ugly shade on iOS
border-radius: 0; // disable rounded corners on iOS
// remove ugly shade on iOS, and disable native styling for checkbox/radio
-webkit-appearance: none;
}
input&:not([type]),
......@@ -55,9 +58,6 @@
// .form-control off otherwise.
&[type="checkbox"],
&[type="radio"] {
-webkit-appearance: none;
-moz-appearance: none;
border-radius: 0; // disable rounded corners on iOS
min-height: unset;
}
......@@ -75,7 +75,6 @@
}
select&:not([multiple]) {
border-radius: 0; // disable rounded corners on iOS
height: @height; // dropdown caret doesn't acknowledge min-height
// having vertical padding cuts off the text inside. having height set is
......
......@@ -97,3 +97,7 @@ hr {
border: none;
border-top: solid 1px var(--border-light);
}
summary {
cursor: pointer;
}
@import '../_variables';
.site-width-container {
.content-container {
margin-left: auto;
margin-right: auto;
max-width: @max-site-width;
max-width: @max-content-width;
width: 100%;
}
@import '../_variables';
.sidebar {
display: flex;
flex-direction: column;
@media screen and (max-width: 768px) {
margin-top: 3rem;
border-top: 1px solid var(--border-light);
}
@media screen and (min-width: 768px) {
@media screen and (min-width: @desktop-min-width) {
margin-left: 1rem;
width: 20rem;
background: var(--bg-sidebar);
border-left: 1px solid var(--border-light);
}
&__section {
margin-top: 1rem;
padding: 1rem 1rem 0;
background: var(--bg-page);
border-bottom: 1px solid var(--border-light);
}
&__title {
font-size: 1.5rem;
font-weight: bold;
font-size: 1.25rem;
font-weight: bold; // for <summary> titles
margin-bottom: 1rem;
}
&:empty {
display: none;
&__no-padding {
margin-left: -1rem;
margin-right: -1rem;
}
& summary {
cursor: pointer;
}
&__list {
margin-bottom: 1rem !important;
&:empty {
display: none;
}
> li > a {
display: block;
padding: .2em .4em;
}
&:empty {
display: none;
}
}
@import '../_variables';
.content-wrapper {
display: grid;
grid-template-columns: 1fr auto;
grid-template-areas: "body sidebar" "footer sidebar";
flex: 1 0 auto;
.site-content {
align-items: flex-start;
display: flex;
@media not screen and (min-width: @desktop-min-width) {
display: flex;
align-items: stretch;
flex-direction: column;
}
> .body {
grid-area: body;
flex: 1 1 auto;
min-width: 0;
margin: 1rem;
padding: 1rem;
@media screen and (min-width: @desktop-min-width) {
margin-top: 1rem;
}
}
> .sidebar {
grid-area: sidebar;
flex: none;
flex: 0 0 auto;
min-width: 0;
}
> footer {
grid-area: footer;
}
}
......@@ -2,12 +2,4 @@
margin-top: auto;
padding: 1rem 1rem 0;
text-align: center;
&__dim {
opacity: 0.35;
&:hover {
opacity: 1;
}
}
}
......@@ -4,6 +4,9 @@
background-color: var(--primary);
background-image: linear-gradient(to left, var(--primary), var(--primary-bright));
// overlap box-shadows from main content/sidebar
z-index: 5;
&__container {
display: flex;
width: 100%;
......
......@@ -66,7 +66,6 @@
&__body {
padding-right: 0.5rem;
max-width: var(--paragraph-width);
}
&__nav {
......
......@@ -6,7 +6,7 @@
width: 100%;
&__line-group {
border-bottom: solid 0.5rem var(--bg-page);
border-bottom: solid 0.5rem var(--bg-content);
}
&__line-no {
......
......@@ -5,7 +5,7 @@
display: block;
-webkit-user-select: all;
-moz-user-select: all;
padding: 0.2rem 0.4rem;
user-select: all;
padding: 0.25rem 1rem;
}
}
......@@ -45,7 +45,6 @@
&__body {
margin-bottom: -0.5rem;
padding-top: 0.5rem;
max-width: var(--paragraph-width);
}
&__header {
......
@import '../_variables';
.wiki-article {
max-width: var(--paragraph-width);
margin: 0 auto;
width: 100%;
&__title {
font-size: 3rem;
letter-spacing: -.05em;
@media screen and (min-width: @desktop-min-width) {
font-size: 3rem;
letter-spacing: -.05em;
}
border-bottom: 1px solid var(--border-light);
}
}
......
.card {
background-color: var(--card);
box-shadow: 1px 1px 2px var(--border);
}
@max-content-width: 1100px;
@desktop-min-width: 768px;
@nav-font-size: 16px;
......@@ -2,6 +2,7 @@
--font-size: 1.2rem;
--padding-v: 0.5rem;
--padding-h: 1rem;
background: var(--bg);
border: none;
border-radius: 3px;
cursor: pointer;
......@@ -25,19 +26,19 @@
&:not(&--secondary) {
--button-active: var(--primary-bright);
background-color: var(--primary);
--bg: var(--primary);
color: var(--primary-fg);
}
&--secondary {
--button-active: var(--accent-alt);
background-color: var(--accent);
--bg: var(--accent);
color: var(--accent-fg);
}
&:hover,
&:focus {
background-color: var(--button-active);
--bg: var(--button-active);
outline: none;
}
}
// extension of .button
.subscribe-button {
background: transparent;
overflow: hidden;
padding: 0;
&:not(.button--inline) {
......@@ -11,11 +13,13 @@
}
&__label {
border-right: solid 1px currentColor;
background: var(--bg);
margin-right: 1px;
padding: var(--padding-v) var(--padding-h);
}
&__subscriber-count {
background: var(--bg);
padding-left: var(--padding-h);
padding: var(--padding-v) var(--padding-h);
}
......
......@@ -29,12 +29,17 @@
@import '_widgets/subscribe-button';
@import '_widgets/tab';
@import '_layout/content-wrapper';
@import '_layout/content-container';
@import '_layout/site-alerts';
@import '_layout/site-content';
@import '_layout/site-footer';
@import '_layout/site-nav';
@import '_layout/sidebar';
@import '_card/content-card';
@import '_card/dropdown-card';
@import '_card/sidebar-card';
@import '_things/alert';
@import '_things/comment';
@import '_things/empty';
......@@ -53,7 +58,6 @@
// overriding modifier classes
@import '_utilities/break-text';
@import '_utilities/card';
@import '_utilities/fg';
@import '_utilities/no-desktop';
@import '_utilities/no-margin';
......
......@@ -7,11 +7,10 @@
--line-height: 1.5;
--mono-font-family: Roboto Mono, monospace;
--mono-font-size: 14px;
--paragraph-width: 80ch;
--link: #faa;
--submission-link: #fff;
--submission-link-visited: var(--text);
--submission-link-visited: var(--text-muted);
--submission-link-sticky: var(--fg-green);
--primary: #c00;
......@@ -22,17 +21,14 @@
--accent: #424242;
--accent-alt: #525252;
--accent-fg: #fff;
--card: var(--bg-page);
--notification: #f60;
--bg-page: #000;
--bg-content: #161616;
--bg-red: #660000;
--bg-orange: #663500;
--bg-green: #004200;
--bg-blue: #003666;
--bg-grey: #424242;
--bg-sidebar: #161616;
--bg-page: #000;
--text: #ccc;
--text-muted: #909090;
......@@ -45,6 +41,13 @@
--fg-grey: #777;
--border: #666;
--border-light: rgb(51, 51, 51);
--card-bg: var(--bg-content);
--card-shadow: 0 0 0 1px var(--border-light);
--dropdown-card-bg: #000;
--dropdown-card-shadow: none;
--form-bg: #000;
--notification: #f60;
}
::selection {
......
......@@ -7,11 +7,10 @@
--line-height: 1.5;
--mono-font-family: Roboto Mono, monospace;
--mono-font-size: 14px;
--paragraph-width: 80ch;
--link: var(--primary);
--submission-link: var(--text);
--submission-link-visited: var(--fg-grey);
--submission-link-visited: var(--text-muted);
--submission-link-sticky: var(--fg-green);
--primary: #c00;
......@@ -22,17 +21,14 @@
--accent: var(--bg-grey);
--accent-alt: #dedede;
--accent-fg: #000;
--card: var(--bg-page);
--notification: #f60;
--bg-page: #fafafa;
--bg-content: #fff;
--bg-red: #fdd;
--bg-orange: #fed;
--bg-green: #dfd;
--bg-blue: #def;
--bg-grey: #efefef;
--bg-sidebar: #fafafa;
--bg-page: #fff;
--text: #000;
--text-muted: #505050;
......@@ -45,6 +41,11 @@
--fg-grey: #888;
--border: #aaa;
--border-light: #ddd;
--card-bg: var(--bg-content);
--card-shadow: 1px 1px 2px var(--border);
--form-bg: var(--bg-content);
--notification: #f60;
}
::selection {
......
......@@ -153,7 +153,7 @@
<span class="dropdown__arrow" aria-hidden="true"></span>
</button>
<ul class="dropdown__menu card unlistify no-margin">
<ul class="dropdown__menu dropdown-card unlistify no-margin">
{% if comment.user is not same as(self) %}
{{ block('comment_nav_delete') }}
{{ block('comment_nav_edit') }}
......
{% block site_nav %}
{% set active %}{% block site_nav_active '' %}{% endset %}
<nav class="site-nav">
<div class="site-nav__container">
<div class="site-nav__container content-container">
{{ block('site_nav_header') }}
{{ block('site_nav_main_menu') }}
{{ block('site_nav_search') }}
......@@ -62,7 +62,7 @@
<span class="no-underline__exempt">{{ 'label.admin'|trans }}</span>
<span class="dropdown__arrow" aria-hidden="true"></span>
</button>
<ul class="card dropdown__menu no-wrap unlistify">
<ul class="dropdown-card dropdown__menu no-wrap unlistify">
{{ block('site_nav_main_menu_admin_items') }}
</ul>
</li>
......@@ -177,7 +177,7 @@
<span class="dropdown__arrow no-mobile" aria-hidden="true"></span>
</button>
<ul class="card dropdown__menu unlistify no-wrap">
<ul class="dropdown-card dropdown__menu unlistify no-wrap">
{{ block('site_nav_user_menu_dropdown_items') }}
</ul>
</li>
......
......@@ -194,7 +194,7 @@
<span class="no-underline__exempt">{{ 'nav.actions'|trans }}</span>
<span class="dropdown__arrow" aria-hidden="true"></span>
</button>
<ul class="card dropdown__menu unlistify">
<ul class="dropdown-card dropdown__menu unlistify">
{% if submission.user is not same as(self) %}
{{ block('submission_nav_edit') }}
{{ block('submission_nav_delete') }}
......
......@@ -38,7 +38,7 @@
<li class="dropdown">
{{ _tab_button(current_label, 'label.sort_by_mode', '%mode%', 'sort') }}
<ul class="dropdown__menu card unlistify">
<ul class="dropdown__menu dropdown-card unlistify">
{{ _submission_sort_items(current, ['hot', 'new'], null) }}
{{ _submission_sort_items(current, ['top', 'controversial', 'most_commented'], 'day') }}
</ul>
......@@ -70,7 +70,7 @@
<li class="dropdown">
{{ _tab_button(current_label, 'label.filter_on_mode', '%mode%', 'filter') }}
<ul class="dropdown__menu card unlistify">
<ul class="dropdown__menu dropdown-card unlistify">
{% for route, mode in filter_modes if (mode.condition ?? true) %}
<li>
<a href="{{ path(route, {sortBy: sort_by}) }}"
......@@ -96,7 +96,7 @@
<li class="dropdown">
{{ _tab_button(current_label, 'label.from_time', '%time%', 'clock') }}
<ul class="dropdown__menu card unlistify">
<ul class="dropdown__menu dropdown-card unlistify">
{% for time in times %}
<li>
<a href="{{ path(attr.get('_route'), (attr.get('_route_params') ?? [])|merge({t: time})) }}"
......
......@@ -16,9 +16,9 @@
theme: app.user.preferredTheme ?? null,
night_mode: app.user.nightMode ?? false,
}, with_context=false) }}
{% endblock %}
{% endblock stylesheets %}
{% block head %}{% endblock %}
{% block head '' %}
</head>
<body class="{% block page_classes '' %}
......@@ -38,26 +38,28 @@
{%- endfor -%}
{%- endfor -%}
</div>
{% endblock %}
{% endblock site_alerts %}
{{ block('site_nav') }}
{% block site_main %}
<div class="content-wrapper">
<main class="body">{% block body %}{% endblock %}</main>
<div class="site-content content-container">
<main class="body content-card">{% block body %}{% endblock %}</main>
<aside class="sidebar">{% block sidebar %}{% endblock %}</aside>
<footer class="site-footer">
<p>
<span class="site-footer__dim text-xs">{{ 'site_footer.version'|trans({
'%branch%': app_branch(),
'%version%': app_version(),
'%app%': '<a href="https://postmill.xyz/">Postmill</a>',
})|raw }}</span>
</p>
</footer>
</div>
{% endblock %}
{% endblock site_main %}
{% block site_footer %}
<footer class="site-footer">
<p>
<span class="fg-muted text-xs">{{ 'site_footer.version'|trans({
'%branch%': app_branch(),
'%version%': app_version(),
'%app%': '<a href="https://postmill.xyz/">Postmill</a>',
})|raw }}</span>
</p>
</footer>
{% endblock site_footer %}
{% block javascripts %}
<script src="{{ preload(asset('bundles/fosjsrouting/js/router.js', 'static_asset')) }}"></script>
......@@ -81,6 +83,6 @@
{# load fallback locale #}
<script src="{{ preload(asset('js/translations/en.js', 'static_asset')) }}"></script>
{% endif %}
{% endblock %}
{% endblock javascripts %}
</body>
</html>
......@@ -16,7 +16,7 @@
{% endblock %}
{% block sidebar %}
<section class="sidebar__section sidebar__section--forum-meta forum-meta">
<section class="sidebar__section sidebar-card sidebar__section--forum-meta forum-meta">
<h1 class="sidebar__title forum-title break-text">
<a href="{{ path('forum', {forum_name: forum.name}) }}">{{ forum.title }}</a>
</h1>
......@@ -45,7 +45,7 @@
{% if is_granted('ROLE_USER') %}
{% set is_hidden = app.user.hidingForum(forum) %}
<details class="sidebar__section">
<details class="sidebar__section sidebar-card">
<summary class="sidebar__title">{{ 'heading.hide_this_forum'|trans }}</summary>
<p class="fg-muted text-md">{{ 'help.hidden_forums'|trans }}</p>
......@@ -62,35 +62,35 @@
</details>
{% endif %}
<section class="sidebar__section sidebar__section--forum-manage forum-manage">
<section class="sidebar__section sidebar-card sidebar__section--forum-manage forum-manage">
<h1 class="sidebar__title">{{ 'label.toolbox'|trans }}</h1>
{# sorted nav items #}
{% with { items: {} } %}
{% set item %}
<li><a href="{{ path('forum_bans', {forum_name: forum.name}) }}">{{ 'nav.bans'|trans }}</a></li>
<li><a href="{{ path('forum_bans', {forum_name: forum.name}) }}" class="menu-link">{{ 'nav.bans'|trans }}</a></li>
{% endset %}
{% set items = items|merge({('nav.bans'|trans): item}) %}
{% set item %}
<li><a href="{{ path('moderation_log', {forum_name: forum.name}) }}">{{ 'nav.moderation_log'|trans }}</a></li>
<li><a href="{{ path('moderation_log', {forum_name: forum.name}) }}" class="menu-link">{{ 'nav.moderation_log'|trans }}</a></li>
{% endset %}
{% set items = items|merge({('nav.moderation_log'|trans): item}) %}
{% if is_granted('moderator', forum) %}
{% set item %}
<li><a href="{{ path('edit_forum', {forum_name: forum.name}) }}">{{ 'forum.edit'|trans }}</a></li>
<li><a href="{{ path('edit_forum', {forum_name: forum.name}) }}" class="menu-link">{{ 'forum.edit'|trans }}</a></li>
{% endset %}
{% set items = items|merge({('forum.edit'|trans): item}) %}
{% set item %}
<li><a href="{{ path('forum_appearance', {forum_name: forum.name}) }}">{{ 'nav.appearance'|trans }}</a></li>
<li><a href="{{ path('forum_appearance', {forum_name: forum.name}) }}" class="menu-link">{{ 'nav.appearance'|trans }}</a></li>
{% endset %}
{% set items = items|merge({('nav.appearance'|trans): item}) %}
{% if app_webhooks_enabled() %}
{% set item %}
<li><a href="{{ path('forum_webhooks', {forum_name: forum.name}) }}">{{ 'nav.webhooks'|trans }}</a></li>
<li><a href="{{ path('forum_webhooks', {forum_name: forum.name}) }}" class="menu-link">{{ 'nav.webhooks'|trans }}</a></li>
{% endset %}
{% set items = items|merge({('nav.webhooks'|trans): item}) %}
{% endif %}
......@@ -98,17 +98,21 @@
{% if is_granted('ROLE_ADMIN') %}
{% set item %}
<li><a href="{{ path('add_moderator', {forum_name: forum.name}) }}">{{ 'forum.add_moderator'|trans }}</a></li>
<li><a href="{{ path('add_moderator', {forum_name: forum.name}) }}" class="menu-link">{{ 'forum.add_moderator'|trans }}</a></li>
{% endset %}
{% set items = items|merge({('forum.add_moderator'|trans): item}) %}
{% set item %}
<li><a href="{{ path('delete_forum', {forum_name: forum.name}) }}">{{ 'nav.delete_forum'|trans }}</a></li>
<li>
<a href="{{ path('delete_forum', {forum_name: forum.name}) }}" class="menu-link">
{{- 'nav.delete_forum'|trans -}}
</a>
</li>
{% endset %}
{% set items = items|merge({('nav.delete_forum'|trans): item}) %}
{% endif %}
<ul class="sidebar__list unlistify">
<ul class="unlistify sidebar__no-padding">
{% for key in items|keys|sort %}
{{ items[key] }}
{% endfor %}
......@@ -117,12 +121,13 @@
</section>
{% if forum.moderators|length > 0 %}
<section class="sidebar__section sidebar__section--forum-moderators forum-moderators">
<section class="sidebar__section sidebar-card sidebar__section--forum-moderators forum-moderators">
<h1 class="sidebar__title"><a href="{{ path('forum_moderators', {forum_name: forum.name}) }}">{{ 'forum.moderators'|trans }}</a></h1>
<ul class="sidebar__list unlistify">
<ul class="unlistify sidebar__no-padding">
{% for moderator in forum.moderators %}
<li class="break-text">
<a href="{{ path('user', {username: moderator.user.username}) }}">
<a href="{{ path('user', {username: moderator.user.username}) }}"
class="menu-link">
{{- moderator.user.username -}}
</a>
</li>
......
......@@ -37,7 +37,7 @@
<span class="no-underline__exempt">{{ forum_sort_modes[sortBy] }}</span>
<span class="dropdown__arrow" aria-hidden="true"></span>
</button>
<ul class="dropdown__menu card unlistify">
<ul class="dropdown__menu dropdown-card unlistify">
{% for mode, label in forum_sort_modes %}
<li>
<a href="{{ path('forum_list', { sortBy: mode }) }}"
......
......@@ -26,12 +26,12 @@
{% endblock %}
{% block sidebar %}
<section class="sidebar__section">
<section class="sidebar__section sidebar-card">
<h1 class="sidebar__title">{{ 'heading.multi_forum_view'|trans }}</h1>
<ul class="sidebar__list unlistify">
<ul class="unlistify sidebar__no-padding">
{% for forum in forums %}
<li><a href="{{ path('forum', {forum_name: forum}) }}">{{ forum }}</a></li>
<li><a href="{{ path('forum', {forum_name: forum}) }}" class="menu-link">{{ forum }}</a></li>
{% endfor %}
</ul>
</section>
......
......@@ -12,7 +12,7 @@
{% endblock %}
{% block sidebar %}
<section class="sidebar__section">
<section class="sidebar__section sidebar-card">
<h2 class="sidebar__title">/c/{{ category.name }}</h2>
{{ category.sidebar|cached_markdown({ context: 'forum_category', category: category })|raw }}
......@@ -29,7 +29,7 @@
{% endif %}
</section>
<section class="sidebar__section">
<section class="sidebar__section sidebar-card">
<h2 class="sidebar__title">{{ 'label.forums_in_this_category'|trans }}</h2>
<ul>
......