Merge pull request 'features/ui-polish' (#10) from features/ui-polish into main

Reviewed-on: 0x2620/aab21#10
This commit is contained in:
j 2021-10-14 12:52:55 +00:00
commit 67f76dbd66
13 changed files with 82 additions and 28 deletions

28
app/static/css/partials/_film.scss Normal file → Executable file
View file

@ -1,7 +1,7 @@
.films { .films {
margin: 8px; margin: var(--spacing-2);
box-sizing: border-box; box-sizing: border-box;
a { a {
@ -9,7 +9,7 @@
text-decoration: none; text-decoration: none;
} }
.film { .film {
margin-bottom: 16px; margin-bottom: var(--spacing-2);
h1 { h1 {
font-weight: bold; font-weight: bold;
font-size: 20px; font-size: 20px;
@ -17,9 +17,9 @@
} }
@media screen and (max-width: 799px) { @media screen and (max-width: 799px) {
.film { .film {
margin-bottom: 16px; margin-bottom: var(--spacing-2);
h2 { h2 {
margin-bottom: 8px; margin-bottom: var(--spacing);
} }
} }
} }
@ -30,7 +30,7 @@ main > .film {
max-width: 1080px; max-width: 1080px;
margin: auto; margin: auto;
.info { .info {
margin: 8px; margin: var(--spacing) var(--spacing-2);
margin-bottom: 32px; margin-bottom: 32px;
text-overflow: ellipsis; text-overflow: ellipsis;
overflow: hidden; overflow: hidden;
@ -43,12 +43,12 @@ main > .film {
margin: 24px 0; margin: 24px 0;
} }
.details { .details {
margin-top: 16px; margin-top: var(--spacing-2);
} }
.bio { .bio {
margin-top: 16px; margin-top: var(--spacing-2);
div { div {
margin-top: 8px; margin-top: var(--spacing);
} }
} }
} }
@ -57,14 +57,14 @@ main > .film {
} }
.play { .play {
text-align: center; text-align: center;
margin: 8px; margin: var(--spacing);
margin-top: 16px; margin-top: var(--spacing-2);
margin-bottom: 16px; margin-bottom: var(--spacing-2);
.texts { .texts {
padding-top: 16px; padding-top: var(--spacing-2);
.text { .text {
padding-bottom: 16px; padding-bottom: var(--spacing-2);
} }
} }
} }
@ -72,7 +72,7 @@ main > .film {
h1 { h1 {
span { span {
display: block; display: block;
margin-bottom: 8px; margin-bottom: var(--spacing);
} }
} }
} }

5
app/static/css/partials/_layout.scss Normal file → Executable file
View file

@ -3,6 +3,9 @@
--bg-color-2: #0099ff; --bg-color-2: #0099ff;
--bg-color-3: #ffff00; --bg-color-3: #ffff00;
--bg-color-4: #ff3399; --bg-color-4: #ff3399;
--spacing: 8px;
--spacing-2: calc(var(--spacing) * 2);
} }
@keyframes background_animation { @keyframes background_animation {
@ -21,7 +24,7 @@ body {
animation: background_animation 60s ease-in-out infinite; animation: background_animation 60s ease-in-out infinite;
background-size: 400% 100%; background-size: 400% 100%;
color: #ddd; color: #ddd;
font-family: "Noto Sans"; font-family: "noto_sans", sans-serif;
font-size: 20px; font-size: 20px;
overflow-x: hidden; overflow-x: hidden;
} }

29
app/static/css/partials/_menu.scss Normal file → Executable file
View file

@ -2,23 +2,28 @@
.topnav { .topnav {
background-color: #333; background-color: #333;
position: relative; position: relative;
height: 72px; height: 68px;
padding-left: 16px; padding: var(--spacing-2);
padding-top: 16px; box-sizing: border-box;
@media screen and (max-width: 799px) { @media screen and (max-width: 799px) {
padding-left: 0; padding-top: calc(var(--spacing) * 1.6);
padding-right: 0; }
@media screen and (min-width: 800px) {
display: flex;
align-items: flex-end;
} }
nav { nav {
display: block; display: block;
text-align: right; text-align: right;
margin-right: 16px;
@media screen and (max-width: 799px) { @media screen and (max-width: 799px) {
text-align: center; text-align: center;
width: 100%; width: 100%;
margin-right: 0; margin-top: var(--spacing);
margin-top: 16px; }
@media screen and (min-width: 800px) {
margin-left: auto;
} }
} }
@ -26,6 +31,7 @@
color: white; color: white;
text-decoration: none; text-decoration: none;
font-size: 17px; font-size: 17px;
margin-left: var(--spacing);
&:hover { &:hover {
background-color: #ddd; background-color: #ddd;
@ -45,3 +51,10 @@
} }
.title-text {
@media screen and (min-width: 800px) {
font-weight: 700;
padding-bottom: calc(var(--spacing) / 2);
}
}

45
app/static/css/partials/_text.scss Normal file → Executable file
View file

@ -1,3 +1,42 @@
// Font: Noto Sans
@font-face {
font-family: 'noto_sans';
src: url('../../static/fonts/noto-sans/noto-sans-regular-webfont.woff2') format('woff2'),
url('../../static/fonts/noto-sans/noto-sans-regular-webfont.woff') format('woff');
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: 'noto_sans';
src: url('../../static/fonts/noto-sans/noto-sans-italic-webfont.woff2') format('woff2'),
url('../../static/fonts/noto-sans/noto-sans-italic-webfont.woff') format('woff');
font-weight: 400;
font-style: italic;
}
@font-face {
font-family: 'noto_sans';
src: url('../../static/fonts/noto-sans/noto-sans-bold-webfont.woff2') format('woff2'),
url('../../static/fonts/noto-sans/noto-sans-bold-webfont.woff') format('woff');
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: 'noto_sans';
src: url('noto-sans-bold-italic-webfont.woff2') format('woff2'),
url('noto-sans-bold-italic-webfont.woff') format('woff');
font-weight: 700;
font-style: italic;
}
// Text: Global Classes
.font-bold {
font-weight: 700;
}
main > .texts { main > .texts {
@ -9,7 +48,7 @@ main > .texts {
} }
.text { .text {
margin: 8px; margin: var(--spacing);
h1 { h1 {
font-weight: bold; font-weight: bold;
font-size: 20px; font-size: 20px;
@ -17,9 +56,9 @@ main > .texts {
} }
@media screen and (max-width: 799px) { @media screen and (max-width: 799px) {
.text { .text {
margin-bottom: 16px; margin-bottom: var(--spacing-2);
h2 { h2 {
margin-bottom: 8px; margin-bottom: var(--spacing);
} }
} }
} }

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

3
app/templates/base.html Normal file → Executable file
View file

@ -8,14 +8,13 @@
Phantas.ma/polis - Looking Back to the Future Phantas.ma/polis - Looking Back to the Future
{% endblock title %} {% endblock title %}
</title> </title>
<link href='https://fonts.googleapis.com/css?family=Noto Sans' rel='stylesheet'>
<link href="{% sass_src 'css/style.scss' %}" rel="stylesheet" type="text/css"> <link href="{% sass_src 'css/style.scss' %}" rel="stylesheet" type="text/css">
{% block head %}{% endblock head %} {% block head %}{% endblock head %}
</head> </head>
<body> <body>
<div class="topnav"> <div class="topnav">
<a href="/polis" class="title"> <a href="/polis" class="title">
<div> <div class="title-text">
Phantas.ma/polis<span class="hide-mobile">: Looking Back to the Future</span> Phantas.ma/polis<span class="hide-mobile">: Looking Back to the Future</span>
</div> </div>
<div> <div>