diff options
| -rw-r--r-- | about.html | 63 | ||||
| -rw-r--r-- | common.css | 45 | ||||
| -rw-r--r-- | index.html | 130 | ||||
| -rw-r--r-- | library.html | 18 | ||||
| -rw-r--r-- | muse.html | 6 | ||||
| -rw-r--r-- | music.html | 42 | ||||
| -rw-r--r-- | poetry.html | 12 | ||||
| -rw-r--r-- | sitemap.html | 21 | ||||
| -rw-r--r-- | thoughts.html | 12 |
9 files changed, 276 insertions, 73 deletions
@@ -9,7 +9,58 @@ <link href="house.css" rel="stylesheet"> <title>Soft Machine | About</title> <style> + @media (max-width: 900px) { + .col { + display: block; + } + #left, #right, #center { + width: 90% !important; + margin: auto; + padding: 0 !important; + } + + #left, #right { + border-right: none !important; + border-left: none !important; + border-bottom: 1px solid black; + } + + #left { + margin-bottom: 20px; + } + } + + #left { + width: 20%; + text-align: justify; + padding: 0 20px 0 0; + border-right: 1px solid black; + } + + #center { + padding-left: 10px; + width: 65%; + } + + #right { + width: 15%; + text-align: justify; + padding-left: 10px; + border-left: 1px solid black; + font-size: small; + } + + #square { + height: 400px; + width: 400px; + margin: auto; + writing-mode: vertical-rl; + text-orientation: mixed; + text-align: justify; + font-size: larger; + line-height: 1; + } </style> </head> <body> @@ -28,7 +79,7 @@ </script> <div class="col"> - <div style="width: 20%; text-align: justify; padding: 0 20px 0 0; border-right: 1px solid black;"> + <div id="left"> <h2 style="margin-top: 0px;">Webmaster</h2> <p>radiohotline[at]disroot[dot]org - <a href="radio.asc">PGP key</a></p> <p>The more I try to outline who I am, the more I lose grasp.<sup>1</sup></p> @@ -71,13 +122,11 @@ <img src="img/stamps/gointhedark.gif" alt=""> <img src="img/stamps/kafka.png" alt=""> <img src="img/stamps/thog.png" alt=""> - </div> - - + </div> </div> - <div style="padding-left: 10px; width: 65%;"> - <div style="height: 400px; width: 400px; margin: auto; writing-mode: vertical-rl; text-orientation: mixed; text-align: justify; font-size: larger; line-height: 1;"> + <div id="center"> + <div id="square"> <p><span style="font-weight: bold;">History:</span> Soft Machine<sup>2</sup> started in 2021 under the name "Randal", and it was only populated in 2022 when it was renamed to "Teeth in Vitro", when it solely held the Nirvana page. After a hiatus, it was relaunched in 2024 as a much more compact personal website, the modest version you can find under /min<span class="bsq"></span>. In late 2025, a style based on the typography of House of Leaves was used, @@ -134,7 +183,7 @@ </div> - <div style="width: 15%; text-align: justify; padding-left: 10px; border-left: 1px solid black; font-size: small;" class="udown"> + <div id="right" class="udown"> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quis sem rutrum ligula blandit auctor ac at felis. Vestibulum ultricies mi ante, a lacinia eros cursus a. Quisque nisi turpis, sollicitudin ac erat vel, condimentum tempor libero. Vivamus in odio vitae arcu gravida aliquam. Nunc egestas ligula at blandit commodo. Pellentesque lorem neque, tristique sit amet ultricies ac, ultricies at sapien. Cras sed enim nec nunc convallis hendrerit porttitor semper lectus. </p> @@ -118,46 +118,41 @@ a:hover { align-items: center; align-self: flex-start; gap: 20px; + flex-direction: row; } -@media (min-width: 900px) { - .art { - margin-left: 0%; - margin-right: 0%; - } +.art-container img { + height: 300px; + width: auto; +} - .art-nav { - margin-left: 30%; - margin-right: 30%; +/* mobile */ + +@media (max-width: 900px) { + body { + background-size: cover; } .art-container { - flex-direction: row; + flex-direction: column; } .art-container img { - height: 300px; - width: auto; - + height: auto; + width: 80vw; } -} -@media (max-width: 400px) { - body { - margin-left: 15px; - margin-right: 15px; - font-size: 20px; + .logo { + position: relative; + margin: 20px; } - .art-container { - flex-direction: column; + .logo img { + width: 80vw; } - .art-container img { - height: auto; - width: 80vw; - margin-left: 5vw; - margin-right: 5vw; + .logo img:hover { + width: 85vw; } } @@ -4,7 +4,7 @@ <title>Soft Machine</title> <link href="https://softmachine.dev/rss.xml/" rel="alternate" type="application/rss+xml" title="Soft Machine's RSS Feed" /> <link href="common.css" rel="stylesheet" type="text/css"> - <meta charset="UTF-8"> + <meta charset="unicode"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content="The Weight of Comfort | Personal website containing art, music, programming, poetry, and the world of Moloch"> <meta name="keywords" content="Personal, Music, Poetry, Art, Radiohotline, Teethinvitro, Moloch"> @@ -13,9 +13,8 @@ <style> body { background-image: url('img/index/index.jpg'); - background-repeat: no-repeat; background-attachment: fixed; - background-size: cover; + background-size: 100%; background-position: center; } @@ -30,22 +29,99 @@ box-shadow: 0 0 10px 10px rgba(0,0,0,0.6); } + #mirrors { + width: 10%; top: 0; right: 0; + } + + #links { + width: 20%; bottom: 0; left: 0; + } + + #updates { + width: 20%; bottom: 0; right: 0; + } + + @media (max-width: 900px) { + body { + background-size: cover; + background-attachment: scroll; + } + + .shadow { + position: relative; + border-radius: 0px; + } + + #mirrors, #links, #updates { + width: 100%; + } + + .logo { + position: relative !important; + display: block !important; + } + + .logo img { + width: 80vw !important; + } + + .logo img:hover { + width: 85vw !important; + } + + #one, #two, #three { + display: contents; + } + + #one a img, #two a img, #three a img { + width: 45vw !important; + } + + .all { + display: flex; + flex-flow: wrap; + justify-content: center; + align-items: center; + gap: 10px; + } + } + + /* one */ + + #one a:nth-child(1) img { + width: 10.5vw; + } + #one a:nth-child(1)::after { background: none; } + /* two */ + + #two a:nth-child(1) img { + width: 18.5vw;; + } + #two a:nth-child(1)::after { bottom: 10%; left: 10%; height: 30%; } + #two a:nth-child(2) img { + width: 13.5vw; + } + #two a:nth-child(2)::after { bottom: 2%; left: 8%; height: 10%; } + #two a:nth-child(3) img { + width: 18.5vw; + } + #two a:nth-child(3)::after { bottom: 0px; left: 0px; @@ -53,12 +129,22 @@ height: 45%; } + /* three */ + + #three a:nth-child(1) img { + width: 10.5vw; + } + #three a:nth-child(1)::after { bottom: 5%; left: 0%; height: 40%; } + #three a:nth-child(2) img { + width: 13.5vw; + } + #three a:nth-child(2)::after { bottom: 5%; left: 5%; @@ -129,24 +215,20 @@ .logo img:hover { width: 33vw; } - - p { - color: white; - } </style> </head> <body> <h1 class="logo"><img src="img/logo.png" alt="Soft Machine"></h1> - <div> + <div class="all"> <div id="one" class="flex"> <a href="brain.html"> - <img src="img/index/brain.png" style="width: 10.5vw;"></a> + <img src="img/index/brain.png"></a> </div> <div id="two" class="flex"> <a href="art.html"> - <img src="img/index/art.png" style="width: 18.5vw;"></a> + <img src="img/index/art.png"></a> <a href="moloch.html" class="weener"> <div class="eye" style="top: 19%; left: 37%; width: 15%; height: 8.5%;"> @@ -161,41 +243,41 @@ <div class="shine"></div> </div> - <img src="img/index/weener.png" style="width: 13.5vw;"> + <img src="img/index/weener.png"> </a> <a href="tech.html"> - <img src="img/index/computer.png" style="width: 18.5vw;"></a> + <img src="img/index/computer.png"></a> </div> <div id="three" class="flex" style="gap: 10vw;"> <a href="creatures.html"> - <img src="img/index/doll.png" style="width: 10.5vw;"></a> + <img src="img/index/doll.png"></a> <a href="music.html"> - <img src="img/index/music.png" style="width: 13.5vw;"></a> + <img src="img/index/music.png"></a> </div> </div> - <div class="shadow" style="width: 10%; top: 0; right: 0;"> + <div class="shadow" id="mirrors"> <p><a href="https://d75i6wrgammbirodhv7fpulpko3jea3tb7qjjivf3kc6ohaambmptsad.onion/">tor</a> * <a href="http://softmachine.i2p/">i2p</a></p> </div> - <div class="shadow" style="width: 20%; bottom: 0; left: 0;"> + <div class="shadow" id="links"> <p><a href="about.html">about</a> * <a href="sitemap.html">sitemap</a> * <a href="https://teeth.atabook.org/">guestbook</a></p> </div> - <div class="shadow" style="width: 20%; bottom: 0; right: 0;"> - <h2 style="margin-top: 10px;">Updates</h2> + <div class="shadow" id="updates"> + <h2 style="margin-top: 10px;">Updates</h2> - <ul style="text-align: left; margin: 0px 10px 10px 0px; font-size: 1em;"> - <li>16/02/26 - New site design</li> + <ul style="text-align: left; margin: 0px 10px 10px 0px; font-size: 1em;"> + <li>17/02/26 - Responsiveness fixes</li> + <li>16/02/26 - New site design</li> <li>04/02/26 - Added Bluesky link</li> - <li>12/01/26 - Added tor and i2p mirrors</li> - <li>10/01/26 - Added The Black Tower to /books</li> - </ul> + <li>12/01/26 - Added tor and i2p mirrors</li> + </ul> - <a href="rss.xml">RSS Feed</a> + <a href="rss.xml">RSS Feed</a> </div> <script> diff --git a/library.html b/library.html index a8b9e33..6991ff8 100644 --- a/library.html +++ b/library.html @@ -46,6 +46,24 @@ li { line-height: 1.5; } + + @media (max-width: 900px) { + .container { + display: block; + } + + .column { + width: 80vw; + } + + .items img { + height: 150px; + } + + .items { + justify-content: space-evenly; + } + } </style> </head> <body> @@ -36,6 +36,12 @@ padding-bottom: 20px; vertical-align:top; } + + @media (max-width:900px) { + .poem { + width: 80vw; + } + } </style> </head> <body class="art"> @@ -19,15 +19,50 @@ box-shadow: 0 0 20px 25px rgba(0,0,0,0.8); border-radius: 10px; } + + @media (max-width: 900px) { + .intro { + display: flex; + justify-content: center; + gap: 50px; + flex-wrap: wrap; + margin-bottom: 20px; + } + + .intro img { + width: 40%; + } + + #introp { + width: 100% !important; + } + + .sticky { + position: relative; + z-index: 1; + } + + .links { + position: relative; + } + } .intro { - display: flex; + display: inline-flex; justify-content: center; gap: 50px; flex-wrap: wrap; margin-bottom: 20px; } + .intro img { + height: 40%; + } + + #introp { + width: 40%; + } + .container { display: flex; flex-wrap: wrap; @@ -117,10 +152,9 @@ <br> <a href="https://coff.ee/teethinvitro">Support</a> </div> - <img src="img/music/guitar.gif" class="sticky"> <div id="main"> <div class="intro"> - <div style="width: 40%;"> + <div id="introp"> <h1>Music</h1> <p> I have been composing music since 2018, making shitty beats in LMMS and composing theme songs on piano, @@ -346,5 +380,7 @@ </div> </div> </div> + + <img src="img/music/guitar.gif" class="sticky"> </body> </html> diff --git a/poetry.html b/poetry.html index 780ed9e..523eac5 100644 --- a/poetry.html +++ b/poetry.html @@ -29,13 +29,11 @@ gap: 20px; } - .poem { - width: 450px; - padding-left: 20px; - padding-right: 20px; - padding-bottom: 20px; - vertical-align:top; - } + @media (max-width:900px) { + .poem { + width: 80vw; + } + } </style> </head> <body class="art"> diff --git a/sitemap.html b/sitemap.html index 74fc2dd..389c096 100644 --- a/sitemap.html +++ b/sitemap.html @@ -32,12 +32,31 @@ a { font-family: 'Nanum', Georgia, 'Times New Roman', Times, serif; } + + #main { + width: 50%; + } + + @media (max-width: 900px) { + #main { + width: 90vw; + } + + .column { + width: 100%; + } + + .shadow { + display: block; + padding: 0 20px 0 20px; + } + } </style> </head> <body> <h1 class="logo"><a href="index.html"><img src="img/logo.png" alt="Soft Machine"></a></h1> - <div class="shadow" style="width: 50%"> + <div class="shadow" id="main"> <div class="column"> <h1>Sitemap</h1> diff --git a/thoughts.html b/thoughts.html index 35c2301..8c049a0 100644 --- a/thoughts.html +++ b/thoughts.html @@ -36,15 +36,15 @@ margin: 10px 0px 10px 0px; } - @media (max-width: 400px) { + @media (max-width: 900px) { .shadow img { - width: 350px; - padding-bottom: 10px; + width: 50vw; + padding-left: 5px; } embed { width: 80vw; - height: 75vh; + height: 50vh; } } </style> @@ -53,10 +53,10 @@ <h1 class="logo"><a href="index.html"><img src="img/logo.png" alt="Soft Machine"></a></h1> <div class="shadow"> - <img src="img/enki.jpg"> - <h1>Thoughts</h1> + <img src="img/enki.jpg"> + <p>Opinions expressed change over time, especially with my mental state, but writings will remain here.</p> <div> |