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

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

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