diff --git a/app/assets/css/blog/article.css b/app/assets/css/blog/article.css new file mode 100644 index 0000000..068ae00 --- /dev/null +++ b/app/assets/css/blog/article.css @@ -0,0 +1,62 @@ +.BlogArticle { + display: flex; + flex-direction: column; + gap: 2rem; + + & .meta { + display: flex; + gap: 1rem; + align-items: center; + } + + & .article-content { + background: var(--color-black); + border-radius: 1rem; + } + + & .article-text { + padding: 2rem; + } + + & header { + padding: 2rem 2rem 0; + } + + h1 { + font-size: 2rem; + display: flex; + flex-direction: column; + + & small { + font-size: 1.2rem; + font-style: italic; + } + } + + h2 { + font-size: 1.5rem; + font-weight: lighter; + margin-top: 2rem; + margin-bottom: 1rem; + } + + & .image { + width: 100%; + height: 450px; + border-radius: 1rem 1rem 0 0; + overflow: hidden; + background: #000; + + & img { + width: 100%; + height: 100%; + opacity: .8; + object-fit: cover; + object-position: center; + } + } + + & p { + margin-bottom: .5rem; + } +} \ No newline at end of file diff --git a/app/assets/css/blogAuthor.css b/app/assets/css/blog/author.css similarity index 100% rename from app/assets/css/blogAuthor.css rename to app/assets/css/blog/author.css diff --git a/app/assets/css/blogCard.css b/app/assets/css/blog/card.css similarity index 94% rename from app/assets/css/blogCard.css rename to app/assets/css/blog/card.css index 66fe68e..7b067c7 100644 --- a/app/assets/css/blogCard.css +++ b/app/assets/css/blog/card.css @@ -1,7 +1,7 @@ .BlogCard { overflow: hidden; border-radius: 1rem; - background: var(--color-orange-black); + background: var(--color-black); display: flex; flex-direction: column; height: 100%; @@ -15,6 +15,7 @@ & > .image { flex: 0 0 200px; width: 100%; + overflow: hidden; & img { height: 100%; @@ -60,7 +61,6 @@ } - @media (width <= 780px) { .BlogCard header { align-items: center; diff --git a/app/assets/css/blog/excerpt.css b/app/assets/css/blog/excerpt.css new file mode 100644 index 0000000..8ba25a1 --- /dev/null +++ b/app/assets/css/blog/excerpt.css @@ -0,0 +1,3 @@ +.Excerpt { + font-style: italic; +} \ No newline at end of file diff --git a/app/assets/css/blog/overview.css b/app/assets/css/blog/overview.css new file mode 100644 index 0000000..8bdda6b --- /dev/null +++ b/app/assets/css/blog/overview.css @@ -0,0 +1,16 @@ +.BlogOverview { + & .category-list { + display: flex; + justify-content: center; + flex-wrap: wrap; + gap: 1rem; + list-style: none; + } + + & .article-overview { + width: 100%; + display: grid; + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + gap: 2rem; + } +} \ No newline at end of file diff --git a/app/assets/css/global.css b/app/assets/css/global.css index f266ffb..2e23894 100755 --- a/app/assets/css/global.css +++ b/app/assets/css/global.css @@ -97,6 +97,15 @@ a { color: var(--color-white); } +a.side { + color: var(--color-orange); + text-decoration: none; + + &:hover { + color: var(--color-orange-light); + } +} + a.text { color: var(--color-orange); text-decoration: underline; @@ -148,6 +157,16 @@ span.chip { align-items: center; gap: .5em; width: max-content; + transition: var(--transition-time); + + &.interactive { + cursor: pointer; + + &:hover { + background: var(--color-orange-dark); + color: var(--color-white); + } + } &:not(.dark) { --background: var(--color-orange); @@ -197,6 +216,10 @@ span.chip { margin-top: 1rem; } +.margin-top-middle { + margin-top: 2rem; +} + .margin-top-big { margin-top: 6rem; } @@ -206,7 +229,7 @@ span.chip { } .bg-radial { - background-image: radial-gradient(circle at 100vw 100vh, rgba(255,145,0,0.2) 0%, rgba(0,0,0,0) 63%, rgba(0,0,0,0) 100%); + background-image: radial-gradient(circle at 100vw 100vh, rgba(255, 145, 0, 0.2) 0%, rgba(0, 0, 0, 0) 63%, rgba(0, 0, 0, 0) 100%); background-color: var(--color-orange-black); background-repeat: no-repeat; @@ -241,6 +264,10 @@ span.chip { flex-direction: column; } +.flex-wrap { + flex-wrap: wrap; +} + .gap-default { gap: 3rem; } @@ -288,12 +315,6 @@ span.chip { align-items: center; } -.grid { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); - gap: 2rem; -} - .tip-container .tip { scale: 0; position: absolute; diff --git a/app/components/Blog/Author.vue b/app/components/Blog/Author.vue index 6045e67..3d53967 100644 --- a/app/components/Blog/Author.vue +++ b/app/components/Blog/Author.vue @@ -1,7 +1,15 @@ \ No newline at end of file diff --git a/app/components/Blog/Card.vue b/app/components/Blog/Card.vue index a0a8be5..cb1c5f5 100644 --- a/app/components/Blog/Card.vue +++ b/app/components/Blog/Card.vue @@ -1,46 +1,29 @@ \ No newline at end of file diff --git a/app/components/Blog/Category.vue b/app/components/Blog/Category.vue index 1e9449b..26534e1 100644 --- a/app/components/Blog/Category.vue +++ b/app/components/Blog/Category.vue @@ -18,7 +18,8 @@ const icons: Record = { 'tutorial': 'ph:lightbulb-duotone', 'news': 'ph:newspaper-duotone', 'freelancing': 'ph:laptop-duotone', + 'extern': 'ph:repeat-duotone', } -const icon = computed(() => name ? icons[name] : 'ph:question-mark-duotone') +const icon = computed(() => icons[name] ?? 'ph:question-mark-duotone') \ No newline at end of file diff --git a/app/components/Blog/Excerpt.vue b/app/components/Blog/Excerpt.vue new file mode 100644 index 0000000..14540b1 --- /dev/null +++ b/app/components/Blog/Excerpt.vue @@ -0,0 +1,9 @@ + + + \ No newline at end of file diff --git a/app/components/Blog/types.ts b/app/components/Blog/types.ts index 687006f..f198dec 100644 --- a/app/components/Blog/types.ts +++ b/app/components/Blog/types.ts @@ -1 +1,14 @@ -export type Category = 'story' | 'snippet' | 'tutorial' | 'news' | 'freelancing' \ No newline at end of file +export type Category = 'story' | 'snippet' | 'tutorial' | 'news' | 'freelancing' | 'extern' + +export type BlogCard = { + title: string + description: string + image: string + date: string + link: string + category: Category + author: { + name: string + img?: string + } +} \ No newline at end of file diff --git a/app/components/Link/External.vue b/app/components/Link/External.vue new file mode 100644 index 0000000..f0354b6 --- /dev/null +++ b/app/components/Link/External.vue @@ -0,0 +1,14 @@ + + + diff --git a/app/components/Link/Internal.vue b/app/components/Link/Internal.vue new file mode 100644 index 0000000..1c5452a --- /dev/null +++ b/app/components/Link/Internal.vue @@ -0,0 +1,14 @@ + + + diff --git a/app/components/Section/Intro.vue b/app/components/Section/Intro.vue index 396f561..81d6d28 100755 --- a/app/components/Section/Intro.vue +++ b/app/components/Section/Intro.vue @@ -6,7 +6,9 @@ Ich bin Fiona.

- Component & API Entwicklerin + Component + & + API Entwicklerin

Ich unterstütze Unternehmen dabei, ihre Daten von verschiedenen Endpunkten sauber aufzubereiten @@ -21,14 +23,14 @@ Ich biete dir genau das, was du brauchst, um eine individuelle WebApp in Fahrt zu bringen, deren Inhalte einfach zu verändern sind.

- - Bild von Fiona Urban + + Bild von Fiona Urban
diff --git a/app/error.vue b/app/error.vue new file mode 100644 index 0000000..ac82507 --- /dev/null +++ b/app/error.vue @@ -0,0 +1,20 @@ + + \ No newline at end of file diff --git a/app/pages/blog/[slug].vue b/app/pages/blog/[slug].vue index b802c0a..8bcc8ac 100644 --- a/app/pages/blog/[slug].vue +++ b/app/pages/blog/[slug].vue @@ -1,11 +1,58 @@ - - \ No newline at end of file diff --git a/app/pages/blog/index.vue b/app/pages/blog/index.vue index 0cffc71..cf3972b 100644 --- a/app/pages/blog/index.vue +++ b/app/pages/blog/index.vue @@ -1,28 +1,88 @@