brozek/website-theme
1
0
Fork 0
mirror of https://github.com/Brandon-Rozek/website-theme.git synced 2024-09-19 14:25:12 -04:00
Code Issues Projects Releases Packages Wiki Activity

Cleaned up homepage HTML

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

81
assets/css/style.css
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; }

26
layouts/index.html
View file

@ -1,35 +1,32 @@
<!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">
<header class="header-home">
<!-- avator --> <!-- avator -->
<div class="avatar"> <div class="avatar">
<img class="avatarMask u-photo" src="{{ .Site.BaseURL }}/img/{{ .Site.Params.avatar }}" alt="avatar"> <img class="avatarMask u-photo" src="{{ .Site.BaseURL }}/img/{{ .Site.Params.avatar }}" alt="Photo of {{ .Site.Params.Author }}" />
<img src="{{ .Site.BaseURL }}/img/avatar-border.svg" alt="avatar-border"> <img src="{{ .Site.BaseURL }}/img/avatar-border.svg" />
</div> </div>
<!-- author --> <!-- author -->
<h1 class="author title p-name">{{ .Site.Params.Author }}</h1> <h1 class="author title p-name">{{ .Site.Params.Author }}</h1>
<a style="display: none" rel="me" class="u-url" href="https://brandonrozek.com"></a> <a style="display: none" rel="me" class="u-url" href="https://brandonrozek.com"></a>
</header>
<!-- description --> <!-- description -->
<p class="p-note"> <p class="p-note">
{{ .Site.Params.description | safeHTML }} {{ .Site.Params.description | safeHTML }}
</p> </p>
<!-- navigation --> <!-- Site Navigation -->
<nav> <nav class="nav-home">
<ul> <ul>
{{ range .Site.Menus.main }} {{ range .Site.Menus.main }}
<li><a href="{{ .URL }}" aria-label="{{ .Identifier }}">{{ .Pre }}<br>{{ .Name }}</a></li> <li><a href="{{ .URL }}" aria-label="{{ .Identifier }}">{{ .Pre }}<br>{{ .Name }}</a></li>
{{ end }} {{ end }}
</ul> </ul>
</nav> </nav>
<!-- Social Navigation -->
<p>You can also find me on:</p> <p>You can also find me on:</p>
<nav> <nav class="nav-home">
<ul> <ul>
{{ range .Site.Menus.profile }} {{ range .Site.Menus.profile }}
<li><a href="{{ .URL }}" rel="me" aria-label="{{ .Identifier }}">{{ .Pre }}<br>{{ .Name }}</a></li> <li><a href="{{ .URL }}" rel="me" aria-label="{{ .Identifier }}">{{ .Pre }}<br>{{ .Name }}</a></li>
@ -37,9 +34,8 @@
</ul> </ul>
</nav> </nav>
</div> </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",
@ -47,5 +43,5 @@
"url": "{{ .Permalink }}" "url": "{{ .Permalink }}"
} }
</script> </script>
</body> </body>
</html> </html>