layout: add zebra stripes

This commit is contained in:
He4eT 2024-05-17 18:36:10 +02:00
commit db2f6eb144
4 changed files with 31 additions and 0 deletions

View file

@ -89,3 +89,25 @@ header li:last-child::after {
footer { footer {
color: hsl(0, 0%, 0%, 0.6); color: hsl(0, 0%, 0%, 0.6);
} }
/* Stripes */
.stripesContainer {
box-sizing: content-box;
max-width: 45rem;
padding: 5% 5% 0;
}
.stripes {
height: 8vh;
background-image: linear-gradient(
135deg,
currentColor 33.33%,
transparent 33.33%,
transparent 50%,
currentColor 50%,
currentColor 83.33%,
transparent 83.33%,
transparent 100%);
background-size: 30.00px 30.00px;
}

View file

@ -14,6 +14,8 @@
<body> <body>
<script>0</script> <script>0</script>
<%- include('partials/stripes') %>
<header> <header>
<nav> <nav>
<ul> <ul>

View file

@ -5,6 +5,9 @@ css:
- index - index
--- ---
<%- include('partials/stripes') %>
<main> <main>
<nav> <nav>
<ul> <ul>

4
src/partials/stripes.ejs Normal file
View file

@ -0,0 +1,4 @@
<div class="stripesContainer">
<div class="stripes">
</div>
</div>