Theme update (#553)
* Start to update the theme - Ligther colors - No more border radius - Buttons are now always colored - Start to redesign the post page (according to the Figma mockups) * Fix build script: it now recompiles everytime a scss file changed * Make sure the article illustrations are not too big * Make articles wider (70 characters) * Better contrast between gray shades * Various improvements * Better mobile style * New style for the footer * Improve comment style * Better responsiveness again * Limit the size of the article cover * Last details? - Improve buttons on the media page - Improve lists * Pin the stdweb version that we use It changed because I removed Cargo.lock to handle a merge conflict I could have updated cargo web too, but it mean I should have re-built the CI docker image and it was taking forever. * Better contrast for links in the header of the article * Add a basic privacy policy * Remove "also" * Fix a few issues - Don't watch static/css in build.rs - Another shade of white - Remove useless margin rule for error messages
This commit is contained in:
Baptiste Gelez
GitHub
+151
-28
@@ -1,6 +1,69 @@
|
||||
// Heading
|
||||
main header.article {
|
||||
overflow: hidden;
|
||||
background: $white;
|
||||
color: $black;
|
||||
display: grid;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
|
||||
&.illustrated {
|
||||
min-height: 75vh;
|
||||
color: $white;
|
||||
|
||||
a, a:visited {
|
||||
color: $white;
|
||||
border-bottom: 1px solid transparent;
|
||||
transition: border-bottom-color 0.1s ease-in;
|
||||
|
||||
&:hover {
|
||||
border-bottom-color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
& > * {
|
||||
grid-row: 1;
|
||||
grid-column: 1;
|
||||
}
|
||||
|
||||
& > div:not(.shadow) {
|
||||
z-index: 3;
|
||||
font-family: $lora;
|
||||
font-size: 1.2em;
|
||||
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
max-width: $article-width;
|
||||
margin: 2em auto;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: end;
|
||||
|
||||
h1, .article-info {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
& > div.shadow {
|
||||
z-index: 2;
|
||||
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background: linear-gradient(180deg, transparent 20vh, black 80vh);
|
||||
}
|
||||
|
||||
& > img {
|
||||
z-index: 1;
|
||||
min-width: 100%;
|
||||
min-height: 100%;
|
||||
background: $purple;
|
||||
}
|
||||
}
|
||||
|
||||
main .article-info {
|
||||
max-width: 40rem;
|
||||
margin: 0 auto 3em;
|
||||
font-size: 0.95em;
|
||||
font-weight: 400;
|
||||
@@ -12,7 +75,7 @@ main .article-info {
|
||||
|
||||
// The article itself
|
||||
main article {
|
||||
max-width: 40rem;
|
||||
max-width: $article-width;
|
||||
margin: 2.5em auto;
|
||||
font-family: $lora;
|
||||
font-size: 1.2em;
|
||||
@@ -30,9 +93,14 @@ main article {
|
||||
|
||||
pre {
|
||||
padding: 1em;
|
||||
background: $lightgray;
|
||||
background: $gray;
|
||||
overflow: auto;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
border-left: 5px solid $gray;
|
||||
margin: 1em auto;
|
||||
padding: 0em 2em;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -46,37 +114,42 @@ main .article-meta, main .article-meta button {
|
||||
main .article-meta {
|
||||
|
||||
> * {
|
||||
margin: 0 20%;
|
||||
margin: $margin;
|
||||
}
|
||||
|
||||
> .banner {
|
||||
margin: 3em 0;
|
||||
& > * {
|
||||
margin: $margin;
|
||||
}
|
||||
}
|
||||
|
||||
> p {
|
||||
margin: 2em 20%;
|
||||
margin: 2em $horizontal-margin;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
// Article Tags
|
||||
.tags {
|
||||
list-style: none;
|
||||
display: inline-block;
|
||||
padding: 0px;
|
||||
margin-bottom: 2em;
|
||||
max-width: none;
|
||||
flex: 20;
|
||||
|
||||
li {
|
||||
display: inline-block;
|
||||
background: $lightgray;
|
||||
padding: 0px;
|
||||
margin: 0px 10px 10px 0px;
|
||||
border-radius: 3px;
|
||||
transition: all 0.2s ease-in;
|
||||
border: 1px solid $purple;
|
||||
|
||||
a {
|
||||
display: inline-block;
|
||||
padding: 10px 20px;
|
||||
color: $black;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: mix($black, $lightgray, 10%);
|
||||
background: transparentize($purple, 0.9);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -111,6 +184,7 @@ main .article-meta {
|
||||
color: $black;
|
||||
border: none;
|
||||
font-size: 1.1em;
|
||||
cursor: pointer;
|
||||
|
||||
svg.feather {
|
||||
transition: background 0.1s ease-in;
|
||||
@@ -185,11 +259,7 @@ main .article-meta {
|
||||
|
||||
// Comments
|
||||
.comments {
|
||||
margin: 0;
|
||||
> * {
|
||||
margin-left: 20%;
|
||||
margin-right: 20%;
|
||||
}
|
||||
margin: 0 $horizontal-margin;
|
||||
|
||||
h2 {
|
||||
color: $purple;
|
||||
@@ -208,13 +278,12 @@ main .article-meta {
|
||||
|
||||
// Respond & delete comment buttons
|
||||
a.button, form.inline, form.inline input {
|
||||
display: inline-block;
|
||||
padding: 0;
|
||||
background: none;
|
||||
color: $black;
|
||||
border: none;
|
||||
margin-right: 2em;
|
||||
font-family: $route159;
|
||||
font-weight: normal;
|
||||
|
||||
&::before {
|
||||
color: $purple;
|
||||
@@ -224,18 +293,40 @@ main .article-meta {
|
||||
&:hover { color: $purple; }
|
||||
}
|
||||
|
||||
.list {
|
||||
display: grid;
|
||||
margin: 0 0 -5em;
|
||||
padding: 0 20%;
|
||||
background: $lightgray;
|
||||
}
|
||||
|
||||
.comment {
|
||||
padding: 2em;
|
||||
margin: 1em 0;
|
||||
font-size: 1em;
|
||||
border: none;
|
||||
|
||||
.content {
|
||||
background: $gray;
|
||||
margin-top: 2.5em;
|
||||
padding: 1em;
|
||||
|
||||
&::before {
|
||||
display: block;
|
||||
content: ' ';
|
||||
border: 1em solid $gray;
|
||||
border-top-color: transparent;
|
||||
border-right-color: transparent;
|
||||
position: relative;
|
||||
top: -2.4em;
|
||||
left: -1em;
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
}
|
||||
|
||||
header {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.dt-published a {
|
||||
color: transparentize($black, 0.6);
|
||||
}
|
||||
|
||||
.author {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
@@ -256,6 +347,10 @@ main .article-meta {
|
||||
}
|
||||
}
|
||||
|
||||
& > .comment {
|
||||
padding-left: 2em;
|
||||
}
|
||||
|
||||
.text {
|
||||
padding: 1.25em 0;
|
||||
font-family: $lora;
|
||||
@@ -303,7 +398,7 @@ main .article-meta {
|
||||
bottom: 20vh;
|
||||
left: 20vw;
|
||||
right: 20vw;
|
||||
background: $lightgray;
|
||||
background: $gray;
|
||||
border: 1px solid $purple;
|
||||
z-index: 2;
|
||||
padding: 2em;
|
||||
@@ -329,6 +424,11 @@ main .article-meta {
|
||||
.cw-container {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
|
||||
img {
|
||||
margin: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.cw-text {
|
||||
@@ -357,3 +457,26 @@ input:checked ~ .cw-container > .cw-text {
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
// Bottom action bar
|
||||
|
||||
.bottom-bar {
|
||||
z-index: 10;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: $gray;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
|
||||
& > div {
|
||||
margin: 1em;
|
||||
}
|
||||
|
||||
& > div:nth-child(2) {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
margin: auto $horizontal-margin;
|
||||
}
|
||||
}
|
||||
|
||||
+20
-26
@@ -14,8 +14,7 @@ input, textarea, select {
|
||||
|
||||
background: $form-input-background;
|
||||
color: $black;
|
||||
border: none;
|
||||
border: solid $lightgray thin;
|
||||
border: solid $black thin;
|
||||
|
||||
font-size: 1.2em;
|
||||
font-weight: 400;
|
||||
@@ -55,7 +54,6 @@ form.inline {
|
||||
|
||||
input[type="submit"] {
|
||||
display: inline-block;
|
||||
color: $purple;
|
||||
cursor: pointer;
|
||||
font-size: 1em;
|
||||
width: auto;
|
||||
@@ -67,39 +65,46 @@ form.inline {
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: $purple;
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.button, input[type="submit"], button {
|
||||
.button, .button:visited, input[type="submit"], input[type="submit"].button {
|
||||
transition: all 0.1s ease-in;
|
||||
display: inline-block;
|
||||
-webkit-appearance: none;
|
||||
|
||||
border-radius: 0.5em;
|
||||
margin: 0.5em auto;
|
||||
padding: 0.75em 1em;
|
||||
|
||||
background: transparent;
|
||||
color: $purple;
|
||||
border: 1px solid $purple;
|
||||
background: $purple;
|
||||
color: $white;
|
||||
font-weight: bold;
|
||||
border: none;
|
||||
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background: transparentize($purple, 0.6);
|
||||
color: white;
|
||||
background: transparentize($purple, 0.1);
|
||||
}
|
||||
|
||||
&.destructive {
|
||||
color: $red;
|
||||
border-color: $red;
|
||||
background: $red;
|
||||
|
||||
&:hover {
|
||||
background: transparentize($red, 0.6);
|
||||
color: $white;
|
||||
background: transparentize($red, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
&.secondary {
|
||||
background: $gray;
|
||||
color: $black;
|
||||
|
||||
&:hover {
|
||||
background: transparentize($black, 0.9);
|
||||
}
|
||||
}
|
||||
}
|
||||
input[type="submit"] {
|
||||
display: block;
|
||||
@@ -126,18 +131,6 @@ form.new-post {
|
||||
resize: none;
|
||||
-webkit-appearance: textarea;
|
||||
}
|
||||
input[type="submit"] {
|
||||
background: $lightgray;
|
||||
color: $black;
|
||||
border: none;
|
||||
-webkit-appearance: none;
|
||||
|
||||
font-family: $playfair;
|
||||
font-size: 1.5em;
|
||||
}
|
||||
input[type="submit"]:hover {
|
||||
background: $lightgray;}
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
.button + .button {
|
||||
@@ -147,6 +140,7 @@ form.new-post {
|
||||
.split {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
|
||||
& > * {
|
||||
flex-grow: 1;
|
||||
|
||||
+87
-36
@@ -4,11 +4,12 @@ html, body {
|
||||
background: $background;
|
||||
color: $black;
|
||||
font-family: $route159;
|
||||
::selection {
|
||||
background: $lightpurple;
|
||||
}
|
||||
|
||||
::selection {
|
||||
background: transparentize($purple, 0.7);
|
||||
}
|
||||
::-moz-selection {
|
||||
background: $lightpurple;
|
||||
background: transparentize($purple, 0.7);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -16,7 +17,7 @@ a, a:visited {
|
||||
color: $purple;
|
||||
text-decoration: none;
|
||||
}
|
||||
a::selection {
|
||||
a::selection {
|
||||
color: $white;
|
||||
}
|
||||
a::-moz-selection {
|
||||
@@ -37,12 +38,15 @@ small {
|
||||
padding: 5em;
|
||||
}
|
||||
|
||||
.spaced {
|
||||
margin: 4rem 0;
|
||||
.right {
|
||||
text-align: right;
|
||||
display: flex;
|
||||
justify-content: end;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.cards.spaced {
|
||||
margin: 1rem 0 5rem;
|
||||
.spaced {
|
||||
margin: 4rem 0;
|
||||
}
|
||||
|
||||
.banner {
|
||||
@@ -59,21 +63,26 @@ small {
|
||||
|
||||
/// Main
|
||||
body > main > *, .h-feed > * {
|
||||
margin: 0 20%;
|
||||
margin: 1em $horizontal-margin;
|
||||
}
|
||||
|
||||
body > main > .h-entry, .h-feed {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
body > main {
|
||||
min-height: 70vh;
|
||||
}
|
||||
|
||||
main {
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
font-family: $route159;
|
||||
line-height: 1.15;
|
||||
font-weight: 300;
|
||||
|
||||
&.article {
|
||||
max-width: 40rem;
|
||||
max-width: $article-width;
|
||||
}
|
||||
}
|
||||
h1 {
|
||||
@@ -94,7 +103,6 @@ main {
|
||||
font-weight: 300;
|
||||
|
||||
&.article {
|
||||
margin: auto;
|
||||
font-size: 1.25em;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
@@ -110,7 +118,7 @@ main {
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.cover {
|
||||
padding: 0px;
|
||||
margin: 0px;
|
||||
@@ -126,8 +134,6 @@ main {
|
||||
p.error {
|
||||
color: $red;
|
||||
font-weight: bold;
|
||||
max-width: 40rem;
|
||||
margin: 1em auto;
|
||||
}
|
||||
|
||||
/// User page
|
||||
@@ -149,7 +155,6 @@ p.error {
|
||||
background: $white;
|
||||
color: $purple;
|
||||
border: 1px solid $purple;
|
||||
border-radius: 1em;
|
||||
|
||||
font-size: 1rem;
|
||||
}
|
||||
@@ -164,6 +169,7 @@ p.error {
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
padding: 0 5%;
|
||||
margin: 1rem 0 5rem;
|
||||
}
|
||||
.card {
|
||||
flex: 1;
|
||||
@@ -213,24 +219,44 @@ p.error {
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
.list .card {
|
||||
/* TODO */
|
||||
background: 0;
|
||||
margin: 2em 0;
|
||||
padding: 0;
|
||||
min-height: 0;
|
||||
|
||||
.list > .card {
|
||||
background: transparent;
|
||||
margin: 2em 0;
|
||||
min-height: 3em;
|
||||
|
||||
padding: 1em;
|
||||
transition: background 0.1s ease-in;
|
||||
|
||||
&:hover {
|
||||
background-color: $gray;
|
||||
}
|
||||
|
||||
&.compact {
|
||||
margin: 0;
|
||||
padding: 0 1em;
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/// Instance presentation
|
||||
.presentation > h2, .presentation > a {
|
||||
text-align: center;
|
||||
}
|
||||
.presentation > a {
|
||||
font-size: 1.2em;
|
||||
margin: 1em;
|
||||
.presentation {
|
||||
max-width: none;
|
||||
|
||||
& > h2, & > a {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
& > a {
|
||||
font-size: 1.2em;
|
||||
margin: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
// Stats
|
||||
// Stats
|
||||
.stats {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
@@ -282,13 +308,14 @@ p.error {
|
||||
|
||||
.grow {
|
||||
flex: 1;
|
||||
margin: 0 1em;
|
||||
}
|
||||
}
|
||||
|
||||
.left-icon {
|
||||
align-self: center;
|
||||
padding: 1em;
|
||||
background: $lightgray;
|
||||
background: $gray;
|
||||
border-radius: 50px;
|
||||
margin: 1em;
|
||||
margin-right: 2em;
|
||||
@@ -298,13 +325,37 @@ p.error {
|
||||
body > footer {
|
||||
display: flex;
|
||||
align-content: center;
|
||||
justify-content: space-between;
|
||||
background: $lightgray;
|
||||
padding: 0 20%;
|
||||
justify-content: space-around;
|
||||
background: $purple;
|
||||
color: $white;
|
||||
margin-top: 5em;
|
||||
|
||||
* {
|
||||
margin: 5em 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
hr {
|
||||
transform: skew(-15deg);
|
||||
background: $white;
|
||||
border: none;
|
||||
width: .2em;
|
||||
}
|
||||
|
||||
a, a:visited {
|
||||
color: $white;
|
||||
}
|
||||
|
||||
div {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-basis: 20%;
|
||||
margin: 2em 0;
|
||||
transition: all 0.1s ease-in;
|
||||
|
||||
& > * {
|
||||
display: block;
|
||||
margin: 1em 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -386,9 +437,9 @@ figure {
|
||||
|
||||
/// Tabs
|
||||
.tabs {
|
||||
border-bottom: 1px solid $lightgray;
|
||||
border-bottom: 1px solid $gray;
|
||||
padding: 0px;
|
||||
margin: auto 20% 2em;
|
||||
margin: auto $horizontal-margin 2em;
|
||||
overflow: auto;
|
||||
display: flex;
|
||||
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
header {
|
||||
background: $lightgray;
|
||||
body > header {
|
||||
background: $gray;
|
||||
|
||||
#content {
|
||||
display: flex;
|
||||
@@ -27,7 +27,7 @@ header {
|
||||
height: 1.4em;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
color: $lightgray;
|
||||
color: $gray;
|
||||
font-size: 1.33em;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,16 +1,22 @@
|
||||
// Color Scheme
|
||||
$background: #F4F4F4;
|
||||
$form-input-background: #FFFFFF;
|
||||
$gray: #E3E3E3;
|
||||
$lightgray: #ECECEC;
|
||||
$gray: #F3F3F3;
|
||||
$black: #242424;
|
||||
$white: #F4F4F4;
|
||||
$white: #F8F8F8;
|
||||
$purple: #7765E3;
|
||||
$lightpurple: #c2bbee;
|
||||
$red: #E92F2F;
|
||||
$yellow: #ffe347;
|
||||
$green: #23f0c7;
|
||||
|
||||
$background: $white;
|
||||
$form-input-background: white;
|
||||
|
||||
// Dimensions
|
||||
|
||||
$article-width: 70ch;
|
||||
$horizontal-margin: 20%;
|
||||
$margin: 0 $horizontal-margin;
|
||||
|
||||
// Fonts
|
||||
|
||||
$route159: "Route159", serif;
|
||||
|
||||
+37
-8
@@ -32,21 +32,23 @@ html {
|
||||
}
|
||||
}
|
||||
|
||||
header {
|
||||
body > header {
|
||||
flex-direction: column;
|
||||
|
||||
nav#menu {
|
||||
display: inline-flex;
|
||||
z-index: 21;
|
||||
}
|
||||
|
||||
#content {
|
||||
display: none;
|
||||
appearance: none;
|
||||
text-align: center;
|
||||
z-index: 20;
|
||||
}
|
||||
}
|
||||
|
||||
header:focus-within #content, #content.show {
|
||||
body > header:focus-within #content, #content.show {
|
||||
position: fixed;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -104,11 +106,8 @@ html {
|
||||
}
|
||||
}
|
||||
|
||||
body > main > * {
|
||||
padding: 0 5%;
|
||||
}
|
||||
main .article-meta {
|
||||
> * {
|
||||
> *, .comments {
|
||||
margin: 0 5%;
|
||||
}
|
||||
> p {
|
||||
@@ -136,11 +135,41 @@ html {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
body > footer * { margin: 1em auto; }
|
||||
body > footer * {
|
||||
margin: 1em auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.flex.wrap { flex-direction: column; }
|
||||
|
||||
.cards {
|
||||
.cards, .list {
|
||||
margin: 1rem 0 5rem;
|
||||
}
|
||||
|
||||
.split {
|
||||
flex-direction: column;
|
||||
margin: 0;
|
||||
|
||||
& > * {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.bottom-bar {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
& > div {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
main .article-meta .comments .comment {
|
||||
header {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.content {
|
||||
margin-top: 0.5em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user