refactor: simplify homepage styling

This commit is contained in:
log101 2023-12-08 10:24:32 +00:00
parent 54513568fb
commit 0450d4f2bf
7 changed files with 90 additions and 111 deletions

0
assets/scss/_home.scss Normal file
View File

View File

@ -1,24 +1,80 @@
@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 {
font-family: Inter;
line-height: 1.4;
background-color: #ebf4f3;
margin: 0;
}
#page {
height: 100vh;
margin: 0
}
#spotlight {
#home-main {
display: flex;
min-height: 100vh;
flex-direction: column;
align-items: start;
justify-content: space-between;
height: 100vh;
max-width: 720px;
margin: auto;
font-size: 1.5rem;
@media (max-width: 768px) {
@ -29,7 +85,6 @@ body {
#home-center {
display: flex;
flex-direction: column;
flex-grow: 1;
align-items: flex-start;
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 {
@extend %footer-shared;
}

View File

@ -31,30 +31,10 @@
{{- end }}
</head>
<body id="page">
<div id="spotlight">
<div id="home-center">
<body>
{{ block "header" . -}}{{ end -}}
{{ block "main" . -}}{{ end -}}
</div>
<div id="site-footer">
{{ 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>
</html>

View File

@ -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" }}
{{- if (or .Site.Params.images .Site.Params.bgImg) }}
<div class="bg-img"></div>
{{- end }}
<div id="home-main">
<div id="home-center">
<h1 id="home-title">{{ .Site.Title }}</h1>
<nav id="home-nav" class="site-nav">
<nav id="home-nav">
{{ partialCached "menu.html" . }}
</nav>
</div>
</div>
<div id="site-footer">
{{ partial "footer.html" . }}
</div>
</div>
{{ end }}

View File

@ -1,3 +1,4 @@
<div id="site-footer">
<div id="copyright">
<p>
&copy; {{ now.Format "2006" }} <a href="{{ .Site.BaseURL }}">{{ .Site.Params.author.name }}</a>{{ .Site.Params.footerCopyright | safeHTML }}
@ -11,3 +12,4 @@
</nav>
{{ end }}
</div>
</div>

File diff suppressed because one or more lines are too long

View File

@ -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="}}