feat: Rewrite nav, improve comment faves/boosts
Also, this is perhaps last featire commit here, I'll merge duckquill and my main site, it can be still used as a theme, it's just will be more convenient
This commit is contained in:
daudix
@ -122,6 +122,7 @@ section#comments {
|
||||
color: inherit;
|
||||
grid-area: card;
|
||||
max-width: 400px;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
@ -155,8 +156,16 @@ section#comments {
|
||||
padding: 1rem;
|
||||
text-align: left;
|
||||
|
||||
h5 {
|
||||
font-weight: 600;
|
||||
all: unset;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
p {
|
||||
font-weight: 400;
|
||||
color: var(--fg-muted-5);
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
* {
|
||||
@ -177,40 +186,66 @@ section#comments {
|
||||
}
|
||||
|
||||
footer {
|
||||
@extend small;
|
||||
|
||||
display: flex;
|
||||
gap: 0.4rem;
|
||||
grid-area: interactions;
|
||||
margin-top: 1rem;
|
||||
|
||||
.boosts {
|
||||
background-color: var(--orange-bg);
|
||||
.reblogs,
|
||||
.favourites {
|
||||
border-radius: var(--rounded-corner);
|
||||
color: var(--orange-fg);
|
||||
cursor: default;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 600;
|
||||
font-size: 1rem;
|
||||
font-variant-numeric: tabular-nums;
|
||||
font-weight: 400;
|
||||
padding: 0.4rem 1rem;
|
||||
text-decoration: none;
|
||||
transition: var(--transition);
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: scale(var(--active));
|
||||
}
|
||||
|
||||
&::before {
|
||||
content: "🔁";
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
display: inline-block;
|
||||
font-family: "bootstrap-icons" !important;
|
||||
font-style: normal;
|
||||
font-variant: normal;
|
||||
font-weight: normal !important;
|
||||
line-height: 1;
|
||||
margin-inline-end: 0.25rem;
|
||||
text-transform: none;
|
||||
vertical-align: -0.125em;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
.faves {
|
||||
background-color: var(--red-bg);
|
||||
border-radius: var(--rounded-corner);
|
||||
color: var(--red-fg);
|
||||
cursor: default;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 600;
|
||||
padding: 0.4rem 1rem;
|
||||
.reblogs {
|
||||
color: var(--orange-fg);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--orange-bg);
|
||||
}
|
||||
|
||||
&::before {
|
||||
content: "❤️";
|
||||
margin-inline-end: 0.25rem;
|
||||
content: "\F813";
|
||||
}
|
||||
}
|
||||
|
||||
.favourites {
|
||||
color: var(--red-fg);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--red-bg);
|
||||
}
|
||||
|
||||
&::before {
|
||||
content: "\F417";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -13,7 +13,7 @@ html {
|
||||
}
|
||||
|
||||
// Smaller font size on mobile
|
||||
// @media only screen and (max-device-width: 480px) {
|
||||
// @media screen and (max-width: 480px) {
|
||||
// html {
|
||||
// font-size: 14px;
|
||||
// }
|
||||
@ -65,7 +65,7 @@ body {
|
||||
max-width: var(--content-width);
|
||||
}
|
||||
|
||||
@media only screen and (max-device-width: 480px) {
|
||||
@media screen and (max-width: 480px) {
|
||||
.container {
|
||||
width: 90vw;
|
||||
}
|
||||
|
||||
@ -16,7 +16,11 @@ img {
|
||||
box-shadow: var(--shadow-raised);
|
||||
}
|
||||
|
||||
@media only screen and (max-device-width: 480px) {
|
||||
&:active {
|
||||
transform: scale(var(--active));
|
||||
}
|
||||
|
||||
@media screen and (max-width: 480px) {
|
||||
&:not(.no-hover):hover {
|
||||
transform: scale(110%);
|
||||
}
|
||||
|
||||
115
sass/_nav.scss
115
sass/_nav.scss
@ -1,81 +1,78 @@
|
||||
.nav {
|
||||
overflow: auto;
|
||||
width: 80vw;
|
||||
max-width: calc(var(--content-width) + 10rem);
|
||||
margin: 1rem auto;
|
||||
box-shadow: 0px 12px 24px -16px rgba(0, 0, 0, 0.5);
|
||||
border-radius: var(--rounded-corner-big);
|
||||
background-color: var(--nav-bg);
|
||||
backdrop-filter: blur(24px);
|
||||
header {
|
||||
-webkit-backdrop-filter: blur(24px);
|
||||
backdrop-filter: blur(24px);
|
||||
background-color: var(--nav-bg);
|
||||
border-radius: 999px;
|
||||
box-shadow: 0px 12px 24px -16px rgba(0, 0, 0, 0.5);
|
||||
margin: 1rem auto;
|
||||
max-width: calc(var(--content-width) + 10rem);
|
||||
position: sticky;
|
||||
top: 1rem;
|
||||
width: 80vw;
|
||||
z-index: 1;
|
||||
|
||||
&-container {
|
||||
margin: 0.5rem 0.5rem;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style-type: none;
|
||||
margin: 1rem 0 0;
|
||||
padding: 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
li {
|
||||
transition: var(--transition);
|
||||
color: var(--default-color);
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
a {
|
||||
background-color: transparent;
|
||||
border-radius: var(--rounded-corner);
|
||||
color: var(--fg-muted-4);
|
||||
display: inline-block;
|
||||
font-weight: 400;
|
||||
padding: 0.4rem 1rem;
|
||||
text-decoration: none;
|
||||
transform: scale(1);
|
||||
transition: var(--transition);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--fg-muted-1);
|
||||
color: var(--primary-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: scale(var(--active));
|
||||
@media screen and (max-width: 630px) {
|
||||
& {
|
||||
border-radius: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-device-width: 480px) {
|
||||
@media screen and (max-width: 480px) {
|
||||
& {
|
||||
width: 90vw;
|
||||
position: static;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 600px) {
|
||||
& {
|
||||
nav {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0.4rem;
|
||||
|
||||
@media screen and (max-width: 630px) {
|
||||
& {
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.2rem;
|
||||
justify-content: center;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
li {
|
||||
list-style: none;
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
a {
|
||||
border-radius: 999px;
|
||||
color: var(--fg-muted-4);
|
||||
font-weight: 400;
|
||||
padding: 0.4rem 1rem;
|
||||
text-decoration: none;
|
||||
transform: scale(1);
|
||||
transition: var(--transition);
|
||||
|
||||
&-container {
|
||||
text-align: left;
|
||||
@media screen and (max-width: 630px) {
|
||||
& {
|
||||
border-radius: var(--rounded-corner);
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
bottom: 0;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
&:hover {
|
||||
background-color: var(--fg-muted-1);
|
||||
color: var(--primary-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a {
|
||||
border-radius: 999px;
|
||||
&:active {
|
||||
transform: scale(var(--active));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -51,7 +51,6 @@ $glow: 0 0 0 1px color.scale($primary-color, $alpha: -95%),
|
||||
--drop-shadow: drop-shadow(0 4px 3px rgba(0, 0, 0, 0.07))
|
||||
drop-shadow(0 2px 2px rgba(0, 0, 0, 0.06));
|
||||
--glow: #{$glow};
|
||||
--rounded-corner-big: 18px;
|
||||
--rounded-corner-small: 8px;
|
||||
--rounded-corner: 12px;
|
||||
--shadow-raised: 0 0 0 1px rgba(0, 0, 0, 0.06),
|
||||
|
||||
@ -10,23 +10,24 @@
|
||||
|
||||
@use "normalize";
|
||||
|
||||
@use "variables";
|
||||
@use "fonts";
|
||||
@use "main";
|
||||
|
||||
@use "bootstrap-icons";
|
||||
@use "buttons";
|
||||
@use "comments";
|
||||
@use "crt";
|
||||
@use "fonts";
|
||||
@use "footer";
|
||||
@use "gnome-hig";
|
||||
@use "johnvertisement";
|
||||
@use "links";
|
||||
@use "main";
|
||||
@use "media";
|
||||
@use "nav";
|
||||
@use "not-found";
|
||||
@use "post-nav";
|
||||
@use "statements";
|
||||
@use "tags";
|
||||
@use "variables";
|
||||
|
||||
@import url("syntax-theme-dark.css") (prefers-color-scheme: dark);
|
||||
@import url("syntax-theme-light.css") (prefers-color-scheme: light);
|
||||
|
||||
@ -211,21 +211,23 @@ which were inspired by https://codeberg.org/jwildeboer/jwildeboersource/src/comm
|
||||
let interactions = document.createElement("footer");
|
||||
|
||||
if(status.reblogs_count > 0) {
|
||||
let boosts = document.createElement("span");
|
||||
boosts.className = "boosts";
|
||||
boosts.setAttribute("title", "Boosts");
|
||||
boosts.textContent = status.reblogs_count;
|
||||
let reblogs = document.createElement("a");
|
||||
reblogs.setAttribute("href", status.url + "/reblogs");
|
||||
reblogs.className = "reblogs";
|
||||
reblogs.setAttribute("title", "Boosts");
|
||||
reblogs.textContent = status.reblogs_count;
|
||||
|
||||
interactions.appendChild(boosts);
|
||||
interactions.appendChild(reblogs);
|
||||
}
|
||||
|
||||
if(status.favourites_count > 0) {
|
||||
let faves = document.createElement("span");
|
||||
faves.className = "faves";
|
||||
faves.setAttribute("title", "Favorites");
|
||||
faves.textContent = status.favourites_count;
|
||||
let favourites = document.createElement("a");
|
||||
favourites.setAttribute("href", status.url + "/favourites");
|
||||
favourites.className = "favourites";
|
||||
favourites.setAttribute("title", "Favorites");
|
||||
favourites.textContent = status.favourites_count;
|
||||
|
||||
interactions.appendChild(faves);
|
||||
interactions.appendChild(favourites);
|
||||
}
|
||||
|
||||
let comment = document.createElement("article");
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<nav class="nav">
|
||||
<div class="nav-container">
|
||||
<header>
|
||||
<nav>
|
||||
<a href="{{ get_url(path='') }}">
|
||||
{% if config.extra.nav.icons %}
|
||||
<i class="bi bi-house"></i>
|
||||
@ -29,5 +29,5 @@
|
||||
</li>
|
||||
{% endif %}
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
Reference in New Issue
Block a user