From 8b1e4813414e746e4f29ea2c5b3388e2e836d86e Mon Sep 17 00:00:00 2001 From: lilith Date: Thu, 23 Jan 2025 20:42:39 +0100 Subject: [PATCH] Preliminary work on migrating from penpot --- styleguide/color_guide.html | 200 ++++++++++++++++++++++++++++++++++++ styleguide/testpage.html | 148 ++++++++++++++++++++++++++ styleguide/typography.html | 71 +++++++++++++ 3 files changed, 419 insertions(+) create mode 100644 styleguide/color_guide.html create mode 100644 styleguide/testpage.html create mode 100644 styleguide/typography.html diff --git a/styleguide/color_guide.html b/styleguide/color_guide.html new file mode 100644 index 0000000..27a1de0 --- /dev/null +++ b/styleguide/color_guide.html @@ -0,0 +1,200 @@ + + + + + + + + Color Guide + + + +

Color Guide

+ +
+

Darkmode

+ +
+ Fore- & Background + +
+
+ #f5f0f0 +
+ +
+
+ #180736 +
+
+ + +
+ Shades + +
+
+ #TODOspan> +
+ +
+
+ #TODO +
+ +
+
+ #TODO +
+ +
+
+ #TODO +
+
+ +
+ Primary & Secondary + +
+
+ #c6257d +
+ +
+
+ #4dadd8 +
+
+ + +
+ Error & Success + +
+
+ #f22d2d +
+ +
+
+ #8cff3c +
+
+ + + +
+ Accents + +
+
+ #60a5f9 +
+ +
+
+ #d381f7 +
+ +
+
+ #ff7975 +
+
+
+ +
+

Lightmode

+ +
+ Fore- & Background + +
+
+ #180736 +
+ +
+
+ #f5f0f0 +
+
+ + +
+ Shades + +
+
+ #TODOspan> +
+ +
+
+ #TODO +
+ +
+
+ #TODO +
+ +
+
+ #TODO +
+
+ +
+ Primary & Secondary + +
+
+ #TODO +
+ +
+
+ #TODO +
+
+ +
+ Error & Success + +
+
+ #b21010 +
+ +
+
+ #47990f +
+
+ + + +
+ Accents + +
+
+ #303ec0 +
+ +
+
+ #6c366c +
+ +
+
+ #932f0a +
+
+
+ + + \ No newline at end of file diff --git a/styleguide/testpage.html b/styleguide/testpage.html new file mode 100644 index 0000000..6b9eb67 --- /dev/null +++ b/styleguide/testpage.html @@ -0,0 +1,148 @@ + + + + + + + + Testdocument + + + +

Testdocument

+

Tests for Fonts and Colorpalettes

+ +
+

Section With Links

+ + + + + + + + + + + + + + +
Overview of link highlighting
Regular Link:https://eh22.easterhegg.eu/
Hover/Focus/Active Link:https://eh22.easterhegg.eu/
Visited Link:https://eh22.easterhegg.eu/
+
+ +
+

Section With Text

+

+ Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et + dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet + clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, + consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed + diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea + takimata sanctus est Lorem ipsum dolor sit amet. +

+ +

Subsection Title

+

+ Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et + dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet + clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, + consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed + diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea + takimata sanctus est Lorem ipsum dolor sit amet. +

+ +

Subsubsection Title

+

+ Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et + dolore magna aliquyam erat, sed diam voluptua. +

+
+ +
+

Section With Code

+ 

+        #include <stdlib.h>
+
+        int *positives(int *numbers, int *size) {
+        int new_size = 0;
+
+        for (int i = 0; i < *size; i++) {
+        if (numbers[i] >= 0) {
+        numbers[new_size] = numbers[i];
+        new_size++;
+        }
+        }
+
+        *size = new_size;
+        return realloc(numbers, sizeof(*numbers) * new_size);
+        }
+
+
+ +
+

Section With Image

+

+ Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et + dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet + clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, + consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed + diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea + takimata sanctus est Lorem ipsum dolor sit amet. +

+
+ Close-up of a young cat's face that is distorted through horizontally moving rows of pixels slightly to the left or right and shifting some pixels' color into pink or blue hues. +
Example image with some visual distortion applied.
+
+

+ Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et + dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet + clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, + consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed + diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea + takimata sanctus est Lorem ipsum dolor sit amet. +

+
+ +
+

Section With Lists

+

+ Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et + dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet + clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. +

+
    +
  1. Short item no. 1.
    2. +
  2. Long item in the middle. This item is longer then one visual line, which is why it wraps over into the next + line and therefore moves the next item further down.
    3. +
  3. Long item at the end, which is also longer than one visual line. It also wraps over into the next line, but + there is no next item to move.
    4. +
+

+ Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et + dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet + clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. +

+ +

Subsection Title

+
    +
  1. Short item no. 1.
    2. +
  2. Long item in the middle. This item is longer then one visual line, which is why it wraps over into the next + line and therefore moves the next item further down.
    3. +
  3. Long item at the end, which is also longer than one visual line. It also wraps over into the next line, but + there is no next item to move.
    4. +
+ +

Subsection Title

+ +
+ + + \ No newline at end of file diff --git a/styleguide/typography.html b/styleguide/typography.html new file mode 100644 index 0000000..409fe54 --- /dev/null +++ b/styleguide/typography.html @@ -0,0 +1,71 @@ + + + + + + + + Typography + + + +

Typography

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Main Title72pxArgon Glow
Heading 148pxTilt Neon
Heading 232pxTilt Neon
Heading 324pxTilt Neon
Heading 418pxTilt Neon
Subheading24pxAthiti
Paragraph16pxAthiti
Code16pxDeparture Mono
+
+
+ +
+ + + \ No newline at end of file