aitzol/Plume
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Show and animate .mobile-label on normal screens.

Browse Source
This commit is contained in:
Madeorsk 2018-09-04 21:16:36 +02:00
parent a3a25eec6c
commit 4330600980
1 changed files with 640 additions and 617 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

489
static/css/main.css
View File

@ -8,60 +8,60 @@
* == Global == * == Global ==
*/ */
html, body { html, body {
margin: 0; margin: 0;
padding: 0; padding: 0;
background: #F4F4F4; background: #F4F4F4;
color: #242424; color: #242424;
font-family: "Route159", serif; font-family: "Route159", serif;
} }
a, a:visited { a, a:visited {
color: #7765E3; color: #7765E3;
text-decoration: none; text-decoration: none;
outline: none; outline: none;
} }
small { small {
margin-left: 1em; margin-left: 1em;
color: rgba(36, 36, 36, 0.6); color: rgba(36, 36, 36, 0.6);
font-size: 0.75em; font-size: 0.75em;
word-wrap: break-word; word-wrap: break-word;
word-break: break-all; word-break: break-all;
} }
.center { .center {
text-align: center; text-align: center;
font-weight: bold; font-weight: bold;
opacity: 0.6; opacity: 0.6;
padding: 5em; padding: 5em;
} }
.spaced { .spaced {
margin: 4rem 0; margin: 4rem 0;
} }
.banner { .banner {
background: #DADADA; background: #DADADA;
padding-top: 2em; padding-top: 2em;
padding-bottom: 1em; padding-bottom: 1em;
margin: 3em 0px; margin: 3em 0px;
} }
/* /*
* == Header == * == Header ==
*/ */
header { header {
background: #ECECEC; background: #ECECEC;
} }
header #content { header #content {
display: flex; display: flex;
align-content: center; align-content: center;
justify-content: space-between; justify-content: space-between;
} }
header nav#menu { header nav#menu {
position: relative; position: relative;
display: none; display: none;
transform: skewX(-15deg); transform: skewX(-15deg);
@ -69,8 +69,8 @@ header nav#menu {
padding: 1em 1em 1em 2em; padding: 1em 1em 1em 2em;
background: #7765E3; background: #7765E3;
align-self: flex-start; align-self: flex-start;
} }
header nav#menu a { header nav#menu a {
transform: skewX(15deg); transform: skewX(15deg);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -82,133 +82,161 @@ header nav#menu a {
padding: 0; padding: 0;
color: #ECECEC; color: #ECECEC;
font-size: 1.33em; font-size: 1.33em;
} }
header nav { header nav {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
} }
header nav hr { header nav hr {
height: 100%; height: 100%;
width: 0.2em; width: 0.2em;
background: #7765E3; background: #7765E3;
border: none; border: none;
transform: skewX(-15deg); transform: skewX(-15deg);
} }
header nav a { header nav a {
display: block; display: flex;
margin: 0 2em; align-items: center;
position: relative;
align-self: stretch;
margin: 0;
padding: 0 2em;
font-size: 1em; font-size: 1em;
} }
header nav a.title { header nav a.title {
margin: 0; margin: 0;
padding: 0.5em 2em; padding: 0.5em 2em;
font-size: 1.75em; font-size: 1.75em;
text-align: center; text-align: center;
} }
header nav i { header nav a i { font-size: 1.2em; }
font-size: 1.2em;
} /* Only enable label animations on normal screens. */
@media screen and (min-width: 900px) {
header nav a i {
transition: all 0.2s ease;
margin: 0;
}
header nav a:hover i { margin-bottom: 0.75em; }
header nav a .mobile-label {
transition: all 0.2s ease;
display: block;
position: absolute;
left: 50%;
transform: translate(-50%, 0);
opacity: 0;
font-size: 0.9em;
white-space: nowrap;
}
header nav a:hover .mobile-label {
opacity: 1;
transform: translate(-50%, 80%);
}
header nav a img + .mobile-label { display: none; }
}
/* /*
* == Main == * == Main ==
*/ */
body > main > * { body > main > * {
padding: 0 20%; padding: 0 20%;
} }
main h1 { main h1 {
font-family: "Route159"; font-family: "Route159";
font-size: 2.5em; font-size: 2.5em;
font-weight: 300; font-weight: 300;
} }
main h1.article { main h1.article {
max-width: 40rem; max-width: 40rem;
margin: 1em auto 0.5em; margin: 1em auto 0.5em;
font-family: "Playfair Display", serif; font-family: "Playfair Display", serif;
font-size: 2.5em; font-size: 2.5em;
font-weight: normal; font-weight: normal;
} }
main h2 { main h2 {
font-family: "Route159"; font-family: "Route159";
font-size: 1.75em; font-size: 1.75em;
font-weight: 300; font-weight: 300;
} }
/* /*
* == Article == * == Article ==
*/ */
/* Author */ /* Author */
main .article-info { main .article-info {
max-width: 40rem; max-width: 40rem;
margin: 0 auto 3em; margin: 0 auto 3em;
font-size: 0.95em; font-size: 0.95em;
font-weight: 400; font-weight: 400;
} }
main .article-info .author { font-weight: 600; } main .article-info .author { font-weight: 600; }
main .article-info .author a { font-weight: 600; } main .article-info .author a { font-weight: 600; }
/* Article */ /* Article */
main article { main article {
max-width: 40rem; max-width: 40rem;
margin: 2.5em auto; margin: 2.5em auto;
font-family: "Lora", serif; font-family: "Lora", serif;
font-size: 1.2em; font-size: 1.2em;
line-height: 1.7em; line-height: 1.7em;
} }
article img { article img {
max-width: 100%; max-width: 100%;
} }
/* Article.Meta */ /* Article.Meta */
main .article-meta, main .article-meta button { main .article-meta, main .article-meta button {
padding: 0; padding: 0;
font-size: 1.1em; font-size: 1.1em;
margin-top: 10%; margin-top: 10%;
} }
main .article-meta > * { margin: 0 20%; } main .article-meta > * { margin: 0 20%; }
main .article-meta > p { main .article-meta > p {
margin: 2em 20%; margin: 2em 20%;
font-size: 0.9em; font-size: 0.9em;
} }
/* ~ Likes ~ */ /* ~ Likes ~ */
main .article-meta .likes p, main .article-meta .likes p,
main .article-meta .reshares p { display: inline-block; margin: 0; } main .article-meta .reshares p { display: inline-block; margin: 0; }
/* Like / Reshare button */ /* Like / Reshare button */
main .article-meta .actions { main .article-meta .actions {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: space-around; justify-content: space-around;
} }
main .article-meta .likes, main .article-meta .likes,
main .article-meta .reshares { main .article-meta .reshares {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
padding: 0.5em 0; padding: 0.5em 0;
} }
main .article-meta .likes > p, main .article-meta .likes > p,
main .article-meta .reshares > p { main .article-meta .reshares > p {
font-size: 1.5em; font-size: 1.5em;
} }
main .article-meta .likes button, main .article-meta .likes button,
main .article-meta .reshares button { main .article-meta .reshares button {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
@ -218,15 +246,15 @@ main .article-meta .reshares button {
background: none; background: none;
color: #242424; color: #242424;
border: none; border: none;
} }
main .article-meta .likes > p, main .article-meta .likes > p,
main .article-meta .likes button:hover { color: #E92F2F; } main .article-meta .likes button:hover { color: #E92F2F; }
main .article-meta .reshares > p, main .article-meta .reshares > p,
main .article-meta .reshares button:hover { color: #7765E3; } main .article-meta .reshares button:hover { color: #7765E3; }
main .article-meta .likes button svg.feather, main .article-meta .likes button svg.feather,
main .article-meta .reshares button i { main .article-meta .reshares button i {
transition: background 0.1s ease-in; transition: background 0.1s ease-in;
display: flex; display: flex;
align-items: center; align-items: center;
@ -237,133 +265,133 @@ main .article-meta .reshares button i {
height: 2.5em; height: 2.5em;
border-radius: 50%; border-radius: 50%;
} }
main .article-meta .likes button svg.feather { main .article-meta .likes button svg.feather {
padding: 0.7em; padding: 0.7em;
box-sizing: border-box; box-sizing: border-box;
color: #E92F2F; color: #E92F2F;
fill: none; fill: none;
border: solid #E92F2F thin; border: solid #E92F2F thin;
} }
main .article-meta .likes button:hover svg.feather { main .article-meta .likes button:hover svg.feather {
background: rgba(233, 47, 47, 0.15); background: rgba(233, 47, 47, 0.15);
} }
main .article-meta .reshares button i { main .article-meta .reshares button i {
color: #7765E3; color: #7765E3;
border: solid #7765E3 thin; border: solid #7765E3 thin;
font-weight: 600; font-weight: 600;
} }
main .article-meta .reshares button:hover i { main .article-meta .reshares button:hover i {
background: rgba(119, 101, 227, 0.15); background: rgba(119, 101, 227, 0.15);
} }
main .article-meta .likes button.liked svg.feather { background: #E92F2F; fill: currentColor; } main .article-meta .likes button.liked svg.feather { background: #E92F2F; fill: currentColor; }
main .article-meta .likes button.liked:hover svg.feather { main .article-meta .likes button.liked:hover svg.feather {
background: rgba(233, 47, 47, 0.25); background: rgba(233, 47, 47, 0.25);
color: #E92F2F; color: #E92F2F;
} }
main .article-meta .reshares button.reshared i { background: #7765E3; } main .article-meta .reshares button.reshared i { background: #7765E3; }
main .article-meta .reshares button.reshared:hover i { main .article-meta .reshares button.reshared:hover i {
background: rgba(119, 101, 227, 0.25); background: rgba(119, 101, 227, 0.25);
color: #7765E3; color: #7765E3;
} }
main .article-meta .likes button.liked svg.feather, main .article-meta .likes button.liked svg.feather,
main .article-meta .reshares button.reshared i { main .article-meta .reshares button.reshared i {
color: #F4F4F4; color: #F4F4F4;
font-weight: 900; font-weight: 900;
} }
/* ~ Comments ~ */ /* ~ Comments ~ */
main .article-meta .comments { margin: 0; } main .article-meta .comments { margin: 0; }
main .article-meta .comments > * { margin-left: 20%; margin-right: 20%; } main .article-meta .comments > * { margin-left: 20%; margin-right: 20%; }
.comments h2 { .comments h2 {
color: #7765E3; color: #7765E3;
font-size: 1.5em; font-size: 1.5em;
font-weight: 600; font-weight: 600;
} }
/* New comment */ /* New comment */
main .article-meta .comments form input[type="submit"] main .article-meta .comments form input[type="submit"]
{ font-size: 1em; } { font-size: 1em; }
/* Comment / Respond button */ /* Comment / Respond button */
main .article-meta .comments a.button:before { main .article-meta .comments a.button:before {
color: #7765E3; color: #7765E3;
padding: 0.5em; padding: 0.5em;
} }
main .article-meta .comments a.button { main .article-meta .comments a.button {
display: inline-block; display: inline-block;
padding: 0; padding: 0;
background: none; background: none;
color: #242424; color: #242424;
border: none; border: none;
} }
main .article-meta .comments a.button:hover { color: #7765E3; } main .article-meta .comments a.button:hover { color: #7765E3; }
/* Comment button only */ /* Comment button only */
main .article-meta .comments > a.button { margin-bottom: 1em; } main .article-meta .comments > a.button { margin-bottom: 1em; }
/* == List == */ /* == List == */
main .article-meta .comments .list { main .article-meta .comments .list {
display: grid; display: grid;
margin: 0; margin: 0;
padding: 0 20%; padding: 0 20%;
background: #ECECEC; background: #ECECEC;
} }
/* ~ Comment ~ */ /* ~ Comment ~ */
.comments .list .comment { .comments .list .comment {
padding: 2em; padding: 2em;
font-size: 1em; font-size: 1em;
} }
.comments .list > .comment { .comments .list > .comment {
border: none; border: none;
} }
.comments .list .comment .author { .comments .list .comment .author {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
align-content: center; align-content: center;
} }
.comments .list .comment .author * { .comments .list .comment .author * {
transition: all 0.1s ease-in; transition: all 0.1s ease-in;
} }
.comments .list .comment .author .display-name { .comments .list .comment .author .display-name {
color: #242424; color: #242424;
} }
.comments .list .comment .author:hover .display-name { color: #7765E3; } .comments .list .comment .author:hover .display-name { color: #7765E3; }
.comments .list .comment .author:hover small { opacity: 1; } .comments .list .comment .author:hover small { opacity: 1; }
.comments .list .comment .text { .comments .list .comment .text {
padding: 1.25em 0; padding: 1.25em 0;
font-family: "Lora", serif; font-family: "Lora", serif;
font-size: 1.1em; font-size: 1.1em;
line-height: 1.4em; line-height: 1.4em;
text-align: left; text-align: left;
} }
/* /*
* == Form == * == Form ==
*/ */
label { label {
display: block; display: block;
margin: 2em auto 1em; margin: 2em auto 1em;
font-size: 1.2em; font-size: 1.2em;
max-width: 40rem; max-width: 40rem;
} }
input, textarea { input, textarea {
transition: all 0.1s ease-in; transition: all 0.1s ease-in;
display: block; display: block;
width: 100%; width: 100%;
@ -380,31 +408,31 @@ input, textarea {
font-size: 1.2em; font-size: 1.2em;
font-weight: 400; font-weight: 400;
} }
form input[type="submit"] { margin: 2em auto; } form input[type="submit"] { margin: 2em auto; }
input:focus, textarea:focus { input:focus, textarea:focus {
background: #FAFAFA; background: #FAFAFA;
border-color: #7765E3; border-color: #7765E3;
} }
textarea { textarea {
resize: vertical; resize: vertical;
font-family: "Lora", serif; font-family: "Lora", serif;
font-size: 1.1em; font-size: 1.1em;
line-height: 1.5em; line-height: 1.5em;
} }
input[type="checkbox"] { input[type="checkbox"] {
display: inline; display: inline;
margin: initial; margin: initial;
min-width: initial; min-width: initial;
width: initial; width: initial;
} }
/* Button & Submit */ /* Button & Submit */
.button, input[type="submit"], button { .button, input[type="submit"], button {
transition: all 0.1s ease-in; transition: all 0.1s ease-in;
display: inline-block; display: inline-block;
@ -417,27 +445,27 @@ input[type="checkbox"] {
border: 1px solid #7765E3; border: 1px solid #7765E3;
cursor: pointer; cursor: pointer;
} }
input[type="submit"] { display: block; } input[type="submit"] { display: block; }
.button:hover, input[type="submit"]:hover { .button:hover, input[type="submit"]:hover {
background: #7765E399; background: #7765E399;
color: white; color: white;
} }
/* Errors */ /* Errors */
p.error { p.error {
color: #ef767a; color: #ef767a;
font-weight: bold; font-weight: bold;
max-width: 40rem; max-width: 40rem;
margin: 1em auto; margin: 1em auto;
} }
/* /*
* == New post == * == New post ==
*/ */
form.new-post .title { form.new-post .title {
margin: 0 auto; margin: 0 auto;
padding: 0.75em 0; padding: 0.75em 0;
@ -447,34 +475,34 @@ form.new-post .title {
font-family: "Playfair Display", serif; font-family: "Playfair Display", serif;
font-size: 2em; font-size: 2em;
text-align: left; text-align: left;
} }
form.new-post textarea { form.new-post textarea {
min-height: 20em; min-height: 20em;
overflow-y: hidden; overflow-y: hidden;
resize: none; resize: none;
box-sizing: content-box; box-sizing: content-box;
} }
form.new-post input[type="submit"] { form.new-post input[type="submit"] {
background: #ECECEC; background: #ECECEC;
color: #242424; color: #242424;
border: none; border: none;
font-family: "Playfair Display", serif; font-family: "Playfair Display", serif;
font-size: 1.5em; font-size: 1.5em;
} }
form.new-post input[type="submit"]:hover { background: #DADADA; } form.new-post input[type="submit"]:hover { background: #DADADA; }
/* /*
* == User == * == User ==
*/ */
.user h1 { .user h1 {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
margin-bottom: 0; margin-bottom: 0;
} }
.badge { .badge {
margin-left: 1em; margin-left: 1em;
padding: 0.35em 1em; padding: 0.35em 1em;
@ -484,19 +512,19 @@ form.new-post input[type="submit"]:hover { background: #DADADA; }
border-radius: 1em; border-radius: 1em;
font-size: 1rem; font-size: 1rem;
} }
/* /*
* == Blog index == * == Blog index ==
*/ */
.cards { .cards {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
flex-wrap: wrap; flex-wrap: wrap;
padding: 0 5%; padding: 0 5%;
} }
.card { .card {
flex: 1; flex: 1;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -510,31 +538,31 @@ form.new-post input[type="submit"]:hover { background: #DADADA; }
background: #E3E3E3; background: #E3E3E3;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
.list .card { .list .card {
/* TODO */ /* TODO */
background: 0; background: 0;
margin: 2em 0; margin: 2em 0;
padding: 0; padding: 0;
min-height: 0; min-height: 0;
} }
/* ~ Card content ~ */ /* ~ Card content ~ */
/* Title */ /* Title */
.card h3 { .card h3 {
margin: 0.75em 0; margin: 0.75em 0;
font-family: "Playfair Display", serif; font-family: "Playfair Display", serif;
font-size: 1.75em; font-size: 1.75em;
font-weight: normal; font-weight: normal;
} }
.card h3 a { transition: color 0.1s ease-in; color: #242424; } .card h3 a { transition: color 0.1s ease-in; color: #242424; }
.card h3 a:hover { color: #7765E3; } .card h3 a:hover { color: #7765E3; }
/* Content */ /* Content */
.card main { .card main {
flex: 1; flex: 1;
font-family: "Lora", serif; font-family: "Lora", serif;
@ -542,46 +570,42 @@ form.new-post input[type="submit"]:hover { background: #DADADA; }
line-height: 1.25em; line-height: 1.25em;
text-align: left; text-align: left;
overflow: hidden; overflow: hidden;
} }
/* Presentation */ /* Presentation */
.presentation > h2, .presentation > a { .presentation > h2, .presentation > a {
text-align: center; text-align: center;
} }
.presentation > a { .presentation > a {
font-size: 1.2em; font-size: 1.2em;
margin: 1em; margin: 1em;
} }
/* Stats */ /* Stats */
.stats { .stats {
display: flex; display: flex;
justify-content: space-around; justify-content: space-around;
margin: 2em; margin: 2em;
} }
.stats > div { .stats > div {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
.stats em { .stats em {
text-align: center; text-align: center;
font-weight: bold; font-weight: bold;
} }
/* ================= * /* ================= *
* Small Screens * * Small Screens *
* ================= */ * ================= */
.mobile-label { @media screen and (max-width: 900px) {
display: none;
}
@media screen and (max-width: 900px) {
header { header {
flex-direction: column; flex-direction: column;
} }
@ -662,6 +686,9 @@ form.new-post input[type="submit"]:hover { background: #DADADA; }
width: 100%; width: 100%;
border: solid #F4F4F4 0.1rem; border: solid #F4F4F4 0.1rem;
} }
header:focus-within #content > nav a .mobile-label {
display: initial;
}
body > main > * { body > main > * {
padding: 0 5%; padding: 0 5%;
@ -678,100 +705,96 @@ form.new-post input[type="submit"]:hover { background: #DADADA; }
min-width: 80%; min-width: 80%;
min-height: 80%; min-height: 80%;
} }
.mobile-label {
display: initial;
} }
}
/*== Pagination ==*/ /*== Pagination ==*/
.pagination { .pagination {
display: flex; display: flex;
justify-content: space-evenly; justify-content: space-evenly;
} }
.pagination > * { .pagination > * {
padding: 2em; padding: 2em;
} }
/*== Flex boxes ==*/ /*== Flex boxes ==*/
.flex { .flex {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
} }
.flex .grow { .flex .grow {
flex: 1; flex: 1;
} }
.left-icon { .left-icon {
align-self: center; align-self: center;
padding: 1em; padding: 1em;
background: #DADADA; background: #DADADA;
border-radius: 50px; border-radius: 50px;
margin: 1em; margin: 1em;
margin-right: 2em; margin-right: 2em;
} }
/*== Footer ==*/ /*== Footer ==*/
body > footer { body > footer {
display: flex; display: flex;
align-content: center; align-content: center;
justify-content: space-between; justify-content: space-between;
background: #ECECEC; background: #ECECEC;
padding: 0 20%; padding: 0 20%;
margin-top: 5em; margin-top: 5em;
} }
body > footer * { body > footer * {
margin: 5em 0; margin: 5em 0;
} }
/** Medias **/ /** Medias **/
figure { figure {
text-align: center; text-align: center;
margin: 2em; margin: 2em;
max-width: 100%; max-width: 100%;
width: auto; width: auto;
height: auto; height: auto;
} }
figure > * { figure > * {
max-width: 100%; max-width: 100%;
} }
figcaption { figcaption {
padding: 1em; padding: 1em;
} }
.preview { .preview {
display: block; display: block;
max-width: 100px; max-width: 100px;
max-height: 100px; max-height: 100px;
width: auto; width: auto;
height: auto; height: auto;
margin-right: 20px; margin-right: 20px;
} }
/** Avatars **/ /** Avatars **/
.avatar { .avatar {
border-radius: 100%; border-radius: 100%;
} }
.avatar.small { .avatar.small {
width: 50px; width: 50px;
height: 50px; height: 50px;
} }
.avatar.medium { .avatar.medium {
width: 100px; width: 100px;
height: 100px; height: 100px;
margin: 20px; margin: 20px;
} }
.avatar.padded { .avatar.padded {
margin-right: 1em; margin-right: 1em;
} }