Unification for RWD has been added
This commit is contained in:
parent
f3e7b18c34
commit
76d8e59f40
34
scss/_media.scss
Normal file
34
scss/_media.scss
Normal 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
|
||||
}
|
||||
}
|
||||
@ -1,3 +1,4 @@
|
||||
@import "media";
|
||||
@import "root";
|
||||
@import "all";
|
||||
|
||||
@ -25,9 +26,9 @@ p {
|
||||
}
|
||||
|
||||
.loading {
|
||||
height: 300px;
|
||||
height: 200px;
|
||||
|
||||
.loading-animation {
|
||||
.loading_animation {
|
||||
margin: 20px auto;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
@ -38,7 +39,7 @@ p {
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1200px) {
|
||||
@include media-small {
|
||||
.container {
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
@ -60,7 +60,7 @@
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 790px) {
|
||||
@include media-tablet {
|
||||
.title {
|
||||
display: none;
|
||||
}
|
||||
@ -72,16 +72,16 @@
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 500px) {
|
||||
@include media-mobile {
|
||||
padding-right: 15px;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 500px) {
|
||||
@include media-mobile {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 500px) {
|
||||
@include media-mobile {
|
||||
padding: 15px 0;
|
||||
}
|
||||
}
|
||||
|
||||
@ -18,6 +18,8 @@
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "scss/media";
|
||||
|
||||
.sub-page > .container .nav-btn,
|
||||
.sub-page > .container .nav .site-menu .menu-element a:not([class|=router-link-exact]) {
|
||||
color: #8D8D8D;
|
||||
@ -89,10 +91,13 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 600px) {
|
||||
@include media-tablet {
|
||||
margin-left: 0;
|
||||
|
||||
.nav-btn {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.site-menu {
|
||||
display: none;
|
||||
width: 100%;
|
||||
@ -110,12 +115,13 @@
|
||||
line-height: 2em;
|
||||
}
|
||||
}
|
||||
|
||||
.menu-clicked {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 600px) {
|
||||
@include media-tablet {
|
||||
.container {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
@ -5,11 +5,11 @@
|
||||
<div class="project"
|
||||
v-for="project in projects"
|
||||
:key="project.title.slug">
|
||||
<img class="project-image" :src="project.image" :alt="project.title" />
|
||||
<div class="project-content">
|
||||
<h3 class="title">{{ project.title }}</h3>
|
||||
<div class="release">{{ project.version }}</div>
|
||||
<div class="description">
|
||||
<img class="project_image" :src="project.image" :alt="project.title" />
|
||||
<div class="project_content">
|
||||
<h3 class="project_title">{{ project.title }}</h3>
|
||||
<div class="project_release">{{ project.version }}</div>
|
||||
<div class="project_description">
|
||||
<p>{{ project.short_description }}</p>
|
||||
</div>
|
||||
</div>
|
||||
@ -26,6 +26,8 @@
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
@import "scss/media";
|
||||
|
||||
.projects {
|
||||
padding-top: 45px;
|
||||
padding-bottom: 45px;
|
||||
@ -48,27 +50,27 @@
|
||||
border-radius: 5px;
|
||||
animation: load-project 2s forwards;
|
||||
|
||||
.project-image {
|
||||
.project_image {
|
||||
grid-area: image;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.project-content {
|
||||
.project_content {
|
||||
grid-area: content;
|
||||
padding: 10px 15px;
|
||||
height: 200px;
|
||||
overflow-y: hidden;
|
||||
position: relative;
|
||||
|
||||
.title {
|
||||
.project_title {
|
||||
font-size: 1.3em;
|
||||
font-weight: normal;
|
||||
line-height: 1.5em;
|
||||
}
|
||||
|
||||
.release {
|
||||
.project_release {
|
||||
font-size: .9em;
|
||||
font-weight: bold;
|
||||
padding: 5px 0;
|
||||
@ -90,7 +92,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 900px) {
|
||||
@include media-tablet(true) {
|
||||
.project {
|
||||
.more-button {
|
||||
display: flex;
|
||||
@ -109,6 +111,7 @@
|
||||
&:hover {
|
||||
background: rgba(0, 0, 0, .3);
|
||||
border-radius: 5px;
|
||||
|
||||
.btn {
|
||||
display: flex;
|
||||
color: white;
|
||||
@ -122,18 +125,17 @@
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 900px) {
|
||||
@include media-small {
|
||||
.project {
|
||||
display: block;
|
||||
|
||||
.project-image {
|
||||
.project_image {
|
||||
width: 100%;
|
||||
height: 250px;
|
||||
}
|
||||
|
||||
.project-content {
|
||||
height: auto;
|
||||
max-height: 250px;
|
||||
.project_content {
|
||||
height: 125px;
|
||||
}
|
||||
|
||||
.more-button {
|
||||
@ -143,6 +145,7 @@
|
||||
height: auto;
|
||||
left: unset;
|
||||
top: unset;
|
||||
|
||||
.btn {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
@ -166,7 +169,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
@include media-tablet {
|
||||
.projects .container {
|
||||
grid-template-columns: 1fr;
|
||||
padding: 25px;
|
||||
|
||||
@ -1,21 +1,21 @@
|
||||
<template>
|
||||
<section class="project" v-if="project">
|
||||
<header class="project-header">
|
||||
<header class="project_header">
|
||||
<h1>{{ project.title }}</h1>
|
||||
<ul class="project-info">
|
||||
<li class="info-text">
|
||||
<ul class="project_info">
|
||||
<li class="info_text">
|
||||
<font-awesome-icon class="icon" :icon="['far', 'clock']"/>
|
||||
<span>{{ project.release_data }}</span>
|
||||
</li>
|
||||
<li class="info-text">
|
||||
<li class="info_text">
|
||||
<font-awesome-icon class="icon" :icon="['far', 'user']"/>
|
||||
<span>{{ project.author }}</span>
|
||||
</li>
|
||||
<li class="info-text">
|
||||
<li class="info_text">
|
||||
<font-awesome-icon class="icon" :icon="['far', 'folder']"/>
|
||||
<span>{{ getCategoryName(project.categories)[0] }}</span>
|
||||
</li>
|
||||
<li class="info-text">
|
||||
<li class="info_text">
|
||||
<font-awesome-icon class="icon" :icon="['fas', 'code-branch']"/>
|
||||
<span>{{ project.version }}</span>
|
||||
</li>
|
||||
@ -83,7 +83,7 @@ export default {
|
||||
@import "scss/default";
|
||||
|
||||
.project {
|
||||
.project-header {
|
||||
.project_header {
|
||||
@extend .container;
|
||||
text-align: center;
|
||||
margin-bottom: 25px;
|
||||
@ -94,12 +94,12 @@ export default {
|
||||
line-height: 2.4em;
|
||||
}
|
||||
|
||||
.project-info {
|
||||
.project_info {
|
||||
display: flex;
|
||||
list-style: none;
|
||||
justify-content: center;
|
||||
|
||||
.info-text {
|
||||
.info_text {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
@ -115,7 +115,7 @@ export default {
|
||||
margin-right: 15px;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 560px) {
|
||||
@include media-tablet {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
row-gap: 15px;
|
||||
@ -152,7 +152,7 @@ export default {
|
||||
text-indent: 1.5em;
|
||||
line-height: 1.8em;
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
@include media-tablet {
|
||||
font-size: 1em;
|
||||
line-height: 1.5em;
|
||||
}
|
||||
|
||||
@ -1,11 +1,11 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="category-menu">
|
||||
<div class="project_categories">
|
||||
<ul class="categories">
|
||||
<li class="category"
|
||||
<li class="categories_element"
|
||||
v-for="category in getCategories"
|
||||
:key="category.slug"
|
||||
:class="{ 'category-active': categories.active === category.slug }"
|
||||
:class="{ 'categories_element-active': categories.active === category.slug }"
|
||||
@click="changeCategory(category.slug)">
|
||||
<a :title="`Kategoria ${category.name}`">{{ category.name }}</a>
|
||||
</li>
|
||||
@ -13,13 +13,15 @@
|
||||
</div>
|
||||
<projects :projects="projects" />
|
||||
<div v-if="projects.length === 0" class="loading">
|
||||
<div class="loading-animation"></div>
|
||||
<div class="loading_animation"></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
.category-menu {
|
||||
@import "scss/media";
|
||||
|
||||
.project_categories {
|
||||
padding-top: 45px;
|
||||
|
||||
.categories {
|
||||
@ -27,7 +29,7 @@
|
||||
justify-content: center;
|
||||
list-style: none;
|
||||
|
||||
.category {
|
||||
.categories_element {
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
margin-right: 25px;
|
||||
@ -59,7 +61,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 450px) {
|
||||
@include media-mobile {
|
||||
margin-right: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user