Update styles
This commit is contained in:
parent
877dcd6184
commit
e3e0eb44e6
@ -1,24 +1,19 @@
|
|||||||
|
@import 'vars';
|
||||||
|
|
||||||
html,
|
html,
|
||||||
body {
|
body {
|
||||||
font-size: 18px;
|
font-size: $base-font-size;
|
||||||
font-family: 'PT Serif', serif;
|
font-family: 'PT Serif', serif;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
|
||||||
@media (max-width: 839px) {
|
@media (max-width: $preferred-width - 1px) {
|
||||||
font-size: 16px;
|
font-size: $base-font-size - 2px;
|
||||||
margin: {
|
margin: {
|
||||||
left: 0.8em;
|
left: 0.8em;
|
||||||
right: 0.8em;
|
right: 0.8em;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 480px) {
|
|
||||||
margin: {
|
|
||||||
left: 0.5em;
|
|
||||||
right: 0.5em;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
h1,
|
h1,
|
@ -1,15 +1,10 @@
|
|||||||
@import '../styles/vars';
|
@import '../vars';
|
||||||
@import '../styles/base_style';
|
@import '../base_style';
|
||||||
|
|
||||||
.content {
|
.content {
|
||||||
width: $preferred-width;
|
width: $preferred-width;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
|
|
||||||
@media (max-width: 839px) {
|
|
||||||
margin: 20px 0;
|
|
||||||
width: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 480px) {
|
@media (max-width: 480px) {
|
||||||
margin: 10px 0;
|
margin: 10px 0;
|
||||||
width: auto;
|
width: auto;
|
||||||
|
@ -1,5 +1,5 @@
|
|||||||
@import '../styles/vars';
|
@import '../vars';
|
||||||
@import '../styles/base_style';
|
@import '../base_style';
|
||||||
|
|
||||||
.navigation {
|
.navigation {
|
||||||
display: block;
|
display: block;
|
||||||
@ -27,14 +27,14 @@
|
|||||||
width: $preferred-width;
|
width: $preferred-width;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
|
|
||||||
@media (max-width: 839px) {
|
|
||||||
width: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 480px) {
|
@media (max-width: 480px) {
|
||||||
width: auto;
|
width: auto;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.content {
|
.hr-line {
|
||||||
|
height: 0;
|
||||||
|
display: block;
|
||||||
|
border-bottom: 1px solid #eee;
|
||||||
|
margin: 2em 0;
|
||||||
}
|
}
|
||||||
|
@ -89,7 +89,6 @@ $font-size: 20px;
|
|||||||
width: 400px;
|
width: 400px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
padding: 2em;
|
padding: 2em;
|
||||||
border: 1px solid #ccc;
|
|
||||||
@media (max-width: 749px) {
|
@media (max-width: 749px) {
|
||||||
padding: 2em 0;
|
padding: 2em 0;
|
||||||
width: auto;
|
width: auto;
|
||||||
|
@ -1 +0,0 @@
|
|||||||
$preferred-width: 840px;
|
|
5
source/_assets/vars.scss
Normal file
5
source/_assets/vars.scss
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
// Базовый размер шрифта
|
||||||
|
$base-font-size: 20px;
|
||||||
|
|
||||||
|
// Ширина страницы
|
||||||
|
$preferred-width: 700px;
|
@ -29,10 +29,12 @@ title: Гадалка
|
|||||||
<a href="https://github.com/anwinged/predictor" target="_blank">Код гадалки на Github</a>
|
<a href="https://github.com/anwinged/predictor" target="_blank">Код гадалки на Github</a>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<a href="https://github.com/anwinged/homepage/blob/master/source/_assets/predictor/Demo.vue" target="_blank" >Код этого примера</a>
|
<a href="https://github.com/anwinged/homepage/blob/master/source/_assets/predictor/Demo.vue" target="_blank">Код этого примера</a>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
|
<span class="hr-line"></span>
|
||||||
|
|
||||||
<div id="app"></div>
|
<div id="app"></div>
|
||||||
|
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
Loading…
Reference in New Issue
Block a user