1
0
Fork 0
mirror of https://github.com/dilllxd/gitfolio.git synced 2024-08-14 22:28:09 +00:00

Horizontal ordering of Repos + Forks (#66)

* decent grid layout. some weird gutter issue tho

* added neg margin to align with headings. fix a elem width.

* quick fix for single-column error when screen is very wide
This commit is contained in:
Benjamin Liden 2019-05-29 23:31:18 -04:00 committed by imfunny
parent e48e55e593
commit 396817fad4
2 changed files with 41 additions and 6 deletions

View file

@ -272,11 +272,18 @@ body{
} }
.projects { .projects {
columns:2; margin-left: -15px; /* align section w/ heading above */
}
.projects a {
/* 30px is the gutter size in magic grid */
width: calc(49% - 30px); /* 49% avoids a weird single column on some wide screens */
display: flex;
text-decoration: none;
} }
.projects section { .projects section {
width:85%; width: 100%;
padding:2.5vh 5%; padding:2.5vh 5%;
display:inline-block; display:inline-block;
border-radius:5px; border-radius:5px;
@ -284,7 +291,6 @@ body{
border:1px solid rgb(0, 0, 0, 0.08); border:1px solid rgb(0, 0, 0, 0.08);
box-shadow:0px 0px 0px rgb(0, 0, 0, 0); box-shadow:0px 0px 0px rgb(0, 0, 0, 0);
transition:0.4s ease-in-out; transition:0.4s ease-in-out;
margin:2vh 0px;
transform:scale(1); transform:scale(1);
} }
@ -332,7 +338,6 @@ body{
} }
#blogs { #blogs {
columns:2;
} }
#blogs section { #blogs section {
@ -401,13 +406,15 @@ body{
margin:0px; margin:0px;
} }
.projects { .projects {
columns:1; margin-left: 0; /* remove neg margin to align w/ header */
}
.projects a {
width: 100%;
} }
.projects section { .projects section {
width:88%; width:88%;
} }
#blogs { #blogs {
columns:1;
} }
#blogs section { #blogs section {
width:98%; width:98%;

View file

@ -11,6 +11,7 @@
integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous"> integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.4.1.min.js" <script src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script> integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script src="https://unpkg.com/magic-grid/dist/magic-grid.min.js"></script>
<link rel="stylesheet" href="index.css"> <link rel="stylesheet" href="index.css">
</head> </head>
@ -85,6 +86,33 @@
}); });
} }
</script> </script>
<script>
const magicProjectsGrid = new MagicGrid({
container: '#work_section',
animate: false,
gutter: 30, // default gutter size
static: true,
useMin: false,
maxColumns: 2,
useTransform: true
});
const magicForksGrid = new MagicGrid({
container: '#forks_section',
animate: false,
gutter: 30, // default gutter size
static: true,
useMin: false,
maxColumns: 2,
useTransform: true
})
$('document').ready(() => {
magicProjectsGrid.listen();
magicForksGrid.listen();
});
</script>
</body> </body>
</html> </html>