diff options
| -rw-r--r-- | assets/css/main.css | 50 | ||||
| -rw-r--r-- | index.html | 72 |
2 files changed, 70 insertions, 52 deletions
diff --git a/assets/css/main.css b/assets/css/main.css index cca71d9..a7cdf9b 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -65,8 +65,58 @@ nav { color: white; } +.linktree { + padding: 88px 0 96px; +} + +.linktree-grid { + display: grid; + grid-template-columns: 1.05fr 0.95fr; + align-items: center; +} + +.profile img { + width: 250px; + border-radius: 50%; +} + +.profile { + text-align: center;; +} + +.linktree-nav { + display: grid; + text-align: left; +} + +.linktree-nav a { + color: var(--text-dim); + transition: color .15s ease; +} + +.linktree a:hover { color: white; } + +.link-container { + display: flex; + flex-wrap: wrap; +} + +.links { + flex: 1 0 21%; /* explanation below */ + margin: 5px; + height: 100px; +} +.links ul { + padding: 0; + margin: 0; +} + +.links ul li { + list-style-type: none; +} + footer { background: blue; width: 100%; @@ -23,60 +23,28 @@ </nav> </div> </header> - </main> - <div id="Site-Container"> - <div id="Sidbar-Container"> - <div class="Profile-Sidebar"> - <img src="/assets/images/pic-of-me.jpg"> - <p>Hello, I'm Ben!</p> - <b>My "Linktree"</b> - <nav class="My-Linktree"> - <li><a href="mailto:hello@bensanders.net">E-Mail Me</a></li> - <li><a href="/assets/Benjamin Sanders hello@bensanders.net-(0x6315D57EC842B54E)-public.asc">Public Key</a></li> - <li><a href="https://www.instagram.com/thebensanders/">Instagram</a></li> - <li><a href="https://bsky.app/profile/bsand.net">Bluesky</a></li> - <li><a href="/feed.xml">RSS</a></li> + <section class="linktree"> + <div class="wrap linktree-grid"> + <div class="profile"> + <img src="/assets/images/pic-of-me.jpg"> + <h2>Hello, I'm Ben!</h2> + </div> + <nav class="linktree-nav"> + <h2>My "Linktree"</h2> + <div class="link-container"> + <div class="links"> + <ul> + <li><a href="mailto:hello@bensanders.net">E-Mail Me</a></li> + <li><a href="/assets/Benjamin Sanders hello@bensanders.net-(0x6315D57EC842B54E)-public.asc">Public Key</a></li> + <li><a href="https://www.instagram.com/thebensanders/">Instagram</a></li> + <li><a href="/feed.xml">RSS</a></li> + </ul> + </div> + </div> </nav> </div> - </div> - <div id="Content-Container"> - <article> - <h2>Article Title</h2> - <small>Author | Date | Tags</small> - <p> - Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since 1966, when designers at Letraset and James Mosley, the librarian at St Bride Printing Library in London, took a 1914 Cicero translation and scrambled it to make dummy text for Letraset's Body Type sheets. It has survived not only many decades, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised thanks to these sheets and more recently with desktop publishing software like Aldus PageMaker and Microsoft Word including versions of Lorem Ipsum. - </p> - </article> - <article> - <h2>Article Title</h2> - <small>Author | Date | Tags</small> - <p> - Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since 1966, when designers at Letraset and James Mosley, the librarian at St Bride Printing Library in London, took a 1914 Cicero translation and scrambled it to make dummy text for Letraset's Body Type sheets. It has survived not only many decades, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised thanks to these sheets and more recently with desktop publishing software like Aldus PageMaker and Microsoft Word including versions of Lorem Ipsum. - </p> - </article> - <article> - <h2>Article Title</h2> - <small>Author | Date | Tags</small> - <p> - Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since 1966, when designers at Letraset and James Mosley, the librarian at St Bride Printing Library in London, took a 1914 Cicero translation and scrambled it to make dummy text for Letraset's Body Type sheets. It has survived not only many decades, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised thanks to these sheets and more recently with desktop publishing software like Aldus PageMaker and Microsoft Word including versions of Lorem Ipsum. - </p> - </article> - <article> - <h2>Article Title</h2> - <small>Author | Date | Tags</small> - <p> - Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since 1966, when designers at Letraset and James Mosley, the librarian at St Bride Printing Library in London, took a 1914 Cicero translation and scrambled it to make dummy text for Letraset's Body Type sheets. It has survived not only many decades, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised thanks to these sheets and more recently with desktop publishing software like Aldus PageMaker and Microsoft Word including versions of Lorem Ipsum. - </p> - </article> - <article> - <h2>Article Title</h2> - <small>Author | Date | Tags</small> - <p> - Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since 1966, when designers at Letraset and James Mosley, the librarian at St Bride Printing Library in London, took a 1914 Cicero translation and scrambled it to make dummy text for Letraset's Body Type sheets. It has survived not only many decades, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised thanks to these sheets and more recently with desktop publishing software like Aldus PageMaker and Microsoft Word including versions of Lorem Ipsum. - </p> - </article> - </div> - </div> + </section> + </main> <footer> © Ben Sanders, 2026 </footer> |