ritual/ritual.sh
ritual/ritual.sh
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Blog styling tweaks

Browse source
This commit is contained in:
Dan 2026-01-14 12:33:26 +00:00
parent fd26ee866a
commit ab4fedcc59
3 changed files with 69 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

68
assets/sass/pages/blog.scss
View file

@ -14,7 +14,8 @@
background: linear-gradient(145deg, #e8e0c8, #c4b89a);
border-radius: 12px;
padding: 25px 30px 45px 30px;
box-shadow: 0 30px 60px rgba(0, 0, 0, 0.8),
box-shadow:
0 30px 60px rgba(0, 0, 0, 0.8),
inset 0 2px 4px rgba(255, 255, 255, 0.3),
inset 0 -2px 4px rgba(0, 0, 0, 0.3);
position: relative;
@ -69,7 +70,9 @@
height: 8px;
background: #0f0;
border-radius: 50%;
box-shadow: 0 0 10px #0f0, 0 0 20px #0f0;
box-shadow:
0 0 10px #0f0,
0 0 20px #0f0;
animation: pulse 2s ease-in-out infinite;
@include media-down(lg) {
@ -123,7 +126,8 @@
border-radius: 8px;
position: relative;
overflow: hidden;
box-shadow: inset 0 0 80px rgba(0, 255, 100, 0.1),
box-shadow:
inset 0 0 80px rgba(0, 255, 100, 0.1),
inset 0 0 40px rgba(0, 255, 100, 0.05),
inset 3px 3px 8px rgba(255, 255, 255, 0.1),
inset -3px -3px 8px rgba(0, 0, 0, 0.5);
@ -141,7 +145,8 @@
left: -5%;
right: -5%;
bottom: -5%;
background: radial-gradient(
background:
radial-gradient(
ellipse at 30% 30%,
rgba(255, 255, 255, 0.15) 0%,
transparent 40%
@ -289,6 +294,7 @@
a {
color: #ff9900;
text-shadow: 0 0 5px rgba(255, 153, 0, 0.5);
border-bottom: 1px dotted rgba(255, 200, 47, 0.5);
&::after {
background: #ff9900;
@ -297,6 +303,38 @@
}
}
.blog-summary,
.blogs-content {
color: #ff9900;
text-shadow: 0 0 10px rgba(255, 153, 0, 0.5);
a {
color: #ffb13d;
text-shadow: 0 0 5px rgba(255, 162, 23, 0.5);
border-bottom: 1px dotted rgba(255, 200, 47, 0.5);
&:hover {
border-bottom-color: orange;
text-shadow: 0 0 10px rgba(255, 217, 47, 0.8);
}
&::after {
background: #ff9900;
box-shadow: 0 0 10px #ff9900;
}
}
> .read-more {
color: #ff9900;
text-shadow: 0 0 10px rgba(255, 153, 0, 0.5);
&:after {
background: #ff9900;
box-shadow: 0 0 10px rgb(255, 213, 47);
}
}
}
.tag-filter-link {
background: rgba(255, 153, 0, 0.2);
border-color: rgba(255, 153, 0, 0.5);
@ -383,6 +421,7 @@
line-height: 1.6;
opacity: 0.9;
color: #0f0;
margin-top: 1rem;
@include media-down(lg) {
font-size: 0.9rem;
@ -755,7 +794,8 @@
height: auto;
border-radius: 12px;
border: 3px solid transparent;
background: linear-gradient(#000, #000) padding-box,
background:
linear-gradient(#000, #000) padding-box,
linear-gradient(180deg, #0f0, #000) border-box;
filter: grayscale(100%) contrast(1.2) brightness(0.9) sepia(100%)
hue-rotate(60deg) saturate(300%);
@ -902,7 +942,8 @@
&:hover {
background: rgba(0, 255, 0, 0.1);
border-color: rgba(0, 255, 0, 0.7);
box-shadow: 0 0 10px rgba(0, 255, 0, 0.4),
box-shadow:
0 0 10px rgba(0, 255, 0, 0.4),
inset 0 0 10px rgba(0, 255, 0, 0.1);
text-shadow: 0 0 10px rgba(0, 255, 0, 0.8);
}
@ -911,7 +952,8 @@
&.active span {
background: rgba(0, 255, 0, 0.2);
border-color: rgba(0, 255, 0, 0.8);
box-shadow: 0 0 15px rgba(0, 255, 0, 0.5),
box-shadow:
0 0 15px rgba(0, 255, 0, 0.5),
inset 0 0 10px rgba(0, 255, 0, 0.2);
text-shadow: 0 0 10px rgba(0, 255, 0, 1);
}
@ -950,7 +992,9 @@
text-shadow: 0 0 10px rgba(0, 255, 0, 0.8);
}
to {
text-shadow: 0 0 20px rgba(0, 255, 0, 1), 0 0 30px rgba(0, 255, 0, 0.6);
text-shadow:
0 0 20px rgba(0, 255, 0, 1),
0 0 30px rgba(0, 255, 0, 0.6);
}
}
@ -967,10 +1011,14 @@
0%,
100% {
opacity: 1;
box-shadow: 0 0 10px #0f0, 0 0 20px #0f0;
box-shadow:
0 0 10px #0f0,
0 0 20px #0f0;
}
50% {
opacity: 0.5;
box-shadow: 0 0 5px #0f0, 0 0 10px #0f0;
box-shadow:
0 0 5px #0f0,
0 0 10px #0f0;
}
}