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

View File

@ -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>

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" }} {{ 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 }}

View File

@ -1,4 +1,5 @@
<div id="copyright"> <div id="site-footer">
<div id="copyright">
<p> <p>
&copy; {{ now.Format "2006" }} <a href="{{ .Site.BaseURL }}">{{ .Site.Params.author.name }}</a>{{ .Site.Params.footerCopyright | safeHTML }} &copy; {{ 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

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