ktyl
/
ktyl.dev
1
0
Fork 0
Code Issues 18 Pull Requests 1 Packages Projects 1 Releases Wiki Activity

portfolio grid

This commit is contained in:
ktyl 2021-10-11 21:36:34 +01:00
parent 02944c2cd7
commit c3a7d4dcae
5 changed files with 66 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/inc_css/demos.css
View File

@ -2,7 +2,7 @@
opacity: 0.3; opacity: 0.3;
transition: opacity 0.3s; transition: opacity 0.3s;
max-width: 15vw; max-width: 15vw;
display: inline; display: inline-block;
} }
.demoTile:hover { .demoTile:hover {

46
src/inc_css/portfolio.css Normal file
View File

@ -0,0 +1,46 @@
.demoTile {
opacity: 0.7;
transition: opacity 0.3s;
max-width: 15vw;
display: inline;
}
.demoTile:hover {
opacity: 1.0;
}
.demoTiles {
position: absolute;
background-color:white;
left:27.5%;
top: var(--title-height);
margin-top:40px;
}
.page.portfolio {
padding-top: 0;
width: 70%;
right: 0;
margin:0;
padding:0;
padding-top: 5vh;
transform: translate(-35%,0);
}
.wrapper {
width: 100%;
background-color: var(--background);
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
.wrapper img {
width: 100%;
height: 100%;
object-fit: fill;
transition: transform 0.1s ease-in;
}
.wrapper img:hover {
transform: scale(1.16);
}

5
src/root/index.html
View File

@ -5,13 +5,14 @@
<body> <body>
<title>ktyl ~ home</title> <title>ktyl ~ home</title>
<!-- actually a headline -->
<div class="title"> <div class="title">
<h1 class="fsText">ktyl@website</h1> <h1 class="fsText">ktyl@website</h1>
</div> </div>
#include sidebar.html #include sidebar.html
<div class="page"> <div class="page">
<h1>cats stuff</h1> <h1>cats stuff</h1>
<p>hi, im cat and i do things and stuff. eventually i want to make this an actual, useful landing page for people interested in me and what i do. unfortunately, im very scatterbrained and not very organised! as a result, this is just one of myriad ongoing projects that i constantly try to chip away at, to varying degrees of success.</p> <p>hi, im cat and i do things and stuff. eventually i want to make this an actual, useful landing page for people interested in me and what i do. unfortunately, im very scatterbrained and not very organised! as a result, this is just one of myriad ongoing projects that i constantly try to chip away at, to varying degrees of success.</p>

15
src/root/portfolio.html
View File

@ -10,11 +10,18 @@
#include sidebar.html #include sidebar.html
<div class="demoTiles"> <div class="page portfolio">
<img class="demoTile" src="oglc.png">
<img class="demoTile" src="oglc.png"> <div class="wrapper">
<img class="demoTile" src="oglc.png"> <img src="cloudsteroid.png"></img>
<img src="oglc.png"></img>
<img src="ecollapse.png"></img>
</div> </div>
</div>
</div>
#include planets.html
</body> </body>
</html> </html>

10
src/root/styles.css
View File

@ -86,7 +86,7 @@ a.fsText:hover {
top:var(--title-height); top:var(--title-height);
margin-top: 40px; margin-top: 40px;
padding: 10px 0 50px; padding: 10px 0 50px;
background-color: var(--foreground-inactive); /*background-color: var(--foreground-inactive);*/
transform: translate(-50%, 0); transform: translate(-50%, 0);
} }
@ -94,12 +94,12 @@ a.fsText:hover {
.page p { .page p {
margin: 0 40px; margin: 0 40px;
padding-top: 20px; padding-top: 20px;
color: var(--background); color: var(--foreground);
opacity: 1.0; opacity: 1.0;
} }
.page h1 { .page h1 {
color: var(--background); color: var(--foreground-inactive);
padding-left: 60px; padding-left: 60px;
padding-top: 10px; padding-top: 10px;
@ -111,7 +111,7 @@ a.fsText:hover {
position: absolute; position: absolute;
left: 15px; left: 15px;
width: max(11vmax, 180px); width: max(11vmax, 180px);
top: max(var(--title-height), 25%); top: max(var(--title-height), 15%);
bottom:0; bottom:0;
background-color: var(--background); background-color: var(--background);
@ -162,5 +162,5 @@ a.fsText:hover {
transition: color 0.3s; transition: color 0.3s;
} }
#include demos.css #include portfolio.css
#include planets.css #include planets.css