settel/knowyt
1
0
Fork 0
Code Issues Pull Requests Packages Releases Activity

css: make TitleBox ready for smartphone

Browse Source
This commit is contained in:
Settel 2022-10-09 16:47:36 +02:00
parent 17372a5417
commit 53e1371cde
3 changed files with 31 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
client/src/assets/css/components.scss
View File

@ -1,4 +1,5 @@
@import './colors.scss';
@import './media.scss';
$font-primary: 'Wendy One';
$font-secondary: 'Dosis';

3
client/src/assets/css/media.scss Normal file
View File

@ -0,0 +1,3 @@
$phone-width: 560px;
$phone-max-width: 767px;
$tablet-width: 768px;

29
client/src/components/TitleBox.vue
View File

@ -19,7 +19,11 @@
padding: 80px 0;
display: flex;
justify-content: center;
}
@media (max-width: $phone-max-width) {
padding: 40px 0;
}
}
&__titleborderbox1,
&__titleborderbox2,
@ -36,6 +40,11 @@
justify-content: center;
align-items: center;
z-index: 3;
@media (max-width: $phone-max-width) {
width: 260px;
height: 140px;
}
}
&__titleborderbox2 {
@ -44,7 +53,13 @@
width: 720px;
height: 120px;
z-index: 2;
}
@media (max-width: $phone-max-width) {
top: 75px;
width: 300px;
height: 80px;
}
}
&__titleborderbox3 {
position: absolute;
@ -52,6 +67,11 @@
width: 760px;
height: 40px;
z-index: 1;
@media (max-width: $phone-max-width) {
top: 95px;
width: 340px;
}
}
&__title {
@ -59,6 +79,11 @@
font-family: $font-primary;
color: $box-primary-text-color;
text-align: center;
@media (max-width: $phone-max-width) {
font-size: 32px;
}
}
}
</style>