Skip to content

Commit

Permalink
refactor(layout): align to the left
Browse files Browse the repository at this point in the history
  • Loading branch information
@chuhlomin
chuhlomin committed Nov 12, 2023
1 parent 01a65cf commit 09cadbb
Show file tree
Hide file tree
Showing 8 changed files with 94 additions and 41 deletions.
2 changes: 2 additions & 0 deletions content/index.gohtml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,8 @@
<div class="logo"><div class="user-picture-image"></div></div>
<div class="blog-title">
<h1>Konstantin Chukhlomin</h1>
<a href="{{ link "/blog/index.html" .File.Language }}">{{ i18n "blog" .File.Language }}</a>
<a href="/photos">{{ i18n "photos" .File.Language }}</a>
<div class="extra">
<a class="lang lang-ru" href="/{{ link "" "ru" }}">RU</a>
</div>
Expand Down
2 changes: 2 additions & 0 deletions content/index_ru.gohtml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,8 @@
<div class="logo"><div class="user-picture-image"></div></div>
<div class="blog-title">
<h1>Константин Чухломин</h1>
<a href="{{ link "/blog/index.html" .File.Language }}">{{ i18n "blog" .File.Language }}</a>
<a href="/photos">{{ i18n "photos" .File.Language }}</a>
<div class="extra">
<a class="lang lang-en" href="/{{ link "" "en" }}">EN</a>
</div>
Expand Down
65 changes: 61 additions & 4 deletions content/photos.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -74,6 +74,12 @@ h1 {
color: var(--color-header);
}

.blog-title {
font-size: 18px;
font-weight: bold;
flex-grow: 10;
}

.blog-title h1 {
font-size: 18px;
line-height: 26px;
Expand All @@ -89,17 +95,64 @@ a {
transition-property: color, border;
transition-duration: 0.33s;
transition-timing-function: ease-out;
text-decoration: none;
text-decoration: underline;
text-underline-offset: 0.3em;
text-decoration-thickness: 0.05em;
color: var(--color-link);
border-bottom: 1px solid var(--color-link-underscore);
}
a:visited {
color: var(--color-link-visited);
border-bottom: 1px solid var(--color-link-visited-underscore);
}
a:hover {
color: var(--color-link-hover);
border-color: var(--color-link-hover-underscore);
}

.flag {
position: relative;
width: 100%;
padding: 0;
}

.header-content {
display: flex;
align-items: center;
}

.header-content h1,
.header-content #name {
margin: 0;
font-weight: bold;
font-size: inherit;
line-height: inherit;
}

.blog-title {
display: flex;
gap: 4pt 14pt;
flex-wrap: wrap;
}

.header-content h1 {
display: inline;
}

.user-picture-image {
float: right;
width: 50px;
height: 50px;
border-radius: 50%;
margin-right: 0.66rem;
background-image: url('./apple-touch-icon.png');
background-size: cover;
}

a .user-picture-image {
box-shadow: inset 0 0 0 1px var(--color-link-underscore);
transition: .2s;
}

a:hover .user-picture-image {
box-shadow: inset 0 0 0 1px var(--color-link-hover-underscore);
}

.photos {
Expand Down Expand Up @@ -310,6 +363,10 @@ a:hover {
border-color: var(--color-link-hover-underscore-dark);
}

.user-picture-image {
background-image: url('./img/memoji_v3_dark.png');
}

.photos .photo {
outline: 4px solid var(--color-background-higher-dark);
}
Expand Down
51 changes: 19 additions & 32 deletions content/styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -65,7 +65,7 @@ body {
line-height: 26px;
background: var(--color-background);
color: var(--color-text);
padding-bottom: 20px;
padding: 20px;
}

h1 {
Expand All @@ -89,17 +89,16 @@ a {
transition-property: color, border;
transition-duration: 0.33s;
transition-timing-function: ease-out;
text-decoration: none;
text-decoration: underline;
text-underline-offset: 0.3em;
text-decoration-thickness: 0.05em;
color: var(--color-link);
border-bottom: 1px solid var(--color-link-underscore);
}
a:visited {
color: var(--color-link-visited);
border-bottom: 1px solid var(--color-link-visited-underscore);
}
a:hover {
color: var(--color-link-hover);
border-color: var(--color-link-hover-underscore);
}

a.hasArrow,
Expand All @@ -108,16 +107,9 @@ a.hasArrow:hover {
border: none;
}
a.hasArrow span {
transition-property: border;
transition-property: color;
transition-duration: 0.33s;
transition-timing-function: ease-out;
border-bottom: 1px solid var(--color-link-underscore);
}
a.hasArrow:visited span {
border-bottom: 1px solid var(--color-link-visited-underscore);
}
a.hasArrow:hover span {
border-color: var(--color-link-hover-underscore);
}

a.github,
Expand Down Expand Up @@ -220,23 +212,13 @@ article p {
.flag {
position: relative;
width: 100%;
padding: 35px 0 0;
}

.header-content {
display: grid;
grid-template-columns: 1fr min(60ch, calc(100% - 40px)) 1fr;
display: flex;
align-items: center;
}

.header-content .logo {
grid-column: 1;
}

.header-content .blog-title {
grid-column: 2;
}

.header-content h1,
.header-content #name {
margin: 0;
Expand Down Expand Up @@ -279,6 +261,7 @@ kbd.capslock:before {
.extra {
display: flex;
float: right;
gap: 0 7pt;
}

.user-picture-image {
Expand All @@ -302,7 +285,6 @@ a:hover .user-picture-image {

.languages {
float: right;
margin-right: -0.66rem;
}

.lang {
Expand All @@ -314,7 +296,7 @@ a:hover .user-picture-image {
border-radius: 6px;
text-transform: uppercase;
font-size: 75%;
border: none;
text-decoration: none;
color: white;
transition: none;
}
Expand All @@ -324,6 +306,10 @@ a:hover .user-picture-image {
}

.blog-title {
display: flex;
gap: 4pt 14pt;
flex-wrap: wrap;

font-size: 18px;
font-weight: bold;
flex-grow: 10;
Expand All @@ -335,12 +321,12 @@ a:hover .user-picture-image {

.wrapper {
display: grid;
grid-template-columns: 1fr min(60ch, calc(100% - 40px)) 1fr;
grid-template-columns: min(60ch, calc(100% - 40px)) 1fr;
grid-column-gap: 20px;
}

.wrapper > * {
grid-column: 2;
grid-column: 1;
}

.content {
Expand Down Expand Up @@ -453,7 +439,7 @@ iframe {
/* .tag class used to style tags in posts */
/* :not(.token) is there to avoid styling "tags" in code blocks added by prism.js */
.tag:not(.token) {
border: none;
text-decoration: none;
background-color: var(--color-background-higher);
border-radius: 100px;
padding: 0.2rem 0.66rem;
Expand All @@ -479,7 +465,7 @@ iframe {
position: relative;
display: inline-block;
padding: 0.6rem 1rem;
margin: 0 -1rem 0 -1rem;
margin: 0 -1rem 0 3rem;
background: var(--color-background-higher);
border-radius: 16px;
}
Expand All @@ -504,10 +490,11 @@ iframe {
.project {
display: block;
border: 1px solid var(--color-link-underscore);
text-decoration: none;
border-radius: var(--border-radius);
background: var(--color-background-higher);
overflow: hidden;
transition: .2s;
transition: border .2s ease-in-out;
}

.project:visited {
Expand Down Expand Up @@ -628,7 +615,7 @@ iframe {

.postCard .image a {
display: inline-block;
border: none;
text-decoration: none;
border-radius: 4px;
overflow: hidden;
box-shadow: inset 0 0 0 1px var(--postcard-border);
Expand Down
1 change: 1 addition & 0 deletions i18n/en.toml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,3 +8,4 @@ search_no_results = "No results found"
next = "Next post"
previous = "Previous post"
related = "Related"
photos = "Photos"
1 change: 1 addition & 0 deletions i18n/ru.toml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,3 +8,4 @@ search_no_results = "Ничего не найдено"
next = "Следующий пост"
previous = "Предыдущий пост"
related = "Ещё по теме"
photos = "Фото"
8 changes: 5 additions & 3 deletions templates/header.gohtml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,19 +9,19 @@
{{ end }}
</div>
<div class="blog-title">
<a class="name" href="/{{ link "" .File.Language }}">{{ i18n "name" .File.Language }}</a>&nbsp;<span class="sep">/</span>
<a class="name" href="/{{ link "" .File.Language }}">{{ i18n "name" .File.Language }}</a>
{{ if eq .File.ID "blog/index.gohtml" }}
<span>{{ i18n "blog" .File.Language }}</span>
{{ else }}
<a href="{{ link "/blog/index.html" .File.Language }}">{{ i18n "blog" .File.Language }}</a>
{{ end }}

<a href="/photos">{{ i18n "photos" .File.Language }}</a>

<div class="extra">
{{/* if eq .File.ID "blog/search.gohtml" }}<span class="search-icon disabled"></span>
{{ else }}<a href="{{ link "/blog/search.html" .File.Language }}" class="search-icon"></a>{{ end */}}

<a href="{{ link "/blog/feed.atom" .File.Language }}" class="feed-icon"></a>

{{ $langs := alternates . }}
{{ $length := len $langs }}
{{ if gt $length 1 }}
Expand All @@ -31,6 +31,8 @@
{{ end }}
{{ end }}
{{ end }}

<a href="{{ link "/blog/feed.atom" .File.Language }}" class="feed-icon"></a>
</div>
</div>
</div>
Expand Down
5 changes: 3 additions & 2 deletions templates/photos.gohtml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,8 +14,9 @@
<a href="/{{ link "" "en" }}"><div class="user-picture-image"></div></a>
</div>
<div class="blog-title">
<a class="name" href="/{{ link "" "en" }}">{{ i18n "name" "en" }}</a>&nbsp;<span class="sep">/</span>
<h1>Photos</h1>
<a class="name" href="/{{ link "" "en" }}">{{ i18n "name" "en" }}</a>
<a href="{{ link "/blog/index.html" "en" }}">{{ i18n "blog" "en" }}</a>
<span>Photos</span>
</div>
</div>
</div>
Expand Down

0 comments on commit 09cadbb

Please sign in to comment.