he4et/xecut-site
1
0
Fork 0
mirror of https://github.com/He4eT/xecut-site.git synced 2026-05-04 17:37:26 +00:00
Code Issues Projects Releases Packages Wiki Activity

default layout: extract parts

Browse source
This commit is contained in:
He4eT 2025-04-19 04:10:25 +02:00
commit 4572cd715d
7 changed files with 124 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/_assets/css/layout.css → src/_assets/css/layouts/default.css
View file

@ -30,4 +30,4 @@
}
}
/* @see ./menu.css */
/* @see ../parts/menu.css */

92
src/_assets/css/parts/hero.css Normal file
View file

@ -0,0 +1,92 @@
.hero {
position: relative;
display: flex;
flex-direction: row;
align-items: flex-start;
padding: calc(0.5 * var(--step));
--hero-border: calc(0.5 * var(--step)) solid var(--color-inactive);
font-family: Xecut;
font-size: calc(3 * var(--step));
}
@media (max-width: 500px) {
.hero {
align-items: normal;
flex-direction: row-reverse;
font-size: calc(2 * var(--step));
}
}
.hero:before,
.hero:after {
content: '';
position: absolute;
right: 0;
z-index: -1;
width: 90%;
height: calc(1 * var(--step));
border-right: var(--hero-border);
border-left: var(--hero-border);
}
.hero:before {
top: calc(0.5 * var(--step));
border-top: var(--hero-border);
}
.hero:after {
bottom: calc(1 * var(--step));
border-bottom: var(--hero-border);
}
.tags {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
}
.tag {
padding: calc(0.25 * var(--step)) calc(1.5 * var(--step));
border: var(--hero-border);
outline: var(--hero-border);
background: var(--color-bg);
}
@media (max-width: 500px) {
.tag {
flex-grow: 1;
}
}
.tower_cell {
box-sizing: border-box;
flex-shrink: 0;
display: flex;
align-items: center;
border: var(--hero-border);
outline: var(--hero-border);
background: var(--color-bg);
}
@media (max-width: 500px) {
.tower_cell {
align-items: flex-end;
}
}
.tower {
width: calc(18 * var(--step));
margin: calc(4 * var(--step));
}
@media (prefers-color-scheme: dark) {
.tower {
filter: invert(1);
}
}
@media (max-width: 500px) {
.tower {
max-width: calc(10 * var(--step));
margin: calc(1 * var(--step));
}
}

7
src/_assets/css/menu.css → src/_assets/css/parts/menu.css
View file

@ -176,10 +176,3 @@ header.menu .nav-langs .lang-separator {
header.menu .nav-langs .lang-separator:first-child {
display: none;
}
/* Hidden Logo */
.desktop-logo {
display: none;
margin-block-start: auto;
}

7
src/_includes/layouts/base.njk
View file

@ -17,12 +17,12 @@
<link rel="stylesheet" href="/_assets/css/fonts.css">
<link rel="stylesheet" href="/_assets/css/vendor.css">
<link rel="stylesheet" href="/_assets/css/variables.css">
<link rel="stylesheet" href="/_assets/css/base.css">
<link rel="stylesheet" href="/_assets/css/layouts/default.css">
<link rel="stylesheet" href="/_assets/css/parts/menu.css">
<link rel="stylesheet" href="/_assets/css/layout.css">
<link rel="stylesheet" href="/_assets/css/menu.css">
{% block extra_css %}{% endblock %}
</head>
<body>
<div class="default-layout">
@ -31,5 +31,6 @@
{{ content | safe }}
</main>
</div>
{% block extra_js %}{% endblock %}
</body>
</html>

9
src/_includes/layouts/index.njk Normal file
View file

@ -0,0 +1,9 @@
---
indexPage: true
---
{% extends "./base.njk" %}
{% block extra_css %}
<link rel="stylesheet" href="/_assets/css/parts/hero.css">
{% endblock %}

18
src/_includes/parts/hero.njk Normal file
View file

@ -0,0 +1,18 @@
<div class="hero">
<div class="tower_cell">
<img class="tower" src="/_assets/img/tower/tower_logo.svg">
</div>
<div class="tags">
<div class="tag">DIY</div>
<div class="tag">Engineering</div>
<div class="tag">Embedded</div>
<div class="tag">FPGA</div>
<div class="tag">IoT</div>
<div class="tag">AI/ML</div>
<div class="tag">LLM</div>
<div class="tag">Wireless</div>
<div class="tag">Reverse Engineering</div>
<div class="tag">Information Security</div>
<div class="tag">Open-Source</div>
</div>
</div>

3
src/_includes/parts/menu.njk
View file

@ -56,9 +56,6 @@
{%- endfor %}
</ul>
</nav>
<a href="/" class="desktop-logo" aria-hidden>
<img src="/_assets/img/common/tower.svg">
</a>
</header>
<script>