brozek/website-theme
1
0
Fork 0
mirror of https://github.com/Brandon-Rozek/website-theme.git synced 2024-11-09 10:50:34 -05: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

79
assets/css/style.css
View file

@ -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 */
main {
@ -123,22 +104,11 @@ mark {
font-weight: bold;
}
/*
** NAVIGATION
*/
/* Top page */
#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 {
.nav-home ul {
display: flex;
justify-content: space-evenly;
/* max-width: 300px; */
@ -148,10 +118,12 @@ nav ul {
flex-wrap: wrap;
}
nav li {
.nav-home li {
margin: 0 10px;
}
/* END NAVIGATION */
/* Contents List */
#searchBox {
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; }

22
layouts/index.html
View file

@ -2,34 +2,31 @@
<html>
{{- partial "head.html" . -}}
<body>
<main>
<div id="profileContainer">
<div id="profile" class="h-card">
<header class="header-home">
<main class="main-home">
<div class="h-card">
<!-- avator -->
<div class="avatar">
<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">
<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" />
</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>
<!-- 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>
<nav class="nav-home">
<ul>
{{ range .Site.Menus.profile }}
<li><a href="{{ .URL }}" rel="me" aria-label="{{ .Identifier }}">{{ .Pre }}<br>{{ .Name }}</a></li>
@ -37,9 +34,8 @@
</ul>
</nav>
</div>
</div>
</main>
{{- partial "footer.html" . -}}
{{ partial "footer.html" . -}}
<script type="application/ld+json">
{
"@context": "http://schema.org",