Skip to content

Commit 39ff998

Browse files
ninjamarninjamar
committed
New site layout!
1 parent 69b380a commit 39ff998

File tree

9 files changed

+154
-127
lines changed

9 files changed

+154
-127
lines changed

‎build.py‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,9 @@
1010
OUTPUT_PREFIX = "./dist"
1111
RSYNC_COMMAND = "rsync -av {0} {1} {2}"
1212

13-
# watchman-make -p 'templates/**' --run 'python3 build.py template'
14-
# watchman-make -p 'static/**' --run 'python3 build.py static'
13+
# watchman-make -p 'static/**' --run '/opt/homebrew/bin/python3.11 build.py static'
14+
# watchman-make -p 'templates/**' --run 'python3.11 build.py template'
15+
# http-server dist
1516
def unpack_submodules():
1617
# get all submodules
1718
modules = [x for x in subprocess.run("grep path .gitmodules | sed 's/.*= //'", shell=True, stdout=subprocess.PIPE).stdout.decode("utf-8").split("\n") if x]

‎static/css/root.css‎

Lines changed: 91 additions & 79 deletions
Original file line numberDiff line numberDiff line change
@@ -1,110 +1,122 @@
1-
/* Colors */
2-
:root {
3-
--light-text-color: #333333;
4-
--light-background-color: #f2f2f2;
5-
--light-secondary-color: #C9C9C9;
6-
}
1+
@import url("https://rsms.me/inter/inter.css");
2+
73

8-
/* Core styling */
94
html, body {
105
height: 100%;
6+
margin: 0;
7+
border: 0;
118
}
129

13-
* {
14-
font-family: 'Courier New', Courier, monospace;
10+
body {
11+
display: flex;
12+
flex-direction: column;
13+
justify-content: space-between;
14+
align-items: stretch;
1515
}
1616

17-
/* Default colors*/
18-
body {
19-
margin: auto;
20-
width: 75%;
21-
background: var(--light-background-color);
17+
18+
:root {
19+
font-family: Inter, sans-serif;
20+
21+
font-weight: 300;
22+
23+
letter-spacing: -0.018em;
24+
-webkit-font-smoothing: antialiased;
25+
26+
font-feature-settings: "case", "dlig", "tnum", "zero", "ss01", "calt", "ccmp", "locl", "kern";
27+
28+
29+
line-height: 1.5;
2230
}
23-
.inverse {
24-
color: var(--light-background-color);
31+
@supports (font-variation-settings: normal) {
32+
* {
33+
font-family: InterVariable, sans-serif;
34+
}
2535
}
26-
.inverse-bg {
27-
background: var(--light-text-color);
36+
37+
:root {
38+
--header-font-size: 2.3rem;
39+
--content-font-size: 1.6rem;
40+
--footer-font-size: 1.1rem;
41+
42+
43+
--color-1: #0c0e10;
44+
--color-2: #e5e5dd;
45+
--color-3: #e64959;
46+
2847
}
29-
/* Change text color - not sure which elements have default text color */
30-
*:not(a) {
31-
color: var(--light-text-color);
48+
h1, h2, h3, h4 {
49+
font-weight: 600;
3250
}
33-
34-
/* Default header styling*/
35-
h1, h2, h3, h4, h5, h6 {
36-
text-align: center;
37-
font-weight: normal;
51+
/* These are all relative to --content-font-size or --header-font-size */
52+
h1 {
53+
font-size: 1.3em;
3854
}
39-
.title {
40-
font-size: 1.5em;
55+
h2 {
56+
font-size: 1.2em;
4157
}
42-
/* Upper and bottom part of documents have different alignments */
43-
.center {
44-
text-align: center;
58+
h3 {
59+
font-size: 1.1em;
4560
}
46-
.left {
47-
text-align: left;
61+
h4 {
62+
font-size: 1em;
4863
}
4964

50-
/* Navigation */
51-
.navbar {
52-
margin-top: 20px;
53-
margin-bottom: 20px;
54-
font-size: 1.5em;
65+
body {
66+
background-color: var(--color-1);
5567
}
56-
.navbar * {
57-
text-decoration: none;
58-
color: black;
68+
html {
69+
font-size: 16px;
5970
}
6071

61-
/* Content */
62-
.content p {
63-
text-indent: 4ch;
72+
73+
header {
74+
height: 15%;
75+
font-size: var(--header-font-size);
76+
color: var(--color-3);
6477
}
65-
.content p * {
66-
display: inline;
78+
79+
a {
80+
color: var(--color-3);
6781
}
6882

69-
/* Row of buttons */
70-
.button-collection {
71-
display: flex;
72-
justify-content: space-evenly;
73-
flex-wrap: wrap;
83+
nav {
84+
text-align: center;
7485
}
75-
.button {
76-
border-radius: 5px;
77-
padding: 3px 10px 3px 10px;
78-
margin: 5px;
86+
87+
main {
88+
flex-grow: 1;
89+
color: var(--color-2);
90+
font-size: var(--content-font-size);
7991
}
80-
.button * {
81-
text-decoration: none; /* Text color is set by default, otherwise use inverse*/
92+
93+
94+
header, main, footer {
95+
margin: 15px;
8296
}
8397

84-
/* Footer */
85-
.footer {
86-
margin: 1em 0px;
87-
display: flex;
88-
justify-content: space-between;
89-
width: 75%;
98+
99+
.center {
100+
text-align: center;
90101
}
91102

92-
.block {
93-
display: block;
103+
.content-wrapper {
104+
width: 70%;
105+
margin: auto;
106+
}
107+
footer {
108+
color: var(--color-2);
109+
text-align: center;
110+
font-size: var(--footer-font-size);
94111
}
95112

96-
/*
97-
Mobile
98-
https://stackoverflow.com/a/7354648/21322342
99-
*/
100-
@media (min-width: 450px) and (max-width: 730px ){ /* Phones */
101-
.navbar * {
102-
font-size: 3em;
103-
}
104-
h1, h2, h3, h4, h5, h6 {
105-
font-size: 3em;
106-
}
107-
.content {
108-
font-size: 2em;
109-
}
113+
pre {
114+
border: 4px solid var(--color-3);
115+
overflow-y: scroll;
116+
padding: 10px;
110117
}
118+
119+
code {
120+
font-family: 'Courier New', Courier, monospace;
121+
font-size: 0.8em;
122+
}

‎templates/base.html‎

Lines changed: 19 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
<head>
44
<meta charset="UTF-8">
55
<meta name="viewport" content="width=device-width, inital-scale=1.0">
6+
67
<title>{% block title %}{% endblock title %} - ninjamar.dev</title>
78

89
<link rel="icon" type="image/x-icon" href="/favicon.ico">
@@ -11,23 +12,30 @@
1112
{% block static %}{% endblock static %}
1213
</head>
1314
<body>
14-
<div class="center">
15-
<nav class="navbar">
15+
<!-- Back to semantic html -->
16+
<header>
17+
<nav>
1618
<span>ninjamar.dev |</span>
1719
<a href="/">home</a>
1820
<a href="/projects/">projects</a>
1921
<a href="/blog/">blog</a>
2022
</nav>
21-
</div>
22-
<div class="left">
23-
<div class="content">
24-
{% block content %}
25-
{% endblock content %}
23+
</header>
24+
<main>
25+
<div class="content-wrapper">
26+
<h1>{{ self.title() }}</h1>
27+
28+
<article id="content">
29+
{% block content %}
30+
{% endblock content %}
31+
</article>
2632
</div>
27-
<footer class="footer">
28-
<span>© Copyright 2025, ninjamar. All rights reserved</span>
33+
</main>
34+
<footer>
35+
<!--Could use list here -->
36+
<p>&copy; Copyright 2025, ninjamar. All rights reserved.
2937
<a href="/privacy.html">Privacy Policy</a>
30-
</footer>
31-
</div>
38+
</p>
39+
</footer>
3240
</body>
3341
</html>

‎templates/blog/hsm.html‎

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -38,15 +38,13 @@
3838
{% endblock static %}
3939
{% block content %}
4040

41-
<h1 class="title">HSM: A JavaScript framework</h1>
4241
<p>
43-
HSM is a micro-framework for the web. HSM is an extension of the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_components">web component api</a>.
42+
HSM is a micro-framework for the web, which is an extension of the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_components">web component api</a>.
4443
I designed HSM because I wanted to learn more about web technologies such as shadow root. I was inspired to write this after learning about <a href="https://github.com/developit/htm">Hyperscript Tagged Markup</a>.
4544
With HSM, I built a <a href="/projects/note.html">note taking app</a>. This app includes the ability to drag notes around and layer them.
4645
</p>
47-
<h3>Example</h3>
48-
<pre><code>
49-
import Component from &quot;/static/projects/note/js/hsm.js&quot;;
46+
<h2>Example</h2>
47+
<pre><code>import Component from &quot;/static/projects/note/js/hsm.js&quot;;
5048
class MyComponent extends Component {
5149
foo(){
5250
this.querySelector(&quot;#here&quot;).innerHTML = &quot;test&quot;;

‎templates/blog/index.html‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
11
{% extends "base.html" %}
2-
{% block title %}blog{% endblock title %}
2+
{% block title %}Blog{% endblock title %}
33
{% block content %}
4-
<h1 class="title">Blog</h1>
54
<ul>
6-
<li>29/11/2023 | <a href="/blog/hsm.html">HSM: A JavaScript Framework</a></li>
5+
<li>Nov 29, 2023 | <a href="/blog/hsm.html">HSM: A JavaScript Framework</a></li>
76
</ul>
87
{% endblock content %}

‎templates/index.html‎

Lines changed: 15 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,24 @@
11
{% extends "base.html" %}
22

3-
{% block title %}home{% endblock title %}
3+
{% block title %}Home{% endblock title %}
4+
5+
46
{% block content %}
57
<p>I'm Ram, aka ninjamar. I enjoy coding, gaming, soccer, and photography.</p>
68
<p>Right now, I'm currently working on writing a DNS server, to provide adblocking functionality when Chrome kills off adblockers.
79
<a href="https://github.com/ninjamar/compactdns">Check it out!</a>
810
</p>
911

10-
<h2>Here are some useful links!</h2>
11-
<div class="button-collection">
12-
<div class="button inverse-bg">
13-
<a class="inverse" href="https://github.com/ninjamar">GitHub</a>
14-
</div>
15-
<div class="button inverse-bg">
16-
<a class="inverse" href="/projects/">My projects</a>
17-
</div>
18-
<div class="button inverse-bg">
19-
<a class="inverse" href="https://www.flickr.com/people/ninjamar/">Flickr (my photos)</a>
20-
</div>
21-
</div>
12+
<h2>Some useful links:</h2>
13+
<ul>
14+
<li>
15+
<a href="https://github.com/ninjamar">GitHub</a>
16+
</li>
17+
<li>
18+
<a href="/projects">My projects</a>
19+
</li>
20+
<li>
21+
<a href="https://www.flickr.com/people/ninjamar/">Flickr (my photos)</a>
22+
</li>
23+
</ul>
2224
{% endblock content %}

‎templates/privacy.html‎

Lines changed: 16 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,24 @@
11
{% extends "base.html" %}
22

3-
{% block title %}home{% endblock title %}
4-
{% block content %}
5-
<h1 class="title">Privacy Policy</h1>
3+
{% block title %}Home{% endblock title %}
4+
{% block static %}
5+
6+
<style>
7+
#content > ul{
8+
margin-left: 5ch;;
9+
}
10+
</style>
611

7-
<p>This website uses analytics to collect information. The software (which I plan to opensource when I get my GitHub back) collects the following, but is not limited to.</p>
8-
<ul style="margin-left: 5ch;"> <!-- Simple solution to counter indentation from the p tag -->
9-
<li>An id (sha256 hash of ip address + os + browser + current date)</li>
10-
<li>Screen dimentions</li>
12+
{% endblock static %}
13+
{% block content %}
14+
<p>This website uses analytics to collect information. The software, <a href="https://github.com/ninjamar/analytics">hosted on my GitHub</a>, collects the following, but is not limited to.</p>
15+
<ul> <!-- Simple solution to counter indentation from the p tag -->
16+
<li>An id (hash of IP address + OS + browser + current date)</li>
17+
<li>Screen Dimensions</li>
1118
<li>OS</li>
1219
<li>Browser</li>
13-
<li>Total time on page</li>
20+
<li>Total Total on Page</li>
1421
<li>Referrer</li>
1522
</ul>
16-
<p>Other information, such as IP address may be visible in logs.</p>
23+
<p>Other information may be visible in logs.</p>
1724
{% endblock content %}

‎templates/projects/index.html‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
{% extends "base.html" %}
22
{% block title %}Projects{% endblock title %}
33
{% block content %}
4-
<h1 class="title">Projects</h1>
54
<ul>
65
{% for project in projects %}
76
<li>

‎templates/test.html‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
11
{% extends "base.html"%}
2-
{% block title %}test{% endblock title %}
2+
3+
{% block title %}Test{% endblock title %}
4+
35
{% block content %}
4-
<h1 class="title">Test</h1>
5-
<div class="button-collection">
6+
<div>
67
{% for color in colors %}
7-
<div class="button" style="background: {{ color }}">
8+
<div style="background: {{ color }}">
89
<a href="#">{{ color }}</a>
910
</div>
1011
{% endfor %}

0 commit comments

Comments
 (0)