refactor: simplify homepage styling
This commit is contained in:
parent
54513568fb
commit
0450d4f2bf
0
assets/scss/_home.scss
Normal file
0
assets/scss/_home.scss
Normal file
|
|
@ -1,24 +1,80 @@
|
||||||
@import "_syntax.scss";
|
@import "_syntax.scss";
|
||||||
|
|
||||||
|
$font-inter: 'Inter', sans-serif;
|
||||||
|
$color-dark: #202020;
|
||||||
|
$color-medium-dark: #303030;
|
||||||
|
$color-grey: #5C5C5C;
|
||||||
|
$color-light-dark: #252525;
|
||||||
|
|
||||||
|
@mixin font-style-normal {
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 500;
|
||||||
|
line-height: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
%link-shared {
|
||||||
|
color: #252525;
|
||||||
|
font-family: Inter;
|
||||||
|
font-style: normal;
|
||||||
|
font-size: 40px;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: 150%;
|
||||||
|
/* 60px */
|
||||||
|
text-decoration-line: underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
%footer-shared {
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
p {
|
||||||
|
color: #5C5C5C;
|
||||||
|
font-family: Inter;
|
||||||
|
font-size: 20px;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 300;
|
||||||
|
line-height: normal;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
gap: 8px;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: #5C5C5C;
|
||||||
|
font-family: Inter;
|
||||||
|
font-size: 20px;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 300;
|
||||||
|
line-height: normal;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
gap: 8px;
|
||||||
|
justify-content: center;
|
||||||
|
text-decoration: none;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
font-family: Inter;
|
font-family: Inter;
|
||||||
line-height: 1.4;
|
line-height: 1.4;
|
||||||
background-color: #ebf4f3;
|
background-color: #ebf4f3;
|
||||||
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
#page {
|
#home-main {
|
||||||
height: 100vh;
|
|
||||||
margin: 0
|
|
||||||
}
|
|
||||||
|
|
||||||
#spotlight {
|
|
||||||
display: flex;
|
display: flex;
|
||||||
min-height: 100vh;
|
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: start;
|
align-items: start;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
|
height: 100vh;
|
||||||
|
|
||||||
max-width: 720px;
|
max-width: 720px;
|
||||||
margin: auto;
|
margin: auto;
|
||||||
|
|
||||||
font-size: 1.5rem;
|
font-size: 1.5rem;
|
||||||
|
|
||||||
@media (max-width: 768px) {
|
@media (max-width: 768px) {
|
||||||
|
|
@ -29,7 +85,6 @@ body {
|
||||||
#home-center {
|
#home-center {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
flex-grow: 1;
|
|
||||||
align-items: flex-start;
|
align-items: flex-start;
|
||||||
margin-top: 10vh;
|
margin-top: 10vh;
|
||||||
}
|
}
|
||||||
|
|
@ -99,52 +154,6 @@ body {
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
%link-shared {
|
|
||||||
color: #252525;
|
|
||||||
font-family: Inter;
|
|
||||||
font-size: 40px;
|
|
||||||
font-style: normal;
|
|
||||||
font-weight: 400;
|
|
||||||
line-height: 150%;
|
|
||||||
/* 60px */
|
|
||||||
text-decoration-line: underline;
|
|
||||||
}
|
|
||||||
|
|
||||||
%footer-shared {
|
|
||||||
width: 100%;
|
|
||||||
|
|
||||||
p {
|
|
||||||
color: #5C5C5C;
|
|
||||||
font-family: Inter;
|
|
||||||
font-size: 20px;
|
|
||||||
font-style: normal;
|
|
||||||
font-weight: 300;
|
|
||||||
line-height: normal;
|
|
||||||
|
|
||||||
display: flex;
|
|
||||||
gap: 8px;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
a {
|
|
||||||
color: #5C5C5C;
|
|
||||||
font-family: Inter;
|
|
||||||
font-size: 20px;
|
|
||||||
font-style: normal;
|
|
||||||
font-weight: 300;
|
|
||||||
line-height: normal;
|
|
||||||
|
|
||||||
display: flex;
|
|
||||||
gap: 8px;
|
|
||||||
justify-content: center;
|
|
||||||
text-decoration: none;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
text-decoration: underline;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
#home-footer {
|
#home-footer {
|
||||||
@extend %footer-shared;
|
@extend %footer-shared;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -31,30 +31,10 @@
|
||||||
{{- end }}
|
{{- end }}
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body id="page">
|
<body>
|
||||||
<div id="spotlight">
|
|
||||||
<div id="home-center">
|
|
||||||
{{ block "header" . -}}{{ end -}}
|
{{ block "header" . -}}{{ end -}}
|
||||||
{{ block "main" . -}}{{ end -}}
|
{{ block "main" . -}}{{ end -}}
|
||||||
</div>
|
|
||||||
<div id="site-footer">
|
|
||||||
{{ block "footer" . -}}{{ end }}
|
{{ block "footer" . -}}{{ end }}
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{{ $main := resources.Get "js/main.js" -}}
|
|
||||||
{{ if .Site.Params.code_copy_button | default true -}}
|
|
||||||
{{ $codeCopy := resources.Get "js/code-copy.js" -}}
|
|
||||||
{{ $script := slice $main $codeCopy | resources.Concat "js/bundle.js" | minify | fingerprint -}}
|
|
||||||
<script src="{{ $script.Permalink }}" {{ printf "integrity=%q" $script.Data.Integrity | safeHTMLAttr }} crossorigin="anonymous"></script>
|
|
||||||
{{ else -}}
|
|
||||||
{{ $script := $main | minify | fingerprint -}}
|
|
||||||
<script src="{{ $script.Permalink }}" {{ printf "integrity=%q" $script.Data.Integrity | safeHTMLAttr }} crossorigin="anonymous"></script>
|
|
||||||
{{ end }}
|
|
||||||
|
|
||||||
{{- if templates.Exists "partials/extra-foot.html" -}}
|
|
||||||
{{ partial "extra-foot.html" . }}
|
|
||||||
{{- end }}
|
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
|
|
@ -1,25 +1,13 @@
|
||||||
{{ define "head" }}
|
|
||||||
{{ if .Site.Params.bgImg -}}
|
|
||||||
<style>.bg-img {background-image: url('{{.Site.Params.bgImg}}');}</style>
|
|
||||||
{{- else if .Site.Params.images -}}
|
|
||||||
{{- range first 1 .Site.Params.images -}}
|
|
||||||
<style>.bg-img {background-image: url('{{. | absURL}}');}</style>
|
|
||||||
{{- end -}}
|
|
||||||
{{- end -}}
|
|
||||||
{{ end }}
|
|
||||||
|
|
||||||
{{ define "main" }}
|
{{ define "main" }}
|
||||||
{{- if (or .Site.Params.images .Site.Params.bgImg) }}
|
<div id="home-main">
|
||||||
<div class="bg-img"></div>
|
|
||||||
{{- end }}
|
|
||||||
<div id="home-center">
|
<div id="home-center">
|
||||||
<h1 id="home-title">{{ .Site.Title }}</h1>
|
<h1 id="home-title">{{ .Site.Title }}</h1>
|
||||||
<nav id="home-nav" class="site-nav">
|
<nav id="home-nav">
|
||||||
{{ partialCached "menu.html" . }}
|
{{ partialCached "menu.html" . }}
|
||||||
</nav>
|
</nav>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
<div id="site-footer">
|
<div id="site-footer">
|
||||||
{{ partial "footer.html" . }}
|
{{ partial "footer.html" . }}
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
{{ end }}
|
{{ end }}
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,5 @@
|
||||||
<div id="copyright">
|
<div id="site-footer">
|
||||||
|
<div id="copyright">
|
||||||
<p>
|
<p>
|
||||||
© {{ now.Format "2006" }} <a href="{{ .Site.BaseURL }}">{{ .Site.Params.author.name }}</a>{{ .Site.Params.footerCopyright | safeHTML }}
|
© {{ now.Format "2006" }} <a href="{{ .Site.BaseURL }}">{{ .Site.Params.author.name }}</a>{{ .Site.Params.footerCopyright | safeHTML }}
|
||||||
</p>
|
</p>
|
||||||
|
|
@ -10,4 +11,5 @@
|
||||||
{{ end}}
|
{{ end}}
|
||||||
</nav>
|
</nav>
|
||||||
{{ end }}
|
{{ end }}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
File diff suppressed because one or more lines are too long
|
|
@ -1 +1 @@
|
||||||
{"Target":"css/style.min.13b66600e3edbc9d2db3b022baef0d2e945f2475557c2e39ba61bd09bec0863c.css","MediaType":"text/css","Data":{"Integrity":"sha256-E7ZmAOPtvJ0ts7Aiuu8NLpRfJHVVfC45umG9Cb7Ahjw="}}
|
{"Target":"css/style.min.682f60937cda65aa30e003286b93e0c1f9d4c3ad1c90c7c69c3a762af1b19465.css","MediaType":"text/css","Data":{"Integrity":"sha256-aC9gk3zaZaow4AMoa5PgwfnUw60ckMfGnDp2KvGxlGU="}}
|
||||||
Loading…
Reference in New Issue
Block a user