Cleaned up homepage HTML

This commit is contained in:
Brandon Rozek 2022-05-08 16:40:46 -04:00
parent 06d74a6a39
commit b28e531f9f
2 changed files with 79 additions and 74 deletions

View file

@ -4,7 +4,7 @@
body { body {
-ms-text-size-adjust: 100%; -ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;
min-height:100vh; min-height: 100vh;
margin: 0; margin: 0;
padding: 0; padding: 0;
box-sizing:border-box; box-sizing:border-box;
@ -93,25 +93,6 @@ a:active {
} }
} }
/* Homepage Header */
.header-home .avatar {
height: 250px;
}
.header-home .avatar img {
width: 250px;
position: absolute;
margin: 0 auto;
left: 0;
right: 0;
}
.header-home .avatarMask {
clip-path: circle(120px at center);
-webkit-clip-path: circle(120px at center);
}
/* END HEADER */ /* END HEADER */
main { main {
@ -123,22 +104,11 @@ mark {
font-weight: bold; font-weight: bold;
} }
/*
** NAVIGATION
*/
/* Top page */ .nav-home ul {
#profileContainer {
min-height: calc(100vh - 100px);
/* max-width: 600px; */
display: flex;
justify-content: center;
align-items: center;
}
#profile {
max-width: 600px;
/* min-width: 300px; */
}
nav ul {
display: flex; display: flex;
justify-content: space-evenly; justify-content: space-evenly;
/* max-width: 300px; */ /* max-width: 300px; */
@ -148,10 +118,12 @@ nav ul {
flex-wrap: wrap; flex-wrap: wrap;
} }
nav li { .nav-home li {
margin: 0 10px; margin: 0 10px;
} }
/* END NAVIGATION */
/* Contents List */ /* Contents List */
#searchBox { #searchBox {
position: relative; position: relative;
@ -281,6 +253,43 @@ nav li {
} }
/*
** Home Page
*/
.main-home {
min-height: calc(100vh - 100px);
/* max-width: 600px; */
display: flex;
justify-content: center;
align-items: center;
}
.main-home .h-card {
max-width: 600px;
/* min-width: 300px; */
}
.main-home .h-card .avatar {
height: 250px;
}
.main-home .h-card .avatar img {
width: 250px;
position: absolute;
margin: 0 auto;
left: 0;
right: 0;
}
.main-home .h-card .avatarMask {
clip-path: circle(120px at center);
-webkit-clip-path: circle(120px at center);
}
/* END HOME PAGE */
#webmentions img { max-height: 1.2em; margin-right: -1ex; } #webmentions img { max-height: 1.2em; margin-right: -1ex; }

View file

@ -1,51 +1,47 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
{{- partial "head.html" . -}} {{- partial "head.html" . -}}
<body> <body>
<main> <main class="main-home">
<div id="profileContainer"> <div class="h-card">
<div id="profile" class="h-card"> <!-- avator -->
<header class="header-home"> <div class="avatar">
<!-- avator --> <img class="avatarMask u-photo" src="{{ .Site.BaseURL }}/img/{{ .Site.Params.avatar }}" alt="Photo of {{ .Site.Params.Author }}" />
<div class="avatar"> <img src="{{ .Site.BaseURL }}/img/avatar-border.svg" />
<img class="avatarMask u-photo" src="{{ .Site.BaseURL }}/img/{{ .Site.Params.avatar }}" alt="avatar">
<img src="{{ .Site.BaseURL }}/img/avatar-border.svg" alt="avatar-border">
</div>
<!-- author -->
<h1 class="author title p-name">{{ .Site.Params.Author }}</h1>
<a style="display: none" rel="me" class="u-url" href="https://brandonrozek.com"></a>
</header>
<!-- description -->
<p class="p-note">
{{ .Site.Params.description | safeHTML }}
</p>
<!-- navigation -->
<nav>
<ul>
{{ range .Site.Menus.main }}
<li><a href="{{ .URL }}" aria-label="{{ .Identifier }}">{{ .Pre }}<br>{{ .Name }}</a></li>
{{ end }}
</ul>
</nav>
<p>You can also find me on:</p>
<nav>
<ul>
{{ range .Site.Menus.profile }}
<li><a href="{{ .URL }}" rel="me" aria-label="{{ .Identifier }}">{{ .Pre }}<br>{{ .Name }}</a></li>
{{ end }}
</ul>
</nav>
</div> </div>
<!-- author -->
<h1 class="author title p-name">{{ .Site.Params.Author }}</h1>
<a style="display: none" rel="me" class="u-url" href="https://brandonrozek.com"></a>
<!-- description -->
<p class="p-note">
{{ .Site.Params.description | safeHTML }}
</p>
<!-- Site Navigation -->
<nav class="nav-home">
<ul>
{{ range .Site.Menus.main }}
<li><a href="{{ .URL }}" aria-label="{{ .Identifier }}">{{ .Pre }}<br>{{ .Name }}</a></li>
{{ end }}
</ul>
</nav>
<!-- Social Navigation -->
<p>You can also find me on:</p>
<nav class="nav-home">
<ul>
{{ range .Site.Menus.profile }}
<li><a href="{{ .URL }}" rel="me" aria-label="{{ .Identifier }}">{{ .Pre }}<br>{{ .Name }}</a></li>
{{ end }}
</ul>
</nav>
</div> </div>
</main> </main>
{{- partial "footer.html" . -}} {{ partial "footer.html" . -}}
<script type="application/ld+json"> <script type="application/ld+json">
{ {
"@context": "http://schema.org", "@context": "http://schema.org",
"@type": "WebSite", "@type": "WebSite",
"url": "{{ .Permalink }}" "url": "{{ .Permalink }}"
} }
</script> </script>
</body> </body>
</html> </html>