kamilniemczycki/kamilcraft.com
1
0
Fork 0
Code Issues Pull Requests Projects Releases 1 Wiki Activity

updated project view

Browse Source
This commit is contained in:
Kamil Niemczycki 2022-07-24 17:33:58 +02:00
parent 5712c890af
commit a4fe5e4efc
Signed by: kamilniemczycki
GPG Key ID: 04D4E2012F969213
1 changed files with 74 additions and 156 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

230
src/views/ProjectView.vue
View File

@ -1,74 +1,78 @@
<template> <template>
<section <section
v-if="isLoaded" v-if="isLoaded"
class="project" class="max-w-screen-xl mx-auto px-6 xl:px-2 py-8"
> >
<header class="project_header"> <header class="text-neutral-800 font-roboto">
<h1>{{ project.title }}</h1> <h1 class="text-center text-4xl font-light pb-5">
<ul class="project_info"> {{ project.title }}
<li class="info_text"> </h1>
<font-awesome-icon <ul class="grid grid-cols-2 gap-3 md:flex md:gap-5 justify-center list-none">
class="icon" <li class="flex items-center gap-2">
<FontAwesomeIcon
class="w-4"
:icon="['far', 'clock']" :icon="['far', 'clock']"
/> />
<span>{{ project.release_date }}</span> <span>{{ project.release_date }}</span>
</li> </li>
<li class="info_text"> <li class="flex items-center gap-2">
<font-awesome-icon <FontAwesomeIcon
class="icon" class="w-4"
:icon="['far', 'user']" :icon="['far', 'user']"
/> />
<span>{{ project.author }}</span> <span>{{ project.author }}</span>
</li> </li>
<li class="info_text"> <li class="flex items-center gap-2">
<font-awesome-icon <FontAwesomeIcon
class="icon" class="w-4"
:icon="['far', 'folder']" :icon="['far', 'folder']"
/> />
<span>{{ getCategoryName(project.categories) }}</span> <span>{{ getCategoryName(project.categories) }}</span>
</li> </li>
<li class="info_text"> <li class="flex items-center gap-2">
<font-awesome-icon <FontAwesomeIcon
class="icon" class="w-4"
:icon="['fas', 'code-branch']" :icon="['fas', 'code-branch']"
/> />
<span>{{ project.project_version }}</span> <span>{{ project.project_version }}</span>
</li> </li>
<li <li
v-if="project.project_url" v-if="project.project_url"
class="info_text" class="flex items-center gap-2"
> >
<font-awesome-icon <FontAwesomeIcon
class="icon" class="w-4"
:icon="['fas', 'link']" :icon="['fas', 'link']"
/> />
<span><a <span>
:href="project.project_url" <a
target="_blank" :href="project.project_url"
rel="noopener nofollow noreferrer" target="_blank"
>Link</a></span> rel="noopener nofollow noreferrer"
>
Link
</a>
</span>
</li> </li>
</ul> </ul>
</header> </header>
<div class="container"> <div class="pt-5">
<component <figure class="w-full shadow-xl">
:is="`figure`"
class="project-photo"
>
<img <img
:src="`${project.images.large}`" class="block max-h-[31.25rem] object-cover"
:src="project.images.large"
:alt="project.title" :alt="project.title"
> >
</component> </figure>
<div <div
class="content" class="markdown mt-9"
v-html="markdownToHtml" v-html="markdownToHtml"
/> />
</div> </div>
</section> </section>
<div <div
v-else v-else
class="loading" class="flex items-center"
> >
<div class="loading_animation" /> <div class="loading_animation" />
</div> </div>
@ -127,143 +131,57 @@ function loadProject(id) {
<style lang="scss"> <style lang="scss">
@import "scss/default"; @import "scss/default";
.loading { a {
display: flex; @apply text-neutral-800 hover:text-kamilcraft-green;
align-items: center;
} }
.project { .markdown {
.project_header { h1 {
@extend .container; @apply text-4xl;
text-align: center; }
margin-bottom: 25px;
h1 { h2 {
font-size: 2.2em; @apply text-[2rem];
font-weight: lighter; }
line-height: 2.4em;
}
.project_info { h3 {
display: flex; @apply text-[1.5rem];
list-style: none; }
justify-content: center;
.info_text { p, ol li, ul li {
display: flex; @apply text-lg;
align-items: center; }
.icon { p + ol, p + ul, p + blockquote {
width: 2em; @apply -mb-2.5;
} }
span { ol {
font-weight: lighter; @apply list-decimal;
white-space: nowrap; }
}
&:not(&:last-child) { ul {
margin-right: 15px; @apply list-disc;
} }
}
@include media-tablet {
display: grid;
grid-template-columns: repeat(2, 1fr);
row-gap: 15px;
.info-text { ol, ul {
&:not(&:last-child) { @apply mb-2.5;
margin-right: 0; padding-inline-start: 1.75rem;
}
} li img {
} @apply block w-full pr-1 pb-1 mt-3.5;
} }
} }
.container { p {
.project-photo { @apply mb-2.5 text-justify;
box-shadow: 5px 5px 10px rgba(0, 0, 0, .3); }
}
.project-photo, .project-photo img { blockquote {
width: 100%; @apply pl-6 ml-5 border-neutral-400;
}
.project-photo img { p {
display: block; text-indent: unset;
object-fit: cover;
max-height: 500px;
}
.content {
margin: 35px 0;
a {
color: #8D8D8D;
&:hover {
color: #A2CF00;
}
}
h2, h3 {
margin-top: 15px;
margin-bottom: 5px;
}
h2:first-of-type {
margin-top: 0;
}
h2 {
font-size: 1.6em;
}
h3 {
font-size: 1.4em;
}
p, ol li, ul li {
line-height: 1.8em;
font-size: 1.1em;
@include media-tablet {
font-size: 1.2em;
line-height: 1.5em;
}
}
p + ol, p + ul, p + blockquote {
margin-top: -10px;
}
ol, ul {
margin-bottom: 10px;
padding-inline-start: 2.1em;
li img {
display: block;
width: 100%;
padding: 0 5px 5px;
margin-top: .9em;
}
}
p {
margin-bottom: 10px;
text-align: justify;
/* text-indent: 1.5em; */
}
blockquote {
padding-left: 25px;
margin-left: 1.3em;
border-left: 1px solid rgb(116, 116, 116);
p {
text-indent: unset;
}
}
} }
} }
} }