Skip to content

Commit a395b6f

Browse files
hitblasthitblast
committed
fixed position of footer
1 parent fa3aa57 commit a395b6f

File tree

2 files changed

+110
-91
lines changed

2 files changed

+110
-91
lines changed

‎static/css/styles.css

+47-43
Original file line numberDiff line numberDiff line change
@@ -2,41 +2,41 @@
22
@import url("https://fonts.googleapis.com/css2?family=Playwrite+DE+Grund:[email protected]&display=swap");
33

44
:root {
5-
--pico-color: #c0bfc0;
6-
--pico-primary: rgb(203, 198, 182);
7-
--pico-primary-border: var(--pico-primary);
8-
--pico-border-radius: 2rem;
9-
--pico-background-color: rgb(39, 33, 31);
10-
--pico-blockquote-border-color: #7b7b7b;
11-
--pico-blockquote-footer-color: var(--pico-blockquote-border-color);
12-
--pico-text-underline-offset: 0.5rem;
13-
--pico-spacing: 1.5rem;
14-
--pico-typography-spacing-vertical: 1.5rem;
15-
--pico-form-element-spacing-vertical: 1rem;
16-
--pico-form-element-spacing-horizontal: 1.25rem;
17-
--pico-box-shadow: 0 20px 2rem rgba(0, 0, 0, 0.331);
5+
--pico-color: #c0bfc0;
6+
--pico-primary: rgb(203, 198, 182);
7+
--pico-primary-border: var(--pico-primary);
8+
--pico-border-radius: 2rem;
9+
--pico-background-color: rgb(39, 33, 31);
10+
--pico-blockquote-border-color: #7b7b7b;
11+
--pico-blockquote-footer-color: var(--pico-blockquote-border-color);
12+
--pico-text-underline-offset: 0.5rem;
13+
--pico-spacing: 1.5rem;
14+
--pico-typography-spacing-vertical: 1.5rem;
15+
--pico-form-element-spacing-vertical: 1rem;
16+
--pico-form-element-spacing-horizontal: 1.25rem;
17+
--pico-box-shadow: 0 20px 2rem rgba(0, 0, 0, 0.331);
1818
}
1919

2020
html {
21-
scroll-behavior: smooth;
21+
scroll-behavior: smooth;
2222
}
2323

2424
* {
25-
box-sizing: border-box;
25+
box-sizing: border-box;
2626
}
2727

2828
body {
29-
font-family: "Playwrite DE Grund", sans-serif;
30-
font-size: 1rem;
31-
line-height: 1.5;
32-
margin: 0;
33-
padding: 0;
29+
font-family: "Playwrite DE Grund", sans-serif;
30+
font-size: 1rem;
31+
line-height: 1.5;
32+
margin: 0;
33+
padding: 0;
3434
}
3535

3636
hr {
37-
border: 0;
38-
border-top: 1px solid rgba(255, 255, 255, 0.1);
39-
margin: 3rem 0;
37+
border: 0;
38+
border-top: 1px solid rgba(255, 255, 255, 0.1);
39+
margin: 3rem 0;
4040
}
4141

4242
h1,
@@ -45,53 +45,57 @@ h3,
4545
h4,
4646
h5,
4747
h6 {
48-
--pico-font-family: Borel, cursive;
49-
--pico-font-weight: 400;
50-
--pico-typography-spacing-vertical: 0.5rem;
48+
--pico-font-family: Borel, cursive;
49+
--pico-font-weight: 400;
50+
--pico-typography-spacing-vertical: 0.5rem;
5151
}
5252

5353
section {
54-
margin-bottom: 5rem;
54+
margin-bottom: 5rem;
5555
}
5656

5757
svg {
58-
margin: 20px 10px;
58+
margin: 20px 10px;
5959
}
6060

6161
article {
62-
--pico-card-background-color: var(--pico-background-color);
63-
box-shadow: none;
64-
margin-top: 50px;
65-
padding: 100px 100px;
66-
transition: 0.1s ease-in-out;
62+
--pico-card-background-color: var(--pico-background-color);
63+
box-shadow: none;
64+
margin-top: 50px;
65+
padding: 100px 100px;
66+
transition: 0.1s ease-in-out;
6767
}
6868

6969
.visible-article {
70-
--pico-card-background-color: rgb(27, 21, 19);
70+
--pico-card-background-color: rgb(27, 21, 19);
7171
}
7272
.visible-article:hover {
73-
--pico-card-background-color: rgb(20, 15, 13);
74-
box-shadow: 0 20px 2rem rgba(8, 7, 7, 0.446);
73+
--pico-card-background-color: rgb(20, 15, 13);
74+
box-shadow: 0 20px 2rem rgba(8, 7, 7, 0.446);
7575
}
7676

7777
.center {
78-
text-align: center;
78+
text-align: center;
7979
}
8080

8181
.faded {
82-
opacity: 0.5;
82+
opacity: 0.5;
8383
}
8484

8585
.very-faded {
86-
opacity: 0.2;
86+
opacity: 0.2;
8787
}
8888

8989
.large-icon {
90-
font-size: 2rem;
90+
font-size: 2rem;
91+
}
92+
93+
.footer {
94+
position: fixed;
9195
}
9296

9397
@media (min-width: 1025px) {
94-
.container {
95-
width: 1024px;
96-
}
98+
.container {
99+
width: 1024px;
100+
}
97101
}

‎templates/base.html

+63-48
Original file line numberDiff line numberDiff line change
@@ -1,53 +1,68 @@
1-
<!DOCTYPE html>
1+
<!doctype html>
22
<html lang="en" data-theme="dark">
3-
<head>
4-
<!-- Meta Tags -->
5-
<meta charset="UTF-8" />
6-
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7-
{% block pagetitle %}<title>StrayTech</title>{% endblock pagetitle %}
3+
<head>
4+
<!-- Meta Tags -->
5+
<meta charset="UTF-8" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
{% block pagetitle %}
8+
<title>StrayTech</title>
9+
{% endblock pagetitle %}
810

9-
<!-- CSS -->
10-
<link rel="stylesheet" href="{{ get_url(path='css/pico.sand.min.css', trailing_slash=false, cachebust=true) | safe }}" />
11-
<link rel="stylesheet" href="{{ get_url(path='css/pico.colors.min.css', trailing_slash=false, cachebust=true) | safe }}" />
12-
<link rel="stylesheet" href="{{ get_url(path='css/styles.css', trailing_slash=false, cachebust=true) | safe }}" />
11+
<!-- CSS -->
12+
<link
13+
rel="stylesheet"
14+
href="{{ get_url(path='css/pico.sand.min.css', trailing_slash=false, cachebust=true) | safe }}"
15+
/>
16+
<link
17+
rel="stylesheet"
18+
href="{{ get_url(path='css/pico.colors.min.css', trailing_slash=false, cachebust=true) | safe }}"
19+
/>
20+
<link
21+
rel="stylesheet"
22+
href="{{ get_url(path='css/styles.css', trailing_slash=false, cachebust=true) | safe }}"
23+
/>
1324

14-
<!-- Scripts -->
15-
<script
16-
src="https://kit.fontawesome.com/4f5ece0701.js"
17-
crossorigin="anonymous"
18-
></script>
19-
</head>
20-
<body>
21-
<header class="container">
22-
<nav>
23-
<ul>
24-
<li>
25-
<a href="/#mission"><small>Mission</small></a>
26-
</li>
27-
<li>
28-
<a href="https://github.com/TheStrayTech/"><small>GitHub</small></a>
29-
</li>
30-
<li>
31-
<a href="{{ get_url(path='@/blogs/_index.md') }}"><small>Blogs</small></a>
32-
</li>
33-
</ul>
34-
<ul>
35-
<li>
36-
<a href="#home"><i class="fa-solid fa-home"></i></a>
37-
</li>
38-
</ul>
39-
</nav>
40-
</header>
25+
<!-- Scripts -->
26+
<script
27+
src="https://kit.fontawesome.com/4f5ece0701.js"
28+
crossorigin="anonymous"
29+
></script>
30+
</head>
31+
<body>
32+
<header class="container">
33+
<nav>
34+
<ul>
35+
<li>
36+
<a href="/#mission"><small>Mission</small></a>
37+
</li>
38+
<li>
39+
<a href="https://github.com/TheStrayTech/"
40+
><small>GitHub</small></a
41+
>
42+
</li>
43+
<li>
44+
<a href="{{ get_url(path='@/blogs/_index.md') }}"
45+
><small>Blogs</small></a
46+
>
47+
</li>
48+
</ul>
49+
<ul>
50+
<li>
51+
<a href="#home"><i class="fa-solid fa-home"></i></a>
52+
</li>
53+
</ul>
54+
</nav>
55+
</header>
4156

42-
{% block content %} {% endblock content %}
43-
<footer>
44-
<div class="container very-faded">
45-
<h1 class="center"><i class="fa-solid fa-mug-hot"></i> StrayTech</h1>
46-
<p class="center">
47-
&copy; 2024 Stray Technologies. All rights reserved. Made with
48-
<i class="fa-solid fa-heart"></i> by us.
49-
</p>
50-
</div>
51-
</footer>
52-
</body>
57+
{% block content %} {% endblock content %}
58+
<div class="footer container very-faded">
59+
<h1 class="center">
60+
<i class="fa-solid fa-mug-hot"></i> StrayTech
61+
</h1>
62+
<p class="center">
63+
&copy; 2024 Stray Technologies. All rights reserved. Made with
64+
<i class="fa-solid fa-heart"></i> by us.
65+
</p>
66+
</div>
67+
</body>
5368
</html>

0 commit comments

Comments
 (0)