add CSS variable for spacing + double spacing
This commit is contained in:
parent
6eebf2f555
commit
797902e90a
4 changed files with 24 additions and 21 deletions
28
app/static/css/partials/_film.scss
Normal file → Executable file
28
app/static/css/partials/_film.scss
Normal file → Executable file
|
@ -1,7 +1,7 @@
|
|||
|
||||
|
||||
.films {
|
||||
margin: 8px;
|
||||
margin: var(--spacing-2);
|
||||
box-sizing: border-box;
|
||||
|
||||
a {
|
||||
|
@ -9,7 +9,7 @@
|
|||
text-decoration: none;
|
||||
}
|
||||
.film {
|
||||
margin-bottom: 16px;
|
||||
margin-bottom: var(--spacing-2);
|
||||
h1 {
|
||||
font-weight: bold;
|
||||
font-size: 20px;
|
||||
|
@ -17,9 +17,9 @@
|
|||
}
|
||||
@media screen and (max-width: 799px) {
|
||||
.film {
|
||||
margin-bottom: 16px;
|
||||
margin-bottom: var(--spacing-2);
|
||||
h2 {
|
||||
margin-bottom: 8px;
|
||||
margin-bottom: var(--spacing);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -30,7 +30,7 @@ main > .film {
|
|||
max-width: 1080px;
|
||||
margin: auto;
|
||||
.info {
|
||||
margin: 8px;
|
||||
margin: var(--spacing) var(--spacing-2);
|
||||
margin-bottom: 32px;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
|
@ -43,12 +43,12 @@ main > .film {
|
|||
margin: 24px 0;
|
||||
}
|
||||
.details {
|
||||
margin-top: 16px;
|
||||
margin-top: var(--spacing-2);
|
||||
}
|
||||
.bio {
|
||||
margin-top: 16px;
|
||||
margin-top: var(--spacing-2);
|
||||
div {
|
||||
margin-top: 8px;
|
||||
margin-top: var(--spacing);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -57,14 +57,14 @@ main > .film {
|
|||
}
|
||||
.play {
|
||||
text-align: center;
|
||||
margin: 8px;
|
||||
margin-top: 16px;
|
||||
margin-bottom: 16px;
|
||||
margin: var(--spacing);
|
||||
margin-top: var(--spacing-2);
|
||||
margin-bottom: var(--spacing-2);
|
||||
|
||||
.texts {
|
||||
padding-top: 16px;
|
||||
padding-top: var(--spacing-2);
|
||||
.text {
|
||||
padding-bottom: 16px;
|
||||
padding-bottom: var(--spacing-2);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -72,7 +72,7 @@ main > .film {
|
|||
h1 {
|
||||
span {
|
||||
display: block;
|
||||
margin-bottom: 8px;
|
||||
margin-bottom: var(--spacing);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -3,6 +3,9 @@
|
|||
--bg-color-2: #0099ff;
|
||||
--bg-color-3: #ffff00;
|
||||
--bg-color-4: #ff3399;
|
||||
|
||||
--spacing: 8px;
|
||||
--spacing-2: calc(var(--spacing) * 2);
|
||||
}
|
||||
|
||||
@keyframes background_animation {
|
||||
|
|
8
app/static/css/partials/_menu.scss
Normal file → Executable file
8
app/static/css/partials/_menu.scss
Normal file → Executable file
|
@ -3,8 +3,8 @@
|
|||
background-color: #333;
|
||||
position: relative;
|
||||
height: 72px;
|
||||
padding-left: 16px;
|
||||
padding-top: 16px;
|
||||
padding-left: var(--spacing-2);
|
||||
padding-top: var(--spacing-2);
|
||||
@media screen and (max-width: 799px) {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
|
@ -13,12 +13,12 @@
|
|||
nav {
|
||||
display: block;
|
||||
text-align: right;
|
||||
margin-right: 16px;
|
||||
margin-right: var(--spacing-2);
|
||||
@media screen and (max-width: 799px) {
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
margin-right: 0;
|
||||
margin-top: 16px;
|
||||
margin-top: var(--spacing-2);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -41,7 +41,7 @@ main > .texts {
|
|||
}
|
||||
|
||||
.text {
|
||||
margin: 8px;
|
||||
margin: var(--spacing);
|
||||
h1 {
|
||||
font-weight: bold;
|
||||
font-size: 20px;
|
||||
|
@ -49,9 +49,9 @@ main > .texts {
|
|||
}
|
||||
@media screen and (max-width: 799px) {
|
||||
.text {
|
||||
margin-bottom: 16px;
|
||||
margin-bottom: var(--spacing-2);
|
||||
h2 {
|
||||
margin-bottom: 8px;
|
||||
margin-bottom: var(--spacing);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue