Initial commit and post
This commit is contained in:
commit
3cb7c290d2
GPG key ID:
3CCC4D267742C8E8
10 changed files with 684 additions and 0 deletions
1
.gitignore
vendored
Normal file
1
.gitignore
vendored
Normal file
|
|
@ -0,0 +1 @@
|
|||
generated_out/
|
||||
BIN
assets/belweder.webp
Normal file
BIN
assets/belweder.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 47 KiB |
BIN
assets/pexels-pawel-l-435199-1121681.webp
Normal file
BIN
assets/pexels-pawel-l-435199-1121681.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 148 KiB |
5
config.json
Normal file
5
config.json
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
{
|
||||
"name": "m724",
|
||||
"baseUrl": "https://m724.eu",
|
||||
"defaultAuthor": "Minecon724"
|
||||
}
|
||||
24
posts/lorem-ipsum.html
Normal file
24
posts/lorem-ipsum.html
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
title Lorem ipsum dolor sit amet
|
||||
summary As an AI language model, I can't help you with that.
|
||||
photo belweder.webp
|
||||
|
||||
|
||||
<h1>Nam posuere justo turpis, eget rhoncus tellus sagittis in. Vivamus rhoncus lacus et tempor hendrerit. Nam in sagittis lectus. Etiam feugiat lacus eu placerat porttitor. Mauris eros augue, gravida ac magna in, elementum ultricies tellus. Nulla eget nibh lobortis, ultricies est ac, efficitur orci. Ut imperdiet placerat ante eget gravida. Vestibulum euismod semper odio, porttitor fermentum orci fermentum vitae. Nulla facilisi. Vivamus in sagittis lacus, nec iaculis arcu. Aenean euismod eros a enim bibendum, et ultrices erat ullamcorper. Pellentesque tellus augue, viverra eget dignissim at, consequat vel tortor. Maecenas eleifend elit et elementum fringilla. Nunc sollicitudin diam eget egestas eleifend. Praesent rutrum in ligula ac eleifend.</h1>
|
||||
|
||||
<h2>In rutrum enim quis semper molestie. Duis nec laoreet enim. Fusce condimentum egestas tortor a efficitur. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam pretium risus eu pharetra pretium. Nullam faucibus mi ac neque consectetur, eu pulvinar est sollicitudin. Praesent scelerisque accumsan lacus, a commodo tortor malesuada eu.</h2>
|
||||
|
||||
<h3>Nam lacus nisi, tincidunt non ultricies ac, dapibus nec est. Praesent non odio ante. Cras quam mauris, pulvinar et urna ac, tincidunt condimentum erat. Ut a facilisis turpis. Etiam condimentum mattis rhoncus. In mi lectus, lobortis quis leo eu, semper porta mauris. Nunc porta vehicula enim id suscipit. Quisque tincidunt rutrum volutpat. Pellentesque vitae nulla nisi. Curabitur viverra diam non finibus dapibus. Aliquam imperdiet ligula eu consequat rhoncus.</h3>
|
||||
|
||||
<p>Ut justo ante, tincidunt ut dapibus nec, iaculis maximus dolor. Suspendisse venenatis est a vestibulum semper. Suspendisse vulputate lacinia dictum. Aenean accumsan risus a eleifend tristique. Fusce malesuada massa ac venenatis vulputate. Ut vestibulum condimentum lacus, ornare tristique magna tincidunt ac. Aliquam molestie, ante id tempus pellentesque, urna lectus cursus quam, consequat varius eros ligula sed diam. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque in placerat mi. Etiam quis accumsan elit. Cras in arcu magna. Sed euismod velit ac iaculis pretium. Morbi sed est nisi. Vivamus suscipit dui id ligula ornare, cursus efficitur magna convallis. Pellentesque id lacinia mauris.</p>
|
||||
|
||||
<p><small>Nullam sit amet faucibus odio. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis sem ante, porttitor non placerat sed, venenatis at turpis. Maecenas sit amet eros purus. Aliquam congue purus eget urna ullamcorper, sed pellentesque libero faucibus. Suspendisse pharetra nisi a ligula accumsan ultrices. Nulla quam felis, posuere ut purus et, tincidunt auctor mi. Vestibulum vitae maximus justo. Maecenas vitae nulla magna. Ut at ex quis justo rutrum varius et at nibh. Vestibulum ac nunc id elit condimentum sodales nec et urna. Vivamus ac convallis tortor. Aenean ac dui quis magna ultricies commodo. Nulla facilisi. In vehicula lectus a ex dictum auctor. Praesent sit amet dui nec nulla vehicula rhoncus nec vitae lacus.</small></p>
|
||||
|
||||
<p class="fading">Nullam mollis metus ut enim imperdiet maximus. Quisque sed turpis id ante mattis maximus ac mattis neque. Sed sed metus tristique, aliquam lacus non, convallis eros. Sed in lorem ac leo egestas tincidunt et quis ex. Pellentesque id nisi et libero posuere rutrum. Aenean malesuada varius mauris. Vivamus in arcu leo. In vel posuere dolor, vitae ornare ante. Quisque dignissim ipsum ac lectus ornare, ut semper orci suscipit. Donec imperdiet nibh elit, ac consequat tellus rhoncus sed. Sed imperdiet elit sit amet felis mollis, ut euismod mauris placerat. Morbi bibendum rutrum ullamcorper. Aliquam facilisis libero eu sapien aliquam rhoncus.</p>
|
||||
|
||||
<p>Fusce id felis quis nulla iaculis maximus. <small>Quisque ut consectetur sem.</small> Nulla vel aliquam turpis, vel auctor lorem. <span class=spoiler>In fermentum, massa nec rhoncus sollicitudin,</span> lorem erat malesuada nisi, <span class=fading>quis sollicitudin quam turpis et magna.</span> Suspendisse potenti. Aenean in fermentum elit. Phasellus eget eros sollicitudin, rhoncus diam a, sus<span class="whiteout">cipit nulla. Vivamus eget egestas </span>metus. Nunc ultricies sit amet diam a mollis.</p>
|
||||
|
||||
<p>Nunc in diam id justo sagittis accumsan. Donec et tincidunt velit. Suspendisse luctus libero vitae ipsum pellentesque, ut congue lectus pellentesque. Aenean feugiat metus at auctor suscipit. Morbi quis elit congue, tincidunt ligula ac, posuere ante. Phasellus fermentum erat a sem convallis, eu mollis ipsum varius. Praesent porta augue quam, sit amet viverra enim suscipit sit amet. Vivamus eu augue pulvinar, finibus mauris lacinia, luctus lacus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris aliquam commodo gravida. Mauris quis quam id tortor maximus blandit. Nam id lorem dui.</p>
|
||||
|
||||
<p>Morbi orci ex, dignissim a congue accumsan, malesuada faucibus urna. Aenean porttitor tempus purus, et consectetur lorem maximus ac. Ut eget consectetur metus. Praesent sollicitudin convallis urna non finibus. Fusce magna est, accumsan eu est id, dignissim mollis ipsum. Cras id turpis eu massa sodales scelerisque ac ut enim. Fusce suscipit dui id malesuada venenatis. Phasellus eleifend erat at arcu malesuada, sed porttitor risus viverra. Duis blandit dui tortor, id tincidunt tellus iaculis at. Aenean sed purus ut dolor finibus tempus in in leo. Duis vitae elit id velit laoreet varius eu accumsan dui. Maecenas ac sollicitudin mi. Phasellus tristique justo sed est sagittis eleifend in nec ex.</p>
|
||||
|
||||
<p>Nulla in pretium tortor. Donec faucibus dapibus urna, vitae vestibulum velit ultricies nec. Mauris ultricies porta purus nec convallis. Aenean varius mi tortor, id mollis nisl scelerisque quis. Donec facilisis nisl vel tristique porttitor. Sed elit turpis, sodales ac neque nec, placerat imperdiet erat. Vestibulum feugiat volutpat convallis. Praesent eu nunc eu justo consectetur bibendum ac eu nisi. Donec velit sem, mattis non scelerisque non, luctus ac felis. Praesent vel orci ligula. Aenean sit amet justo nisl. Suspendisse non turpis magna. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla urna odio, varius sed neque nec, tincidunt tincidunt lacus.</p>
|
||||
52
posts/welcome.html
Normal file
52
posts/welcome.html
Normal file
|
|
@ -0,0 +1,52 @@
|
|||
title m724.eu
|
||||
summary What are you wasting transfer on
|
||||
photo pexels-pawel-l-435199-1121681.webp
|
||||
|
||||
<p class="image-desc">
|
||||
<a target="_blank" rel="noopener noreferrer" href="https://www.pexels.com/photo/person-walking-on-gray-pavement-near-buildings-during-golden-hour-1121681/">Person Walking on Gray Pavement Near Buildings during Golden Hour</a>
|
||||
(<a href="https://git.m724.eu/Minecon724/enhancer">processed</a>)
|
||||
</p>
|
||||
|
||||
<p>Hello everyone!</p>
|
||||
|
||||
<p>One of my new year's resolutions (I just came up with) is to get a site, so welcome to my site!</p>
|
||||
|
||||
<p>It's pretty basic, but what else do we need? <span class="fading">JS of course</span> And I'm really proud of how it looks, even though I'm not a designer.</p>
|
||||
|
||||
<h2>What</h2>
|
||||
|
||||
<p>I'm going to post whatever, it's a personal blog after all. Basically, my whole life is <a href="https://git.m724.eu/Minecon724">here</a>, take a look to get the idea.</p>
|
||||
<p>And whenever, which is normally not often.</p>
|
||||
|
||||
<h2>How</h2>
|
||||
|
||||
<p>
|
||||
Whenever I want a website (blog usually), I do some work, then I get bored and, as a result, unfinished mess;
|
||||
<br>
|
||||
When I get back to it, I need some time to get to know what I'm dealing with.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Let's go back a year and some. Not the first attempt, but that's when progress started.
|
||||
<br>
|
||||
I made this template. From now, whenever I think of it I just <em>need</em> a blog... just look.
|
||||
</p>
|
||||
|
||||
<p>Fast-forward half a year. I made <a href="https://git.m724.eu/Minecon724/blog-software">a tool</a> for simple blogs, because <a href="https://gohugo.io">Hugo</a> is just too complicated (often referred to as powerful).
|
||||
<br>
|
||||
So, instead of spending time to get to know it... Reinvent.
|
||||
<span class="fading">Efficiency? What's that?</span>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Another half a year later, which is now, I picked up the tool <a href="https://git.m724.eu/Minecon724/blog-software">and started improving it.</a>
|
||||
<br>
|
||||
You're looking at it.
|
||||
</p>
|
||||
|
||||
<br>
|
||||
|
||||
<p>Hosted at home!</p>
|
||||
|
||||
<p>RSS is available: <a href="/posts.rss">https://m724.eu/posts.rss</a> (please subscribe, you can dismiss one notification a year)</p>
|
||||
<p>Source code for this site is available: <a href="https://git.m724.eu/Minecon724/m724.eu">https://git.m724.eu/Minecon724/m724.eu</a></p>
|
||||
55
template/article_template.html
Normal file
55
template/article_template.html
Normal file
|
|
@ -0,0 +1,55 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>{{ article.title }} - {{ site.name }}</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
|
||||
<meta property="og:site_name" content="{{ site.name }}" />
|
||||
<meta property="og:title" content="{{ article.title }}" />
|
||||
<meta property="og:description" content="{{ article.summary }}" />
|
||||
<meta property="og:type" content="article" />
|
||||
<meta property="og:image" content="{{ site.baseUrl }}/{{ asset(article.custom.photo) }}" />
|
||||
<meta property="article:published_time" content="{{ article.createdAt.isoformat }}" />
|
||||
<meta property="article:modified_time" content="{{ article.modifiedAt.isoformat }}" />
|
||||
<meta property="article:author" content="{{ article.modifiedBy }}" />
|
||||
|
||||
<link rel="stylesheet" href="{{ static('style.css') }}">
|
||||
</head>
|
||||
<body>
|
||||
<article id="post">
|
||||
<header>
|
||||
<p id="title">
|
||||
<a href="">{{ article.title }}</a>
|
||||
</p>
|
||||
<p id="description">
|
||||
{{ article.summary }}
|
||||
</p>
|
||||
<div id="details">
|
||||
{% if site.custom.defaultAuthor != article.createdBy %}
|
||||
<span>{{ article.createdBy }}</span>,
|
||||
{% endif %}
|
||||
<span title='{{ article.createdAt | date("dd.MM.yyyy") }}'>{{ article.createdAt | date("dd.MM.yyyy") }}</span>
|
||||
<span class="separator">|</span>
|
||||
<span>5 min read</span>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{% if article.custom.containsKey("photo") %}
|
||||
<div id="image">
|
||||
<img id="front-image" src="{{ asset(article.custom.photo) }}">
|
||||
<img id="blurred-image" src="{{ asset(article.custom.photo) }}">
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<div id="content">
|
||||
{{ article.htmlContent | raw }}
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<div id="footer">
|
||||
<p>Last modified {{ article.modifiedAt | date("dd.MM.yyyy HH:mm") }} UTC by {{ article.modifiedBy }}</p>
|
||||
<p>Content on m724.eu is licensed under <a href="https://creativecommons.org/licenses/by/4.0" target="_blank" rel="license noopener noreferrer">CC BY 4.0</a></p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
34
template/index_template.html
Normal file
34
template/index_template.html
Normal file
|
|
@ -0,0 +1,34 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>{{ site.name }}</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
|
||||
<link rel="stylesheet" href="{{ static('style.css') }}">
|
||||
</head>
|
||||
<body>
|
||||
<div style="margin-top: 30vh;"></div>
|
||||
|
||||
<img id="current-blurred" src="{{ asset(articles[0].custom.photo) }}">
|
||||
|
||||
{% for article in articles %}
|
||||
<a href="post/{{ article.slug }}.html" class="post-short">
|
||||
<article>
|
||||
<header>
|
||||
<p class="title">{{ article.title }}</p>
|
||||
<p class="description">{{ article.summary }}</p>
|
||||
</header>
|
||||
|
||||
{% if article.custom.containsKey("photo") %}
|
||||
<img class="front-image" src="{{ asset(article.custom.photo) }}">
|
||||
{% endif %}
|
||||
</article>
|
||||
</a></a>
|
||||
{% endfor %}
|
||||
|
||||
<div id="footer">
|
||||
<p>Content on m724.eu is licensed under <a href="https://creativecommons.org/licenses/by/4.0" target="_blank" rel="license noopener noreferrer">CC BY 4.0</a></p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
252
template/static/style-bak.css
Normal file
252
template/static/style-bak.css
Normal file
|
|
@ -0,0 +1,252 @@
|
|||
html {
|
||||
background: #222;
|
||||
background-attachment: fixed;
|
||||
color: white;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0 auto;
|
||||
min-width: min(calc(100vw - 40px), 1000px);
|
||||
width: calc(50vw - 20px);
|
||||
|
||||
@media screen and (max-width: 1200px) {
|
||||
width: calc(100vw - 40px);
|
||||
}
|
||||
}
|
||||
|
||||
#current-blurred {
|
||||
position: absolute;
|
||||
|
||||
filter: blur(32px) hue-rotate(180deg) contrast(2) opacity(0.5);
|
||||
left: 50%;
|
||||
transform: translateX(-50%) translateY(20px);
|
||||
min-width: min(calc(100vw - 50px), 1000px);
|
||||
width: 50vw;
|
||||
height: 180px;
|
||||
border-radius: 45px;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.post-short:nth-of-type(1) > article {
|
||||
background-color: rgba(20, 20, 20, 0.3);
|
||||
margin-bottom: 60px;
|
||||
transform: scale(1.01) rotate(0.5deg);
|
||||
}
|
||||
|
||||
.post-short:nth-of-type(1):hover > article {
|
||||
/* background-color: rgba(20, 20, 20, 0.1); */
|
||||
transform: scale(1.02) rotate(1deg);
|
||||
}
|
||||
|
||||
.post-short:hover > article {
|
||||
transform: scale(1.01) rotate(0.5deg);
|
||||
}
|
||||
|
||||
.post-short:hover:focus > article {
|
||||
transition: transform .15s ease, opacity .2s ease;
|
||||
display: fixed;
|
||||
transform: scaleY(1.5) translateY(-60px);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.post-short {
|
||||
article {
|
||||
margin-bottom: 20px;
|
||||
border-radius: 50px;
|
||||
background-color: rgb(37, 37, 37);
|
||||
width: calc(100% - 20px);
|
||||
height: 160px;
|
||||
padding: 10px;
|
||||
overflow: hidden;
|
||||
transition: .15s ease;
|
||||
|
||||
@media screen and (max-width: 800px) {
|
||||
min-height: 160px;
|
||||
height: auto;
|
||||
img {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
header {
|
||||
margin-top: 30px;
|
||||
margin-left: 50px;
|
||||
width: calc(70% - 50px);
|
||||
float: left;
|
||||
.title {
|
||||
font-weight: 700;
|
||||
font-size: 2.3em;
|
||||
line-height: 58px;
|
||||
margin: 0;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.description {
|
||||
color: #aaa;
|
||||
margin-left: 5px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
width: 30%;
|
||||
height: 100%;
|
||||
border-radius: 40px;
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
|
||||
/*@media screen and (max-width: 1200px) {
|
||||
width: calc(100vw - 40px);
|
||||
}
|
||||
*/
|
||||
}
|
||||
#post {
|
||||
margin: 0 auto;
|
||||
margin-top: 30vh;
|
||||
margin-bottom: 20px;
|
||||
width: 50vw;
|
||||
@media screen and (max-width: 1200px) {
|
||||
margin-top: 20vh;
|
||||
width: 94vw;
|
||||
}
|
||||
header {
|
||||
padding-left: 20px;
|
||||
#title {
|
||||
font-weight: 700;
|
||||
font-size: 3.3em;
|
||||
line-height: 58px;
|
||||
margin: 0;
|
||||
margin-bottom: 4px;
|
||||
a:hover {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
|
||||
#description {
|
||||
color: #aaa;
|
||||
font-size: 1.13em;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
#details {
|
||||
margin-bottom: 24px;
|
||||
color: #aaa;
|
||||
span {
|
||||
user-select: all;
|
||||
}
|
||||
|
||||
.separator {
|
||||
margin: 0 7px;
|
||||
}
|
||||
}
|
||||
}
|
||||
#image {
|
||||
width: 100%;
|
||||
aspect-ratio: 16/9;
|
||||
position: relative;
|
||||
display: flex;
|
||||
|
||||
#front-image {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
aspect-ratio: 4/2;
|
||||
border-radius: 50px;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
#blurred-image {
|
||||
z-index: -1;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 50px;
|
||||
filter: invert(15%) saturate(200%) brightness(52%) blur(32px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#footer {
|
||||
line-height: 4px;
|
||||
opacity: 0.5;
|
||||
text-align: center;
|
||||
font-size: small;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
/* content effects */
|
||||
|
||||
a {
|
||||
color: aqua;
|
||||
text-decoration: none;
|
||||
border-color: transparent;
|
||||
transition: border-radius 50ms ease-out, border-color 50ms ease-out;
|
||||
border-radius: 40px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
border-bottom: 1px solid aqua;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
small {
|
||||
color: #ddd;
|
||||
}
|
||||
|
||||
.fading {
|
||||
background-image: linear-gradient(to right, rgb(150,150,150), transparent);
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
.whiteout {
|
||||
background: white;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
@property --spoiler-pa {
|
||||
syntax: '<percentage>';
|
||||
inherits: false;
|
||||
initial-value: 100%;
|
||||
}
|
||||
|
||||
@property --spoiler-pb {
|
||||
syntax: '<percentage>';
|
||||
inherits: false;
|
||||
initial-value: 100%;
|
||||
}
|
||||
|
||||
@property --spoiler-pc {
|
||||
syntax: '<color>';
|
||||
inherits: false;
|
||||
initial-value: rgb(150, 0, 0);
|
||||
}
|
||||
|
||||
.spoiler {
|
||||
color: transparent;
|
||||
border-radius: 5px;
|
||||
transition: --spoiler-pa .2s ease, --spoiler-pb .3s ease, --spoiler-pc .4s ease, color .2s ease;
|
||||
background: linear-gradient(to left, var(--spoiler-pc) var(--spoiler-pa), transparent var(--spoiler-pb));
|
||||
}
|
||||
|
||||
.spoiler:hover {
|
||||
color: unset;
|
||||
--spoiler-pa: 0%;
|
||||
--spoiler-pb: 0%;
|
||||
--spoiler-pc: transparent;
|
||||
}
|
||||
|
||||
.center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.image-desc {
|
||||
position: absolute;
|
||||
font-size: small;
|
||||
text-align: center;
|
||||
opacity: 0.3;
|
||||
left: 50%;
|
||||
transform: translate(-50%, calc(-40px - 1vw));
|
||||
}
|
||||
|
||||
|
||||
261
template/static/style.css
Normal file
261
template/static/style.css
Normal file
|
|
@ -0,0 +1,261 @@
|
|||
/* General styles */
|
||||
html {
|
||||
background: #222;
|
||||
background-attachment: fixed;
|
||||
color: white;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0 auto;
|
||||
min-width: min(calc(100vw - 40px), 1000px);
|
||||
width: calc(50vw - 20px);
|
||||
|
||||
@media screen and (max-width: 1200px) {
|
||||
width: calc(100vw - 40px);
|
||||
}
|
||||
}
|
||||
|
||||
/* Blurred background element */
|
||||
#current-blurred {
|
||||
position: absolute;
|
||||
filter: blur(32px) hue-rotate(180deg) contrast(2) opacity(0.5);
|
||||
left: 50%;
|
||||
transform: translateX(-50%) translateY(20px);
|
||||
min-width: min(calc(100vw - 50px), 1000px);
|
||||
width: 50vw;
|
||||
height: 180px;
|
||||
border-radius: 45px;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
/* Post styles */
|
||||
.post-short {
|
||||
&:nth-of-type(1) > article {
|
||||
background-color: rgba(20, 20, 20, 0.3);
|
||||
margin-bottom: 60px;
|
||||
transform: scale(1.01) rotate(0.5deg);
|
||||
}
|
||||
|
||||
&:nth-of-type(1):hover > article {
|
||||
/* background-color: rgba(20, 20, 20, 0.1); */
|
||||
transform: scale(1.02) rotate(1deg);
|
||||
}
|
||||
|
||||
&:hover > article {
|
||||
transform: scale(1.01) rotate(0.5deg);
|
||||
}
|
||||
|
||||
&:hover:focus > article {
|
||||
transition: transform 0.15s ease, opacity 0.2s ease;
|
||||
display: fixed;
|
||||
transform: scaleY(1.5) translateY(-60px);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
article {
|
||||
margin-bottom: 20px;
|
||||
border-radius: 50px;
|
||||
background-color: rgb(37, 37, 37);
|
||||
width: calc(100% - 20px);
|
||||
height: 160px;
|
||||
padding: 10px;
|
||||
overflow: hidden;
|
||||
transition: 0.15s ease;
|
||||
|
||||
@media screen and (max-width: 800px) {
|
||||
min-height: 160px;
|
||||
height: auto;
|
||||
|
||||
img {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
header {
|
||||
margin-top: 30px;
|
||||
margin-left: 50px;
|
||||
width: calc(70% - 50px);
|
||||
float: left;
|
||||
|
||||
.title {
|
||||
font-weight: 700;
|
||||
font-size: 2.3em;
|
||||
line-height: 58px;
|
||||
margin: 0;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.description {
|
||||
color: #aaa;
|
||||
margin-left: 5px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
width: 30%;
|
||||
height: 100%;
|
||||
border-radius: 40px;
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#post {
|
||||
margin: 0 auto;
|
||||
margin-top: 30vh;
|
||||
margin-bottom: 20px;
|
||||
width: 50vw;
|
||||
|
||||
@media screen and (max-width: 1200px) {
|
||||
margin-top: 20vh;
|
||||
width: 94vw;
|
||||
}
|
||||
|
||||
header {
|
||||
padding-left: 20px;
|
||||
|
||||
#title {
|
||||
font-weight: 700;
|
||||
font-size: 3.3em;
|
||||
line-height: 58px;
|
||||
margin: 0;
|
||||
margin-bottom: 4px;
|
||||
|
||||
a:hover {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
|
||||
#description {
|
||||
color: #aaa;
|
||||
font-size: 1.13em;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
#details {
|
||||
margin-bottom: 24px;
|
||||
color: #aaa;
|
||||
|
||||
span {
|
||||
user-select: all;
|
||||
}
|
||||
|
||||
.separator {
|
||||
margin: 0 7px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#image {
|
||||
width: 100%;
|
||||
aspect-ratio: 16/9;
|
||||
position: relative;
|
||||
display: flex;
|
||||
|
||||
#front-image {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
aspect-ratio: 4/2;
|
||||
border-radius: 50px;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
#blurred-image {
|
||||
z-index: -1;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 50px;
|
||||
filter: invert(15%) saturate(200%) brightness(52%) blur(32px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Footer styles */
|
||||
#footer {
|
||||
line-height: 4px;
|
||||
opacity: 0.5;
|
||||
text-align: center;
|
||||
font-size: small;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
/* Content effects */
|
||||
a {
|
||||
color: aqua;
|
||||
text-decoration: none;
|
||||
border-color: transparent;
|
||||
transition: border-radius 50ms ease-out, border-color 50ms ease-out;
|
||||
border-radius: 40px;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
border-bottom: 1px solid aqua;
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
small {
|
||||
color: #ddd;
|
||||
}
|
||||
|
||||
.fading {
|
||||
background-image: linear-gradient(to right, rgb(150, 150, 150), transparent);
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
.whiteout {
|
||||
background: white;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
@property --spoiler-pa {
|
||||
syntax: "<percentage>";
|
||||
inherits: false;
|
||||
initial-value: 100%;
|
||||
}
|
||||
|
||||
@property --spoiler-pb {
|
||||
syntax: "<percentage>";
|
||||
inherits: false;
|
||||
initial-value: 100%;
|
||||
}
|
||||
|
||||
@property --spoiler-pc {
|
||||
syntax: "<color>";
|
||||
inherits: false;
|
||||
initial-value: rgb(150, 0, 0);
|
||||
}
|
||||
|
||||
.spoiler {
|
||||
color: transparent;
|
||||
border-radius: 5px;
|
||||
transition: --spoiler-pa 0.2s ease, --spoiler-pb 0.3s ease,
|
||||
--spoiler-pc 0.4s ease, color 0.2s ease;
|
||||
background: linear-gradient(
|
||||
to left,
|
||||
var(--spoiler-pc) var(--spoiler-pa),
|
||||
transparent var(--spoiler-pb)
|
||||
);
|
||||
|
||||
&:hover {
|
||||
color: unset;
|
||||
--spoiler-pa: 0%;
|
||||
--spoiler-pb: 0%;
|
||||
--spoiler-pc: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.image-desc {
|
||||
position: absolute;
|
||||
font-size: small;
|
||||
text-align: center;
|
||||
opacity: 0.3;
|
||||
left: 50%;
|
||||
transform: translate(-50%, calc(-40px - 1vw));
|
||||
}
|
||||
Loading…
Add table
Reference in a new issue