diff --git a/www/css/barefaced_content.css b/www/css/barefaced_content.css index da429ce..c0a9a58 100644 --- a/www/css/barefaced_content.css +++ b/www/css/barefaced_content.css @@ -3,12 +3,10 @@ main { padding: var(--main-content-padding); margin: 16px; - height: calc(100vh - var(--header-height) - var(--footer-height) - 4 * var(--main-content-padding) - 64px); + height: calc(100vh - var(--header-height) - var(--footer-height) - 4 * var(--main-content-padding)); /* 32px für die Margen */ overflow-y: auto; - /* Scrollbar, wenn der Inhalt zu groß ist */ - border: 1px solid var(--secondary-color); - border-radius: var(--box-border-radius); + } .editor-container { diff --git a/www/css/barefaced_footer.css b/www/css/barefaced_footer.css index 38c4c71..7ab855a 100644 --- a/www/css/barefaced_footer.css +++ b/www/css/barefaced_footer.css @@ -2,10 +2,17 @@ footer { height: var(--footer-height); - background-color: var(--primary-color); + background-image: url('../images/footer.png'); + background-size: auto; + background-position: left; border: 1px solid var(--secondary-color); border-radius: var(--box-border-radius); - color: var(--secondary-font-color); + color: var(--primary-color); + padding: 0px; margin: 16px; - padding: 10px; + @media (max-width: 768px) { + padding: 0px; /* Adjust the padding for smaller screens */ + margin: 8px; /* Adjust the margin for smaller screens */ + } + } diff --git a/www/css/barefaced_global.css b/www/css/barefaced_global.css index e301b3f..a30e5bf 100644 --- a/www/css/barefaced_global.css +++ b/www/css/barefaced_global.css @@ -3,19 +3,14 @@ /* globale Variablen */ :root { /* colors */ - --primary-color: #1976D2; - --secondary-color: #d27519; - --font-color: #333333; - --secondary-font-color: #f3f5f4; - --background-color: #f3f5f4; - --highlight-color: #f0f0f0; - --error-color: #ff4d4f; - --success-color: #52c41a; - --data-background-color: #ffffff; + --primary-color: #251904; + --secondary-color: #72b8b4; + --background-color: #eee2cb; + --highlight-color: #a6eee9; /* Dimensions */ - --header-height: 32px; - --footer-height: 32px; + --header-height: 100px; + --footer-height: 50px; --main-content-padding: 20px; --box-border-radius: 10px; } @@ -23,8 +18,8 @@ /* 1. Schriftart definieren */ @font-face { - font-family: 'Inter'; /* Name, den du später im CSS verwendest */ - src: url('/static/fonts/Inter.ttf') format('truetype'); + font-family: 'TypicalWriter'; /* Name, den du später im CSS verwendest */ + src: url('../fonts/TypicalWriter-G3LO.ttf') format('truetype'); font-weight: normal; font-style: normal; } @@ -32,12 +27,64 @@ * { margin: 0; padding: 0; + box-sizing: border-box; } /* 2. Schriftart anwenden und Ränder entfernen*/ body { - font-family: 'Inter', Arial, sans-serif; + font-family: 'TypicalWriter', Arial, sans-serif; background-color: var(--background-color); - color: var(--font-color); + color: var(--primary-color); } +// 12 Spalten Grid System +.row::after { + content: ""; + clear: both; + display: table; +} + +[class*="col-"] { + float: left; + padding: 15px; +} + +/* Responsive Anpassungen Handy */ +[class*="col-"] { +width: 100%; +} + +/* Responsive Anpassungen Tablet */ +@media screen and (min-width: 600px) { + .col-s-1 {width: 8.33%;} + .col-s-2 {width: 16.66%;} + .col-s-3 {width: 25%;} + .col-s-4 {width: 33.33%;} + .col-s-5 {width: 41.66%;} + .col-s-6 {width: 50%;} + .col-s-7 {width: 58.33%;} + .col-s-8 {width: 66.66%;} + .col-s-9 {width: 75%;} + .col-s-10 {width: 83.33%;} + .col-s-11 {width: 91.66%;} + .col-s-12 {width: 100%;} +} + +/* Spaltenbreiten für 12 Spalten Grid */ +@media screen and (min-width: 768px) { +.col-1 {width: 8.33%;} +.col-2 {width: 16.66%;} +.col-3 {width: 25%;} +.col-4 {width: 33.33%;} +.col-5 {width: 41.66%;} +.col-6 {width: 50%;} +.col-7 {width: 58.33%;} +.col-8 {width: 66.66%;} +.col-9 {width: 75%;} +.col-10 {width: 83.33%;} +.col-11 {width: 91.66%;} +.col-12 {width: 100%;} +} + + + diff --git a/www/css/barefaced_header.css b/www/css/barefaced_header.css index 6711155..8922b50 100644 --- a/www/css/barefaced_header.css +++ b/www/css/barefaced_header.css @@ -1,18 +1,26 @@ /** Header and included nav styles */ -/* Style für Header, Navigation, Main Content, Aside und Footer */ +/* Style für Header, Navigation */ header { display: flex; justify-content: flex-start; + flex-direction: row; + @media (max-width: 768px) { + flex-direction: column; + justify-content: center; + align-items: center; + } align-items: center; height: var(--header-height); - background-color: var(--primary-color); + background-image: url('../images/header.png'); + background-size: auto; + background-position: left; border: 1px solid var(--secondary-color); border-radius: var(--box-border-radius); - color: var(--secondary-font-color); + color: var(--primary-color); margin: 16px; - padding: 10px; + } header img { @@ -21,6 +29,19 @@ header img { padding-right: 16px; /* Space between the image and the header text */ } +header h1 { + font-weight: 800; + font-size: 3em; /* Adjust the font size as needed */ + margin-left: 5px; + padding: 16px; + @media (max-width: 768px) { + font-size: 2em; /* Adjust the font size for smaller screens */ + padding: 0px; /* Adjust the padding for smaller screens */ + } + +} + + header p { font-weight: 100; margin-left: 16px; @@ -29,10 +50,14 @@ header p { nav { margin: 16px; - padding: 10px; + @media (max-width: 768px) { + margin: 0px; + } + padding: 5px; } nav ul { + padding-top: 15px; /* Entfernt die Standard-Padding der Liste */ list-style-type: none; /* Entfernt die Standard-Aufzählungszeichen */ display: flex; /* Macht die Liste horizontal */ gap: 20px; /* Abstand zwischen den Listenelementen */ @@ -43,6 +68,7 @@ nav ul li a { color: var(--secondary-font-color); /* Setzt die Schriftfarbe */ } nav ul li a:hover { + text-decoration: underline; /* Unterstreichung beim Überfahren mit der Maus */ font-weight: bold; /* Macht den Text fett */ } diff --git a/www/fonts/Inter.ttf b/www/fonts/Inter.ttf deleted file mode 100644 index e31b51e..0000000 Binary files a/www/fonts/Inter.ttf and /dev/null differ diff --git a/www/images/SimplyCPQ_Logo.svg b/www/images/SimplyCPQ_Logo.svg deleted file mode 100644 index 3088fe1..0000000 --- a/www/images/SimplyCPQ_Logo.svg +++ /dev/null @@ -1,45 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/www/images/archiv/Breminale_Gig_07.2008 059.jpg b/www/images/archiv/Breminale_Gig_07.2008 059.jpg new file mode 100644 index 0000000..02f8c36 Binary files /dev/null and b/www/images/archiv/Breminale_Gig_07.2008 059.jpg differ diff --git a/www/images/archiv/DSC_2138.JPG b/www/images/archiv/DSC_2138.JPG new file mode 100644 index 0000000..493beb5 Binary files /dev/null and b/www/images/archiv/DSC_2138.JPG differ diff --git a/www/images/archiv/DSC_5143.JPG b/www/images/archiv/DSC_5143.JPG new file mode 100644 index 0000000..f592eea Binary files /dev/null and b/www/images/archiv/DSC_5143.JPG differ diff --git a/www/images/footer.png b/www/images/footer.png new file mode 100644 index 0000000..a32db7b Binary files /dev/null and b/www/images/footer.png differ diff --git a/www/images/header.png b/www/images/header.png new file mode 100644 index 0000000..9e1c97e Binary files /dev/null and b/www/images/header.png differ diff --git a/www/images/property_type.svg b/www/images/property_type.svg deleted file mode 100644 index 963c2d6..0000000 --- a/www/images/property_type.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/www/images/property_type_group.svg b/www/images/property_type_group.svg deleted file mode 100644 index a2f71ec..0000000 --- a/www/images/property_type_group.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/www/images/screens/dummy.webp b/www/images/screens/dummy.webp deleted file mode 100644 index e4782c9..0000000 Binary files a/www/images/screens/dummy.webp and /dev/null differ diff --git a/www/images/users/tsindt.png b/www/images/users/tsindt.png deleted file mode 100644 index 54f4d57..0000000 Binary files a/www/images/users/tsindt.png and /dev/null differ diff --git a/www/index.html b/www/index.html index 34c188a..ca9d465 100644 --- a/www/index.html +++ b/www/index.html @@ -3,22 +3,49 @@ + + + + The Barefaced Home - +
+
+

The Barefaced

+
+ +
-

Welcome to our website

-

This is the main content area.

+
+
+

The Barefaced

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+
+ +
+
+

18.09.2026

+

Wir ziehen mit unserem Equipment zurück in die Zollkantine in Bremen. Wir teilen uns dann den Raum mit Myrre und ihrer Band.

+

19.09.2026

+

Falls Du Drums spielen kannst, melde Dich!

+

20.09.2026

+

irgendwas passiert schon

+
+
+
\ No newline at end of file