basic grid layout for project page with featured rows and non-featured 2-column grid; began converting images to image links

small-nav
chimchooree 4 years ago
parent 406ce9d727
commit f370e2a7ec

@ -111,7 +111,7 @@ ul { list-style-position: inside; }
color: #CB9CF2; color: #CB9CF2;
} }
.nav-link a:hover { .nav-link a:hover {
color: #F9B3D7;auto color: #F9B3D7;
} }
.nav-link a:active { .nav-link a:active {
color: #f463ad; color: #f463ad;
@ -135,6 +135,11 @@ ul { list-style-position: inside; }
.project-header { .project-header {
grid-area: 1 / 1 / 2 / 3; grid-area: 1 / 1 / 2 / 3;
color: #F9B3D7;
font-size: 15px;
margin-top: 25px;
padding-top: 10px;
padding-left: 10px;
} }
.featured { .featured {
@ -144,13 +149,58 @@ ul { list-style-position: inside; }
.featured-box { .featured-box {
} }
.featured-desc {
color: #F9B3D7;
font-size: 25px;
text-align: right;
margin-right: 10px;
}
.featured-desc a:link {
color: #66C7F4;
}
.featured-desc a:visited {
color: #CB9CF2;
}
.featured-desc a:hover {
color: #F9B3D7;
}
.featured-desc a:active {
color: #f463ad;
}
.more { .more {
grid-area: 3 / 1 / 4 / 3; grid-area: 3 / 1 / 4 / 3;
width: 800px;
display: grid;
grid-template-columns: auto auto;
} }
.more-box { .more-box {
} }
.more-desc {
color: #F9B3D7;
font-size: 18px;
text-align: center;
margin-right: 10px;
}
.more-desc a:link {
color: #66C7F4;
}
.more-desc a:visited {
color: #CB9CF2;
}
.more-desc a:hover {
color: #F9B3D7;
}
.more-desc a:active {
color: #f463ad;
}
.footer-row { .footer-row {
grid-area: 4 / 1 / 5 / 4; grid-area: 4 / 1 / 5 / 4;
background-color: #080410; background-color: #080410;

Binary file not shown.

Before

Width:  |  Height:  |  Size: 56 KiB

After

Width:  |  Height:  |  Size: 20 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 56 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 13 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 114 KiB

After

Width:  |  Height:  |  Size: 74 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 114 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 24 KiB

@ -3,42 +3,41 @@
<div class="content"> <div class="content">
<div class="project-header"> <div class="project-header">
projects <h1>chimchooree projects </h1>
</div> </div>
<div class="featured"> <div class="featured">
<div class="featured-box"> <div class="featured-box">
<img src="/static/img/ent/blessfrey.png" alt="(image: blessfrey screenshot)"><br> <a href="diary/entries/200806">
<br> <img src="/static/img/ent/blessfrey.png" alt="(image: blessfrey screenshot)">
<a href="diary/entries/200806">blessfrey - action RPG in Godot Engine</a><br> </a><br>
<br> <div class="featured-desc"><a href="diary/entries/200806"><b>blessfrey</b> - action RPG in Godot Engine</a><br></div>
</div>
<div class="featured-box">
<img src="/static/img/ent/CatStore_small.png" alt="(image: CatStore screenshot)"> <br>
<br>
<a href="https://gitlab.com/chimchooree/cat-store">Cat Store - text-based cat show + breeding sim in Java (IntelliJ)</a> <br>
<br> <br>
</div> </div>
</div> </div>
<center>
<div class="more"> <div class="more">
<div class="more-box"> <div class="more-box">
<img src="/static/img/ent/SmallThingThatMakesThings.png" alt="(image: Small Thing That Makes Things keyart)" width="400" height="179"> <br> <img src="/static/img/ent/CatStore_small.png" alt="(image: CatStore screenshot)"> <br>
<br> <div class="more-desc"><a href="https://gitlab.com/chimchooree/cat-store"><b>Cat Store</b> - text-based cat show + breeding sim in Java (IntelliJ)</a> <br></div>
<a href="diary/entries/200903">Small Thing That Makes Things - game jam game in Godot Engine</a> <br>
<br> <br>
</div> </div>
<div class="more-box"> <div class="more-box">
<img src="/static/img/ent/pretendOS_catchat.jpeg" alt="(image: pretendOS screenshot)" width="400" height="225"> <br> <img src="/static/img/ent/SmallThingThatMakesThings_small.png" alt="(image: Small Thing That Makes Things keyart)"> <br>
<div class="more-desc"><a href="diary/entries/200903"><b>Small Thing That Makes Things</b> - game jam game in Godot Engine</a> <br></div>
<br> <br>
<a href="diary/entries/201126">pretendOS - pretend desktop in Godot Engine</a> <br> </div>
<div class="more-box">
<img src="/static/img/ent/pretendOS_small.png" alt="(image: pretendOS screenshot)"> <br>
<div class="more-desc"><a href="diary/entries/201126"><b>pretendOS</b> - pretend desktop in Godot Engine</a> <br></div>
<br> <br>
</div> </div>
<div class="more-box"> <div class="more-box">
<img src="/static/img/ent/gitlab_publicprojects.png" alt="(image: GitLab page screenshot)"> <br> <img src="/static/img/ent/gitlab_publicprojects.png" alt="(image: GitLab page screenshot)"> <br>
<br> <div class="more-desc"><a href="https://gitlab.com/users/chimchooree/projects"><b>public GitLab repo</b></a> <br></div>
<a href="https://gitlab.com/users/chimchooree/projects">public GitLab repo</a> <br>
<br> <br>
</div> </div>
</div> </div>
</center>
</div> </div>

Loading…
Cancel
Save