Milliways/www.hip-berlin.de
4
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

resources grid on mobile

Browse source
This commit is contained in:
Leif Niemczik 2022-11-23 23:55:59 +01:00
parent 36724512ef
commit 9027dbd45a
2 changed files with 13 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
src/layouts/Layout.astro
View file

@ -17,14 +17,9 @@ const permaTitle = 'Hacking in Parallel 2022 //// Berlin'
</head>
<body>
<header class='site-header'>
{
title && (
<a href='/'>
<img class='logo' src='/design-resources/logo/slashes.svg' />
</a>
)
}
{!title && <div class='logo-placeholder' />}
<a href='/' class={title ? '' : 'invisible'}>
<img class='logo' src='/design-resources/logo/slashes.svg' />
</a>
<input type='checkbox' id='nav-toggle' class='hidden' />
<nav>
<label for='nav-toggle' class='mobile-only'>Close</label>
@ -154,9 +149,6 @@ const permaTitle = 'Hacking in Parallel 2022 //// Berlin'
height: 100%;
margin: auto;
margin-left: 0.75rem;
&-placeholder {
width: 6.4rem;
}
}
nav {
// mobile menu styles
@ -317,6 +309,10 @@ const permaTitle = 'Hacking in Parallel 2022 //// Berlin'
display: inherit;
}
}
.invisible {
opacity: 0;
pointer-events: none;
}
</style>
</body>
</html>

8
src/pages/resources/index.astro
View file

@ -229,12 +229,16 @@ import Layout from '../../layouts/Layout.astro'
<style lang='scss'>
.grid-2col {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 2rem;
@media screen and (min-width: 768px) {
grid-template-columns: repeat(2, 1fr);
}
}
.grid-3col {
display: grid;
grid-template-columns: repeat(3, 1fr);
@media screen and (min-width: 768px) {
grid-template-columns: repeat(3, 1fr);
}
gap: 2rem;
}
.thumbnail {