Clean up styles, fix and improve the blog post card layout
This commit is contained in:
+301
-355
@@ -3,6 +3,8 @@
|
||||
// Modules.
|
||||
@use 'transitions';
|
||||
@use 'lists';
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
@font-face {
|
||||
@@ -85,138 +87,43 @@ body {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
@apply font-serif;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1.75rem;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
h6 {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
small {
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
a {
|
||||
@apply no-underline transition-all;
|
||||
|
||||
color: cornflowerblue;
|
||||
|
||||
&:hover {
|
||||
color: royalblue;
|
||||
}
|
||||
}
|
||||
|
||||
center {
|
||||
text-align: center;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
:not(nav) > ul {
|
||||
list-style-type: disc;
|
||||
padding-left: 1.5em;
|
||||
}
|
||||
|
||||
:is(section, article, aside).page {
|
||||
:is(div, p):not(:last-child) {
|
||||
@apply mb-4;
|
||||
@layer base {
|
||||
h1, h2, h3, h4, h5, h6,
|
||||
.text-h1, .text-h2, .text-h3, .text-h4, .text-h5, .text-h6 {
|
||||
@apply font-serif;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
:is(h1, h2, h3, h4, h5, h6):not(:last-child) {
|
||||
@apply mb-2;
|
||||
h1, .text-h1 {
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
|
||||
:is(ul, ol):not(:last-child) {
|
||||
@apply mb-4;
|
||||
}
|
||||
}
|
||||
|
||||
iconify-icon {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
// Entry point (Vue mount).
|
||||
#ender-app {
|
||||
flex: 1 0 auto;
|
||||
image-rendering: auto;
|
||||
}
|
||||
|
||||
// Helper classes that don't exist in Bootstrap.
|
||||
.overlay {
|
||||
grid-area: 1 / 1;
|
||||
}
|
||||
|
||||
.pass-through {
|
||||
pointer-events: none;
|
||||
|
||||
> * {
|
||||
pointer-events: auto;
|
||||
}
|
||||
}
|
||||
|
||||
ruby {
|
||||
ruby-position: under;
|
||||
|
||||
ruby {
|
||||
ruby-position: over;
|
||||
}
|
||||
}
|
||||
|
||||
rt {
|
||||
ruby-align: space-around;
|
||||
}
|
||||
|
||||
|
||||
.font-small {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.transition-ease {
|
||||
@extend %transition;
|
||||
}
|
||||
|
||||
// Query-overridable classes.
|
||||
.dimensions {
|
||||
width: 100%;
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
.accent-background {
|
||||
background-color: rgb(0 0 0 / 50%);
|
||||
}
|
||||
|
||||
.accent-overlay-background {
|
||||
background-color: rgb(0 0 0 / 90%);
|
||||
}
|
||||
|
||||
@responsive {
|
||||
.accent-text {
|
||||
color: white;
|
||||
h2, .text-h2 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.link-dark {
|
||||
@apply text-inherit no-underline transition-all;
|
||||
h3, .text-h3 {
|
||||
font-size: 1.75rem;
|
||||
}
|
||||
|
||||
h4, .text-h4 {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
h5, .text-h5 {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
h6, .text-h6 {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
small {
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
a {
|
||||
@apply no-underline transition-all;
|
||||
|
||||
color: cornflowerblue;
|
||||
|
||||
@@ -225,193 +132,45 @@ rt {
|
||||
}
|
||||
}
|
||||
|
||||
.fade-mask {
|
||||
mask-image: linear-gradient(to bottom, rgb(0 0 0 / 0%), rgb(0 0 0 / 100%) 5%, rgb(0 0 0 / 100%) 95%, rgb(0 0 0 / 0%));
|
||||
}
|
||||
}
|
||||
|
||||
.dialog {
|
||||
display: grid;
|
||||
|
||||
min-width: 240px;
|
||||
max-width: 640px;
|
||||
|
||||
background-color: rgb(25 20 40 / 95%);
|
||||
box-shadow: rgb(81 75 89 / 50%) 7px 7px 2em;
|
||||
border-radius: 16px !important;
|
||||
|
||||
> div.background {
|
||||
background-image: url('~/assets/images/textures/aero.png');
|
||||
background-attachment: scroll;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
background-blend-mode: lighten;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
opacity: 0.2;
|
||||
|
||||
box-shadow: azure 0 0 20rem;
|
||||
filter: blur(5px);
|
||||
center {
|
||||
text-align: center;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
> div.content > img.icon-badge {
|
||||
position: fixed;
|
||||
margin-top: -20px;
|
||||
margin-left: -20px;
|
||||
transform: rotate(-25deg);
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
}
|
||||
}
|
||||
|
||||
%transition {
|
||||
transition: 0.3s ease;
|
||||
}
|
||||
|
||||
.parallax {
|
||||
transition: all 0.6942s ease-in;
|
||||
}
|
||||
|
||||
.accent-gradient {
|
||||
background: radial-gradient(
|
||||
circle at left,
|
||||
rgb(255 255 255 / 80%),
|
||||
rgb(255 255 255 / 75%),
|
||||
rgb(255 255 255 / 0%)
|
||||
);
|
||||
}
|
||||
|
||||
.accent-text-shadow {
|
||||
text-shadow: black 2px 3px 4px;
|
||||
}
|
||||
|
||||
:where(html.light) {
|
||||
body {
|
||||
color: black;
|
||||
:not(nav) > ul {
|
||||
list-style-type: disc;
|
||||
padding-left: 1.5em;
|
||||
}
|
||||
|
||||
.accent-background {
|
||||
background-color: rgb(255 255 255 / 80%);
|
||||
}
|
||||
|
||||
.accent-overlay-background {
|
||||
background-color: rgb(255 255 255 / 90%);
|
||||
}
|
||||
|
||||
a {
|
||||
@apply no-underline transition-all;
|
||||
|
||||
color: royalblue;
|
||||
|
||||
&:hover {
|
||||
color: darkblue;
|
||||
:is(section, article, aside).page {
|
||||
:is(div, p):not(:last-child) {
|
||||
@apply mb-4;
|
||||
}
|
||||
}
|
||||
|
||||
.accent-text {
|
||||
color: black;
|
||||
}
|
||||
|
||||
.accent-gradient {
|
||||
background: radial-gradient(
|
||||
circle at left,
|
||||
rgb(0 0 0 / 95%),
|
||||
rgb(0 0 0 / 80%),
|
||||
rgb(0 0 0 / 0%)
|
||||
);
|
||||
}
|
||||
|
||||
.accent-text-shadow {
|
||||
text-shadow: white 1px 2px 3px;
|
||||
}
|
||||
}
|
||||
|
||||
.post {
|
||||
scroll-snap-type: y mandatory;
|
||||
scroll-snap-stop: normal;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
scroll-snap-align: start;
|
||||
}
|
||||
|
||||
&-box {
|
||||
position: relative;
|
||||
|
||||
padding: 0.6942rem 0.6942rem 3rem;
|
||||
|
||||
border: 2px solid rgb(153 153 255 / 60%);
|
||||
background-color: rgb(45 7 110 / 10%);
|
||||
|
||||
transition: 0.3s ease;
|
||||
|
||||
&:hover {
|
||||
border-color: rgb(153 153 255 / 100%);
|
||||
background-color: rgb(45 7 110 / 30%);
|
||||
}
|
||||
}
|
||||
|
||||
&-pocket {
|
||||
background-color: rgb(153 153 255 / 10%);
|
||||
|
||||
border-left: 1px solid rgb(153 153 255 / 60%);
|
||||
border-top: 1px solid rgb(153 153 255 / 60%);
|
||||
}
|
||||
|
||||
&-thumb {
|
||||
height: 100%;
|
||||
|
||||
> img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
max-height: 280px;
|
||||
object-fit: cover;
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
&-tags {
|
||||
> span {
|
||||
padding: 0.35em 0.65em;
|
||||
font-size: 0.85em;
|
||||
|
||||
background-color: rgb(153 153 255 / 10%);
|
||||
|
||||
border: 1px solid rgb(153 153 255 / 60%);
|
||||
border-radius: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
&-preamble {
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
background-attachment: fixed;
|
||||
|
||||
scroll-snap-align: end;
|
||||
|
||||
iconify-icon {
|
||||
filter: drop-shadow(1px 2px 3px rgb(0 0 0 / 100%));
|
||||
}
|
||||
}
|
||||
|
||||
&-content {
|
||||
scroll-snap-align: start;
|
||||
|
||||
:is(p, li) {
|
||||
:is(h1, h2, h3, h4, h5, h6) {
|
||||
a {
|
||||
@apply text-inherit no-underline transition-all;
|
||||
|
||||
color: cornflowerblue;
|
||||
|
||||
&:hover {
|
||||
color: royalblue;
|
||||
color: indianred;
|
||||
}
|
||||
}
|
||||
|
||||
&:not(:last-child) {
|
||||
@apply mb-2;
|
||||
}
|
||||
}
|
||||
|
||||
:is(ul, ol):not(:last-child) {
|
||||
@apply mb-4;
|
||||
}
|
||||
|
||||
:where(p, li) {
|
||||
code {
|
||||
&:hover {
|
||||
background-color: rgb(138 71 245 / 20%);
|
||||
}
|
||||
|
||||
padding: 0.25em;
|
||||
|
||||
border-radius: 0.5em;
|
||||
@@ -420,29 +179,11 @@ rt {
|
||||
background-color: rgb(83 35 162 / 10%);
|
||||
|
||||
transition: 0.3s ease;
|
||||
|
||||
&:hover {
|
||||
background-color: rgb(138 71 245 / 20%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:is(h1, h2, h3, h4, h5, h6) {
|
||||
font-family: Alexandria, sans-serif;
|
||||
font-weight: 700;
|
||||
|
||||
a {
|
||||
@apply text-inherit no-underline transition-all;
|
||||
|
||||
&:hover {
|
||||
color: indianred;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
max-height: 400px;
|
||||
@apply max-w-full max-h-[400px];
|
||||
}
|
||||
|
||||
blockquote {
|
||||
@@ -528,6 +269,246 @@ rt {
|
||||
}
|
||||
}
|
||||
|
||||
// Entry point (Vue mount).
|
||||
#ender-app {
|
||||
flex: 1 0 auto;
|
||||
image-rendering: auto;
|
||||
}
|
||||
|
||||
// Helper classes that don't exist in Bootstrap.
|
||||
.overlay {
|
||||
grid-area: 1 / 1;
|
||||
}
|
||||
|
||||
.pass-through {
|
||||
pointer-events: none;
|
||||
|
||||
> * {
|
||||
pointer-events: auto;
|
||||
}
|
||||
}
|
||||
|
||||
ruby {
|
||||
ruby-position: under;
|
||||
|
||||
ruby {
|
||||
ruby-position: over;
|
||||
}
|
||||
}
|
||||
|
||||
rt {
|
||||
ruby-align: space-around;
|
||||
}
|
||||
|
||||
.font-small {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
// Query-overridable classes.
|
||||
.dimensions {
|
||||
width: 100%;
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
@layer utilities {
|
||||
.accent-background {
|
||||
background-color: rgb(0 0 0 / 50%);
|
||||
}
|
||||
|
||||
.accent-overlay-background {
|
||||
background-color: rgb(0 0 0 / 90%);
|
||||
}
|
||||
|
||||
.accent-text {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.accent-text-shadow {
|
||||
text-shadow: black 2px 3px 4px;
|
||||
}
|
||||
|
||||
.drop-shadow,
|
||||
.accent-drop-shadow {
|
||||
filter: drop-shadow(1px 2px 3px black);
|
||||
}
|
||||
|
||||
.link-dark {
|
||||
@apply text-inherit no-underline transition-all;
|
||||
|
||||
color: cornflowerblue;
|
||||
|
||||
&:hover {
|
||||
color: royalblue;
|
||||
}
|
||||
}
|
||||
|
||||
.accent-fade {
|
||||
background: linear-gradient(
|
||||
to top,
|
||||
black,
|
||||
rgb(0 0 0 / 50%) 75%,
|
||||
transparent
|
||||
);
|
||||
}
|
||||
|
||||
.fade-mask {
|
||||
mask-image: linear-gradient(to bottom, transparent, black 3%, black 97%, transparent);
|
||||
}
|
||||
}
|
||||
|
||||
.dialog {
|
||||
display: grid;
|
||||
|
||||
min-width: 240px;
|
||||
max-width: 640px;
|
||||
|
||||
background-color: rgb(25 20 40 / 95%);
|
||||
box-shadow: rgb(81 75 89 / 50%) 7px 7px 2em;
|
||||
border-radius: 16px !important;
|
||||
|
||||
> div.background {
|
||||
background-image: url('~/assets/images/textures/aero.png');
|
||||
background-attachment: scroll;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
background-blend-mode: lighten;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
opacity: 0.2;
|
||||
|
||||
box-shadow: azure 0 0 20rem;
|
||||
filter: blur(5px);
|
||||
}
|
||||
|
||||
> div.content > img.icon-badge {
|
||||
position: fixed;
|
||||
margin-top: -20px;
|
||||
margin-left: -20px;
|
||||
transform: rotate(-25deg);
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
}
|
||||
}
|
||||
|
||||
.accent-gradient {
|
||||
background: radial-gradient(
|
||||
circle at left,
|
||||
rgb(255 255 255 / 80%),
|
||||
rgb(255 255 255 / 75%),
|
||||
rgb(255 255 255 / 0%)
|
||||
);
|
||||
}
|
||||
|
||||
.post {
|
||||
scroll-snap-type: y mandatory;
|
||||
scroll-snap-stop: normal;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
scroll-snap-align: start;
|
||||
}
|
||||
|
||||
&-box {
|
||||
border-color: rgb(153 153 255 / 60%);
|
||||
background-color: rgb(45 7 110 / 10%);
|
||||
|
||||
&:hover {
|
||||
border-color: rgb(153 153 255 / 100%);
|
||||
background-color: rgb(45 7 110 / 30%);
|
||||
}
|
||||
}
|
||||
|
||||
&-pocket {
|
||||
background-color: rgb(153 153 255 / 10%);
|
||||
border-left-color: rgb(153 153 255 / 60%);
|
||||
border-top-color: rgb(153 153 255 / 60%);
|
||||
}
|
||||
|
||||
&-tag {
|
||||
background-color: rgb(153 153 255 / 10%);
|
||||
border-color: rgb(153 153 255 / 60%);
|
||||
}
|
||||
}
|
||||
|
||||
:where(html.light) {
|
||||
body {
|
||||
color: black;
|
||||
}
|
||||
|
||||
.accent-background {
|
||||
background-color: rgb(255 255 255 / 90%);
|
||||
}
|
||||
|
||||
.accent-overlay-background {
|
||||
background-color: rgb(255 255 255 / 90%);
|
||||
}
|
||||
|
||||
.accent-drop-shadow {
|
||||
filter: drop-shadow(1px 2px 3px white);
|
||||
}
|
||||
|
||||
a {
|
||||
@apply no-underline transition-all;
|
||||
|
||||
color: royalblue;
|
||||
|
||||
&:hover {
|
||||
color: darkblue;
|
||||
}
|
||||
}
|
||||
|
||||
.accent-text {
|
||||
color: black;
|
||||
}
|
||||
|
||||
.accent-gradient {
|
||||
background: radial-gradient(
|
||||
circle at left,
|
||||
rgb(0 0 0 / 95%),
|
||||
rgb(0 0 0 / 80%),
|
||||
transparent
|
||||
);
|
||||
}
|
||||
|
||||
.accent-text-shadow {
|
||||
text-shadow: white 1px 2px 3px;
|
||||
}
|
||||
|
||||
.accent-fade {
|
||||
background: linear-gradient(
|
||||
to top,
|
||||
white,
|
||||
rgb(255 255 255 / 50%) 75%,
|
||||
transparent
|
||||
);
|
||||
}
|
||||
|
||||
.post {
|
||||
&-box {
|
||||
border-color: rgb(123 123 255 / 1000%);
|
||||
background-color: rgb(45 7 110 / 20%);
|
||||
|
||||
&:hover {
|
||||
border-color: rgb(123 123 255 / 80%);
|
||||
background-color: rgb(45 7 110 / 10%);
|
||||
}
|
||||
}
|
||||
|
||||
&-pocket {
|
||||
background-color: rgb(123 123 255 / 10%);
|
||||
border-left-color: rgb(123 123 255 / 80%);
|
||||
border-top-color: rgb(123 123 255 / 80%);
|
||||
}
|
||||
|
||||
&-tag {
|
||||
background-color: rgb(123 123 255 / 10%);
|
||||
border-color: rgb(123 123 255 / 80%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Dynamic classes.
|
||||
@screen lm {
|
||||
.dimensions {
|
||||
@@ -542,13 +523,14 @@ rt {
|
||||
}
|
||||
|
||||
#ender-app {
|
||||
height: 100%;
|
||||
height: 100dvh;
|
||||
|
||||
scrollbar-gutter: stable;
|
||||
}
|
||||
|
||||
.dimensions {
|
||||
width: 90%;
|
||||
|
||||
min-height: fit-content;
|
||||
max-height: 90%;
|
||||
}
|
||||
@@ -567,42 +549,6 @@ rt {
|
||||
html {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
|
||||
.post {
|
||||
&-box {
|
||||
padding-bottom: 0.6942rem;
|
||||
}
|
||||
|
||||
&-thumb {
|
||||
min-width: 352px;
|
||||
max-height: 198px;
|
||||
|
||||
> img {
|
||||
max-width: 352px;
|
||||
}
|
||||
}
|
||||
|
||||
&-title {
|
||||
display: -webkit-box;
|
||||
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
&-description {
|
||||
display: -webkit-box;
|
||||
|
||||
-webkit-line-clamp: 4;
|
||||
-webkit-box-orient: vertical;
|
||||
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@screen lg {
|
||||
|
||||
@@ -10,3 +10,23 @@
|
||||
filter: blur(1em);
|
||||
}
|
||||
}
|
||||
|
||||
.transition {
|
||||
&-ease {
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
&-portal {
|
||||
transition: all 0.6942s ease-in;
|
||||
}
|
||||
}
|
||||
|
||||
.button {
|
||||
&-twitter:hover {
|
||||
transform: translateZ(0) scale(1.1) rotate(-10deg);
|
||||
}
|
||||
|
||||
&-back:hover {
|
||||
transform: translateZ(0) scale(0.9);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user