From 7deac63ba24ef72f5230ce817228a2cc8b4476ab Mon Sep 17 00:00:00 2001 From: Alina Marquardt Date: Tue, 13 May 2025 16:23:57 +0200 Subject: [PATCH] start of flexbox based respolsivity --- .gitignore | 8 ++ public_html/index.html | 76 ++++++---- public_html/style.css | 317 +++++++++++++++++++++++------------------ 3 files changed, 234 insertions(+), 167 deletions(-) diff --git a/.gitignore b/.gitignore index 105eef8..6923af3 100644 --- a/.gitignore +++ b/.gitignore @@ -2,6 +2,14 @@ manage-audio/public/ manage-audio/playlist.json +# Created by https://www.toptal.com/developers/gitignore/api/nova +# Edit at https://www.toptal.com/developers/gitignore?templates=nova + +### nova ### +.nova/* + +# End of https://www.toptal.com/developers/gitignore/api/nova + # Created by https://www.toptal.com/developers/gitignore/api/node,dotenv,linux # Edit at https://www.toptal.com/developers/gitignore?templates=node,dotenv,linux diff --git a/public_html/index.html b/public_html/index.html index 33e5ad7..0da7c6d 100644 --- a/public_html/index.html +++ b/public_html/index.html @@ -9,6 +9,7 @@ + @@ -19,41 +20,49 @@ -
+
-
-
-
- hello! - my name is - alina marquardt -
-
- - -
+
-
+
-
+
+
+
+ hello! + my name is + alina marquardt +
+
+ + + + + +
+ +
+ +
+ +

music releases

+
-
-

music releases

+
+
+
+
+
diff --git a/public_html/style.css b/public_html/style.css index 9841ed8..0f68208 100644 --- a/public_html/style.css +++ b/public_html/style.css @@ -157,7 +157,7 @@ p {text-wrap: pretty;} } html { - font-size: 120%; + font-size: 18px; } body {font-size: 1rem; font-family: var(--font-system);} @@ -183,75 +183,194 @@ textarea:-moz-placeholder { color: var(--placeholder-color); } body { background-color: black; - background-image: url('img/bg.jpg'); + /* background-image: url('img/bg.jpg'); */ background-repeat: no-repeat; background-position: top left; background-attachment: fixed; } +.headlineshadow { + text-shadow: 0 2px 1px rgba(0,0,0,1); +} + a { text-decoration: none; transition: all 0.2s ease-in-out; } -.headlineshadow { - text-shadow: 0 2px 1px rgba(0,0,0,1); -} - -#base { - width: 400px; +#background_wrap { + z-index: -1; position: fixed; - color: white; + top: 0; + left: 0; + height: 100%; + width: 100%; + background-image: url('img/bg.jpg'); + background-repeat: no-repeat; + background-position: top left; + background-attachment: fixed; } -#base a { - color: white; -} - -#maincontent { - position: relative; - padding: 4.5rem 0 0 21rem; +#wrapper { + display: flex; + flex-direction: row; + gap: 5rem; + margin-left: 3rem; + margin-top: 4rem; } .column { - float: left; - width: 550px; + display: flex; + flex-direction: column; } -section.box { - width: 480px; - margin: 0 0 4.5rem 0; +/* sidebar */ + +.column-sidebar { + width: 235px; + color: white; + font-size: 1.125rem; + font-style: italic; + font-weight: 300; +} + +.column-sidebar a { + color: white; + display: block; +} + +.column-sidebar a, .column-sidebar .bigline { + font-size: 1.5rem; + line-height: 1em; +} +.column-sidebar a:hover { + text-shadow: 0 0 7px rgba(255,255,255,0.6); +} +.column-sidebar em { + font-weight: 600; +} + + +.column-sidebar #greeting { + font-size: 1.75rem; +} +.column-sidebar #greeting #icosahedron-container { + margin-left: 1rem; + margin-bottom: 1.2rem; + width: 95px; + height: 95px; position: relative; } -section.box header { +.column-sidebar #greeting #icosahedron-container canvas { + width: 100%; + height: 100%; +} + +.column-sidebar #greeting span { + display: block; + line-height: 1em; +} +.column-sidebar #greeting .line1 { + margin-left: 1.375rem; +} +.column-sidebar #greeting .line2 { + font-weight: 400; + line-height: 0.8em; + margin-left: 2rem; +} +.column-sidebar #greeting .line3 { + font-weight: 600; + line-height: 1.2em; + margin-left: 0rem; +} + + +.column-sidebar section#iam { + margin-top: 2.8rem; + line-height: 1.1em; +} +.column-sidebar section#iam .line1 { + margin-left: 2.7rem; + line-height: 0.9em; +} +.column-sidebar section#iam .line2 { + margin-left: 0.3rem; + line-height: 1em; +} +.column-sidebar section#iam .line3 { + margin-left: 1rem; + line-height: 1.1em; +} +.column-sidebar section#iam .line4 { + margin-left: 0.4rem; +} + +.column-sidebar section#iam span { + display: block; +} + + +.column-sidebar section#findme { + margin-top: 2.8rem; + line-height: 1.1em; +} +.column-sidebar section#findme .line1 { + margin-left: 2rem; +} +.column-sidebar section#findme .line2 { + margin-left: 0rem; +} +.column-sidebar section#findme .line3 { + margin-left: 1.7rem; +} +.column-sidebar section#findme span.line4 a { + margin-left: 3.375rem; + font-size: 1.125rem; +} + +/* content */ + +.column-content { + width: 495px; + color: white; + font-size: 1.125rem; + font-style: italic; + font-weight: 300; +} + +.column-content section { + width: 100%; + margin: 0 0 4.5rem 0; +} +.column-content section header { height: 60px; padding: 0 0 0 1.25rem; position: relative; } -section.box header h1 { +.column-content section header h1 { color: white; font-size: 2.125rem; font-weight: 300; text-shadow: 0 2px 1px rgba(0,100,125,1); } -section.invertedbox header h1 { +.column-content section.invertedbox header h1 { color: #4e8595; text-shadow: none; } -section.box header h1 em, section.invertedbox h2 em { +.column-content section header h1 em, section.invertedbox h2 em { font-style: normal; font-weight: 400; } -section.box div.opaque { +.column-content section div.opaque { padding: 1.25rem; } -section.box div.opaque h2 { +.column-content section div.opaque h2 { font-size: 1.6rem; font-weight: 300; margin-bottom: 1rem; } -section.box div.opaque h2 span.halfbubble { +.column-content section div.opaque h2 span.halfbubble { height: 22px; width: 11px; border-bottom-right-radius: 11px; @@ -260,13 +379,13 @@ section.box div.opaque h2 span.halfbubble { margin: 0 0.7rem -0.125rem -1.25rem; } -section.box header .icon { +.column-content section header .icon { float: right; margin-right: 1.25rem; margin-top: -1rem; } -section.box#experiment header .icon { +.column-content section#experiment header .icon { margin-top: -2.5rem; } @@ -294,7 +413,7 @@ article.album h2 em { font-size: 1.2em; } article.album .listenbuy { - color: white; + color: transparent; font-size: 1.1em; font-weight: 400; display: inline-block; @@ -303,13 +422,14 @@ article.album .listenbuy { padding: 0.25em 1em; background-color: transparent; border-radius: 2em; - transition: background-color 0.25s, margin 0.25s; + transition: background-color 0.25s, color 0.25s, margin 0.25s; } article.album .listenbuy em { font-style: normal; font-weight: 600; } article.album a:hover .listenbuy { + color: white; margin-top: 1em; background-color: var(--button-color); } @@ -326,18 +446,6 @@ article.album a:hover { height: 160px; } -/* icosahedron */ - -#icosahedron-container { - width: 95px; - height: 95px; - position: relative; -} -#icosahedron-container canvas { - width: 100%; - height: 100%; -} - /* backgrounds */ .whitebg { @@ -352,97 +460,6 @@ article.album a:hover { color: white; } -/* sidebar */ - -#base { - font-size: 1.125rem; - font-style: italic; - font-weight: 300; -} -#greeting { - font-size: 1.75rem; - margin-top: 4rem; -} -#greeting .avatar { - margin-left: 4rem; - margin-bottom: 1.2rem; -} -#greeting span { - display: block; - line-height: 1em; -} -#greeting .line1 { - margin-left: 4.375rem; -} -#greeting .line2 { - font-weight: 400; - line-height: 0.8em; - margin-left: 5rem; -} -#greeting .line3 { - font-weight: 600; - line-height: 1.2em; - margin-left: 3rem; -} - -#base a, #base .bigline { - font-size: 1.5rem; - display: block; - line-height: 1em; -} -#base a:hover { - text-shadow: 0 0 7px rgba(255,255,255,0.6); -} -#base em { - font-weight: 600; -} -#base .icon { - background-repeat: no-repeat; -} - - -#base section.findme { - margin-top: 4.375rem; - line-height: 1.1em; -} -#base section.findme .line1 { - margin-left: 5rem; -} -#base section.findme .line2 { - margin-left: 3rem; -} -#base section.findme .line3 { - margin-left: 4.7rem; -} -#base section.findme span.line4 a { - margin-left: 6.375rem; - font-size: 1.125rem; -} - -#base section.iam { - margin-top: 2.8rem; - line-height: 1.1em; -} -#base section.iam .line1 { - margin-left: 5.7rem; - line-height: 0.9em; -} -#base section.iam .line2 { - margin-left: 3.3rem; - line-height: 1em; -} -#base section.iam .line3 { - margin-left: 4rem; - line-height: 1.1em; -} -#base section.iam .line4 { - margin-left: 3.4rem; -} - -#base section.iam span { - display: block; -} - /* Print styles -------------------------------------------------------------------------------*/ @@ -456,8 +473,36 @@ article.album a:hover { /* Media queries -------------------------------------------------------------------------------*/ -@media screen and (max-width: 576px) { +@media screen and (max-width: 915px) { + #background_wrap { + background-size: 100%; + } + #wrapper { + display: flex; + flex-direction: column; + gap: 0; + margin: 1.5rem; + } + .column { + flex-direction: unset; + display: contents; + } + #greeting { + order: 1; + } + + #music { + order: 2; + } + + #iam { + order: 3; + } + + #findme { + order: 4; + } } @media print {