You broke the internet
This page probably doesn't exist, but if it's supposed to a developer will be looking into why it's borked.
diff --git a/README.md b/README.md index 45a1814..bcaaffa 100644 --- a/README.md +++ b/README.md @@ -24,6 +24,15 @@ semantic, accessable, and snappy. ## Release Notes +### v0.9.0 + +- Accessibility changes +- Change colours +- Increase font size/whitespace +- Add "skip to content" button +- Redesign burger navigation +[Patch notes](https://aney.co.uk/blog/release-0.9.0) + ### v0.8.0 - Add about page diff --git a/about.html b/about.html index a86208b..47f6f78 100644 --- a/about.html +++ b/about.html @@ -14,9 +14,10 @@About me
- +Who are you
I'm Aney, a developer, and self-hoster that enjoys art/design, automation, Unix, and those pesky Japanese cartoons. Yes, that's a straight up rip from the homepage, why re-invent the wheel right?
@@ -37,7 +38,7 @@I set this website up as a means to share information to educate, and help people, as well as to easily point people to my answers for common questions.
What do you do?
-I'm currently employed as a web developer, and I enjoy it to an extent. I love solving problems, optimising sites, and creating designs/experiences, but building the guts, not so much.
+I'm currently taking some time away from work, but looking for places I believe I'd be a good fit. I love solving problems, optimising sites, and creating designs/experiences, so I'm kind of a developer at heart.
Outside of work I practise minimalism, frugalism (to an extent), and work towards Financial Independance (FI/RE). I also love the idea of OneBagging, self-sufficiency, and travelling, so these are things I'm trying to work towards.
What else do you do?
diff --git a/blog/blog-thoughts-220822.html b/blog/blog-thoughts-220822.html index 88bbbf4..a37600b 100644 --- a/blog/blog-thoughts-220822.html +++ b/blog/blog-thoughts-220822.html @@ -15,9 +15,10 @@Blog Thoughts
- +I've been having some thoughts about potential changes to the blog, including layouts, moving existing content, and such.
diff --git a/blog/burger-menu.html b/blog/burger-menu.html index 5459801..7dcfded 100644 --- a/blog/burger-menu.html +++ b/blog/burger-menu.html @@ -14,9 +14,10 @@Hello, Burger menu!
- +On Friday 18th of November 2022, I released version 0.8.0 of this website. With that a large, and very noticable change occured. The addition of a burger menu.
diff --git a/blog/index.html b/blog/index.html index 9a8b762..c1c6bb4 100644 --- a/blog/index.html +++ b/blog/index.html @@ -15,9 +15,10 @@Aney's Blog
- +2022
+-
+
- Release 0.9.0 - 21/02/2023 +
2022
- Hello, Burger menu! - 21/11/2022 diff --git a/blog/ive-started-a-blog.html b/blog/ive-started-a-blog.html index 29c72bf..701ba2e 100644 --- a/blog/ive-started-a-blog.html +++ b/blog/ive-started-a-blog.html @@ -15,9 +15,10 @@
- Fix burger menu's accessiblity issues
+
-
+
- Add label content, but make hidden for non screen-readers. +
- Make top of burger clickable. The burger wasn't fitting to its elements container, as a negative margin was used. +
+ - Add "Skip nav" functionality
+
-
+
- Added a hidden button for keyboard tab-targetting that skips over the navigation, straight to the content. +
+ - Styled
<code>tags +-
+
- So they can be used in-line to aid with any development guides. +
+ -
+ Make mobile nav/burger fixed
+
-
+
- This allows the navigation to be opened/closed and visible from anywhere on the page, not just the top. +
- Font
-
+
- Increase the font-size. +
- Increase the whitespace used around the site. +
+ - Colours
-
+
- Altered colours to improve the visual hierarchy of the elements. +
+ - Remove hr above navigation
-
+
- Due to the nav now being atop the page, this wasn't needed to seperate the content. +
+ - Restyle mobile nav
-
+
- Instead of having the nav just pop-up atop the page, it now displays as a sidebar. +
+ - Add background and border to burger
-
+
- As it's not fixed it needed to be visually differentiated from content. +
+ - Scrollable table
-
+
- Super basic overflow-x on a parent of table so tables fit on screen, but all content can still be accessed. +
+ - Add
to tags-
+
- Multiple word tags were breaking, and looked pretty bad, so made them non-breakable. +
+ - Colour simplification
-
+
- I changed the colours to all be 3 digit HEX values, saving a few bytes for the CSS. +
+ - Add test.html page
-
+
- For testing elements without navigating through the site, it's public too because why not. +
- Side note: This got me thinking about writing a lil' CSS framework. +
+ - When the burger menu is active, the page is still scrollable
-
+
- Easily fixed with JS (and a basic overflow), however I want to stay away from JS as much as possible. I believe the approach I took is the best-case scenario, as users at least know if they're scrolling with the sidebar styled nav. +
+ - Burger nav animation
-
+
- Changes to clickable area of burger icon meant the animation needed tweaking, and it looks worse. It's not really important though. +
+ - h1 in nav
-
+
- I was contemplating moving this into the main, but have yet to do so. Not sure if this is technically an issue, but will need to look into it. +
+ - Scrollable table
-
+
- I'd like a better solution than this, preferably one that doesn't require an additional element. +
+
I've started a blog
- +To preface, I am not an author. In fact my skill with the pen was much more proficient when I was a youngling, but alas I have returned to write.
Why?
diff --git a/blog/my-steamdeck-arrived.html b/blog/my-steamdeck-arrived.html index 3886b20..95a001e 100644 --- a/blog/my-steamdeck-arrived.html +++ b/blog/my-steamdeck-arrived.html @@ -15,9 +15,10 @@My SteamDeck Arrived!
- +The title does not decieve you, my SteamDeck has in fact arrived! Well actually it arrived on the 15th of August, and I've been using it since.
diff --git a/blog/reducing-homelab.html b/blog/reducing-homelab.html index e984e56..7a86693 100644 --- a/blog/reducing-homelab.html +++ b/blog/reducing-homelab.html @@ -14,9 +14,10 @@Reducing my Homelab
- +Homelabbing, and with it self-hosting, has been a great exploration into server maintance, dabbling with new technologies, and has overall (sometimes it's been a hassle, but it comes with the territory) been an enjoyable little hobby.
As the title implies, however, I have reduced the amount of services, and horsepower in my homelab, at least for the time being, starting from 24/09/2022.
diff --git a/blog/release-0.9.0.html b/blog/release-0.9.0.html new file mode 100644 index 0000000..9914b33 --- /dev/null +++ b/blog/release-0.9.0.html @@ -0,0 +1,128 @@ + + + + + + + + + + + +Release 0.9.0
+ + ++ +
+
Accessibility and Design
+Release 0.9.0 was a non-functionality release, as I focussed my lil' brain on Accessibility, the User Experience (UX), and the design of the website. Also this is my first publicised "patch note" so go easy, ok.
+ +Accessiblity
+-
+
User Experience
+-
+
Design/User Interface
+-
+
Dev
+-
+
Known Issues
+-
+
Final words
+This release should offer better accesibility, and a nicer look and feel all around.
+All changes were made as semantic as possible, and the site has been kept accessible, and usable for those not running CSS/JS at all (for instance terminal browsers, and neo-luddites with everything disabled).
+Aney's CV
- +About Me
I'm a helpful and well-mannered person that can work both alone, and as part of a team. I have a willingness to learn, and a proficiency with post-optimisation, and problem-solving. A goal of mine is to always help people to the best of my ability, and to improve myself wherever possible.
@@ -41,7 +42,7 @@TJS
April 2021 - January 2023
Position: Developer
-My time at TJS online is spent developing, and maintaining both the front, and back-end of the dozens of client websites, primarily using a Symfony based stack.
+My time at TJS online was spent developing, and maintaining both the front, and back-end of the dozens of client websites, primarily using a Symfony based stack. This also entailed working with the databases, and ensuring service, and cronjob uptimes.
Skills: PHP Symfony SCSS Git Linux NGINX SEO
Time: October 2018 - March 2021
Position: System Developer and Technician
I worked as part of the DevOps team at the car financing company, Advantage Finance. Whilst there I worked full-stack on the numerous bespoke systems; adding features, working on bug fixes, and rewriting legacy code for both desktop and web applications. I also assumed the position of IT support, aiding with general AD and PC issues, along with assisting in the training of new starters.
-Skills: VB6 VB.net ASP Classic SVN SQL Active Directory
+Skills: VB6 VB.net ASP Classic SVN SQL Active Directory
Oxfam
@@ -122,7 +123,8 @@Contact
If you like what you see, feel free to contact me via one of the methods below:
- +Email: the.nathan.steel@outlook.com
+LinkedIn: Nathan Steel
Aney's Hardware
- +My everyday tech
This is what I use basically every day. It's either at my desk, in my bag, or within arms reach.
diff --git a/guides/add-domain-to-server.html b/guides/add-domain-to-server.html index 04a9d45..7e1cc0a 100644 --- a/guides/add-domain-to-server.html +++ b/guides/add-domain-to-server.html @@ -15,9 +15,10 @@Link your domain name to your server
- +To avoid needing to remember an IP, this guide will help to link your domain name to your server.
Login to your domain name registrar
diff --git a/guides/add-php-to-nginx.html b/guides/add-php-to-nginx.html index dfec5c4..456da21 100644 --- a/guides/add-php-to-nginx.html +++ b/guides/add-php-to-nginx.html @@ -15,9 +15,10 @@Adding PHP to NGINX server
- +PHP is one of the highest used programming languages for websites, and it allows you to add practically any functionality you'd ever want to your sites.
diff --git a/guides/adminer-setup.html b/guides/adminer-setup.html index b80c5e8..2916b7d 100644 --- a/guides/adminer-setup.html +++ b/guides/adminer-setup.html @@ -15,9 +15,10 @@Adminer Setup
- +Adminer is a simple front-end for your database server that can be access through the browser
Pre-Requirements
diff --git a/guides/backup-mysql-mariadb.html b/guides/backup-mysql-mariadb.html index 7515ff8..81dd61f 100644 --- a/guides/backup-mysql-mariadb.html +++ b/guides/backup-mysql-mariadb.html @@ -15,9 +15,10 @@Backup MySQL/MariaDB
- +A database if a huge part of many projects, services, and servers. If something goes wrong, data is wrongly updated/deleted there could be many problems. Thankfully we can make backups to make sure our data is safe.
Manual Backup of a DB
diff --git a/guides/backup-with-cron.html b/guides/backup-with-cron.html index fd368f9..4ae952c 100644 --- a/guides/backup-with-cron.html +++ b/guides/backup-with-cron.html @@ -15,9 +15,10 @@Automating Backups with Cronjobs
- +Backups are wonderful things that save hours upon hours of work, and stress, so long as they're actually made in the first place!
Automatically taking backups allows for peace of mind that your work won't be lost forever whilst you go about your normal workflow..
diff --git a/guides/backup-with-rdiff.html b/guides/backup-with-rdiff.html index fe27a96..faf2dff 100644 --- a/guides/backup-with-rdiff.html +++ b/guides/backup-with-rdiff.html @@ -15,9 +15,10 @@Backup with rdiff-backup
- +Like rsync, rdiff-backup is a tool used for incremental backups. Unlike rsync however, rdiff keeps the most-recent file change, along with any previous changes, deletions, etc.
Install
diff --git a/guides/backup-with-rsync.html b/guides/backup-with-rsync.html index 6d359e2..241eac5 100644 --- a/guides/backup-with-rsync.html +++ b/guides/backup-with-rsync.html @@ -15,9 +15,10 @@Backup with rsync
- +Rsync is a program that allows for incremental backups. This means that rsync will not create an additional copy of the data when backing up, it will only backup changes to the files/directories, saving bandwidth and storage space.
diff --git a/guides/certbot-ssl.html b/guides/certbot-ssl.html index db1da6b..45a4a39 100644 --- a/guides/certbot-ssl.html +++ b/guides/certbot-ssl.html @@ -15,9 +15,10 @@Setup SSL with Certbot
- +An SSL certificate is used to secure a domain, preventing people from seeing many things, including those entered into forms (username, password, etc.).
Install Certbot
diff --git a/guides/get-a-domain-name.html b/guides/get-a-domain-name.html index 243ac88..89e653c 100644 --- a/guides/get-a-domain-name.html +++ b/guides/get-a-domain-name.html @@ -15,9 +15,10 @@Get a domain name
- +A domain name, as many will know is what people typing into their browser, e.g. google.com, facebook.com, etc.
The primary use for these is to have a memorable thing for users, instead of needing to type the IP address of the server
diff --git a/guides/guide-to-server-hosting.html b/guides/guide-to-server-hosting.html index ba83b0e..4e6d7fc 100644 --- a/guides/guide-to-server-hosting.html +++ b/guides/guide-to-server-hosting.html @@ -15,9 +15,10 @@Aney' guide to server hosting
- +If you want to start getting into server hosting, system administration, or just want to get a basic minecraft/web server up for you and your friends, then welcome. We all start somewhere, and I would love if I could get your foot in the door.
Notice
diff --git a/guides/index.html b/guides/index.html index 5276c81..ec2480f 100644 --- a/guides/index.html +++ b/guides/index.html @@ -14,9 +14,10 @@Aney's Guides
- +Pinned
diff --git a/guides/initial-server-setup.html b/guides/initial-server-setup.html index d7baebd..be31c41 100644 --- a/guides/initial-server-setup.html +++ b/guides/initial-server-setup.html @@ -15,9 +15,10 @@Initial Server Setup
- +This section assumes you have a fresh Debian 11 install on a server (either physical or VPS)
It will cover installing the essentials for access, and basic security so you don't need to worry in the future. This section may seem a little daunting for a first-time linux user, but most of it is copy/paste, hopefully with enough description to understand what is being done. Just remember not to copy the $/root$ they're there to show what user/directory we're in.
diff --git a/guides/install-kvm-virtual-machine.html b/guides/install-kvm-virtual-machine.html index 9e9f252..3e2eac0 100644 --- a/guides/install-kvm-virtual-machine.html +++ b/guides/install-kvm-virtual-machine.html @@ -15,9 +15,10 @@Template for Blog
- +This is an intro, you gotta believe me
Heading
diff --git a/guides/install-mysql-mariadb.html b/guides/install-mysql-mariadb.html index 2caedd5..c5e64d4 100644 --- a/guides/install-mysql-mariadb.html +++ b/guides/install-mysql-mariadb.html @@ -15,9 +15,10 @@MySQL (actually MariaDB) Setup Guide
- +MySQL is a well known free, open-source relational database service, and it's great. MariaDB is just MySQL (a fork of it), but better.
diff --git a/guides/nginx-install.html b/guides/nginx-install.html index d55ee13..71901e4 100644 --- a/guides/nginx-install.html +++ b/guides/nginx-install.html @@ -15,9 +15,10 @@How to install an NGINX web server
- +NGINX (engine X) is one of the top webservers. It has relatively easy learning curve, is fast, and secure. It's a great step into web hosting, and a good first service for many servers.
Install
diff --git a/guides/nginx-proxy.html b/guides/nginx-proxy.html index 6eeeea8..e135d09 100644 --- a/guides/nginx-proxy.html +++ b/guides/nginx-proxy.html @@ -15,9 +15,10 @@Template for Blog
- +This is an intro, you gotta believe me
Install
diff --git a/guides/nginx-web-optimisation.html b/guides/nginx-web-optimisation.html index 2f7bd60..973687b 100644 --- a/guides/nginx-web-optimisation.html +++ b/guides/nginx-web-optimisation.html @@ -15,9 +15,10 @@NGINX web optimisation
- +Optimisations for the nginx configs will increase both the security, and performance of your website
TODO: Headers
diff --git a/guides/password-protect-webpage.html b/guides/password-protect-webpage.html index af2214b..788e8d4 100644 --- a/guides/password-protect-webpage.html +++ b/guides/password-protect-webpage.html @@ -15,9 +15,10 @@Template for Blog
- +This is an intro, you gotta believe me
Heading
diff --git a/guides/server-install-debian.html b/guides/server-install-debian.html index 984c20c..75c8f15 100644 --- a/guides/server-install-debian.html +++ b/guides/server-install-debian.html @@ -15,9 +15,10 @@Debian Install Guide for Servers
- +Debian is a fantastic linux distrubution that works, and rarely causes issues. Due to this, it is a common canditate for a server OS, and is what this guide will walkthrough how to install on a PC.
Assumptions
diff --git a/guides/set-static-ip.html b/guides/set-static-ip.html index 865be9b..8287ab3 100644 --- a/guides/set-static-ip.html +++ b/guides/set-static-ip.html @@ -15,9 +15,10 @@How to set a static IP
- +For those that don't know a static IP is an IP address that doesn't change on reboots, etc. The opposite of a dynamic IP, which can change on reboots, and is the default mode for computers to get an IP (via DHCP).
diff --git a/guides/setup-git-server.html b/guides/setup-git-server.html index 50fb7a2..524bcea 100644 --- a/guides/setup-git-server.html +++ b/guides/setup-git-server.html @@ -14,9 +14,10 @@Git server setup
- +Self-hosted version control is great way to not be dependant of a third party to keep your git server up, or your code secure.
diff --git a/guides/setup-kvm-bridge.html b/guides/setup-kvm-bridge.html index ef128f2..186e5cc 100644 --- a/guides/setup-kvm-bridge.html +++ b/guides/setup-kvm-bridge.html @@ -15,9 +15,10 @@Setup a bridge network for KVM
- +A bridge network is a means to connect/bridge different networks together to act like a single network. In this case, it allows any connections to the bridge network to get their own internal IPs, as if plugged into the network directly, and work as you'd expect a completely new physical PC to work. i.e. Accessble to other clients outside of the host.
Install bridge-utils
diff --git a/guides/setup-nginx-website.html b/guides/setup-nginx-website.html index e158887..a34c940 100644 --- a/guides/setup-nginx-website.html +++ b/guides/setup-nginx-website.html @@ -15,9 +15,10 @@How to setup an NGINX website
- +Nginx has the ability to host multiple websites, all at different domains/sub-domains. This guide will show you how to point a domain at the server, and display a different website than the default NGINX page.
Make the domain point to the server
diff --git a/guides/setup-qemu-kvm.html b/guides/setup-qemu-kvm.html index 40af569..32df243 100644 --- a/guides/setup-qemu-kvm.html +++ b/guides/setup-qemu-kvm.html @@ -15,9 +15,10 @@Setup KVM/QEMU virtualisation
- +This is an intro, you gotta believe me
Heading
diff --git a/guides/sql-cheatsheet.html b/guides/sql-cheatsheet.html index 6d89637..c753c95 100644 --- a/guides/sql-cheatsheet.html +++ b/guides/sql-cheatsheet.html @@ -15,9 +15,10 @@SQL Cheatsheet
- +SQL is a great, simple to use language to manipulate data within a database. This cheatsheet is aimed at basic SQL for MySQL/MariaDB.
diff --git a/guides/virsh-cheatsheet.html b/guides/virsh-cheatsheet.html index 4bfdafb..89a7e65 100644 --- a/guides/virsh-cheatsheet.html +++ b/guides/virsh-cheatsheet.html @@ -15,9 +15,10 @@Virsh Cheatsheet
- +Virsh is an extremely powerful tool for managing KVM/QEMU virtual machines. From restarting, to changing hardware, snapshotting, and cloning machines. I'll cover the basics of Virsh here, as it's all I personally use.
List VMs
diff --git a/guides/vm-seperation-of-concerns.html b/guides/vm-seperation-of-concerns.html index 750251d..f9ddef1 100644 --- a/guides/vm-seperation-of-concerns.html +++ b/guides/vm-seperation-of-concerns.html @@ -15,9 +15,10 @@VM/Server Seperation of Concerns
- +Seperation of Concerns is a principle used in Computer Science that helps seperate functionality, making things easier to work with, and avoiding issues that could occur with too much going on in one place
Why seperate concerns for a server?
@@ -39,6 +40,7 @@How to seperate concerns
Some people will seperate each service into their own VM, however I don't believe this to be efficient (in all cases).
What I recommend is to take your server needs, and break them down into logical blocks, adding each of these blocks to their own VMs. This will keep certain things contained alone, as you want them seperated as much as possible (NAS, etc).
+| Concern/VM | Services | |||||
|---|---|---|---|---|---|---|
Why not use a dedicated server for each concern?
You can! No-one's going to stop you, but unless each concern requires (i.e. needs the dedicated hardware/isolation) its own dedicated server, it's hugely redundant. Again NAS as an example, would be good for a dedicated machine, as it'll be safer if there's no additional chance it goes down due to failure of an unrelated service.
diff --git a/guides/web-dev-101.html b/guides/web-dev-101.html index 0a46a01..bbdd5ae 100644 --- a/guides/web-dev-101.html +++ b/guides/web-dev-101.html @@ -14,9 +14,10 @@Web Development 101
- +Interested in web development, but don't know where to begin? Don't worry, I've got you covered.
diff --git a/guides/webpage-to-website.html b/guides/webpage-to-website.html index 395b0b6..6ab5494 100644 --- a/guides/webpage-to-website.html +++ b/guides/webpage-to-website.html @@ -14,9 +14,10 @@Webpage to website
- +With a basic webpage now created, the next hurdle is to add multiple pages, and get them all linked together into a website of some sort.
diff --git a/guides/your-first-webpage.html b/guides/your-first-webpage.html index e90cad8..a24fde1 100644 --- a/guides/your-first-webpage.html +++ b/guides/your-first-webpage.html @@ -14,9 +14,10 @@Your first webpage
- +In my opinion learning is done by doing, so where better to start than making your own basic webpage. This assumes you already have a text editor; you can use Notepad, Vim, etc. but if you're learning coding, I recommend Visual Studio Code
diff --git a/images/200px.png b/images/200px.png new file mode 100755 index 0000000..969cfa6 Binary files /dev/null and b/images/200px.png differ diff --git a/images/200px.webp b/images/200px.webp new file mode 100755 index 0000000..f8b95da Binary files /dev/null and b/images/200px.webp differ diff --git a/index.html b/index.html index 3b23144..7e3b55b 100644 --- a/index.html +++ b/index.html @@ -14,9 +14,10 @@Aney's Network
- +I'm Aney
Somehow you've landed on my website, welcome!
diff --git a/main.css b/main.css index db1ced0..1335390 100644 --- a/main.css +++ b/main.css @@ -1,26 +1,31 @@ html,body{height:100%} -html{font-size:14px} +html{font-size:15px} header{position:relative} header hr{display:none} body{ -max-width:54rem; -margin:.2rem;padding:0 .62rem; -font:1.2rem/1.62 sans-serif; +max-width:768px; +margin:auto;padding:0 1.24rem; +font:1.2rem/1.62 sans-serif;color:#444; display:-webkit-flex;display:-ms-flexbox;display:flex; flex-direction:column} main{flex:1 0 auto} +nav{ +box-sizing:border-box; +z-index:9} nav>a{ padding:.2rem 0; display:block; -border-top:1px dotted #000} +border-top:1px dotted #101} nav>a:first-child{border:none} h1,h2,h3,h4,h5,h6{line-height:1} header h1{margin:1.4rem 52px 1.2rem auto} +h1{color:#000}h2{color:#111}h3{color:#222} +h4,h5,h6{color:#333} a{text-decoration:none} -a:link,a:visited{color:#087CA7} -a:hover,a:visited:hover{color:#09B2DC} +a:link,a:visited{color:#07C} +a:hover,a:visited:hover{color:#1AE} ul{padding-left:0;margin-left:0;list-style:inside} ul li{margin:.35rem} @@ -28,40 +33,70 @@ li>ul{margin-left:1em} .tag{ font-size:.8rem;vertical-align:middle; -padding:.2rem;border-radius:.33rem; -background:#191919;color:#FFF} +padding:.2rem .5rem;border-radius:.33rem; +border:1px solid #CCC} pre{ -background:#191919;color:#FFF; +background:#EEE;padding:1rem; white-space:pre-wrap;overflow-x:auto; -padding:12px;border:1px solid #FFF} +border:1px solid #DDD;border-radius:6px} +code{ +background:#EEE;padding:.2rem; +border:1px solid #DDD;border-radius:6px} +pre code{border:none} +blockquote{ +margin:0 .2rem; +border-left:2px solid; +padding:.4rem;padding-left:.8rem} .page-nav{ float:right; padding:14px;border:1px solid; margin:1.4rem;margin-right:auto} +.sr{ +position:absolute;overflow:hidden; +left:-9999px;top:auto; +width:1px;height:1px; +} +.vh{ +position:absolute; +clip:rect(1px,1px,1px,1px); +height:1px;width:1px; +padding:2px 8px;overflow:hidden; +white-space:nowrap; +background:#FFF;z-index:10} +.vh:focus{ +clip:auto;overflow:auto; +height:auto;width:auto} +.tblcon{overflow-x:auto} footer p{margin:0} -table{text-align:left;width:100%;border-collapse:collapse} -td,th{border:1px solid #222;padding:9px 6px} -th{padding:12px;color:#FFF} -thead th{background:#191919} -tbody th{background:#292929} -tr:nth-child(even){background:#FEFEFE} -tr:hover{background:#DEDEDE} +table{text-align:left;width:100%; +border-collapse:collapse; +overflow-wrap:normal; +margin:24px 0} +td,th{border:1px solid #CCC;padding:9px 6px} +th{padding:12px} +thead tr{background:#FFF} +tbody tr:nth-child(odd){background:#EEE} +tbody tr:hover{background:#DDD} .burger-container{ -position:absolute;height:24px;width:30px; -cursor:pointer;top:34px;right:10px} +position:absolute;height:34px;width:36px; +cursor:pointer;top:25px;right:1.24rem; +position:fixed;background:#FFF; +border:2px solid #EEE;border-radius:6px; +z-index:9} #burger-toggle,#burger-toggle~nav{display:none} +.burger{left:3px;top:7px} .burger,.burger::after,.burger::before{ position:absolute;background:#000; height:4px;width:30px;border-radius:2px;content:""; transition:transform 300ms cubic-bezier(.4,1,.5,1)} -.burger::before{margin-top:-8px} -.burger::after{margin-top:8px} +.burger::before{margin-top:8px} +.burger::after{margin-top:16px} #burger-toggle:checked~nav{display:block} -#burger-toggle:checked+.burger-container .burger::before{margin-top:0;transform:rotate(45deg)} -#burger-toggle:checked+.burger-container .burger::after{margin-top:0;transform:rotate(-45deg)} -#burger-toggle:checked+.burger-container .burger{background:rgba(255,255,255,0)} +#burger-toggle:checked+.burger-container .burger::before{margin-top:8px;transform:rotate(45deg)} +#burger-toggle:checked+.burger-container .burger::after{margin-top:8px;transform:rotate(-45deg)} +#burger-toggle:checked+.burger-container .burger{background:rgba(0,0,0,0)} @media print{body{max-width:none}} @media(min-width:720px){ @@ -72,17 +107,90 @@ transition:transform 300ms cubic-bezier(.4,1,.5,1)} .burger-container{display:none} #burger-toggle~nav,header hr{display:block} } +@media(min-width:320px) and (max-width:719px){ + nav{height:100%; + width:50%;min-width:250px; + position:fixed; + top:0;right:1.24rem; + padding:85px 1.24rem 1.24rem; + background:#FFF;border-left:1px solid #EEE; + z-index:8} +} @media(max-width:320px){ #burger-toggle~nav{display:block} .burger-container{display:none} header h1{margin-right:auto} + body{overflow-wrap:anywhere} + img{width:100%;height:auto} } @media(prefers-color-scheme:dark){ - body{color:#FFF;background:#191919} + body{color:#CCC;background:#101} a:link,a:visited{color:#9CF} - a:hover,a:visited:hover{color:#DA4167} - nav>a{border-color:#FFF} - .tag{background:#FFF;color:#000} - .burger,.burger::after,.burger::before{background:#FFF} + a:hover,a:visited:hover{color:#C34} + nav{background:#101;border-color:#555} + nav>a{border-color:#555} + .burger-container{border:2px solid #555;background:#555;} + .burger,.burger::after,.burger::before{background:#EEE} + h1{color:#FFF}h2{color:#EEE} + h3,h4,h5,h6{color:#DDD} + td,th{border-color:#444} + thead tr{background:#101} + tbody tr:nth-child(odd){background:#222} + tbody tr:hover{background:#333} + pre{background:#333;color:#EEE;border-color:#555} + code{background:#333} + .tag{border-color:#555} } +/* Form stuff */ +/* If I do a CSS framework, it'll need to have a reset too... */ +/* e.g. https://github.com/necolas/normalize.css/blob/master/normalize.css +https://byby.dev/normalize-css#:~:text=css%23css%2Dresets-,Normalize.,experience%20for%20each%20web%20browser. +https://www.joshwcomeau.com/css/custom-css-reset/ +*/ +form{ +border:1px solid; +padding: 1rem; +} +input,select,textarea{ +font:1.2rem/1.62 sans-serif;color:#444; +border:1px solid #CCC; +} +textarea{ +resize: vertical; +} + +input,select,textarea{ +background: #EEE; +border: 2px solid #444; +box-sizing: border-box; +color: #444; +display: block; +line-height: 1; +vertical-align: top; +transition-duration:.2s; +} +input,textarea{ +width:100%; +} +input[type="checkbox"]{ +display:inline-block; +} +input:focus,select:focus,textarea:focus { + border-color: #9CF; +} +@media(min-width:720px){ + input,select,textarea{ + display:inline-block; + max-width:50%; /* so half it can be, with margins factored in... */ + max-width:346.8px; + } + input,textarea{ + width:auto; + } +} +@media(prefers-color-scheme:dark){ + input,select,textarea{ + background:#CCC;border-color:#CCC; + } +} diff --git a/projects.html b/projects.html index 4269f9d..914fb25 100644 --- a/projects.html +++ b/projects.html @@ -14,9 +14,10 @@Aney's Projects
- +Current Projects
-Here to hold me accountable, as I cannot finish my own projects
Personal Website
@@ -45,7 +45,7 @@aNetwork
A gaming community, and public server host.
This consists of a website, server hosting, and community/server administration.
-Skills: HTML CSS JS Linux System Administration
+Skills: HTML CSS JS Linux System Administration
Aney's Recipes
- +A collection of recipes I use, mostly budget oriented, but always tastee.