zk_exe/biblioteca-de-contos
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

layout posts teste.

Browse Source
This commit is contained in:
zk_exe
2025-07-27 18:55:14 -03:00
parent 0bf406aba8
commit 897e58b6ce
3 changed files with 147 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
css/base.css
View File

@@ -7,6 +7,9 @@
@import url("https://fonts.googleapis.com/css2?family=Public+Sans:ital,wght@0,100..900;1,100..900&display=swap");
/* font-family: "Public Sans", sans-serif; */
@import url("https://fonts.googleapis.com/css2?family=Special+Gothic+Expanded+One&display=swap");
/* font-family: "Special Gothic Expanded One", sans-serif; */
:root {
--font: #c4e5f2;
--bg-dark: #010d26;

55
css/style.css
View File

@@ -87,3 +87,58 @@
}
}
}
#posts {
background-color: #0000007a;
padding: 4dvw 0 4dvw 0;
margin: 4dvw 0 0 0;
width: 100%;
display: flex;
justify-content: center;
ul {
width: calc(100% - 5dvw);
display: flex;
flex-wrap: wrap;
gap: 1.5vw;
a {
width: calc(33.33% - 1dvw - 2px);
height: 30dvh;
overflow: hidden;
border-radius: 1dvw;
li {
overflow: hidden;
width: 100%;
background: #0000007a;
display: flex;
img {
width: 25dvh;
height: 30dvh;
object-fit: cover;
}
hgroup {
width: calc(100% - 25dvh);
label {
display: block;
width: 100%;
text-align: center;
font-size: 1.5em;
font-family: "Special Gothic Expanded One", sans-serif;
color: var(--btn);
}
h3 {
font-family: Arial;
display: block;
width: 100%;
text-align: right;
}
p {
font-family: Arial;
white-space: pre-wrap;
}
}
}
}
}
}

89
index.html
View File

@@ -39,5 +39,94 @@
</li>
</ul>
</nav>
<div id="posts">
<ul>
<a href="a">
<li>
<img src="assets/invalid-file.png" id="capa" />
<hgroup>
<label>Titulo da Historia</label>
<h3>27/07/2025</h3>
<p>
bla bla bla bla bla bla bla bla bla bla bla bla
blabla bla bla bla bla bla bla bla bla bla bla
bla blabla bla bla bla bla bla bla bla bla bla
bla bla blabla bla bla bla bla bla bla bla bla
bla bla bla blabla bla bla bla bla bla bla bla
bla bla bla bla bla
</p>
</hgroup>
</li>
</a>
<a href="a">
<li>
<img src="assets/invalid-file.png" id="capa" />
<hgroup>
<label>Titulo da Historia</label>
<h3>27/07/2025</h3>
<p>
bla bla bla bla bla bla bla bla bla bla bla bla
blabla bla bla bla bla bla bla bla bla bla bla
bla blabla bla bla bla bla bla bla bla bla bla
bla bla blabla bla bla bla bla bla bla bla bla
bla bla bla blabla bla bla bla bla bla bla bla
bla bla bla bla bla
</p>
</hgroup>
</li>
</a>
<a href="a">
<li>
<img src="assets/invalid-file.png" id="capa" />
<hgroup>
<label>Titulo da Historia</label>
<h3>27/07/2025</h3>
<p>
bla bla bla bla bla bla bla bla bla bla bla bla
blabla bla bla bla bla bla bla bla bla bla bla
bla blabla bla bla bla bla bla bla bla bla bla
bla bla blabla bla bla bla bla bla bla bla bla
bla bla bla blabla bla bla bla bla bla bla bla
bla bla bla bla bla
</p>
</hgroup>
</li>
</a>
<a href="a">
<li>
<img src="assets/invalid-file.png" id="capa" />
<hgroup>
<label>Titulo da Historia</label>
<h3>27/07/2025</h3>
<p>
bla bla bla bla bla bla bla bla bla bla bla bla
blabla bla bla bla bla bla bla bla bla bla bla
bla blabla bla bla bla bla bla bla bla bla bla
bla bla blabla bla bla bla bla bla bla bla bla
bla bla bla blabla bla bla bla bla bla bla bla
bla bla bla bla bla
</p>
</hgroup>
</li>
</a>
<a href="a">
<li>
<img src="assets/invalid-file.png" id="capa" />
<hgroup>
<label>Titulo da Historia</label>
<h3>27/07/2025</h3>
<p>
bla bla bla bla bla bla bla bla bla bla bla bla
blabla bla bla bla bla bla bla bla bla bla bla
bla blabla bla bla bla bla bla bla bla bla bla
bla bla blabla bla bla bla bla bla bla bla bla
bla bla bla blabla bla bla bla bla bla bla bla
bla bla bla bla bla
</p>
</hgroup>
</li>
</a>
</ul>
</div>
</body>
</html>