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