From 2429010452888bd5c7999264dc3d01f4c659feeb Mon Sep 17 00:00:00 2001 From: cephi Date: Mon, 18 Nov 2024 23:43:07 -0500 Subject: [PATCH] website design mostly complete minus responsive font sizing --- index.html | 78 +++++++++++++++++++++++++++--------------- services/authentik.svg | 1 + services/gitea.svg | 51 +++++++++++++++++++++++++++ services/jellyfin.svg | 34 ++++++++++++++++++ services/nextcloud.svg | 1 + 5 files changed, 137 insertions(+), 28 deletions(-) create mode 100644 services/authentik.svg create mode 100644 services/gitea.svg create mode 100644 services/jellyfin.svg create mode 100644 services/nextcloud.svg diff --git a/index.html b/index.html index e5d35da..454db01 100644 --- a/index.html +++ b/index.html @@ -9,19 +9,28 @@ display: grid; grid-template-columns: 2vw auto 2vw; } +#main { + display: flex; + flex-flow: row nowrap; +} #services { display: flex; flex-flow: column; justify-content: center; ul li a img { - max-width: 100%; + height: 10rem; + width: 100%; + object-fit: fill; } } @media (max-width: 600px) { #grid { grid-template-columns: auto; } + #main { + flex-flow: column-reverse nowrap; + } #services { flex-flow: row wrap; justify-content: center; @@ -30,19 +39,21 @@ display: flex; flex-flow: row wrap; justify-content: space-between; + li { display: inline; flex: 1; a img { - max-width: 50%; + height: 5rem; + width: 50vw; } } } } - section { + /*section { flex-flow: column-reverse; - } + }*/ nav { justify-content: space-around; } @@ -63,29 +74,40 @@
-
-
-
-
-

London

-

London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.

-

Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.

-
- -
+
+
+
+

Welcome!

+

Here you'll find a list of my services as well as a homepage for any information you might need.

+

You can hit About Me to see more information about myself and my projects.

+

As for the services on the left, you can find some more information below:

+

Authentik

+

The Single Sign-On service of choice for cephii.com + which allows only a single username and password access to all of the services on the right (with permission).

+

If you don't already have an Authentik account, but you do know of this website, then I simply forgot to send you an invite. Sorry!

+

Jellyfin

+

Jellyfin is a streaming service for all of my archives shows, movies, and songs.

+

Nextcloud

+

Nextcloud is a cloud storage service which I use as my drop-in replacement for Google Drive.

+

Want to get away from Google's prying eyes? Look no further!

+

Gitea

+

Gitea is my personal Git repository service. This will host repositories for my server as well as this very website!

+

Want to get away from Microsoft's prying eyes? Then try hosting your upstreams here as well!

+
+ +
+
+
-
-

Footer

-
-
-
- + diff --git a/services/authentik.svg b/services/authentik.svg new file mode 100644 index 0000000..469b7b0 --- /dev/null +++ b/services/authentik.svg @@ -0,0 +1 @@ + diff --git a/services/gitea.svg b/services/gitea.svg new file mode 100644 index 0000000..d988f5f --- /dev/null +++ b/services/gitea.svg @@ -0,0 +1,51 @@ + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/services/jellyfin.svg b/services/jellyfin.svg new file mode 100644 index 0000000..b62b754 --- /dev/null +++ b/services/jellyfin.svg @@ -0,0 +1,34 @@ + + + \ No newline at end of file diff --git a/services/nextcloud.svg b/services/nextcloud.svg new file mode 100644 index 0000000..7d4003d --- /dev/null +++ b/services/nextcloud.svg @@ -0,0 +1 @@ + \ No newline at end of file