gil/site
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: gil:88f6485e3b6b9808792d8040e957058b590d70a2
Branches Tags
gil:main
...
compare: gil:4832be86f60a6488878c603f790d984da7fb9b79
Branches Tags
gil:main

3 commits
88f6485e3b ... 4832be86f6

Author SHA1 Message Date
gil 4832be86f6 add rel=me and use more standard fediverse address format 2024-06-10 17:33:08 -05:00
gil 8432238132 Brighten links 2024-06-10 17:25:56 -05:00
gil d1f38946e4 Update landing button 2024-06-10 17:20:21 -05:00
5 changed files with 65 additions and 20 deletions
Show stats Expand all files Collapse all files

4
src/_includes/landing.njk
View file

@ -9,10 +9,10 @@
<link rel="stylesheet" href="/css/landing.css"> <link rel="stylesheet" href="/css/landing.css">
</head> </head>
<body> <body>
<main><article>{{ content | safe }}</article><a href="{{ entry }}" class="entry-button">Enter</a></main>
<aside> <aside>
<img src="../img/landing-sigil.png" alt="A sigil-esque drawing" title="A sigil-esque drawing"> <img src="../img/landing-sigil.png" alt="A sigil-esque drawing" title="A sigil-esque drawing">
<div class="spacer"></div> <h1>gils.nexus</h1>
</aside> </aside>
<main><article>{{ content | safe }}</article><a href="{{ entry }}" class="entry-button">Enter</a></main>
</body> </body>
</html> </html>

40
src/css/landing.css
View file

@ -102,12 +102,16 @@ body {
main { main {
width: 100%; width: 100%;
max-width: 500px;
gap: 10px; gap: 10px;
color: white; color: white;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
@media screen and (min-width: 768px) {
main {
max-width: 500px;
}
}
main article { main article {
background: rgb(28, 27, 26); background: rgb(28, 27, 26);
padding: 10px; padding: 10px;
@ -143,16 +147,17 @@ main article ul {
} }
} }
main a { main a {
color: rgb(102, 128, 11); color: #9ec611;
text-decoration: underline rgb(102, 128, 11) 2px; text-decoration: underline #9ec611 2px;
} }
main a:hover { main a:hover {
color: rgb(135, 154, 57); color: #beec1f;
} }
aside { aside {
margin-top: 20px; margin-top: 20px;
width: 256px; width: 256px;
text-align: center;
} }
@media screen and (min-width: 768px) { @media screen and (min-width: 768px) {
aside { aside {
@ -160,20 +165,37 @@ aside {
margin-left: 10px; margin-left: 10px;
} }
} }
aside h1 {
color: white;
font-weight: semibold;
font-size: 2em;
}
aside img { aside img {
width: 100%; width: 100%;
image-rendering: pixelated; image-rendering: pixelated;
max-width: 256px; max-width: 256px;
} }
.spacer {
height: 2em;
}
.entry-button { .entry-button {
font-size: 1.5em;
margin: auto; margin: auto;
margin-bottom: 10px; margin-bottom: 10px;
image-rendering: pixelated;
font-size: 1.5em;
font-weight: bold;
}
.entry-button:hover {
font-style: italic;
}
.entry-button::after {
content: " >>";
color: #525252;
font-style: normal;
text-decoration: underline #141013 2px;
}
@media screen and (min-width: 768px) {
.entry-button {
margin-right: 0;
}
} }
.entry-button:hover { .entry-button:hover {

2
src/css/landing.css.map
View file

@ -1 +1 @@
{"version":3,"sourceRoot":"","sources":["../scss/_colors.scss","../scss/_fonts.scss","../scss/landing.scss","../scss/_mixins.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAaA;EACE;EACA;EACA;;AAIF;EACE;EACA;EACA;EACA;;AAIF;EACE;EACA;EACA;EACA;;AAIF;EACE;EACA;EACA;;AAIF;EACE;EACA;EACA;EACA;;AAKF;EACE;EACA;EACA;EACA;;ACnDF;;AAAA;AAAA;;AAAA;AAYA;;AAAA;AAAA;;AAAA;AAUA;EAEI;EACA;EAEF;;;AAGF;EACE;EACA;EACA;EACA,KA5BO;EA6BP;;AC3BA;EDsBF;IAQI;IACA;IACA;;;;AAIJ;EACE;EACA,WAtCU;EAuCV,KAzCO;EA0CP;EACA;EACA;;AAEA;EACE;EACA,SAhDK;EAiDL;EACA;;AAEA;EACE;;AAGF;EACE;;AACA;EACE;;AAIJ;EACE;;AAGF;EACE;;AAGF;AAAA;EAEE;EACA;EACA;;ACzEJ;ED4CA;IAiCI;IACA;IACA;;;AAIJ;EACE;EACA;;AAEA;EACE;;;AAKN;EACE;EACA;;AC/FA;ED6FF;IAKI;IACA;;;AAGF;EACE;EACA;EACA;;;AAIJ;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE","file":"landing.css"} {"version":3,"sourceRoot":"","sources":["../scss/_colors.scss","../scss/_fonts.scss","../scss/landing.scss","../scss/_mixins.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAaA;EACE;EACA;EACA;;AAIF;EACE;EACA;EACA;EACA;;AAIF;EACE;EACA;EACA;EACA;;AAIF;EACE;EACA;EACA;;AAIF;EACE;EACA;EACA;EACA;;AAKF;EACE;EACA;EACA;EACA;;ACnDF;;AAAA;AAAA;;AAAA;AAYA;;AAAA;AAAA;;AAAA;AAUA;EAEI;EACA;EAEF;;;AAGF;EACE;EACA;EACA;EACA,KA5BO;EA6BP;;AC3BA;EDsBF;IAQI;IACA;IACA;;;;AAIJ;EACE;EACA,KAxCO;EAyCP;EACA;EACA;;ACzCA;EDoCF;IAQI,WA5CQ;;;AA+CV;EACE;EACA,SAnDK;EAoDL;EACA;;AAEA;EACE;;AAGF;EACE;;AACA;EACE;;AAIJ;EACE;;AAGF;EACE;;AAGF;AAAA;EAEE;EACA;EACA;;AC5EJ;ED+CA;IAiCI;IACA;IACA;;;AAIJ;EACE;EACA;;AAEA;EACE;;;AAKN;EACE;EACA;EACA;;ACnGA;EDgGF;IAMI;IACA;;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;;AAMJ;EACE;EACA;EACA;EACA;EACA;;AACA;EACE;;AAEF;EACE;EACA;EACA;EACA;;ACtIF;EDyHF;IAiBI;;;;AAIJ;EACE","file":"landing.css"}

2
src/index.md
View file

@ -12,7 +12,7 @@ This landing page hosts links for where I can be found online. Use the button at
## Links ## Links
- Microblog: [hol.ogra.ph/@gil](https://hol.ogra.ph/@gil) - Microblog: <a href="https://hol.ogra.ph/@gil" rel="me">@gil@hol.ogra.ph</a>
- Code: [ide.ogra.ph/gil](https://ide.ogra.ph/gil) - Code: [ide.ogra.ph/gil](https://ide.ogra.ph/gil)
- Matrix: [@kalanggam:matrix.org](https://matrix.to/#/@kalanggam:matrix.org) - Matrix: [@kalanggam:matrix.org](https://matrix.to/#/@kalanggam:matrix.org)
- Photos: [pixelfed.social/kalanggam](https://pixelfed.social/kalanggam) - Photos: [pixelfed.social/kalanggam](https://pixelfed.social/kalanggam)

37
src/scss/landing.scss
View file

@ -22,8 +22,8 @@ COLORS
*/ */
$fg: white; $fg: white;
$link-color: colors.$green-600; $link-color: lighten(colors.$green-600, 15%);
$link-color-hover: colors.$green-400; $link-color-hover: lighten(colors.$green-600, 25%);
:root { :root {
font: { font: {
@ -49,12 +49,15 @@ body {
main { main {
width: 100%; width: 100%;
max-width: $max-width;
gap: $gutter; gap: $gutter;
color: #{$fg}; color: #{$fg};
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@include breakpoint("md") {
max-width: $max-width;
}
article { article {
background: #{colors.$base-950}; background: #{colors.$base-950};
padding: $gutter; padding: $gutter;
@ -107,12 +110,19 @@ main {
aside { aside {
margin-top: #{$gutter * 2}; margin-top: #{$gutter * 2};
width: #{$avatar-width}; width: #{$avatar-width};
text-align: center;
@include breakpoint("md") { @include breakpoint("md") {
margin-top: 0; margin-top: 0;
margin-left: #{$gutter}; margin-left: #{$gutter};
} }
h1 {
color: white;
font-weight: semibold;
font-size: 2em;
}
img { img {
width: 100%; width: 100%;
image-rendering: pixelated; image-rendering: pixelated;
@ -120,14 +130,27 @@ aside {
} }
} }
.spacer {
height: 2em;
}
.entry-button { .entry-button {
font-size: 1.5em;
margin: auto; margin: auto;
margin-bottom: #{$gutter}; margin-bottom: #{$gutter};
image-rendering: pixelated;
font-size: 1.5em;
font-weight: bold;
&:hover {
font-style: italic;
}
&::after {
content: " >>";
color: #525252;
font-style: normal;
text-decoration: underline #{colors.$bg} 2px;
}
@include breakpoint("md") {
margin-right: 0;
}
} }
.entry-button:hover { .entry-button:hover {