improve mobile experience
This commit is contained in:
parent
4fbb7f0321
commit
8b72fb085f
6 changed files with 89 additions and 195 deletions
|
|
@ -19,8 +19,7 @@ const today = new Date();
|
|||
|
||||
<style>
|
||||
footer {
|
||||
padding: 2em 1em 6em 1em;
|
||||
/* background: linear-gradient(var(--gray-gradient)) no-repeat;'*/
|
||||
padding: 1em 1em 1em 1em;
|
||||
color: white;
|
||||
background-color: rgb(198, 60, 81);
|
||||
text-align: center;
|
||||
|
|
@ -29,13 +28,11 @@ const today = new Date();
|
|||
margin-top: 2rem;
|
||||
margin-bottom: 2rem;
|
||||
border-radius: 10px;
|
||||
width: 100%;
|
||||
height: 0em;
|
||||
width: 90%;
|
||||
}
|
||||
.social-links {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 1em;
|
||||
}
|
||||
.social-links a {
|
||||
text-decoration: none;
|
||||
|
|
|
|||
|
|
@ -10,7 +10,6 @@ import { SITE_TITLE } from '../consts';
|
|||
<HeaderLink href="/">~/</HeaderLink>
|
||||
<HeaderLink href="/blog">~/blog</HeaderLink>
|
||||
<HeaderLink href="/about">~/about</HeaderLink>
|
||||
<HeaderLink href="/homelab">~/homelab</HeaderLink>
|
||||
</div>
|
||||
<div class="social-links">
|
||||
<a href="https://github.com/polsevev" target="_blank">
|
||||
|
|
@ -27,15 +26,16 @@ import { SITE_TITLE } from '../consts';
|
|||
</header>
|
||||
<style>
|
||||
header {
|
||||
margin: 0;
|
||||
padding: 0 1em;
|
||||
padding: 0.5em 0.5em 0.5em 0.5em;
|
||||
background-color: rgb(198, 60, 81);
|
||||
box-shadow: 0 2px 8px rgba(var(--black), 5%);
|
||||
border-radius: 10px;
|
||||
margin-top: 0.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
margin-top: 2rem;
|
||||
margin-bottom: 2rem;
|
||||
color: white;
|
||||
width: 100%;
|
||||
width: 90%;
|
||||
}
|
||||
h2 {
|
||||
margin: 0;
|
||||
|
|
@ -53,7 +53,7 @@ import { SITE_TITLE } from '../consts';
|
|||
justify-content: space-between;
|
||||
}
|
||||
nav a {
|
||||
padding: 1em 0.5em;
|
||||
padding: 0.5em 0.5em;
|
||||
color: var(--black);
|
||||
border-bottom: 4px solid transparent;
|
||||
text-decoration: none;
|
||||
|
|
@ -70,5 +70,8 @@ import { SITE_TITLE } from '../consts';
|
|||
.social-links {
|
||||
display: none;
|
||||
}
|
||||
nav a {
|
||||
padding: 0.2em 0.2em;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -9,6 +9,9 @@ import FormattedDate from '../../components/FormattedDate.astro';
|
|||
const posts = (await getCollection('blog')).sort(
|
||||
(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>
|
||||
|
|
@ -54,12 +57,12 @@ const posts = (await getCollection('blog')).sort(
|
|||
}
|
||||
.title {
|
||||
margin: 0;
|
||||
color: rgb(var(--black));
|
||||
color: rgb(0,255,159);
|
||||
line-height: 1;
|
||||
}
|
||||
.date {
|
||||
margin: 0;
|
||||
color: rgb(var(--gray));
|
||||
color: rgb(white);
|
||||
}
|
||||
ul li a:hover h4,
|
||||
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.
|
||||
So stay tuned!
|
||||
</p>
|
||||
<a href="/homelab">
|
||||
<p>Click here to read posts about my homelab!</p>
|
||||
</a>
|
||||
</blogheader>
|
||||
<section>
|
||||
<ul>
|
||||
|
|
@ -116,6 +116,16 @@ const posts = (await getCollection('blog')).sort(
|
|||
</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>
|
||||
</section>
|
||||
</main>
|
||||
|
|
|
|||
|
|
@ -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'));
|
||||
---
|
||||
|
||||
|
|
@ -20,31 +18,9 @@ const servers = (await getCollection('servers'));
|
|||
<BaseHead title={SITE_TITLE} description={SITE_DESCRIPTION} />
|
||||
<style>
|
||||
main {
|
||||
width: 100%;
|
||||
}
|
||||
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;
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
.title {
|
||||
margin: 0;
|
||||
color: rgb(0,255,159);
|
||||
|
|
@ -54,51 +30,17 @@ const servers = (await getCollection('servers'));
|
|||
margin: 0;
|
||||
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{
|
||||
text-align: center;
|
||||
}
|
||||
left{
|
||||
width: 75%;
|
||||
text-align: center;
|
||||
|
||||
|
||||
}
|
||||
right{
|
||||
width: 25%;
|
||||
text-align: center;
|
||||
|
||||
}
|
||||
|
||||
#column{
|
||||
float:left;
|
||||
}
|
||||
box{
|
||||
display: flex;
|
||||
}
|
||||
box left,right{
|
||||
border-color: white;
|
||||
border-width: 0.2em;
|
||||
border-style: solid;
|
||||
border-radius: 1em;
|
||||
margin: 0.2em;
|
||||
padding: 0.5em;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -107,11 +49,9 @@ const servers = (await getCollection('servers'));
|
|||
<Header />
|
||||
<main>
|
||||
<site_header>
|
||||
<h2>All bout the homelab!</h2>
|
||||
<h2>What is in my homelab now?</h2>
|
||||
</site_header>
|
||||
<box>
|
||||
<left class="column">
|
||||
<h3>What is in my homelab now?</h3>
|
||||
<p>
|
||||
So my current homelab has gotten quite extensive, which honestly is a pain because electricity is expensive as hell.
|
||||
</p>
|
||||
|
|
@ -120,44 +60,16 @@ const servers = (await getCollection('servers'));
|
|||
let me explain each server, and what it is currently being used for.
|
||||
</p>
|
||||
<p>As you can probably tell, i use greek mythology for the naming scheme of physical machines :P</p>
|
||||
<section>
|
||||
<ul>
|
||||
<box>
|
||||
{
|
||||
servers.map((s) => (
|
||||
<li>
|
||||
<a href={`/homelab/servers/${s.slug}/`}>
|
||||
<h5 class="title">🖥️ {s.data.title}</h5>
|
||||
</a>
|
||||
</li>
|
||||
))
|
||||
}
|
||||
</ul>
|
||||
</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>
|
||||
</box>
|
||||
|
||||
</main>
|
||||
<Footer />
|
||||
|
|
|
|||
|
|
@ -1,76 +1,49 @@
|
|||
---
|
||||
import BaseHead from '../components/BaseHead.astro';
|
||||
import Header from '../components/Header.astro';
|
||||
import Footer from '../components/Footer.astro';
|
||||
import { SITE_TITLE, SITE_DESCRIPTION } from '../consts';
|
||||
import BaseHead from "../components/BaseHead.astro";
|
||||
import Header from "../components/Header.astro";
|
||||
import Footer from "../components/Footer.astro";
|
||||
import { SITE_TITLE, SITE_DESCRIPTION } from "../consts";
|
||||
---
|
||||
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<BaseHead title={SITE_TITLE} description={SITE_DESCRIPTION} />
|
||||
<style>
|
||||
body{
|
||||
text-align: center;
|
||||
}
|
||||
main {
|
||||
width: 75%;
|
||||
<head>
|
||||
<BaseHead title={SITE_TITLE} description={SITE_DESCRIPTION} />
|
||||
<style>
|
||||
body {
|
||||
text-align: center;
|
||||
}
|
||||
main {
|
||||
}
|
||||
main left,
|
||||
right {
|
||||
margin: 0.2em;
|
||||
padding: 0.5em;
|
||||
}
|
||||
left {
|
||||
max-width: 600px;
|
||||
text-align: center;
|
||||
}
|
||||
right {
|
||||
max-width: 400px;
|
||||
text-align: center;
|
||||
}
|
||||
box {
|
||||
display: flex;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<Header />
|
||||
|
||||
}
|
||||
main left,right{
|
||||
|
||||
margin: 0.2em;
|
||||
padding: 0.5em;
|
||||
}
|
||||
left{
|
||||
width: 50%;
|
||||
text-align: center;
|
||||
|
||||
|
||||
}
|
||||
right{
|
||||
width: 50%;
|
||||
text-align: center;
|
||||
|
||||
}
|
||||
#column{
|
||||
float:left;
|
||||
}
|
||||
box{
|
||||
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>
|
||||
</head>
|
||||
<body>
|
||||
<Header />
|
||||
|
||||
<main>
|
||||
<h1>Yo! Welcome to my humble site</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"/>
|
||||
</right >
|
||||
</box>
|
||||
|
||||
|
||||
</main>
|
||||
<Footer />
|
||||
</body>
|
||||
<main>
|
||||
<h1>Rolf Glomsrud</h1>
|
||||
<img src="images/self.png" />
|
||||
<p>
|
||||
This site is a continual WIP, and this is just an alpha of what i hope
|
||||
it will become :)
|
||||
</p>
|
||||
</main>
|
||||
<Footer />
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -31,20 +31,18 @@
|
|||
font-display: swap;
|
||||
}
|
||||
|
||||
footer{
|
||||
|
||||
height: 4em;
|
||||
}
|
||||
body {
|
||||
font-family: 'Atkinson', sans-serif;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
min-height: 100vh;
|
||||
height: 100%;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
text-align: left;
|
||||
background: repeating-linear-gradient(to bottom, #522258 0%, #8c3061, #522258 100%);
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
word-wrap: break-word;
|
||||
overflow-wrap: break-word;
|
||||
color: cyan;
|
||||
|
|
@ -53,7 +51,7 @@ body {
|
|||
}
|
||||
@media screen and (min-width:600px) {
|
||||
body {
|
||||
width: 80%;
|
||||
width: 95%;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width:600px){
|
||||
|
|
@ -62,12 +60,13 @@ body {
|
|||
}
|
||||
}
|
||||
main {
|
||||
flex: 1;
|
||||
width: 720px;
|
||||
max-width: calc(100% - 2em);
|
||||
margin: auto;
|
||||
min-height: 100%;
|
||||
padding: 3em 1em;
|
||||
margin-bottom: -4em;
|
||||
padding: 1em 1em;
|
||||
margin-bottom: -2em;
|
||||
}
|
||||
h1,
|
||||
h2,
|
||||
|
|
|
|||
Loading…
Reference in a new issue