polsevev/polsevev.dev
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

improve mobile experience

Browse source
This commit is contained in:
Rolf Martin Glomsrud 2024-08-23 20:36:08 +02:00
parent 4fbb7f0321
commit 8b72fb085f
6 changed files with 89 additions and 195 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
src/components/Footer.astro
View file

@ -19,8 +19,7 @@ const today = new Date();
<style> <style>
footer { footer {
padding: 2em 1em 6em 1em; padding: 1em 1em 1em 1em;
/* background: linear-gradient(var(--gray-gradient)) no-repeat;'*/
color: white; color: white;
background-color: rgb(198, 60, 81); background-color: rgb(198, 60, 81);
text-align: center; text-align: center;
@ -29,13 +28,11 @@ const today = new Date();
margin-top: 2rem; margin-top: 2rem;
margin-bottom: 2rem; margin-bottom: 2rem;
border-radius: 10px; border-radius: 10px;
width: 100%; width: 90%;
height: 0em;
} }
.social-links { .social-links {
display: flex; display: flex;
justify-content: center; justify-content: center;
gap: 1em;
} }
.social-links a { .social-links a {
text-decoration: none; text-decoration: none;

17
src/components/Header.astro
View file

@ -10,7 +10,6 @@ import { SITE_TITLE } from '../consts';
<HeaderLink href="/">~/</HeaderLink> <HeaderLink href="/">~/</HeaderLink>
<HeaderLink href="/blog">~/blog</HeaderLink> <HeaderLink href="/blog">~/blog</HeaderLink>
<HeaderLink href="/about">~/about</HeaderLink> <HeaderLink href="/about">~/about</HeaderLink>
<HeaderLink href="/homelab">~/homelab</HeaderLink>
</div> </div>
<div class="social-links"> <div class="social-links">
<a href="https://github.com/polsevev" target="_blank"> <a href="https://github.com/polsevev" target="_blank">
@ -27,15 +26,16 @@ import { SITE_TITLE } from '../consts';
</header> </header>
<style> <style>
header { header {
margin: 0; padding: 0.5em 0.5em 0.5em 0.5em;
padding: 0 1em;
background-color: rgb(198, 60, 81); background-color: rgb(198, 60, 81);
box-shadow: 0 2px 8px rgba(var(--black), 5%); box-shadow: 0 2px 8px rgba(var(--black), 5%);
border-radius: 10px; border-radius: 10px;
margin-top: 0.5rem; margin-left: auto;
margin-bottom: 0.5rem; margin-right: auto;
margin-top: 2rem;
margin-bottom: 2rem;
color: white; color: white;
width: 100%; width: 90%;
} }
h2 { h2 {
margin: 0; margin: 0;
@ -53,7 +53,7 @@ import { SITE_TITLE } from '../consts';
justify-content: space-between; justify-content: space-between;
} }
nav a { nav a {
padding: 1em 0.5em; padding: 0.5em 0.5em;
color: var(--black); color: var(--black);
border-bottom: 4px solid transparent; border-bottom: 4px solid transparent;
text-decoration: none; text-decoration: none;
@ -70,5 +70,8 @@ import { SITE_TITLE } from '../consts';
.social-links { .social-links {
display: none; display: none;
} }
nav a {
padding: 0.2em 0.2em;
}
} }
</style> </style>

20
src/pages/blog/index.astro
View file

@ -9,6 +9,9 @@ import FormattedDate from '../../components/FormattedDate.astro';
const posts = (await getCollection('blog')).sort( const posts = (await getCollection('blog')).sort(
(a, b) => a.data.pubDate.valueOf() - b.data.pubDate.valueOf() (a, b) => a.data.pubDate.valueOf() - b.data.pubDate.valueOf()
); );
const homelab_posts = (await getCollection('homelab')).sort(
(a, b) => a.data.pubDate.valueOf() - b.data.pubDate.valueOf()
);
--- ---
<!doctype html> <!doctype html>
@ -54,12 +57,12 @@ const posts = (await getCollection('blog')).sort(
} }
.title { .title {
margin: 0; margin: 0;
color: rgb(var(--black)); color: rgb(0,255,159);
line-height: 1; line-height: 1;
} }
.date { .date {
margin: 0; margin: 0;
color: rgb(var(--gray)); color: rgb(white);
} }
ul li a:hover h4, ul li a:hover h4,
ul li a:hover .date { ul li a:hover .date {
@ -98,9 +101,6 @@ const posts = (await getCollection('blog')).sort(
I will probably post mostly random stuff or opinion pieces. What it will be about i have no idea. I will probably post mostly random stuff or opinion pieces. What it will be about i have no idea.
So stay tuned! So stay tuned!
</p> </p>
<a href="/homelab">
<p>Click here to read posts about my homelab!</p>
</a>
</blogheader> </blogheader>
<section> <section>
<ul> <ul>
@ -116,6 +116,16 @@ const posts = (await getCollection('blog')).sort(
</li> </li>
)) ))
} }
{ homelab_posts.map((post) => (
<li>
<a href={`/homelab/${post.slug}/`}>
<h4 class="title">{post.data.title}</h4>
<p class="date">
<FormattedDate date={post.data.pubDate} />
</p>
</a>
</li>
))}
</ul> </ul>
</section> </section>
</main> </main>

106
src/pages/homelab/index.astro
View file

@ -8,9 +8,7 @@ import { SITE_TITLE, SITE_DESCRIPTION } from "../../consts";
const posts = (await getCollection('homelab')).sort(
(a, b) => a.data.pubDate.valueOf() - b.data.pubDate.valueOf()
);
const servers = (await getCollection('servers')); const servers = (await getCollection('servers'));
--- ---
@ -20,31 +18,9 @@ const servers = (await getCollection('servers'));
<BaseHead title={SITE_TITLE} description={SITE_DESCRIPTION} /> <BaseHead title={SITE_TITLE} description={SITE_DESCRIPTION} />
<style> <style>
main { main {
width: 100%; width: 90%;
}
ul {
display: flex;
flex-wrap: wrap;
gap: 2rem;
list-style-type: none;
margin: 0;
padding: 0;
}
ul li {
width: 100%;
}
ul li * {
text-decoration: none;
transition: 0.2s ease;
} }
ul li img {
margin-bottom: 0.5rem;
border-radius: 12px;
}
ul li a {
display: block;
}
.title { .title {
margin: 0; margin: 0;
color: rgb(0,255,159); color: rgb(0,255,159);
@ -54,51 +30,17 @@ const servers = (await getCollection('servers'));
margin: 0; margin: 0;
color: rgb(var(--gray)); color: rgb(var(--gray));
} }
ul li a:hover h4,
ul li a:hover .date {
color: rgb(var(--accent));
}
ul a:hover img {
box-shadow: var(--box-shadow);
}
@media (max-width: 720px) {
ul {
gap: 0.5em;
}
ul li {
width: 100%;
text-align: center;
}
a {
margin-top: 0.5em;
margin-bottom: 0.5em;
} }
site_header{ site_header{
text-align: center; text-align: center;
} }
left{
width: 75%;
text-align: center;
}
right{
width: 25%;
text-align: center;
}
#column{
float:left;
}
box{ box{
display: flex; text-align: center;
}
box left,right{
border-color: white;
border-width: 0.2em;
border-style: solid;
border-radius: 1em;
margin: 0.2em;
padding: 0.5em;
} }
</style> </style>
@ -107,11 +49,9 @@ const servers = (await getCollection('servers'));
<Header /> <Header />
<main> <main>
<site_header> <site_header>
<h2>All bout the homelab!</h2> <h2>What is in my homelab now?</h2>
</site_header> </site_header>
<box> <box>
<left class="column">
<h3>What is in my homelab now?</h3>
<p> <p>
So my current homelab has gotten quite extensive, which honestly is a pain because electricity is expensive as hell. So my current homelab has gotten quite extensive, which honestly is a pain because electricity is expensive as hell.
</p> </p>
@ -120,43 +60,15 @@ const servers = (await getCollection('servers'));
let me explain each server, and what it is currently being used for. let me explain each server, and what it is currently being used for.
</p> </p>
<p>As you can probably tell, i use greek mythology for the naming scheme of physical machines :P</p> <p>As you can probably tell, i use greek mythology for the naming scheme of physical machines :P</p>
<section> <box>
<ul>
{ {
servers.map((s) => ( servers.map((s) => (
<li>
<a href={`/homelab/servers/${s.slug}/`}> <a href={`/homelab/servers/${s.slug}/`}>
<h5 class="title">🖥️ {s.data.title}</h5> <h5 class="title">🖥️ {s.data.title}</h5>
</a> </a>
</li>
)) ))
} }
</ul> </box>
</section>
</left>
<right class="column">
<h3>Homelab blog:</h3>
<section>
<ul>
{
posts.length == 0 ? <p>Wow, such empty</p> :
posts.sort((a,b) => {
return b.data.pubDate.getTime() - a.data.pubDate.getTime()
}).map((post) => (
<li>
<a href={`/homelab/${post.slug}/`}>
<h5 class="title">{post.data.title}</h4>
<p class="date">
<FormattedDate date={post.data.pubDate} />
</p>
</a>
</li>
))
}
</ul>
</section>
</right>
</box> </box>
</main> </main>

53
src/pages/index.astro
View file

@ -1,8 +1,8 @@
--- ---
import BaseHead from '../components/BaseHead.astro'; import BaseHead from "../components/BaseHead.astro";
import Header from '../components/Header.astro'; import Header from "../components/Header.astro";
import Footer from '../components/Footer.astro'; import Footer from "../components/Footer.astro";
import { SITE_TITLE, SITE_DESCRIPTION } from '../consts'; import { SITE_TITLE, SITE_DESCRIPTION } from "../consts";
--- ---
<!doctype html> <!doctype html>
@ -14,62 +14,35 @@ import { SITE_TITLE, SITE_DESCRIPTION } from '../consts';
text-align: center; text-align: center;
} }
main { main {
width: 75%;
} }
main left,right{ main left,
right {
margin: 0.2em; margin: 0.2em;
padding: 0.5em; padding: 0.5em;
} }
left { left {
width: 50%; max-width: 600px;
text-align: center; text-align: center;
} }
right { right {
width: 50%; max-width: 400px;
text-align: center; text-align: center;
}
#column{
float:left;
} }
box { box {
display: flex; display: flex;
} }
box left,right{
border-color: white;
border-width: 0.2em;
border-style: solid;
border-radius: 1em;
margin: 0.2em;
padding: 0.5em;
}
</style> </style>
</head> </head>
<body> <body>
<Header /> <Header />
<main> <main>
<h1>Yo! Welcome to my humble site</h1> <h1>Rolf Glomsrud</h1>
<box>
<left class="column">
<p>
This site is a continual WIP, and this is just an alpha of what i hope it will become :)
</p>
<p>
Go checkout the description of my homelab!
</p>
</left>
<right class="column">
<img src="images/self.png" /> <img src="images/self.png" />
</right > <p>
</box> This site is a continual WIP, and this is just an alpha of what i hope
it will become :)
</p>
</main> </main>
<Footer /> <Footer />
</body> </body>

15
src/styles/global.css
View file

@ -31,20 +31,18 @@
font-display: swap; font-display: swap;
} }
footer{
height: 4em;
}
body { body {
font-family: 'Atkinson', sans-serif; font-family: 'Atkinson', sans-serif;
margin: 0; margin: 0;
padding: 0; padding: 0;
min-height: 100vh;
height: 100%; height: 100%;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
text-align: left; text-align: left;
background: repeating-linear-gradient(to bottom, #522258 0%, #8c3061, #522258 100%); background: repeating-linear-gradient(to bottom, #522258 0%, #8c3061, #522258 100%);
display: flex;
flex-direction: column;
word-wrap: break-word; word-wrap: break-word;
overflow-wrap: break-word; overflow-wrap: break-word;
color: cyan; color: cyan;
@ -53,7 +51,7 @@ body {
} }
@media screen and (min-width:600px) { @media screen and (min-width:600px) {
body { body {
width: 80%; width: 95%;
} }
} }
@media screen and (max-width:600px){ @media screen and (max-width:600px){
@ -62,12 +60,13 @@ body {
} }
} }
main { main {
flex: 1;
width: 720px; width: 720px;
max-width: calc(100% - 2em); max-width: calc(100% - 2em);
margin: auto; margin: auto;
min-height: 100%; min-height: 100%;
padding: 3em 1em; padding: 1em 1em;
margin-bottom: -4em; margin-bottom: -2em;
} }
h1, h1,
h2, h2,