add socials page
This commit is contained in:
parent
5706858d9c
commit
5cf129cb60
|
|
@ -1,6 +1,6 @@
|
|||
html {
|
||||
color: #323a42;
|
||||
background-color: #fffcf7;
|
||||
background-color: #efe5d7;
|
||||
font-family: 'Palatino Linotype', Lora, serif;
|
||||
max-width: 70ch;
|
||||
margin: 1em auto;
|
||||
|
|
@ -9,6 +9,9 @@ html {
|
|||
height: calc(100vh - 2em);
|
||||
position: relative;
|
||||
}
|
||||
*::selection {
|
||||
background: #ebdcc97f;
|
||||
}
|
||||
body {
|
||||
margin: 0;
|
||||
margin-left: 1rem;
|
||||
|
|
@ -24,6 +27,7 @@ a {
|
|||
color: #323a42;
|
||||
text-decoration: underline;
|
||||
position: relative;
|
||||
/* change this */
|
||||
left: -0.25em;
|
||||
padding: 0.25em;
|
||||
border-radius: 2px;
|
||||
|
|
@ -38,6 +42,64 @@ a:focus-visible {
|
|||
a#back {
|
||||
font-size: 0.85em;
|
||||
}
|
||||
.socials p {
|
||||
font-size: 16px;
|
||||
margin: 0 0 0.5em 22px;
|
||||
}
|
||||
.socials .social-link {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
line-height: 1;
|
||||
margin-right: -1em;
|
||||
}
|
||||
.socials .social-link a {
|
||||
display: inline-block;
|
||||
width: fit-content;
|
||||
margin-bottom: 0.25em;
|
||||
text-decoration: none;
|
||||
}
|
||||
.socials .social-link a::before {
|
||||
content: '⇒ ';
|
||||
}
|
||||
.socials .line {
|
||||
display: inline-block;
|
||||
background-color: #323a42;
|
||||
height: 2px;
|
||||
flex-grow: 2;
|
||||
position: relative;
|
||||
bottom: 12px;
|
||||
}
|
||||
.line.stop-0 {
|
||||
background-color: #984624;
|
||||
}
|
||||
.line.stop-1 {
|
||||
background-color: #ad5f1e;
|
||||
}
|
||||
.line.stop-2 {
|
||||
background-color: #c59506;
|
||||
}
|
||||
.line.stop-3 {
|
||||
background-color: #c8b500;
|
||||
}
|
||||
.line.stop-4 {
|
||||
background-color: #8ea530;
|
||||
}
|
||||
.line.stop-5 {
|
||||
background-color: #4b7b52;
|
||||
}
|
||||
.line.stop-6 {
|
||||
background-color: #426153;
|
||||
}
|
||||
.socials p a {
|
||||
padding: 0 2px;
|
||||
margin: 0 -2px;
|
||||
/* change this */
|
||||
left: 0;
|
||||
text-decoration: underline;
|
||||
}
|
||||
.socials p a:before {
|
||||
content: initial;
|
||||
}
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
margin-top: 0.5em;
|
||||
|
|
@ -48,6 +110,7 @@ h1 {
|
|||
}
|
||||
footer {
|
||||
margin-right: 1em;
|
||||
margin-top: 1em;
|
||||
}
|
||||
footer img {
|
||||
display: block;
|
||||
|
|
@ -55,4 +118,5 @@ footer img {
|
|||
margin: 0 auto;
|
||||
max-width: 100%;
|
||||
max-height: 160px;
|
||||
user-select: none;
|
||||
}
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 52 KiB After Width: | Height: | Size: 60 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 18 KiB After Width: | Height: | Size: 13 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 55 KiB After Width: | Height: | Size: 56 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 10 KiB After Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 18 KiB After Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 75 KiB After Width: | Height: | Size: 60 KiB |
31
index.html
31
index.html
|
|
@ -3,16 +3,17 @@
|
|||
<head>
|
||||
<title>gomepage</title>
|
||||
<meta charset='utf-8'/>
|
||||
<meta name='theme-color' content='#fffcf7'>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no"/>
|
||||
<meta name='theme-color' content='#efe5d7'>
|
||||
<meta name='viewport' content='width=device-width, initial-scale=1.0, shrink-to-fit=no'/>
|
||||
<link rel='icon' type='image/x-icon' href='./favicon.ico'>
|
||||
<link rel='preconnect' href='https://fonts.googleapis.com'>
|
||||
<link rel='preconnect' href='https://fonts.gstatic.com' crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Lora:ital@0;1&display=swap" rel="stylesheet">
|
||||
<link rel='preload' href='https://fonts.googleapis.com/css2?family=Lora:ital@0;1&display=swap' as='style' onload='this.onload=null;this.rel="stylesheet"'>
|
||||
<noscript><link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Lora:ital@0;1&display=swap'></noscript>
|
||||
<style>
|
||||
html {
|
||||
color: #323a42;
|
||||
background-color: #fffcf7;
|
||||
background-color: #efe5d7;
|
||||
height: 100%;
|
||||
font-family: 'Palatino Linotype', Lora, serif;
|
||||
font-size: 1.25em;
|
||||
|
|
@ -55,7 +56,7 @@
|
|||
font-size: 48px;
|
||||
height: 3em;
|
||||
width: 10em;
|
||||
background-color: #fffcf7;
|
||||
background-color: #efe5d7;
|
||||
}
|
||||
.title-box .title {
|
||||
background-color: inherit;
|
||||
|
|
@ -104,9 +105,16 @@
|
|||
nav a .link-title {
|
||||
font-weight: bold;
|
||||
}
|
||||
nav a .link-title:after {
|
||||
nav a .link-description::before {
|
||||
font-weight: normal;
|
||||
content: ' —';
|
||||
content: '— ';
|
||||
}
|
||||
nav a.new .link-title::after {
|
||||
content: '*';
|
||||
color: #984624;
|
||||
}
|
||||
nav a.new:hover .link-title::after, nav a.new:focus .link-title::after {
|
||||
color: #BF8E7C;
|
||||
}
|
||||
nav.show, nav:focus-within {
|
||||
opacity: 1;
|
||||
|
|
@ -140,13 +148,11 @@
|
|||
font-weight: bold;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
#wotd h1, #wotd h2, #wotd h3 {
|
||||
}
|
||||
#wotd time, #wotd .pronunciation {
|
||||
display: block;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
.pronunciation::before, .pronunciation::after {
|
||||
.pronunciation:not(:empty)::before, .pronunciation:not(:empty)::after {
|
||||
content: '⧸';
|
||||
}
|
||||
#wotd ul {
|
||||
|
|
@ -159,7 +165,7 @@
|
|||
}
|
||||
@media only screen and (max-width: 960px) {
|
||||
body {
|
||||
grid-template-rows: min-content auto;
|
||||
grid-template-rows: min-content auto min-content;
|
||||
}
|
||||
header {
|
||||
grid-column: 1 / span 2;
|
||||
|
|
@ -179,6 +185,7 @@
|
|||
}
|
||||
nav {
|
||||
opacity: 1;
|
||||
pointer-events: all;
|
||||
}
|
||||
.gome-img[src^='./img/desktop'] {
|
||||
display: none;
|
||||
|
|
@ -208,7 +215,7 @@
|
|||
<nav>
|
||||
<a href='journal'><span class='link-title'>Journal</span> <span class='link-description'>a collection of articles, essays, and posts authored by me.</span></a>
|
||||
<a href='bookmarks'><span class='link-title'>Bookmarks</span> <span class='link-description'>some curated lists of web pages I want to keep track of and share with others.</span></a>
|
||||
<a href='socials'><span class='link-title'>Socials</span> <span class='link-description'>other accounts of mine around the web.</span></a>
|
||||
<a href='socials' class='new'><span class='link-title'>Socials</span> <span class='link-description'>other accounts of mine around the web.</span></a>
|
||||
</nav>
|
||||
</header>
|
||||
<main>
|
||||
|
|
|
|||
|
|
@ -16,8 +16,79 @@
|
|||
<a id='back' href='..'>back to gomepage</a>
|
||||
</header>
|
||||
<h1>Socials</h1>
|
||||
<main>
|
||||
<p>Just a stub for now.</p>
|
||||
<main class='socials'>
|
||||
<p>
|
||||
Feel free to add or follow me on any of these sites!
|
||||
</p>
|
||||
<div class='social-link'>
|
||||
<a target='_blank' rel='noreferrer' href='https://rateyourmusic.com/~atseefeldt'>Rate Your Music</a>
|
||||
<div class='line stop-0'></div>
|
||||
</div>
|
||||
<p>
|
||||
I love listening to music and I have a lot of opinions on it!
|
||||
Rate Your Music is a great tool for tracking albums you like or want to listen to.
|
||||
I don’t rate everything I save to my collection, because I haven’t listened to a lot of them yet.
|
||||
Also, I tend to rate things a little lower at first and then move them up as I get more attached to them.
|
||||
Let me know if we have any similar taste in music!
|
||||
</p>
|
||||
<div class='social-link'>
|
||||
<a target='_blank' rel='noreferrer' href='https://myanimelist.net/profile/atseefeldt'>MyAnimeList</a>
|
||||
<div class='line stop-1'></div>
|
||||
</div>
|
||||
<p>
|
||||
I took up an interest in anime during the pandemic, and ended up watching enough that I wanted to start tracking it.
|
||||
I watched a lot for about a year and a half, and now I still watch fairly often, but less frequently.
|
||||
Once I get around to adding blog posts here, I will write up some things I learned from watching anime.
|
||||
</p>
|
||||
<div class='social-link'>
|
||||
<a target='_blank' rel='noreferrer' href='https://www.last.fm/user/atbseefeldt'>Last.fm</a>
|
||||
<div class='line stop-2'></div>
|
||||
</div>
|
||||
<p>
|
||||
I listen to music a lot, and I knew about Last.fm for a long time, but I only made an account recently.
|
||||
I had a decent idea what I listened to the most, but it’s fun to have some solid data to peruse.
|
||||
Here is <a
|
||||
target='_blank'
|
||||
rel='noreferrer'
|
||||
href='https://www.tapmusic.net/lastfm/collage.php?user=atbseefeldt&type=7day&size=4x4&caption=true&playcount=true'
|
||||
>a generated chart</a>
|
||||
of what albums I have recently been listening to.
|
||||
</p>
|
||||
<div class='social-link'>
|
||||
<a target='_blank' rel='noreferrer' href='https://tildegit.org/gome'>tildegit</a>
|
||||
<div class='line stop-3'></div>
|
||||
</div>
|
||||
<p>
|
||||
I keep code for my Ctrl-C-related projects here.
|
||||
I also have some stuff in the works I’m just keeping private for now :)
|
||||
</p>
|
||||
<div class='social-link'>
|
||||
<a target='_blank' rel='noreferrer' href='https://glitchwave.com/user/atseefeldt/'>Glitchwave</a>
|
||||
<div class='line stop-4'></div>
|
||||
</div>
|
||||
<p>
|
||||
This is pretty much Rate Your Music for video games (made by the same company).
|
||||
I don’t play video games too much anymore, and I feel like there’s a lot of really famous or significant games I’ve never played.
|
||||
If you have any game reccommendations for me based on what I like, please let me know!
|
||||
</p>
|
||||
<div class='social-link'>
|
||||
<a target='_blank' rel='noreferrer' href='https://tildes.net/user/gome'>Tildes</a>
|
||||
<div class='line stop-5'></div>
|
||||
</div>
|
||||
<p>
|
||||
Tildes is a very nice concept and design for a forum site.
|
||||
That said, when I go on, I feel mostly as though I am browsing a smaller version of Reddit.
|
||||
In a way, that’s a good thing, because there’s definitely a better signal to noise ratio.
|
||||
In any case, I’m on here as well.
|
||||
</p>
|
||||
<div class='social-link'>
|
||||
<a target='_blank' rel='noreferrer' href='https://twitter.com/atbseefeldt'>Twitter</a>
|
||||
<div class='line stop-6'></div>
|
||||
</div>
|
||||
<p>
|
||||
I just made this account to get a username that matched some of my other accounts.
|
||||
I don’t have any serious plans to start using it actively right now, but if anyone wants to follow me or DM me on there, I may start using it more often.
|
||||
</p>
|
||||
</main>
|
||||
<footer>
|
||||
<img src='../img/hole_gome.webp' alt='Kabouter in a hole' />
|
||||
|
|
|
|||
Loading…
Reference in New Issue