Commit 2c6acb79 authored by Emma's avatar Emma 🦉

refactor CSS, slight redesign

parent c993e7d6
Pipeline #56638004 passed with stages
in 7 minutes and 47 seconds
.fg-orange {
color: var(--fg-orange) !important;
}
@import (reference) '_mixins';
@import (reference) '_variables';
/*
* 1. Hide label in comment form.
*/
.comment-form .comment-row label {
display: none; /* 1 */
}
.comment-user.submitter {
background: var(--primary);
border-radius: 2px;
color: var(--primary-fg);
padding: 0 0.25rem;
}
@import (reference) '_mixins';
.content-wrapper {
display: grid;
grid-template-columns: 1fr auto;
grid-template-areas: "body sidebar" "footer sidebar";
flex: 1 0 auto;
@media screen and (max-width: 767px) {
display: flex;
flex-direction: column;
}
& > .body {
grid-area: body;
min-width: 0;
margin: 1rem;
}
& > .sidebar {
grid-area: sidebar;
flex: none;
min-width: 0;
}
& > footer {
grid-area: footer;
}
}
.site-alerts {
margin: 0 1rem;
.alert {
margin-top: 1rem;
}
&:empty {
display: none;
}
}
.site-footer {
margin-top: auto;
padding: 1rem 1rem 0;
.site-footer-version {
display: table;
margin-left: auto;
margin-right: auto;
opacity: 0.35;
font-size: 0.80rem;
text-align: center;
&:hover {
opacity: 1;
}
}
}
.notification-head {
font-size: 1rem;
margin-bottom: 0;
}
.user-flag::before { content: '['; }
.user-flag::after { content: ']'; }
.user-flag-admin {
color: var(--fg-red);
}
.user-flag-moderator {
color: var(--fg-green);
}
.forum-group-heading a {
color: var(--text);
}
.submission-permalink-nav {
.horizontal-menu();
}
.dimmed {
color: var(--fg-grey);
// <small> is the correct
small& {
font-size: unset;
}
}
.source-code {
border: solid 1px;
max-height: 25em;
white-space: pre-wrap;
}
@import '../_variables';
// DEPRECATED
// some of these styles need to be moved elsewhere
.tabs {
display: flex;
flex-wrap: wrap;
margin-right: -1rem;
&__bar {
display: flex;
margin: 0 1rem 1rem 0 !important;
flex-wrap: wrap;
}
}
.user-bio {
&__title {
margin-bottom: 0;
}
&__registered {
font-size: 0.85rem;
}
}
.form-error-list {
padding-left: 0;
> li {
color: var(--fg-red);
font-weight: bold;
list-style-position: inside;
}
}
@import (reference) '../_mixins';
@import (reference) '../_variables';
//
// Standard, vertical, non-weird forms
//
// DEPRECATED
.form {
&__errors {
margin: 0;
padding: 0;
}
&__error {
color: var(--fg-red);
font-weight: bold;
list-style-position: inside;
margin: 0;
}
&__row {
max-width: 40rem;
margin-bottom: 1rem;
&--markdown {
margin-bottom: 0;
@media screen and (min-width: @desktop-min-width) {
max-width: 40rem;
}
}
&__markdown-help {
font-size: smaller;
text-align: right;
margin-bottom: 0;
margin-bottom: 1rem;
}
&__button-row {
......
@import (reference) '../_variables';
.markdown-input {
margin-bottom: 0;
&__preview {
background: var(--bg-red);
border-radius: 4px;
......
@import (reference) '_mixins';
@import (reference) '_variables';
.grouped-forum-listing {
......@@ -29,3 +28,7 @@
font-size: 1.20rem;
}
}
.forum-group-heading a {
color: var(--text);
}
@import (reference) '_mixins';
@import (reference) '_variables';
html {
......
@import '../_variables';
.content-wrapper {
display: grid;
grid-template-columns: 1fr auto;
grid-template-areas: "body sidebar" "footer sidebar";
flex: 1 0 auto;
@media not screen and (min-width: @desktop-min-width) {
display: flex;
flex-direction: column;
}
> .body {
grid-area: body;
min-width: 0;
margin: 1rem;
}
> .sidebar {
grid-area: sidebar;
flex: none;
min-width: 0;
}
> footer {
grid-area: footer;
}
}
.site-alerts {
position: fixed;
bottom: 1rem;
left: 1rem;
margin-right: 1rem;
z-index: 42069;
&__alert {
align-items: center;
box-shadow: 1px 1px 2px var(--border);
display: flex;
padding: 0 !important;
&:last-child {
margin-bottom: 0;
}
&:focus-within {
box-shadow: 1px 1px 2px 1px var(--border);
}
}
.js &__alert {
animation: site-alerts-slide 0.5s ease-in;
cursor: pointer;
}
.no-js &__alert {
animation: site-alerts-slide-no-js 10s ease-in;
transform: translateX(calc(-100% - 1rem));
}
&__text {
padding: 1rem 0 1rem 1rem;
}
&__dismiss {
opacity: 0;
padding: 1rem calc(0.5rem - 0.5ch);
&:focus {
opacity: 1;
outline: none;
}
}
.no-js &__dismiss {
display: none;
}
.no-js &__text {
padding-right: 1rem;
}
}
@keyframes site-alerts-slide {
from {
transform: translateX(calc(-100% - 1rem));
}
to {
transform: translateX(0%);
}
}
@keyframes site-alerts-slide-no-js {
0%, 100% {
transform: translateX(calc(-100% - 1rem));
}
5%, 95% {
transform: translateX(0%);
}
}
.site-footer {
margin-top: auto;
padding: 1rem 1rem 0;
text-align: center;
&__dim {
opacity: 0.35;
&:hover {
opacity: 1;
}
}
}
@import (reference) '../_mixins';
@import (reference) '../_variables';
.site-nav {
......@@ -11,7 +10,6 @@
}
&__link {
.unbuttonize();
color: var(--primary-fg);
cursor: pointer;
display: inline-block;
......
@import (reference) '_mixins';
.message {
border: solid 1px var(--border);
margin-bottom: 1rem;
padding: 1rem 1rem 0;
&__head {
.meta();
font-weight: normal;
}
&__buttons {
.meta-nav();
}
}
@import (reference) '_variables';
/*
* Make certain things boring and grey.
*
* This should be applied to paragraphs or navs only, never entire containers.
*/
.meta() {
color: var(--text-muted);
font-size: 0.85rem;
padding: 0.075rem 0;
form {
display: inline;
}
a, button {
color: inherit;
cursor: pointer;
font-weight: bold;
&:hover {
text-decoration: underline;
}
}
button {
.unbuttonize();
}
}
.meta-nav() {
.horizontal-menu();
.meta();
li:not(:last-child) {
margin-right: 1rem;
}
}
/*
* Turn a <nav> that holds <ul> and <li> elements into horizontal menus.
*/
.horizontal-menu() {
& > ul {
padding: 0;
}
& > ul > li {
display: inline-block;
padding: 0;
}
}
/*
* Remove button styles.
*/
.unbuttonize() {
border: none;
background: transparent;
padding: 0;
text-align: unset;
}
.vote-flex() {
display: flex;
flex-flow: row nowrap;
& > :first-child {
flex: none;
min-width: 0;
}
& > :last-child {
flex: 1 1 auto;
min-width: 0;
}
}
.text-inputs(@rules) {
input:not([type]),
input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="search"],
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="time"],
input[type="url"],
textarea {
@rules();
}
}
@import (reference) '_components/button';
@import (reference) '_mixins';
.horizontal-nav {
.horizontal-menu();
}
.pagination {
.horizontal-menu();
}
// make <button> look like a regular link
.unbuttonize {
border: none;
background: transparent;
color: var(--link);
cursor: pointer;
padding: 0;
text-align: unset;
&:hover {
text-decoration: underline;
}
}
// remove default styles from <h1-6> tags
.unheaderize {
font-weight: inherit;
font-size: inherit;
}
.alert {
border-radius: 0.5rem;
display: flex;
flex-direction: column;
margin-bottom: 1rem;
overflow: auto;
padding: 1rem 1rem 0;
&--animate {
animation: alert-fadein 1s;
}
&--notice {
background: var(--bg-blue);
}
......@@ -21,8 +15,3 @@
background: var(--bg-orange);
}
}
@keyframes alert-fadein {
from { opacity: 0; }
to { opacity: 1; }
}
@import (reference) '../_mixins';
/*
* <article class="comment">
* <div class="comment__context">optional context thing</p>
*
* <div class="comment__row">
* <div class="comment__vote">...</div>
*
* <div class="comment__main">
* <h1 class="comment__info">...</h1>
* <div class="comment__body">...</div>
* <nav class="comment__nav">...</nav>
* </div>
* <div class="comment__vote">...</div>
* </div>
*
* <!-- exists only with replies -->
......@@ -32,19 +30,24 @@
&__context {
p {
.meta;
margin-bottom: 0;
}
}
&__row {
.vote-flex;
border: solid @border-thin var(--border-light);
border-bottom: none;
border-left-width: @border-thick;
display: flex;
flex-direction: row-reverse;
padding-top: 0.5rem;
}
&__main {
flex-grow: 1;
min-width: 0;
}
&__replies {
border-left: solid @border-thick var(--border-light);
display: flex;
......@@ -57,8 +60,8 @@
}
&__info {
.meta;
font-weight: normal;
margin-bottom: 0.5rem;
}
&__body {
......@@ -67,11 +70,8 @@
}
&__nav {
.meta-nav;
ul {
margin-bottom: 0.5rem;
}
margin-top: -0.5rem; // dig into margin of last element in comment body
margin-bottom: 0.5rem;
}
&--nested:last-child {
......
......@@ -6,7 +6,7 @@
width: 100%;
&__line-group {
border-bottom: solid 0.5rem var(--border);
border-bottom: solid 0.5rem var(--bg-page);
}
&__line-no {
......
......@@ -13,6 +13,7 @@
&__main-column {
flex: 1 1 auto;
min-width: 0;
}
&__subscribe-column {
......
.message {
border: solid 1px var(--border-light);
border-left-width: 3px;
margin-bottom: 1rem;
padding: 0.5rem 1rem 0;
}
.nav {
display: flex;
flex-wrap: wrap;
margin-bottom: 1rem;
&--guttered {
margin-left: -1rem;
margin-bottom: 0;
> * {
margin-left: 1rem;
margin-bottom: 1rem;
}
}
&--guttered&.no-margin {
> * {
margin-bottom: 0;
}
}
}
.submission-meta {
&__short-url {
background-color: var(--fg-broken);
color: var(--text-invert);
display: block;
-webkit-user-select: all;
-moz-user-select: all;
padding: 0.2rem 0.4rem;
user-select: all;
}
}
@import (reference) '_mixins';
.submission {
margin-bottom: 1rem;
&__row {
display: flex;
flex-direction: row-reverse;
}
&__inner {
flex-grow: 1;
min-width: 0;
}
&__title {
font-size: 1.33rem;
font-weight: normal;
......@@ -32,69 +40,36 @@
&__host {
color: var(--submission-link);
font-size: 0.75rem;
}
&__body {
padding-top: 1rem;
margin-bottom: -0.5rem;
padding-top: 0.5rem;
max-width: var(--paragraph-width);
}
&__header > * {
margin-bottom: 0;
}
&__row {
.vote-flex();
}
&__image,
&__thumbnail {
display: block;
}
&__image-container {
margin-right: 1rem;
@media screen and (max-width: 480px) {
// don't show thumbnails on tiny screens
display: none;
}
}
&__info {
.meta;
}
&__nav {
.meta-nav;
ul {
&__header {