jekyll-dewey-decimal 0.1.2 → 0.1.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/Gemfile.lock +4 -1
- data/README.md +1 -1
- data/_config.yml +3 -2
- data/_includes/header.html +27 -25
- data/_includes/post-list.html +3 -3
- data/_layouts/default.html +7 -8
- data/_layouts/home.html +6 -6
- data/_posts/2023-10-12-file-1.md +1 -1
- data/_posts/2023-10-13-file-2.md +2 -2
- data/_site/2023/10/12/file-1.html +54 -35
- data/_site/2023/10/13/file-2.html +55 -36
- data/_site/README.md +1 -1
- data/_site/about.html +53 -34
- data/_site/assets/css/styles.css +151 -0
- data/_site/assets/img/profile.png +0 -0
- data/_site/contact.html +53 -34
- data/_site/index.html +64 -44
- data/_site/jekyll-dewey-decimal-0.1.2.gem +0 -0
- data/_site/jekyll-dewey-decimal.gemspec +1 -1
- data/_site/resume.html +53 -34
- data/assets/css/styles.css +151 -0
- data/assets/img/profile.png +0 -0
- data/jekyll-dewey-decimal-0.1.2.gem +0 -0
- data/jekyll-dewey-decimal.gemspec +1 -1
- data/resume.md +1 -3
- metadata +12 -13
- data/_site/assets/styles.css +0 -127
- data/_site/jekyll-dewey-decimal-0.1.0.gem +0 -0
- data/_site/profile.png +0 -0
- data/assets/styles.css +0 -127
- data/jekyll-dewey-decimal-0.1.0.gem +0 -0
- data/jekyll-dewey-decimal-0.1.1.gem +0 -0
- data/profile.png +0 -0
- /data/_site/assets/{syntax.css → css/syntax.css} +0 -0
- /data/_site/{screenshot.png → assets/img/screenshot.png} +0 -0
- /data/assets/{syntax.css → css/syntax.css} +0 -0
- /data/{screenshot.png → assets/img/screenshot.png} +0 -0
|
@@ -0,0 +1,151 @@
|
|
|
1
|
+
:root {
|
|
2
|
+
--black: #000000;
|
|
3
|
+
--hover-blue: #B9E7FA;
|
|
4
|
+
--hover-gray: #696969;
|
|
5
|
+
}
|
|
6
|
+
|
|
7
|
+
* {
|
|
8
|
+
font-family: 'Inconsolata', monospace;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
.--font-size-scale-small{
|
|
12
|
+
font-size: 17px;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
.container {
|
|
16
|
+
width: 100%;
|
|
17
|
+
display: grid;
|
|
18
|
+
grid-template-areas:
|
|
19
|
+
". navbar ."
|
|
20
|
+
". content ."
|
|
21
|
+
". footer ."
|
|
22
|
+
;
|
|
23
|
+
|
|
24
|
+
/* Extra small devices (phones, 600px and down) */
|
|
25
|
+
@media only screen and (max-width: 600px) { grid-template-columns: 1fr 10fr 1fr; }
|
|
26
|
+
/* Small devices (portrait tablets and large phones, 600px and up) */
|
|
27
|
+
@media only screen and (min-width: 600px) { grid-template-columns: 1fr 8fr 1fr; }
|
|
28
|
+
/* Medium devices (landscape tablets, 768px and up) */
|
|
29
|
+
@media only screen and (min-width: 768px) { grid-template-columns: 1fr 5fr 1fr; }
|
|
30
|
+
/* Large devices (laptops/desktops, 992px and up) */
|
|
31
|
+
@media only screen and (min-width: 992px) { grid-template-columns: 1fr 2fr 1fr; }
|
|
32
|
+
/* Extra large devices (large laptops and desktops, 1200px and up) */
|
|
33
|
+
@media only screen and (min-width: 1200px) { grid-template-columns: 1fr 2fr 1fr; }
|
|
34
|
+
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
nav {
|
|
38
|
+
grid-area: navbar;
|
|
39
|
+
display: flex;
|
|
40
|
+
justify-content: space-between;
|
|
41
|
+
padding-top: 40px;
|
|
42
|
+
padding-bottom: 40px;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
nav ul {
|
|
46
|
+
list-style-type: none;
|
|
47
|
+
margin: 0;
|
|
48
|
+
padding: 0;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
nav ul li {
|
|
52
|
+
display: inline;
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
nav ul li a {
|
|
56
|
+
text-decoration: none;
|
|
57
|
+
color: var(--black);
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
nav ul li a:hover {
|
|
61
|
+
color: var(--hover-gray);
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
.toggle-button {
|
|
65
|
+
flex-direction: column;
|
|
66
|
+
justify-content: space-between;
|
|
67
|
+
width: 30px;
|
|
68
|
+
height: 21px;
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
.toggle-button .bar {
|
|
72
|
+
height: 2px;
|
|
73
|
+
width: 100%;
|
|
74
|
+
background-color: var(--black);
|
|
75
|
+
border-radius: 20px;
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
.nav-links-responsive {
|
|
79
|
+
display: flex;
|
|
80
|
+
padding-top: 20px;
|
|
81
|
+
flex-direction: column;
|
|
82
|
+
text-align: right;
|
|
83
|
+
line-height: 1.5rem;
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
@media only screen and (max-width: 600px) {
|
|
87
|
+
.nav-left{
|
|
88
|
+
display: flex;
|
|
89
|
+
flex-direction: column;
|
|
90
|
+
align-items: end;
|
|
91
|
+
}
|
|
92
|
+
.toggle-button { display: flex; }
|
|
93
|
+
|
|
94
|
+
.nav-links { display: none; }
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
@media only screen and (min-width: 600px) {
|
|
98
|
+
.toggle-button { display: none; }
|
|
99
|
+
.nav-links { display: inline; }
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
footer {
|
|
103
|
+
grid-area: footer;
|
|
104
|
+
padding-top: 20px;
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
.content {
|
|
108
|
+
grid-area: content;
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
.profile {
|
|
112
|
+
text-align: center;
|
|
113
|
+
padding-bottom: 20px;
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
.profile img {
|
|
117
|
+
display: block;
|
|
118
|
+
margin-left: auto;
|
|
119
|
+
margin-right: auto;
|
|
120
|
+
width: 100px;
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
.posts ul {
|
|
124
|
+
list-style-type: none;
|
|
125
|
+
margin: 0;
|
|
126
|
+
padding: 0;
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
.posts ul li {
|
|
130
|
+
padding-top: 5px;
|
|
131
|
+
padding-bottom: 5px;
|
|
132
|
+
margin-bottom: 2px;
|
|
133
|
+
}
|
|
134
|
+
|
|
135
|
+
.posts ul li:hover {
|
|
136
|
+
background-color: var(--hover-blue);
|
|
137
|
+
}
|
|
138
|
+
|
|
139
|
+
.posts ul li a {
|
|
140
|
+
text-decoration: none;
|
|
141
|
+
color: var(--black);
|
|
142
|
+
}
|
|
143
|
+
|
|
144
|
+
.footer a{
|
|
145
|
+
color: #33B8EE;
|
|
146
|
+
text-decoration: none;
|
|
147
|
+
}
|
|
148
|
+
|
|
149
|
+
.footer a:hover{
|
|
150
|
+
color: #696969;
|
|
151
|
+
}
|
|
Binary file
|
data/_site/contact.html
CHANGED
|
@@ -5,53 +5,72 @@
|
|
|
5
5
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
6
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
7
7
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
8
|
+
<link rel="stylesheet" href="/assets/css/styles.css">
|
|
9
|
+
<link rel="stylesheet" href="/assets/css/syntax.css">
|
|
8
10
|
<link href="https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&family=Inconsolata:wght@300;400;500;600;700&family=Outfit:wght@100;200;300;400;500;600;700&display=swap" rel="stylesheet">
|
|
9
|
-
<link rel="stylesheet" href="/assets/styles.css">
|
|
10
|
-
<link rel="stylesheet" href="/assets/syntax.css">
|
|
11
|
-
<link href="https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@1,700&family=Inconsolata:wght@300;400;500;600;700&family=Outfit:wght@100;200;300;400;500;600;700&display=swap" rel="stylesheet">
|
|
12
11
|
<link rel="icon" type="image/x-icon" href="/favicon.ico">
|
|
13
12
|
<title>SITE_TITLE</title>
|
|
14
13
|
</head>
|
|
15
14
|
<body>
|
|
16
15
|
<div class="container">
|
|
17
|
-
<
|
|
18
|
-
|
|
19
|
-
<nav>
|
|
20
|
-
<div class="nav-left">
|
|
21
|
-
<ul>
|
|
22
|
-
<li><a href="/">SITE_TITLE</a></li>
|
|
23
|
-
</ul>
|
|
24
|
-
</div>
|
|
25
|
-
<div class="nav-right">
|
|
26
|
-
<ul>
|
|
27
|
-
<li><a href="/about">About</a></li>
|
|
28
|
-
<li><a href="/resume.pdf" target="_blank">Resumé</a></li>
|
|
29
|
-
<li><a href="/contact">Contact</a></li>
|
|
30
|
-
</ul>
|
|
31
|
-
</div>
|
|
32
|
-
</nav>
|
|
33
|
-
</div> -->
|
|
34
|
-
|
|
35
|
-
<div class="header-container">
|
|
36
|
-
<ul class="nav-left">
|
|
16
|
+
<nav class="--font-size-scale-small">
|
|
17
|
+
<ul>
|
|
37
18
|
<li><a href="/">SITE_TITLE</a></li>
|
|
38
19
|
</ul>
|
|
39
|
-
<
|
|
40
|
-
<
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
20
|
+
<div class="nav-left">
|
|
21
|
+
<ul>
|
|
22
|
+
<li><a href="#" class="toggle-button" id="toggle" onclick="changeClass()">
|
|
23
|
+
<span class="bar"></span>
|
|
24
|
+
<span class="bar"></span>
|
|
25
|
+
<span class="bar"></span>
|
|
26
|
+
</a></li>
|
|
27
|
+
</ul>
|
|
28
|
+
<ul class="nav-links" id="nlinks">
|
|
29
|
+
<li><a href="/about.html" style="padding-left: 20px;">About</a></li>
|
|
30
|
+
<li><a href="/resume.html" style="padding-left: 20px;">Resumé</a></li>
|
|
31
|
+
<li><a href="/contact.html" style="padding-left: 20px;">Contact</a></li>
|
|
32
|
+
</ul>
|
|
33
|
+
</div>
|
|
34
|
+
</nav>
|
|
35
|
+
|
|
36
|
+
<script>
|
|
37
|
+
|
|
38
|
+
function changeClass() {
|
|
39
|
+
if (document.getElementById('nlinks').className === "nav-links"){
|
|
40
|
+
document.getElementById('nlinks').className = "nav-links-responsive";
|
|
41
|
+
} else if (document.getElementById('nlinks').className === "nav-links-responsive"){
|
|
42
|
+
document.getElementById('nlinks').className = "nav-links";
|
|
43
|
+
}
|
|
44
|
+
}
|
|
46
45
|
|
|
46
|
+
/*function changeClassName() {
|
|
47
|
+
if (x.className === "nav-links"){
|
|
48
|
+
x.className = "nav-links-responsive"
|
|
49
|
+
} else {
|
|
50
|
+
x.className = "nav-links";
|
|
51
|
+
}
|
|
52
|
+
}*/
|
|
47
53
|
|
|
48
|
-
|
|
54
|
+
/*function myFunction() {
|
|
55
|
+
var x = document.getElementById("toggle");
|
|
56
|
+
if (x.className === "toggle-button") {
|
|
57
|
+
x.className == "nav-links-responsive";
|
|
58
|
+
} else {
|
|
59
|
+
x.className = "toggle-button";
|
|
60
|
+
}
|
|
61
|
+
}*/
|
|
62
|
+
</script>
|
|
63
|
+
<div class="content">
|
|
64
|
+
|
|
65
|
+
|
|
66
|
+
|
|
67
|
+
</div>
|
|
68
|
+
<footer class="footer">
|
|
49
69
|
<p class="copyright">
|
|
50
70
|
© YEAR.
|
|
51
|
-
Made with ♡ by <a href="" class="hard-anchor"
|
|
71
|
+
Made with ♡ by <a href="GITHUB_PAGE_URL" class="hard-anchor" target="_blank">AUTHOR_NAME</a> All rights reserved.
|
|
52
72
|
</p>
|
|
53
73
|
</footer>
|
|
54
|
-
</div>
|
|
55
74
|
</div>
|
|
56
75
|
</body>
|
|
57
|
-
</html>
|
|
76
|
+
</html>
|
data/_site/index.html
CHANGED
|
@@ -5,73 +5,93 @@
|
|
|
5
5
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
6
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
7
7
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
8
|
+
<link rel="stylesheet" href="/assets/css/styles.css">
|
|
9
|
+
<link rel="stylesheet" href="/assets/css/syntax.css">
|
|
8
10
|
<link href="https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&family=Inconsolata:wght@300;400;500;600;700&family=Outfit:wght@100;200;300;400;500;600;700&display=swap" rel="stylesheet">
|
|
9
|
-
<link rel="stylesheet" href="/assets/styles.css">
|
|
10
|
-
<link rel="stylesheet" href="/assets/syntax.css">
|
|
11
|
-
<link href="https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@1,700&family=Inconsolata:wght@300;400;500;600;700&family=Outfit:wght@100;200;300;400;500;600;700&display=swap" rel="stylesheet">
|
|
12
11
|
<link rel="icon" type="image/x-icon" href="/favicon.ico">
|
|
13
12
|
<title>SITE_TITLE</title>
|
|
14
13
|
</head>
|
|
15
14
|
<body>
|
|
16
15
|
<div class="container">
|
|
17
|
-
<
|
|
18
|
-
|
|
19
|
-
<nav>
|
|
20
|
-
<div class="nav-left">
|
|
21
|
-
<ul>
|
|
22
|
-
<li><a href="/">SITE_TITLE</a></li>
|
|
23
|
-
</ul>
|
|
24
|
-
</div>
|
|
25
|
-
<div class="nav-right">
|
|
26
|
-
<ul>
|
|
27
|
-
<li><a href="/about">About</a></li>
|
|
28
|
-
<li><a href="/resume.pdf" target="_blank">Resumé</a></li>
|
|
29
|
-
<li><a href="/contact">Contact</a></li>
|
|
30
|
-
</ul>
|
|
31
|
-
</div>
|
|
32
|
-
</nav>
|
|
33
|
-
</div> -->
|
|
34
|
-
|
|
35
|
-
<div class="header-container">
|
|
36
|
-
<ul class="nav-left">
|
|
16
|
+
<nav class="--font-size-scale-small">
|
|
17
|
+
<ul>
|
|
37
18
|
<li><a href="/">SITE_TITLE</a></li>
|
|
38
19
|
</ul>
|
|
39
|
-
<
|
|
40
|
-
<
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
20
|
+
<div class="nav-left">
|
|
21
|
+
<ul>
|
|
22
|
+
<li><a href="#" class="toggle-button" id="toggle" onclick="changeClass()">
|
|
23
|
+
<span class="bar"></span>
|
|
24
|
+
<span class="bar"></span>
|
|
25
|
+
<span class="bar"></span>
|
|
26
|
+
</a></li>
|
|
27
|
+
</ul>
|
|
28
|
+
<ul class="nav-links" id="nlinks">
|
|
29
|
+
<li><a href="/about.html" style="padding-left: 20px;">About</a></li>
|
|
30
|
+
<li><a href="/resume.html" style="padding-left: 20px;">Resumé</a></li>
|
|
31
|
+
<li><a href="/contact.html" style="padding-left: 20px;">Contact</a></li>
|
|
32
|
+
</ul>
|
|
33
|
+
</div>
|
|
34
|
+
</nav>
|
|
35
|
+
|
|
36
|
+
<script>
|
|
37
|
+
|
|
38
|
+
function changeClass() {
|
|
39
|
+
if (document.getElementById('nlinks').className === "nav-links"){
|
|
40
|
+
document.getElementById('nlinks').className = "nav-links-responsive";
|
|
41
|
+
} else if (document.getElementById('nlinks').className === "nav-links-responsive"){
|
|
42
|
+
document.getElementById('nlinks').className = "nav-links";
|
|
43
|
+
}
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
/*function changeClassName() {
|
|
47
|
+
if (x.className === "nav-links"){
|
|
48
|
+
x.className = "nav-links-responsive"
|
|
49
|
+
} else {
|
|
50
|
+
x.className = "nav-links";
|
|
51
|
+
}
|
|
52
|
+
}*/
|
|
53
|
+
|
|
54
|
+
/*function myFunction() {
|
|
55
|
+
var x = document.getElementById("toggle");
|
|
56
|
+
if (x.className === "toggle-button") {
|
|
57
|
+
x.className == "nav-links-responsive";
|
|
58
|
+
} else {
|
|
59
|
+
x.className = "toggle-button";
|
|
60
|
+
}
|
|
61
|
+
}*/
|
|
62
|
+
</script>
|
|
63
|
+
<div class="content">
|
|
64
|
+
<div class="profile">
|
|
65
|
+
<h2 class="--font-size-scale-small" style="font-weight: 600;">AUTHOR_NAME</h2>
|
|
66
|
+
<img src="/assets/img/profile.png" alt="">
|
|
67
|
+
<h3 class="--font-size-scale-small" style="font-style: italic; font-weight: 400;">Welcome to my space on<br>the internet.</h3>
|
|
49
68
|
</div>
|
|
50
|
-
<div class="posts
|
|
69
|
+
<div class="posts">
|
|
51
70
|
<div class="post-list-container">
|
|
52
|
-
<h2>Blog posts</h2>
|
|
71
|
+
<h2 class="--font-size-scale-small">Blog posts</h2>
|
|
53
72
|
<ul class="posts-list">
|
|
54
73
|
|
|
55
74
|
<li>
|
|
56
|
-
<span class="post-date" style="color: #696969;">13 Oct 2023 »</span>
|
|
57
|
-
<a href="/2023/10/13/file-2.html" class="caption" title="🔖 book and ux">
|
|
75
|
+
<span class="post-date --font-size-scale-small" style="color: #696969;">13 Oct 2023 »</span>
|
|
76
|
+
<a class="--font-size-scale-small" href="/2023/10/13/file-2.html" class="caption" title="🔖 book and ux">Learning a language by reading novels</a>
|
|
58
77
|
</li>
|
|
59
78
|
|
|
60
79
|
<li>
|
|
61
|
-
<span class="post-date" style="color: #696969;">12 Oct 2023 »</span>
|
|
62
|
-
<a href="/2023/10/12/file-1.html" class="caption" title="🔖 book, review, ux, and design">
|
|
80
|
+
<span class="post-date --font-size-scale-small" style="color: #696969;">12 Oct 2023 »</span>
|
|
81
|
+
<a class="--font-size-scale-small" href="/2023/10/12/file-1.html" class="caption" title="🔖 book, review, ux, and design">Markdown Testing</a>
|
|
63
82
|
</li>
|
|
64
83
|
|
|
65
84
|
</ul>
|
|
66
85
|
</div>
|
|
67
|
-
</div>
|
|
68
|
-
|
|
86
|
+
</div>
|
|
87
|
+
|
|
88
|
+
</div>
|
|
89
|
+
<footer class="footer">
|
|
69
90
|
<p class="copyright">
|
|
70
91
|
© YEAR.
|
|
71
|
-
Made with ♡ by <a href="" class="hard-anchor"
|
|
92
|
+
Made with ♡ by <a href="GITHUB_PAGE_URL" class="hard-anchor" target="_blank">AUTHOR_NAME</a> All rights reserved.
|
|
72
93
|
</p>
|
|
73
94
|
</footer>
|
|
74
|
-
</div>
|
|
75
95
|
</div>
|
|
76
96
|
</body>
|
|
77
|
-
</html>
|
|
97
|
+
</html>
|
|
Binary file
|
data/_site/resume.html
CHANGED
|
@@ -5,53 +5,72 @@
|
|
|
5
5
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
6
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
7
7
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
8
|
+
<link rel="stylesheet" href="/assets/css/styles.css">
|
|
9
|
+
<link rel="stylesheet" href="/assets/css/syntax.css">
|
|
8
10
|
<link href="https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&family=Inconsolata:wght@300;400;500;600;700&family=Outfit:wght@100;200;300;400;500;600;700&display=swap" rel="stylesheet">
|
|
9
|
-
<link rel="stylesheet" href="/assets/styles.css">
|
|
10
|
-
<link rel="stylesheet" href="/assets/syntax.css">
|
|
11
|
-
<link href="https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@1,700&family=Inconsolata:wght@300;400;500;600;700&family=Outfit:wght@100;200;300;400;500;600;700&display=swap" rel="stylesheet">
|
|
12
11
|
<link rel="icon" type="image/x-icon" href="/favicon.ico">
|
|
13
12
|
<title>SITE_TITLE</title>
|
|
14
13
|
</head>
|
|
15
14
|
<body>
|
|
16
15
|
<div class="container">
|
|
17
|
-
<
|
|
18
|
-
|
|
19
|
-
<nav>
|
|
20
|
-
<div class="nav-left">
|
|
21
|
-
<ul>
|
|
22
|
-
<li><a href="/">SITE_TITLE</a></li>
|
|
23
|
-
</ul>
|
|
24
|
-
</div>
|
|
25
|
-
<div class="nav-right">
|
|
26
|
-
<ul>
|
|
27
|
-
<li><a href="/about">About</a></li>
|
|
28
|
-
<li><a href="/resume.pdf" target="_blank">Resumé</a></li>
|
|
29
|
-
<li><a href="/contact">Contact</a></li>
|
|
30
|
-
</ul>
|
|
31
|
-
</div>
|
|
32
|
-
</nav>
|
|
33
|
-
</div> -->
|
|
34
|
-
|
|
35
|
-
<div class="header-container">
|
|
36
|
-
<ul class="nav-left">
|
|
16
|
+
<nav class="--font-size-scale-small">
|
|
17
|
+
<ul>
|
|
37
18
|
<li><a href="/">SITE_TITLE</a></li>
|
|
38
19
|
</ul>
|
|
39
|
-
<
|
|
40
|
-
<
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
20
|
+
<div class="nav-left">
|
|
21
|
+
<ul>
|
|
22
|
+
<li><a href="#" class="toggle-button" id="toggle" onclick="changeClass()">
|
|
23
|
+
<span class="bar"></span>
|
|
24
|
+
<span class="bar"></span>
|
|
25
|
+
<span class="bar"></span>
|
|
26
|
+
</a></li>
|
|
27
|
+
</ul>
|
|
28
|
+
<ul class="nav-links" id="nlinks">
|
|
29
|
+
<li><a href="/about.html" style="padding-left: 20px;">About</a></li>
|
|
30
|
+
<li><a href="/resume.html" style="padding-left: 20px;">Resumé</a></li>
|
|
31
|
+
<li><a href="/contact.html" style="padding-left: 20px;">Contact</a></li>
|
|
32
|
+
</ul>
|
|
33
|
+
</div>
|
|
34
|
+
</nav>
|
|
35
|
+
|
|
36
|
+
<script>
|
|
37
|
+
|
|
38
|
+
function changeClass() {
|
|
39
|
+
if (document.getElementById('nlinks').className === "nav-links"){
|
|
40
|
+
document.getElementById('nlinks').className = "nav-links-responsive";
|
|
41
|
+
} else if (document.getElementById('nlinks').className === "nav-links-responsive"){
|
|
42
|
+
document.getElementById('nlinks').className = "nav-links";
|
|
43
|
+
}
|
|
44
|
+
}
|
|
46
45
|
|
|
46
|
+
/*function changeClassName() {
|
|
47
|
+
if (x.className === "nav-links"){
|
|
48
|
+
x.className = "nav-links-responsive"
|
|
49
|
+
} else {
|
|
50
|
+
x.className = "nav-links";
|
|
51
|
+
}
|
|
52
|
+
}*/
|
|
47
53
|
|
|
48
|
-
|
|
54
|
+
/*function myFunction() {
|
|
55
|
+
var x = document.getElementById("toggle");
|
|
56
|
+
if (x.className === "toggle-button") {
|
|
57
|
+
x.className == "nav-links-responsive";
|
|
58
|
+
} else {
|
|
59
|
+
x.className = "toggle-button";
|
|
60
|
+
}
|
|
61
|
+
}*/
|
|
62
|
+
</script>
|
|
63
|
+
<div class="content">
|
|
64
|
+
|
|
65
|
+
|
|
66
|
+
|
|
67
|
+
</div>
|
|
68
|
+
<footer class="footer">
|
|
49
69
|
<p class="copyright">
|
|
50
70
|
© YEAR.
|
|
51
|
-
Made with ♡ by <a href="" class="hard-anchor"
|
|
71
|
+
Made with ♡ by <a href="GITHUB_PAGE_URL" class="hard-anchor" target="_blank">AUTHOR_NAME</a> All rights reserved.
|
|
52
72
|
</p>
|
|
53
73
|
</footer>
|
|
54
|
-
</div>
|
|
55
74
|
</div>
|
|
56
75
|
</body>
|
|
57
|
-
</html>
|
|
76
|
+
</html>
|
|
@@ -0,0 +1,151 @@
|
|
|
1
|
+
:root {
|
|
2
|
+
--black: #000000;
|
|
3
|
+
--hover-blue: #B9E7FA;
|
|
4
|
+
--hover-gray: #696969;
|
|
5
|
+
}
|
|
6
|
+
|
|
7
|
+
* {
|
|
8
|
+
font-family: 'Inconsolata', monospace;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
.--font-size-scale-small{
|
|
12
|
+
font-size: 17px;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
.container {
|
|
16
|
+
width: 100%;
|
|
17
|
+
display: grid;
|
|
18
|
+
grid-template-areas:
|
|
19
|
+
". navbar ."
|
|
20
|
+
". content ."
|
|
21
|
+
". footer ."
|
|
22
|
+
;
|
|
23
|
+
|
|
24
|
+
/* Extra small devices (phones, 600px and down) */
|
|
25
|
+
@media only screen and (max-width: 600px) { grid-template-columns: 1fr 10fr 1fr; }
|
|
26
|
+
/* Small devices (portrait tablets and large phones, 600px and up) */
|
|
27
|
+
@media only screen and (min-width: 600px) { grid-template-columns: 1fr 8fr 1fr; }
|
|
28
|
+
/* Medium devices (landscape tablets, 768px and up) */
|
|
29
|
+
@media only screen and (min-width: 768px) { grid-template-columns: 1fr 5fr 1fr; }
|
|
30
|
+
/* Large devices (laptops/desktops, 992px and up) */
|
|
31
|
+
@media only screen and (min-width: 992px) { grid-template-columns: 1fr 2fr 1fr; }
|
|
32
|
+
/* Extra large devices (large laptops and desktops, 1200px and up) */
|
|
33
|
+
@media only screen and (min-width: 1200px) { grid-template-columns: 1fr 2fr 1fr; }
|
|
34
|
+
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
nav {
|
|
38
|
+
grid-area: navbar;
|
|
39
|
+
display: flex;
|
|
40
|
+
justify-content: space-between;
|
|
41
|
+
padding-top: 40px;
|
|
42
|
+
padding-bottom: 40px;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
nav ul {
|
|
46
|
+
list-style-type: none;
|
|
47
|
+
margin: 0;
|
|
48
|
+
padding: 0;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
nav ul li {
|
|
52
|
+
display: inline;
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
nav ul li a {
|
|
56
|
+
text-decoration: none;
|
|
57
|
+
color: var(--black);
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
nav ul li a:hover {
|
|
61
|
+
color: var(--hover-gray);
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
.toggle-button {
|
|
65
|
+
flex-direction: column;
|
|
66
|
+
justify-content: space-between;
|
|
67
|
+
width: 30px;
|
|
68
|
+
height: 21px;
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
.toggle-button .bar {
|
|
72
|
+
height: 2px;
|
|
73
|
+
width: 100%;
|
|
74
|
+
background-color: var(--black);
|
|
75
|
+
border-radius: 20px;
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
.nav-links-responsive {
|
|
79
|
+
display: flex;
|
|
80
|
+
padding-top: 20px;
|
|
81
|
+
flex-direction: column;
|
|
82
|
+
text-align: right;
|
|
83
|
+
line-height: 1.5rem;
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
@media only screen and (max-width: 600px) {
|
|
87
|
+
.nav-left{
|
|
88
|
+
display: flex;
|
|
89
|
+
flex-direction: column;
|
|
90
|
+
align-items: end;
|
|
91
|
+
}
|
|
92
|
+
.toggle-button { display: flex; }
|
|
93
|
+
|
|
94
|
+
.nav-links { display: none; }
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
@media only screen and (min-width: 600px) {
|
|
98
|
+
.toggle-button { display: none; }
|
|
99
|
+
.nav-links { display: inline; }
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
footer {
|
|
103
|
+
grid-area: footer;
|
|
104
|
+
padding-top: 20px;
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
.content {
|
|
108
|
+
grid-area: content;
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
.profile {
|
|
112
|
+
text-align: center;
|
|
113
|
+
padding-bottom: 20px;
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
.profile img {
|
|
117
|
+
display: block;
|
|
118
|
+
margin-left: auto;
|
|
119
|
+
margin-right: auto;
|
|
120
|
+
width: 100px;
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
.posts ul {
|
|
124
|
+
list-style-type: none;
|
|
125
|
+
margin: 0;
|
|
126
|
+
padding: 0;
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
.posts ul li {
|
|
130
|
+
padding-top: 5px;
|
|
131
|
+
padding-bottom: 5px;
|
|
132
|
+
margin-bottom: 2px;
|
|
133
|
+
}
|
|
134
|
+
|
|
135
|
+
.posts ul li:hover {
|
|
136
|
+
background-color: var(--hover-blue);
|
|
137
|
+
}
|
|
138
|
+
|
|
139
|
+
.posts ul li a {
|
|
140
|
+
text-decoration: none;
|
|
141
|
+
color: var(--black);
|
|
142
|
+
}
|
|
143
|
+
|
|
144
|
+
.footer a{
|
|
145
|
+
color: #33B8EE;
|
|
146
|
+
text-decoration: none;
|
|
147
|
+
}
|
|
148
|
+
|
|
149
|
+
.footer a:hover{
|
|
150
|
+
color: #696969;
|
|
151
|
+
}
|
|
Binary file
|
|
Binary file
|