don't overuse divs

topi314 · Sep 16, 2023 · 488b730 · 488b730
1 parent 0254fb6
commit 488b730
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 38 deletions.
diff --git a/assets/style.css b/assets/style.css
@@ -207,7 +207,15 @@ main > input[type="radio"]:checked + label::after {
 
 #nav-home:checked ~ #home,
 #nav-projects:checked ~ #projects {
-    display: flex;
+    display: block;
+}
+
+#projects {
+    list-style-type: none;
+}
+
+#projects li {
+    margin-bottom: 1rem;
 }
 
 .ch-chroma {
@@ -229,14 +237,14 @@ footer a {
 }
 
 .load-more {
+    width: 100%;
     border: none;
     border-radius: 0.5rem;
     padding: 0.5rem 1rem;
     background-color: var(--bg-primary);
     cursor: pointer;
     transition: filter 0.2s ease-in-out;
     color: var(--text-primary);
-
 }
 
 .load-more:hover {

diff --git a/templates/home.gohtml b/templates/home.gohtml
@@ -1,5 +1,5 @@
-<div>
+<p>
     {{ .Home.Content }}
-</div>
+</p>
 
 <div id="lastfm"></div>
diff --git a/templates/index.gohtml b/templates/index.gohtml
@@ -11,9 +11,9 @@
 	<div id="home" class="nav">
 		{{ template "home.gohtml" .}}
 	</div>
-	<div id="projects" class="nav">
+	<ul id="projects" class="nav">
 		{{ template "projects.gohtml" .}}
-	</div>
+	</ul>
 </main>
 <footer>
 	<p>© 2023 - <a href="https://github.com/topi314" target="_blank">@topi314</a></p>

diff --git a/templates/projects.gohtml b/templates/projects.gohtml
@@ -1,40 +1,44 @@
 {{ range $index, $project := .Projects }}
-	<div class="project">
-		<div class="project__name">
-			<span class="icon"></span>
-			<a href="{{ $project.URL }}">{{ $project.Name }}</a>
-		</div>
-		<p class="project__description">
-            {{ $project.Description }}
-		</p>
-		<div class="project__details">
-            {{ if $project.Language }}
-				<div class="project__language">
-					<span class="icon" style="background-color:{{ $project.Language.Color }}"></span>
-					<span>{{ $project.Language.Name }}</span>
-				</div>
-            {{ end }}
-			<div class="project__stars">
+	<li>
+		<div class="project">
+			<div class="project__name">
 				<span class="icon"></span>
-				<span>{{ $project.Stars }}</span>
+				<a href="{{ $project.URL }}">{{ $project.Name }}</a>
 			</div>
-			<div class="project__forks">
-				<span class="icon"></span>
-				<span>{{ $project.Forks }}</span>
-			</div>
-			<div class="project__updated">
-				<span class="time" title="{{ $project.UpdatedAt }}">Updated {{ humanizeTime $project.UpdatedAt }}</span>
+			<p class="project__description">
+				{{ $project.Description }}
+			</p>
+			<div class="project__details">
+				{{ if $project.Language }}
+					<div class="project__language">
+						<span class="icon" style="background-color:{{ $project.Language.Color }}"></span>
+						<span>{{ $project.Language.Name }}</span>
+					</div>
+				{{ end }}
+				<div class="project__stars">
+					<span class="icon"></span>
+					<span>{{ $project.Stars }}</span>
+				</div>
+				<div class="project__forks">
+					<span class="icon"></span>
+					<span>{{ $project.Forks }}</span>
+				</div>
+				<div class="project__updated">
+					<span class="time" title="{{ $project.UpdatedAt }}">Updated {{ humanizeTime $project.UpdatedAt }}</span>
+				</div>
 			</div>
+			{{ if $project.Topics }}
+				<div class="project__topics">
+					{{ range $index, $topic := $project.Topics }}
+						<a class="project__topic" href="{{ $topic.URL }}" target="_blank">{{ $topic.Name }}</a>
+					{{ end }}
+				</div>
+			{{ end }}
 		</div>
-        {{ if $project.Topics }}
-			<div class="project__topics">
-                {{ range $index, $topic := $project.Topics }}
-					<a class="project__topic" href="{{ $topic.URL }}" target="_blank">{{ $topic.Name }}</a>
-                {{ end }}
-			</div>
-        {{ end }}
-	</div>
+	</li>
 {{ end }}
 {{ if .ProjectsAfter }}
-	<button id="projects-load-more" class="load-more" onclick="loadMoreProjects({{ .ProjectsAfter }})">Load more</button>
+	<li>
+		<button id="projects-load-more" class="load-more" onclick="loadMoreProjects({{ .ProjectsAfter }})">Load more</button>
+	</li>
 {{ end }}