From a3ace459ad663f9fd01624320e7c0ec7a132cdce Mon Sep 17 00:00:00 2001 From: mm Date: Tue, 29 Aug 2023 14:44:14 +0200 Subject: First commit --- 404.html | 17 ++++++ abtm/main.html | 42 ++++++++++++++ beauty.css | 162 +++++++++++++++++++++++++++++++++++++++++++++++++++++ beauty.css.map | 1 + beauty.scss | 58 +++++++++++++++++++ fonts.scss | 12 ++++ icon.png | Bin 0 -> 75796 bytes licenses/main.html | 82 +++++++++++++++++++++++++++ main.html | 96 +++++++++++++++++++++++++++++++ page.scss | 154 ++++++++++++++++++++++++++++++++++++++++++++++++++ robots.txt | 12 ++++ sitemap.xml | 15 +++++ test.html | 49 ++++++++++++++++ 13 files changed, 700 insertions(+) create mode 100755 404.html create mode 100644 abtm/main.html create mode 100644 beauty.css create mode 100644 beauty.css.map create mode 100755 beauty.scss create mode 100755 fonts.scss create mode 100755 icon.png create mode 100644 licenses/main.html create mode 100755 main.html create mode 100755 page.scss create mode 100644 robots.txt create mode 100644 sitemap.xml create mode 100644 test.html diff --git a/404.html b/404.html new file mode 100755 index 0000000..34c9247 --- /dev/null +++ b/404.html @@ -0,0 +1,17 @@ + + + + + + + + Twoexem + + + +

Oops, looks like you got lost!

+

+ Don't worry though, we can bring you back to the homepage + + + diff --git a/abtm/main.html b/abtm/main.html new file mode 100644 index 0000000..e903477 --- /dev/null +++ b/abtm/main.html @@ -0,0 +1,42 @@ + + + + + + + + + + Twoexem + + + + +
+ + + +

Something about me

+
+
+
+

Hi.

+
+ +
+
+
+

I'm twoexem.

+
+ + If you landed on this website, you probably already know me. If not, well, there's not really much to say about me. I'm a German student interested mostly in technical things such as computers and vintage and modern audio and video equipment like analog photo cameras, camcorders, CRT televisions, microphones, mixing consoles. I have some practical experience with the latter since I work as a stage technician and video streaming engineer, meaning I'm just the guy who gets to set up and control cameras, computers used for streaming and microphones during concerts. At home, I have a rather large collection of both vintage and retro technical equipment. To improve my knowledge with electronic circuits, I recently set up a tinkering workbench where I can play around with all sorts of things. Apart from doing exactly that in my free time, I like to take photos on my analog film cameras or shoot videos with my camcorders. I also experiment a lot with computers and like to disassemble them to learn more about their inner workings. If you're interested in technical details about the hard- and software running on this server, check this page out. +

+ Also, just so you know, I won't collect any personal info from visitors and don't use any kind of external resources, cookies or analytics engine on this server. +

+ See ya! +
+ +
+ + + diff --git a/beauty.css b/beauty.css new file mode 100644 index 0000000..3d97503 --- /dev/null +++ b/beauty.css @@ -0,0 +1,162 @@ +.list { + /*border: 3px solid transparent; + border-radius: 5px; + backdrop-filter: blur(1px) brightness(80%); + padding: 5px; + //width: max-content;*/ + display: flex; + justify-content: center; +} +.list div { + border: 3px solid transparent; + border-radius: 5px; + backdrop-filter: blur(1px) brightness(90%); + -webkit-backdrop-filter: blur(1px) brightness(80%); + padding: 5px; +} +.list div .TOOD { + text-align: center; + backdrop-filter: none; + -webkit-backdrop-filter: none; +} + +.grid { + letter-spacing: 0px; + display: flex; + justify-content: center; + display: grid; + grid-template-columns: 300px 300px 300px; + gap: 20px; +} +.grid .title { + border: transparent solid 10px; + border-radius: 5px; + text-align: center; + padding: 3px; + max-width: auto; + height: auto; + display: flex; + flex-direction: column; + justify-content: center; + transition: 0.2s ease-in-out; +} +.grid .title:hover { + backdrop-filter: blur(5px) brightness(80%); + -webkit-backdrop-filter: blur(5px) brightness(80%); + transition: 0.2s ease-in-out; +} +.grid .image { + border-radius: 5px; + overflow: hidden; + height: 150px; + width: auto; +} +.grid img { + width: 100%; + height: 100%; + object-fit: cover; + display: flex; + justify-content: center; +} + +.center_img { + overflow: hidden; + width: 400px; + padding: 5px; + display: block; + margin-left: auto; + margin-right: auto; +} +.center_img img { + width: 100%; + height: 100%; + object-fit: cover; + border-radius: 5px; +} + +.license { + display: flex; + justify-content: center; + width: auto; +} +.license div { + border: 3px solid transparent; + border-radius: 5px; + padding: 5px; + max-width: max-content; + text-align: center; + backdrop-filter: blur(1px) brightness(80%); + -webkit-backdrop-filter: blur(1px) brightness(80%); + transition: 0.2s ease-in-out; +} +.license div:hover { + backdrop-filter: blur(5px) brightness(60%); + -webkit-backdrop-filter: blur(5px) brightness(60%); + transition: 0.2s ease-in-out; +} +.license div a { + color: white; +} + +.text { + border: transparent solid 10px; + border-radius: 5px; + padding: 3px; + backdrop-filter: blur(5px) brightness(80%); + -webkit-backdrop-filter: blur(5px) brightness(80%); + color: white; +} + +.title { + font-size: 18px; +} + +@font-face { + font-family: "Prompt"; + src: url("/resources/Fonts/Prompt/Prompt-Regular.ttf") format("truetype"); + font-weight: normal; + font-style: normal; +} +html { + height: 100vh; +} + +body { + text-align: center; + justify-content: center; + width: 90%; + max-width: auto; + margin: 2em auto; + font: 18px "Prompt"; + letter-spacing: -1px; + background-image: url("resources/bg.jpg"); + background-repeat: no-repeat; + background-position: top center; + background-size: cover; + background-attachment: fixed; +} +body a:link { + color: silver; +} +body a:visited { + color: aqua; +} +body a:hover { + color: white; +} + +/*main { + border: transparent solid 10px; + border-radius: 5px; + padding: 3px; + backdrop-filter: blur(5px) brightness(80%); +}*/ +header { + text-align: center; +} +header .subheader { + font-style: italic; + font-size: 25px; +} + +/*# sourceMappingURL=beauty.css.map */ diff --git a/beauty.css.map b/beauty.css.map new file mode 100644 index 0000000..fee7271 --- /dev/null +++ b/beauty.css.map @@ -0,0 +1 @@ +{"version":3,"sourceRoot":"","sources":["page.scss","fonts.scss","beauty.scss"],"names":[],"mappings":"AAKA;AACC;AAAA;AAAA;AAAA;AAAA;EAMA;EACA;;AAEA;EACC;EACO;EACP;EAEA;EACO;;AAEP;EACC;EACA;EAEA;;;AAKH;EAGC;EACO;EACP;EAEO;EACA;EACA;;AAGP;EACC;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EAGA;;AACA;EACC;EAEA;EACA;;AAKK;EAEQ;EACd;EACA;EACA;;AAGM;EAEQ;EACA;EACA;EACd;EACA;;;AAIF;EAEC;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA;EACA;EACA;;;AAIF;EAIQ;EACP;EACO;;AAEA;EAKQ;EACA;EACA;EACA;EACA;EACd;EAEA;EACA;;AAEA;EACsB;EAErB;EACqB;;AAGR;EAGQ;;;AAKxB;EACC;EACA;EACA;EACA;EAEA;EACA;;;AAID;EACC;;;AClJD;EACI;EACA;EACA;EACA;;ACCJ;EACC;;;AAGD;EAEC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGA;EACC;;AAED;EACC;;AAED;EACC;;;AAIF;AAAA;AAAA;AAAA;AAAA;AAAA;AAQA;EACC;;AAEA;EACC;EACA","file":"beauty.css"} \ No newline at end of file diff --git a/beauty.scss b/beauty.scss new file mode 100755 index 0000000..c226454 --- /dev/null +++ b/beauty.scss @@ -0,0 +1,58 @@ +/// Rather than writing an asslong stylesheet for every page, the parent style is defined here and then just reads a pagestle SCSS sheet +@use 'page'; + +// And here's the stylesheet for all used fonts: +@use 'fonts'; + +// The SCSS stylesheet for my good old website twoexem.com +// The license is included in the file LICENSE.txt +// If you did not receive a copy of the license with this file, you may download it under https://mit-license.org/ +// Copyright © 2023 Milan Mišić (eMail: fridolin.411@web.de) + +html { + height: 100vh; +} + +body { + // Body styling section, gives everything a good look + text-align: center; + justify-content: center; + width: 90%; + max-width: auto; + margin: 2em auto; + font: 18px 'Prompt'; + letter-spacing: -1px; + background-image: url("resources/bg.jpg"); + background-repeat: no-repeat; + background-position: top center; + background-size: cover; + background-attachment: fixed; + + // Link styling section + a:link { + color: silver; + } + a:visited { + color: aqua; + } + a:hover { + color: white; + } +} + +/*main { + border: transparent solid 10px; + border-radius: 5px; + padding: 3px; + backdrop-filter: blur(5px) brightness(80%); +}*/ + +// Aligns the heading text in the center +header { + text-align: center; + + .subheader { + font-style: italic; + font-size: 25px; + } +} diff --git a/fonts.scss b/fonts.scss new file mode 100755 index 0000000..9a99067 --- /dev/null +++ b/fonts.scss @@ -0,0 +1,12 @@ +// Copyright © 2023 Milan Mišić (eMail: fridolin.411@web.de) + +// Font family: Prompt +// The license is included in the file OFL.txt +// If you did not receive a copy of the license with this file, you may download it under https://scripts.sil.org/cms/scripts/page.php?site_id=nrsi&id=OFL + +@font-face { + font-family: 'Prompt'; + src: url('/resources/Fonts/Prompt/Prompt-Regular.ttf') format('truetype'); + font-weight: normal; + font-style: normal; +} diff --git a/icon.png b/icon.png new file mode 100755 index 0000000..e73de8d Binary files /dev/null and b/icon.png differ diff --git a/licenses/main.html b/licenses/main.html new file mode 100644 index 0000000..c07f435 --- /dev/null +++ b/licenses/main.html @@ -0,0 +1,82 @@ + + + + + + + + + + Twoexem + + + + +
+ + + +

Licenses and legal information

+
+
+
+
+ I exclusively use the font "Prompt" by Cadson Demak on this website. +
+ GitHub repository +
+ SIL Open Font License +
+
+
+ The media hosted on this website, notably images and videos, are licensed under the CC BY-SA 4.0 license, unless stated otherwise. +
+ + CC BY SA 4.0 + +
+
+
+ The HTML and CSS files used on this website are licensed under the MIT license. +
+ Website source code +
+ MIT License +
+ Note: Only the pure HTML and CSS files are made public. Media is not included in the repository. +
+
+
+ This website uses material taken from the ”Breeze” icon set made by KDE. +
+ GNU LGPL 3.0 +
+ Breeze Icons + +
+
+
+ This website doesn't collect and process any kind of user data. It also does not utilize cookies and external third-party resources. +
+
+
+ Diese Website ist rein privat betrieben und besitzt keinerlei kommerziellen Hintergrund und verbreitet keine journalistischen Inhalte. Sie ist deswegen nicht Impressungspflichtig. Zudem erhebt und verarbeitet der Server dieser Website keinerlei persönliche Daten wie IP-Adressen o.ä. Sie ist deswegen auch nicht Datenschutzerklärungspflichtig. +
+
+ +
+ + diff --git a/main.html b/main.html new file mode 100755 index 0000000..a843214 --- /dev/null +++ b/main.html @@ -0,0 +1,96 @@ + + + + + + + + + + Twoexem + + + + +
+

Welcome to Twoexems internet website!

+ +
+
+
+ +
+
+
+ This site is still under development and not complete. + + Some of the links aren't fully done yet and may lead to incomplete or missing pages. +
+
+
+
+
+
+ About Me +
+ + A stylized image of twoexem. + +
+
+ +
+ My Collection +
+ + A photograph of a shelf full of old audio and video equipment. + +
+
+ +
+ Software & Hardware +
+ + A photograph of the inside of the server hosting this website, a Dell Precision T7500. + +
+
+
+ Photography +
+ + A beautiful analog photograph of a summer landscape. + +
+
+
+ Videography +
+ + A self-photograph of the Panasonic NV-GS400 camcorder. + +
+
+
+ Tinkering +
+ + A photograph of a clean workbench with laboraty items such as a CRT monitor, solder fume ventilation system, a function generator and an oscilloscope along other things. + +
+
+ +
+

+ +
+
+ + Licenses & Legal +
+
+
+ + + diff --git a/page.scss b/page.scss new file mode 100755 index 0000000..b278fc4 --- /dev/null +++ b/page.scss @@ -0,0 +1,154 @@ +// Page stylesheet for my main start page +// The license is included in the file LICENSE.txt +// If you did not receive a copy of the license with this file, you may download it under https://mit-license.org/ +// Copyright © 2022 Milan Mišić (eMail: fridolin.411@web.de) + +.list { + /*border: 3px solid transparent; + border-radius: 5px; + backdrop-filter: blur(1px) brightness(80%); + padding: 5px; + //width: max-content;*/ + + display: flex; + justify-content: center; + + div { + border: 3px solid transparent; + border-radius: 5px; + backdrop-filter: blur(1px) brightness(90%); + // Apple WebShit compatibility + -webkit-backdrop-filter: blur(1px) brightness(80%); + padding: 5px; + + .TOOD { + text-align: center; + backdrop-filter: none; + // Apple WebShit compatibility + -webkit-backdrop-filter: none; + } + } +} + +.grid { + // Displays the selection grid + + letter-spacing: 0px; + display: flex; + justify-content: center; + + display: grid; + grid-template-columns: 300px 300px 300px; + gap: 20px; + + // Make the titles be good + .title { + border: transparent solid 10px; + border-radius: 5px; + text-align: center; + //backdrop-filter: blur(1px) brightness(100%); + padding: 3px; + max-width: auto; + height: auto; + display: flex; + flex-direction: column; + justify-content: center; + + // Add animations woo yeah + transition: 0.2s ease-in-out; + &:hover { + backdrop-filter: blur(5px) brightness(80%); + // Apple WebShit compatibility + -webkit-backdrop-filter: blur(5px) brightness(80%); + transition: 0.2s ease-in-out; + } + + } + + .image { + // Gives the grid images a nice round edge + border-radius: 5px; + overflow: hidden; + height: 150px; + width: auto; + } + + img { + // Sets the images for the individual boxes properly + width: 100%; + height: 100%; + object-fit: cover; + display: flex; + justify-content: center; + } +} + +.center_img { + + overflow: hidden; + width: 400px; + padding: 5px; + display: block; + margin-left: auto; + margin-right: auto; + + img { + width: 100%; + height: 100%; + object-fit: cover; + border-radius: 5px; + } +} + +.license { + // Small information text about the licenses used + + //font: 14px 'Varela'; + display: flex; + justify-content: center; + width: auto; + + div { + + + // Secondary div to *really* center this div + + border: 3px solid transparent; + border-radius: 5px; + padding: 5px; + max-width: max-content; + text-align: center; + backdrop-filter: blur(1px) brightness(80%); + // Apple WebShit compatibility + -webkit-backdrop-filter: blur(1px) brightness(80%); + transition: 0.2s ease-in-out; + + &:hover { + backdrop-filter: blur(5px) brightness(60%); + // Apple WebShit compabilitity + -webkit-backdrop-filter: blur(5px) brightness(60%); + transition: 0.2s ease-in-out; + } + + a { + // Colours the link white for readability + + color: white; + } + } +} + +.text { + border: transparent solid 10px; + border-radius: 5px; + padding: 3px; + backdrop-filter: blur(5px) brightness(80%); + // Apple WebShit compatibility + -webkit-backdrop-filter: blur(5px) brightness(80%); + color: white; +} + +// Font settings +.title { + font-size: 18px; +} diff --git a/robots.txt b/robots.txt new file mode 100644 index 0000000..145667b --- /dev/null +++ b/robots.txt @@ -0,0 +1,12 @@ +User-agent: * +Disallow: /note.txt +Disallow: /template.html +Disallow: /404.html +Disallow: /resources +Disallow: /resources/temo/ +Disallow: /testing + +User-agent: nsa +Disallow: * + +Sitemap: https://twoexem.com/sitemap.xml diff --git a/sitemap.xml b/sitemap.xml new file mode 100644 index 0000000..04746bb --- /dev/null +++ b/sitemap.xml @@ -0,0 +1,15 @@ + + + + https://twoexem.com/ + weekly + 1.0 + + + https://git.twoexem.com/ + daily + 1.0 + + diff --git a/test.html b/test.html new file mode 100644 index 0000000..c4a00bb --- /dev/null +++ b/test.html @@ -0,0 +1,49 @@ + + + + + + + + + + Twoexem + + + + +
+

This is a test page.

+
+
+
+ This is a bit of text. +
+ I can write some funny stuff here. +
+ Time for an image grid! +
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+ This works really well woooowowoyeah -- cgit v1.2.3