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

Unification for RWD has been added

Browse Source
This commit is contained in:
Kamil Niemczycki 2022-01-05 23:21:35 +01:00
parent f3e7b18c34
commit 76d8e59f40
7 changed files with 89 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
scss/_media.scss Normal file
View File

@ -0,0 +1,34 @@
@mixin media($min-max, $reverse: false) {
$type: max-width;
@if $reverse {
$type: min-width;
$min-max: $min-max + 1;
}
@media screen and ($type: $min-max) {
@content
}
}
@mixin media-mobile($reverse: false) {
@include media(480px, $reverse) {
@content
}
}
@mixin media-tablet($reverse: false) {
@include media(768px, $reverse) {
@content
}
}
@mixin media-small($reverse: false) {
@include media(1024px, $reverse) {
@content
}
}
@mixin media-large($reverse: false) {
@include media(1200px, $reverse) {
@content
}
}

7
scss/default.scss
View File

@ -1,3 +1,4 @@
@import "media";
@import "root"; @import "root";
@import "all"; @import "all";
@ -25,9 +26,9 @@ p {
} }
.loading { .loading {
height: 300px; height: 200px;
.loading-animation { .loading_animation {
margin: 20px auto; margin: 20px auto;
width: 50px; width: 50px;
height: 50px; height: 50px;
@ -38,7 +39,7 @@ p {
} }
} }
@media screen and (max-width: 1200px) { @include media-small {
.container { .container {
padding: 0 20px; padding: 0 20px;
} }

8
src/components/Footer.vue
View File

@ -60,7 +60,7 @@
margin-right: 5px; margin-right: 5px;
} }
@media screen and (max-width: 790px) { @include media-tablet {
.title { .title {
display: none; display: none;
} }
@ -72,16 +72,16 @@
} }
} }
@media screen and (max-width: 500px) { @include media-mobile {
padding-right: 15px; padding-right: 15px;
} }
} }
@media screen and (max-width: 500px) { @include media-mobile {
padding: 0; padding: 0;
} }
} }
@media screen and (max-width: 500px) { @include media-mobile {
padding: 15px 0; padding: 15px 0;
} }
} }

10
src/components/Navigation.vue
View File

@ -18,6 +18,8 @@
</template> </template>
<style lang="scss" scoped> <style lang="scss" scoped>
@import "scss/media";
.sub-page > .container .nav-btn, .sub-page > .container .nav-btn,
.sub-page > .container .nav .site-menu .menu-element a:not([class|=router-link-exact]) { .sub-page > .container .nav .site-menu .menu-element a:not([class|=router-link-exact]) {
color: #8D8D8D; color: #8D8D8D;
@ -89,10 +91,13 @@
} }
} }
} }
@media screen and (max-width: 600px) { @include media-tablet {
margin-left: 0;
.nav-btn { .nav-btn {
display: block; display: block;
} }
.site-menu { .site-menu {
display: none; display: none;
width: 100%; width: 100%;
@ -110,12 +115,13 @@
line-height: 2em; line-height: 2em;
} }
} }
.menu-clicked { .menu-clicked {
display: block; display: block;
} }
} }
} }
@media screen and (max-width: 600px) { @include media-tablet {
.container { .container {
justify-content: space-between; justify-content: space-between;
} }

35
src/components/SelectedProjects.vue
View File

@ -5,11 +5,11 @@
<div class="project" <div class="project"
v-for="project in projects" v-for="project in projects"
:key="project.title.slug"> :key="project.title.slug">
<img class="project-image" :src="project.image" :alt="project.title" /> <img class="project_image" :src="project.image" :alt="project.title" />
<div class="project-content"> <div class="project_content">
<h3 class="title">{{ project.title }}</h3> <h3 class="project_title">{{ project.title }}</h3>
<div class="release">{{ project.version }}</div> <div class="project_release">{{ project.version }}</div>
<div class="description"> <div class="project_description">
<p>{{ project.short_description }}</p> <p>{{ project.short_description }}</p>
</div> </div>
</div> </div>
@ -26,6 +26,8 @@
</template> </template>
<style lang="scss"> <style lang="scss">
@import "scss/media";
.projects { .projects {
padding-top: 45px; padding-top: 45px;
padding-bottom: 45px; padding-bottom: 45px;
@ -48,27 +50,27 @@
border-radius: 5px; border-radius: 5px;
animation: load-project 2s forwards; animation: load-project 2s forwards;
.project-image { .project_image {
grid-area: image; grid-area: image;
width: 200px; width: 200px;
height: 200px; height: 200px;
object-fit: cover; object-fit: cover;
} }
.project-content { .project_content {
grid-area: content; grid-area: content;
padding: 10px 15px; padding: 10px 15px;
height: 200px; height: 200px;
overflow-y: hidden; overflow-y: hidden;
position: relative; position: relative;
.title { .project_title {
font-size: 1.3em; font-size: 1.3em;
font-weight: normal; font-weight: normal;
line-height: 1.5em; line-height: 1.5em;
} }
.release { .project_release {
font-size: .9em; font-size: .9em;
font-weight: bold; font-weight: bold;
padding: 5px 0; padding: 5px 0;
@ -90,7 +92,7 @@
} }
} }
@media screen and (min-width: 900px) { @include media-tablet(true) {
.project { .project {
.more-button { .more-button {
display: flex; display: flex;
@ -109,6 +111,7 @@
&:hover { &:hover {
background: rgba(0, 0, 0, .3); background: rgba(0, 0, 0, .3);
border-radius: 5px; border-radius: 5px;
.btn { .btn {
display: flex; display: flex;
color: white; color: white;
@ -122,18 +125,17 @@
} }
} }
@media screen and (max-width: 900px) { @include media-small {
.project { .project {
display: block; display: block;
.project-image { .project_image {
width: 100%; width: 100%;
height: 250px; height: 250px;
} }
.project-content { .project_content {
height: auto; height: 125px;
max-height: 250px;
} }
.more-button { .more-button {
@ -143,6 +145,7 @@
height: auto; height: auto;
left: unset; left: unset;
top: unset; top: unset;
.btn { .btn {
display: flex; display: flex;
width: 100%; width: 100%;
@ -166,7 +169,7 @@
} }
} }
@media screen and (max-width: 600px) { @include media-tablet {
.projects .container { .projects .container {
grid-template-columns: 1fr; grid-template-columns: 1fr;
padding: 25px; padding: 25px;

22
src/views/Project.vue
View File

@ -1,21 +1,21 @@
<template> <template>
<section class="project" v-if="project"> <section class="project" v-if="project">
<header class="project-header"> <header class="project_header">
<h1>{{ project.title }}</h1> <h1>{{ project.title }}</h1>
<ul class="project-info"> <ul class="project_info">
<li class="info-text"> <li class="info_text">
<font-awesome-icon class="icon" :icon="['far', 'clock']"/> <font-awesome-icon class="icon" :icon="['far', 'clock']"/>
<span>{{ project.release_data }}</span> <span>{{ project.release_data }}</span>
</li> </li>
<li class="info-text"> <li class="info_text">
<font-awesome-icon class="icon" :icon="['far', 'user']"/> <font-awesome-icon class="icon" :icon="['far', 'user']"/>
<span>{{ project.author }}</span> <span>{{ project.author }}</span>
</li> </li>
<li class="info-text"> <li class="info_text">
<font-awesome-icon class="icon" :icon="['far', 'folder']"/> <font-awesome-icon class="icon" :icon="['far', 'folder']"/>
<span>{{ getCategoryName(project.categories)[0] }}</span> <span>{{ getCategoryName(project.categories)[0] }}</span>
</li> </li>
<li class="info-text"> <li class="info_text">
<font-awesome-icon class="icon" :icon="['fas', 'code-branch']"/> <font-awesome-icon class="icon" :icon="['fas', 'code-branch']"/>
<span>{{ project.version }}</span> <span>{{ project.version }}</span>
</li> </li>
@ -83,7 +83,7 @@ export default {
@import "scss/default"; @import "scss/default";
.project { .project {
.project-header { .project_header {
@extend .container; @extend .container;
text-align: center; text-align: center;
margin-bottom: 25px; margin-bottom: 25px;
@ -94,12 +94,12 @@ export default {
line-height: 2.4em; line-height: 2.4em;
} }
.project-info { .project_info {
display: flex; display: flex;
list-style: none; list-style: none;
justify-content: center; justify-content: center;
.info-text { .info_text {
display: flex; display: flex;
align-items: center; align-items: center;
@ -115,7 +115,7 @@ export default {
margin-right: 15px; margin-right: 15px;
} }
} }
@media screen and (max-width: 560px) { @include media-tablet {
display: grid; display: grid;
grid-template-columns: repeat(2, 1fr); grid-template-columns: repeat(2, 1fr);
row-gap: 15px; row-gap: 15px;
@ -152,7 +152,7 @@ export default {
text-indent: 1.5em; text-indent: 1.5em;
line-height: 1.8em; line-height: 1.8em;
@media screen and (max-width: 600px) { @include media-tablet {
font-size: 1em; font-size: 1em;
line-height: 1.5em; line-height: 1.5em;
} }

16
src/views/Projects.vue
View File

@ -1,11 +1,11 @@
<template> <template>
<div> <div>
<div class="category-menu"> <div class="project_categories">
<ul class="categories"> <ul class="categories">
<li class="category" <li class="categories_element"
v-for="category in getCategories" v-for="category in getCategories"
:key="category.slug" :key="category.slug"
:class="{ 'category-active': categories.active === category.slug }" :class="{ 'categories_element-active': categories.active === category.slug }"
@click="changeCategory(category.slug)"> @click="changeCategory(category.slug)">
<a :title="`Kategoria ${category.name}`">{{ category.name }}</a> <a :title="`Kategoria ${category.name}`">{{ category.name }}</a>
</li> </li>
@ -13,13 +13,15 @@
</div> </div>
<projects :projects="projects" /> <projects :projects="projects" />
<div v-if="projects.length === 0" class="loading"> <div v-if="projects.length === 0" class="loading">
<div class="loading-animation"></div> <div class="loading_animation"></div>
</div> </div>
</div> </div>
</template> </template>
<style lang="scss"> <style lang="scss">
.category-menu { @import "scss/media";
.project_categories {
padding-top: 45px; padding-top: 45px;
.categories { .categories {
@ -27,7 +29,7 @@
justify-content: center; justify-content: center;
list-style: none; list-style: none;
.category { .categories_element {
position: relative; position: relative;
cursor: pointer; cursor: pointer;
margin-right: 25px; margin-right: 25px;
@ -59,7 +61,7 @@
} }
} }
@media screen and (max-width: 450px) { @include media-mobile {
margin-right: 15px; margin-right: 15px;
} }
} }