Merge pull request 'features/ui-polish' (#10) from features/ui-polish into main
Reviewed-on: 0x2620/aab21#10
This commit is contained in:
commit
67f76dbd66
13 changed files with 82 additions and 28 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 {
|
.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
5
app/static/css/partials/_layout.scss
Normal file → Executable 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
29
app/static/css/partials/_menu.scss
Normal file → Executable 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
45
app/static/css/partials/_text.scss
Normal file → Executable 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);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
BIN
app/static/fonts/noto-sans/noto-sans-bold-italic-webfont.woff
Executable file
BIN
app/static/fonts/noto-sans/noto-sans-bold-italic-webfont.woff
Executable file
Binary file not shown.
BIN
app/static/fonts/noto-sans/noto-sans-bold-italic-webfont.woff2
Executable file
BIN
app/static/fonts/noto-sans/noto-sans-bold-italic-webfont.woff2
Executable file
Binary file not shown.
BIN
app/static/fonts/noto-sans/noto-sans-bold-webfont.woff
Executable file
BIN
app/static/fonts/noto-sans/noto-sans-bold-webfont.woff
Executable file
Binary file not shown.
BIN
app/static/fonts/noto-sans/noto-sans-bold-webfont.woff2
Executable file
BIN
app/static/fonts/noto-sans/noto-sans-bold-webfont.woff2
Executable file
Binary file not shown.
BIN
app/static/fonts/noto-sans/noto-sans-italic-webfont.woff
Executable file
BIN
app/static/fonts/noto-sans/noto-sans-italic-webfont.woff
Executable file
Binary file not shown.
BIN
app/static/fonts/noto-sans/noto-sans-italic-webfont.woff2
Executable file
BIN
app/static/fonts/noto-sans/noto-sans-italic-webfont.woff2
Executable file
Binary file not shown.
BIN
app/static/fonts/noto-sans/noto-sans-regular-webfont.woff
Executable file
BIN
app/static/fonts/noto-sans/noto-sans-regular-webfont.woff
Executable file
Binary file not shown.
BIN
app/static/fonts/noto-sans/noto-sans-regular-webfont.woff2
Executable file
BIN
app/static/fonts/noto-sans/noto-sans-regular-webfont.woff2
Executable file
Binary file not shown.
3
app/templates/base.html
Normal file → Executable file
3
app/templates/base.html
Normal file → Executable 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>
|
||||||
|
|
Loading…
Reference in a new issue