Initial checkin of templ skeleton
HTML based on Jason Knight HTML template code
This commit is contained in:
34
web/components/base.templ
Normal file
34
web/components/base.templ
Normal file
@@ -0,0 +1,34 @@
|
||||
package components
|
||||
|
||||
templ Page(content templ.Component) {
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1"/>
|
||||
<meta name="description" content="A sane golang website template."/>
|
||||
<link rel="preload" as="style" href="static/css/fonts.css" media="screen,print"/>
|
||||
<link rel="preload" as="style" href="static/css/site.screen.css" media="screen"/>
|
||||
<link rel="preload" as="font" href="static/css/fonts/poppins-western.woff2" media="screen,print" crossorigin/>
|
||||
<link rel="preload" as="font" href="static/css/fonts/poppins-western-bold.woff2" media="screen,print" crossorigin/>
|
||||
<link rel="preload" as="font" href="static/css/fonts/interface-Regular.woff2" media="screen,print" crossorigin/>
|
||||
<link rel="stylesheet" href="static/css/fonts.css" media="screen,print"/>
|
||||
<link rel="stylesheet" href="static/css/site.screen.css" media="screen"/>
|
||||
<link rel="stylesheet" href="static/css/site.print.css" media="print"/>
|
||||
<link rel="apple-touch-icon" href="static/apple-touch-icon.png"/>
|
||||
<link rel="icon" href="static/favicon.ico"/>
|
||||
<link rel="icon" href="static/favicon.svg" type="image/svg+xml"/>
|
||||
<title>Awesome content</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="fauxBody">
|
||||
@Header()
|
||||
<main>
|
||||
@content
|
||||
</main>
|
||||
<a href="#top" id="backToTop"><span>Back To Top</span></a>
|
||||
@Footer()
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
}
|
||||
5
web/components/errors.templ
Normal file
5
web/components/errors.templ
Normal file
@@ -0,0 +1,5 @@
|
||||
package components
|
||||
|
||||
templ Page404() {
|
||||
<div>Page not found</div>
|
||||
}
|
||||
37
web/components/footer.templ
Normal file
37
web/components/footer.templ
Normal file
@@ -0,0 +1,37 @@
|
||||
package components
|
||||
|
||||
templ Footer() {
|
||||
<footer>
|
||||
<section>
|
||||
<h2 class="optional">Legal Disclaimer</h2>
|
||||
<p>
|
||||
© Jason M. Knight, <span>All Rights Reserved.</span>
|
||||
</p>
|
||||
</section>
|
||||
<section id="socialMedia">
|
||||
<h2 class="optional">Visit Me On Social Media</h2>
|
||||
<ul class="socialMenu">
|
||||
<li>
|
||||
<a href="#" class="icon_facebook">
|
||||
<span>Facebook</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="icon_linkedIn">
|
||||
<span>LinkedIn</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="icon_x">
|
||||
<span>The Artist Formerly Known As Twitter</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="icon_medium">
|
||||
<span>Medium</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
</footer>
|
||||
}
|
||||
29
web/components/header.templ
Normal file
29
web/components/header.templ
Normal file
@@ -0,0 +1,29 @@
|
||||
package components
|
||||
|
||||
templ Header() {
|
||||
<header id="top">
|
||||
<a href="./">
|
||||
<h1>Website template</h1>
|
||||
<p>A Golang Templ based skeleton</p>
|
||||
</a>
|
||||
<a href="#mainMenu" class="mainMenuOpen" hidden>
|
||||
<span>Open Main Menu</span>
|
||||
</a>
|
||||
<nav id="mainMenu">
|
||||
<a href="#" class="modalClose" hidden tabindex="-1">
|
||||
<span>Close Main Menu</span>
|
||||
</a>
|
||||
<div data-modalTitle="Main Menu">
|
||||
<a href="#" class="modalClose icon_close" hidden>
|
||||
<span>Close Main Menu</span>
|
||||
</a>
|
||||
<ul>
|
||||
<li><a href="./">Home</a></li>
|
||||
<li><a href="#whatIDo">What I Do</a></li>
|
||||
<li><a href="#testimonials">Testimonials</a></li>
|
||||
<li><a href="#contact">Contact</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
}
|
||||
16
web/components/index.templ
Normal file
16
web/components/index.templ
Normal file
@@ -0,0 +1,16 @@
|
||||
package components
|
||||
|
||||
templ IndexPage() {
|
||||
<section class="hero" id="semanticEasy">
|
||||
<div>
|
||||
<header>
|
||||
<h2>Semantic Accessible <span>Markup Is Easy</span></h2>
|
||||
<p>Stop Making It Hard</p>
|
||||
</header>
|
||||
<p>
|
||||
I have spent the past decade and a half helping site owners out of deep legal troubles for accessibility woes, improve workplace conditions, gain essential leadership skills, by way of promoting good practices. I can help you learn to leverage caching models, write accessibible HTML, keep your style within guidelines such as the WCAG, and aid in lawsuits involving the US ADA, UQ EQA, and a plethora of other accessibility laws from around the globe.
|
||||
</p>
|
||||
<a class="action" href="#">Learn More</a>
|
||||
</div>
|
||||
</section>
|
||||
}
|
||||
22
web/routes.go
Normal file
22
web/routes.go
Normal file
@@ -0,0 +1,22 @@
|
||||
package web
|
||||
|
||||
import (
|
||||
"net/http"
|
||||
"time"
|
||||
|
||||
"git.clustercockpit.org/moebiusband/go-http-skeleton/web/components"
|
||||
"github.com/a-h/templ"
|
||||
"github.com/benbjohnson/hashfs"
|
||||
"github.com/gorilla/sessions"
|
||||
)
|
||||
|
||||
func setupRoutes(r *http.ServeMux) error {
|
||||
r.Handle("GET /static/", hashfs.FileServer(staticSys))
|
||||
r.Handle("GET /{$}", templ.Handler(components.Page(components.IndexPage())))
|
||||
r.Handle("GET /404", templ.Handler(components.Page(components.Page404()), templ.WithStatus(http.StatusNotFound)))
|
||||
|
||||
sessionStore := sessions.NewCookieStore([]byte("datastar-session-secret"))
|
||||
sessionStore.MaxAge(int(24 * time.Hour / time.Second))
|
||||
|
||||
return nil
|
||||
}
|
||||
36
web/server.go
Normal file
36
web/server.go
Normal file
@@ -0,0 +1,36 @@
|
||||
package web
|
||||
|
||||
import (
|
||||
"context"
|
||||
"embed"
|
||||
"fmt"
|
||||
"net/http"
|
||||
|
||||
"git.clustercockpit.org/moebiusband/go-http-skeleton/internal/util"
|
||||
"github.com/benbjohnson/hashfs"
|
||||
)
|
||||
|
||||
//go:embed static/*
|
||||
var staticFS embed.FS
|
||||
|
||||
var staticSys = hashfs.NewFS(staticFS)
|
||||
|
||||
func RunBlocking(port int) util.CtxErrFunc {
|
||||
return func(ctx context.Context) error {
|
||||
r := http.NewServeMux()
|
||||
|
||||
setupRoutes(r)
|
||||
|
||||
srv := &http.Server{
|
||||
Addr: fmt.Sprintf(":%d", port),
|
||||
Handler: r,
|
||||
}
|
||||
|
||||
go func() {
|
||||
<-ctx.Done()
|
||||
srv.Shutdown(context.Background())
|
||||
}()
|
||||
|
||||
return srv.ListenAndServe()
|
||||
}
|
||||
}
|
||||
BIN
web/static/apple-touch-icon.png
Normal file
BIN
web/static/apple-touch-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
51
web/static/css/fonts.css
Normal file
51
web/static/css/fonts.css
Normal file
@@ -0,0 +1,51 @@
|
||||
@font-face {
|
||||
font-display:swap;
|
||||
font-family:"flowtext";
|
||||
font-style:normal;
|
||||
font-weight:normal;
|
||||
src:
|
||||
url("fonts/poppins-western.woff2") format("woff2"),
|
||||
url("fonts/poppins-western.woff") format("woff");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-display:swap;
|
||||
font-family:"flowtext";
|
||||
font-style:normal;
|
||||
font-weight:bold;
|
||||
src:
|
||||
url("fonts/poppins-western-bold.woff2") format("woff2"),
|
||||
url("fonts/poppins-western-bold.woff") format("woff");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-display:swap;
|
||||
font-family:interface;
|
||||
font-style:normal;
|
||||
font-weight:normal;
|
||||
src:
|
||||
url("fonts/interface-Regular.woff2") format("woff2"),
|
||||
url("fonts/interface-Regular.woff") format("woff");
|
||||
}
|
||||
|
||||
[class*="icon_"]:not(.iconAfter):before,
|
||||
[class*="icon_"].iconAfter:after {
|
||||
content:var(--iconChar);
|
||||
display:inline-block;
|
||||
vertical-align:middle;
|
||||
position:relative;
|
||||
font-family:interface;
|
||||
font-weight:normal;
|
||||
line-height:1;
|
||||
}
|
||||
|
||||
.icon_x { --iconChar:"\E61B"; }
|
||||
.icon_close { --iconChar:"\F00D"; }
|
||||
.icon_linkedIn { --iconChar:"\F08C"; }
|
||||
.icon_facebook { --iconChar:"\F09A"; }
|
||||
.icon_medium { --iconChar:"\F23A"; }
|
||||
.icon_accessibility { --iconChar:"\F368"; }
|
||||
.icon_web { --iconChar:"\F57D"; }
|
||||
.icon_efficiency { --iconChar:"\F625"; }
|
||||
.icon_workplace { --iconChar:"\F7D9"; }
|
||||
.icon_caratUp { --iconChar:"\F102"; }
|
||||
BIN
web/static/css/fonts/interface-Regular.woff
Normal file
BIN
web/static/css/fonts/interface-Regular.woff
Normal file
Binary file not shown.
BIN
web/static/css/fonts/interface-Regular.woff2
Normal file
BIN
web/static/css/fonts/interface-Regular.woff2
Normal file
Binary file not shown.
BIN
web/static/css/fonts/poppins-western-bold.woff
Normal file
BIN
web/static/css/fonts/poppins-western-bold.woff
Normal file
Binary file not shown.
BIN
web/static/css/fonts/poppins-western-bold.woff2
Normal file
BIN
web/static/css/fonts/poppins-western-bold.woff2
Normal file
Binary file not shown.
BIN
web/static/css/fonts/poppins-western.woff
Normal file
BIN
web/static/css/fonts/poppins-western.woff
Normal file
Binary file not shown.
BIN
web/static/css/fonts/poppins-western.woff2
Normal file
BIN
web/static/css/fonts/poppins-western.woff2
Normal file
Binary file not shown.
138
web/static/css/site.print.css
Normal file
138
web/static/css/site.print.css
Normal file
@@ -0,0 +1,138 @@
|
||||
.action,
|
||||
#backToTop,
|
||||
#mainMenu,
|
||||
.modal,
|
||||
.optional,
|
||||
#socialMedia {
|
||||
display:none;
|
||||
}
|
||||
|
||||
figure, blockquote {
|
||||
padding:0;
|
||||
margin:0;
|
||||
}
|
||||
|
||||
body, button, input, table, textarea, select {
|
||||
font-size:12pt;
|
||||
line-height:1.75;
|
||||
font-family:flowtext,sans-serif;
|
||||
}
|
||||
|
||||
body {
|
||||
max-width:7.5in;
|
||||
margin:0 auto;
|
||||
}
|
||||
|
||||
a {
|
||||
color:#000;
|
||||
text-decoration:none;
|
||||
}
|
||||
|
||||
header {
|
||||
margin-bottom:1rem;
|
||||
}
|
||||
|
||||
p {
|
||||
margin:0 0 1rem;
|
||||
}
|
||||
|
||||
li {
|
||||
margin-bottom:0.5rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size:24pt;
|
||||
font-weight:normal;
|
||||
margin:0 0 0.5rem;
|
||||
}
|
||||
|
||||
h1,
|
||||
.hero h2 {
|
||||
margin:0;
|
||||
line-height:1.2;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size:16pt;
|
||||
font-weight:normal;
|
||||
margin:0;
|
||||
}
|
||||
|
||||
main > section {
|
||||
padding-bottom:1.75rem;
|
||||
}
|
||||
|
||||
main > section header p {
|
||||
font-size:14pt;
|
||||
}
|
||||
|
||||
.hero header p {
|
||||
margin-top:0;
|
||||
}
|
||||
|
||||
.hasPlate,
|
||||
.cards {
|
||||
display:flex;
|
||||
flex-wrap:wrap;
|
||||
justify-content:center;
|
||||
gap:1rem 2rem;
|
||||
}
|
||||
|
||||
.hasPlate > figure {
|
||||
flex-grow:0;
|
||||
width:min(12rem, 100%);
|
||||
text-align:center;
|
||||
}
|
||||
|
||||
.hasPlate > figure img {
|
||||
width:100%;
|
||||
height:auto;
|
||||
border-radius:1rem;
|
||||
}
|
||||
|
||||
.hasPlate > div {
|
||||
width:1%;
|
||||
flex-grow:1;
|
||||
}
|
||||
|
||||
.cards > * {
|
||||
width:calc(50% - 1rem);
|
||||
break-inside:avoid;
|
||||
}
|
||||
|
||||
.cards > * > *:last-child {
|
||||
margin-bottom:0;
|
||||
padding-bottom:0;
|
||||
}
|
||||
|
||||
#whatIDo h3[class*="icon_"]:before {
|
||||
font-size:36pt;
|
||||
margin-right:0.5rem;
|
||||
}
|
||||
|
||||
#testimonials figcaption {
|
||||
font-size:14pt;
|
||||
margin-bottom:0.5rem;
|
||||
}
|
||||
|
||||
#testimonials figcaption img {
|
||||
display:inline-block;
|
||||
vertical-align:middle;
|
||||
width:3rem;
|
||||
height:3rem;
|
||||
margin-right:0.25rem;
|
||||
border-radius:50%;
|
||||
}
|
||||
|
||||
#whatIDo ul,
|
||||
#testimonials blockquote {
|
||||
font-size:10pt;
|
||||
}
|
||||
|
||||
.note {
|
||||
text-align:center;
|
||||
}
|
||||
|
||||
#fauxBody > footer {
|
||||
text-align:center;
|
||||
}
|
||||
763
web/static/css/site.screen.css
Normal file
763
web/static/css/site.screen.css
Normal file
@@ -0,0 +1,763 @@
|
||||
:root {
|
||||
|
||||
--flowColor:#024;
|
||||
--flowBg:#FFF;
|
||||
--flowAltBg:#CDF;
|
||||
--flowAltBorder:0.0625rem solid #04F;
|
||||
--flowAnchorNormal:#04F;
|
||||
--flowAnchorVisited:#000;
|
||||
--flowAnchorHover:#069;
|
||||
--flowMarker:#080;
|
||||
|
||||
--flyoutColor:#36C;
|
||||
--flyoutBgColor:#ACE;
|
||||
|
||||
--chromeColor:#000;
|
||||
--chromeBg:var(--flowBg);
|
||||
--chromeAnchorNormal:var(--chromeColor);
|
||||
--chromeAnchorVisited:var(--chromeColor);
|
||||
--chromeAnchorHover:#369;
|
||||
|
||||
--mainHeadingColor:#356;
|
||||
|
||||
--modalOuterBg:#ACEC;
|
||||
--modalOuterShadow:inset 0 0 16em #68A;
|
||||
--modalInnerBg:#DEF;
|
||||
--modalInputBg:#FFF;
|
||||
--modalInputBorder:0.125rem solid #048;
|
||||
--modalHeadingBg:#ACE;
|
||||
--modalButtonColor:#FFF;
|
||||
--modalButtonBg:#048;
|
||||
--modalShadow:0.5rem 0.5rem 2rem #0247;
|
||||
|
||||
--actionColor:#039;
|
||||
--actionBg:#FFF;
|
||||
--actionBorder:0.125rem solid var(--actionColor);
|
||||
--actionHoverColor:#FFF;
|
||||
--actionHoverBg:#05A;
|
||||
|
||||
--heroColor:#FFF;
|
||||
--heroBgColor:#05A;
|
||||
--heroBg:linear-gradient(20deg, #05A, #012);
|
||||
--heroTextShadow:
|
||||
0 0 2rem #000,
|
||||
0.25rem 0.25rem 1rem #000;
|
||||
|
||||
--heroActionColor:#FFF;
|
||||
--heroActionBg:transparent;
|
||||
--heroActionHoverColor:#036;
|
||||
--heroActionHoverBg:#8CF;
|
||||
|
||||
--borderColor:#048;
|
||||
--standardBorder:0.125rem solid var(--borderColor);
|
||||
|
||||
|
||||
--horzPad:clamp(0.5rem, 4vw, 2rem);
|
||||
--vertPad:clamp(1rem, min(8vw, 10vh), 4rem);
|
||||
--standardPad:var(--vertPad) var(--horzPad);
|
||||
--chromePad:1rem var(--horzPad);
|
||||
--heroPad:clamp(1rem, 3vh, 6rem) var(--horzPad);
|
||||
|
||||
}
|
||||
|
||||
html,body,div,p,h1,h2,h3,h4,h5,h6,figure,
|
||||
ul,ol,li,dl,dt,dd,form,fieldset,caption,legend,
|
||||
table,tr,td,th,address,blockquote,img {
|
||||
margin:0;
|
||||
padding:0;
|
||||
}
|
||||
|
||||
img, fieldset {
|
||||
border:none;
|
||||
}
|
||||
|
||||
blockquote, q {
|
||||
quotes:none;
|
||||
}
|
||||
|
||||
body *, *:after, *:before {
|
||||
box-sizing:border-box;
|
||||
}
|
||||
|
||||
legend {
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
display:block;
|
||||
}
|
||||
|
||||
button, label, summary {
|
||||
cursor:pointer;
|
||||
}
|
||||
|
||||
html, body {
|
||||
height:100%;
|
||||
}
|
||||
|
||||
body, button, input, table, textarea, select {
|
||||
font-size:1rem;
|
||||
line-height:1.75;
|
||||
font-family:flowtext,sans-serif;
|
||||
color:var(--flowColor);
|
||||
background:var(--flowBg);
|
||||
}
|
||||
|
||||
a {
|
||||
color:var(--flowAnchorNormal);
|
||||
transition:color 0.3s, background 0.3s, scale 0.3s;
|
||||
}
|
||||
|
||||
a:visited {
|
||||
color:var(--flowAnchorVisited);
|
||||
}
|
||||
|
||||
a:active,
|
||||
a:focus,
|
||||
a:hover {
|
||||
color:var(--flowAnchorHover);
|
||||
}
|
||||
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
padding:0.25rem 0.5rem;
|
||||
}
|
||||
|
||||
#fauxBody,
|
||||
.modal,
|
||||
.modal > .modalClose {
|
||||
position:fixed;
|
||||
top:0;
|
||||
left:0;
|
||||
width:100%;
|
||||
height:100%;
|
||||
overflow:auto;
|
||||
scroll-behavior:smooth;
|
||||
}
|
||||
|
||||
.modal,
|
||||
#top,
|
||||
.cards,
|
||||
.hasPlate,
|
||||
#fauxBody > footer {
|
||||
position:relative;
|
||||
display:flex;
|
||||
flex-wrap:wrap;
|
||||
align-items:center;
|
||||
justify-content:center;
|
||||
}
|
||||
|
||||
.modalClose span,
|
||||
.mainMenuOpen span,
|
||||
#fauxBody > footer h2.optional {
|
||||
position:fixed;
|
||||
right:999em;
|
||||
top:0;
|
||||
opacity:0;
|
||||
}
|
||||
|
||||
.modal {
|
||||
left:-200vw;
|
||||
background:var(--modalOuterBg);
|
||||
box-shadow:var(--modalOuterShadow);
|
||||
opacity:0;
|
||||
transition:left 0s 0.5s, opacity 0.5s;
|
||||
}
|
||||
|
||||
.modal:target {
|
||||
left:0;
|
||||
opacity:1;
|
||||
transition:opacity 0.5s;
|
||||
}
|
||||
|
||||
.modal > div {
|
||||
/*
|
||||
depth sort over outer .modalClose
|
||||
*/
|
||||
position:relative;
|
||||
/*
|
||||
if you don't auto margin, scrolling at small screen heights is messed.
|
||||
*/
|
||||
margin:auto 1rem;
|
||||
overflow:hidden;
|
||||
background:var(--modalInnerBg);
|
||||
color:var(--flowColor);
|
||||
box-shadow:var(--modalShadow);
|
||||
border:var(--standardBorder);
|
||||
border-radius:1rem;
|
||||
scale:0;
|
||||
transition:scale 0.5s;
|
||||
}
|
||||
|
||||
.modal:target > div {
|
||||
scale:1;
|
||||
}
|
||||
|
||||
.modal .modalClose,
|
||||
#mainMenu .modalClose {
|
||||
position:absolute;
|
||||
text-decoration:none;
|
||||
}
|
||||
|
||||
.modal:target .modalClose {
|
||||
display:block;
|
||||
}
|
||||
|
||||
.modal > * > .modalClose,
|
||||
#mainMenu > * > .modalClose {
|
||||
top:0.5rem;
|
||||
right:1rem;
|
||||
font-size:2rem;
|
||||
line-height:1;
|
||||
color:var(--flowColor);
|
||||
}
|
||||
|
||||
.modal > * > .modalClose:focus,
|
||||
.modal > * > .modalClose:hover {
|
||||
scale:1.2;
|
||||
}
|
||||
|
||||
.modal h2 {
|
||||
font-size:1.25rem;
|
||||
padding:0.5rem 4rem 0.5rem 1rem;
|
||||
margin-bottom:1rem;
|
||||
background:var(--modalHeadingBg);
|
||||
border-bottom:var(--standardBorder);
|
||||
}
|
||||
|
||||
.modal h2 ~ * {
|
||||
margin:1rem;
|
||||
}
|
||||
|
||||
#top,
|
||||
#fauxBody > footer {
|
||||
max-width:72rem;
|
||||
margin:0 auto;
|
||||
padding:var(--chromePad);
|
||||
background:var(--chromeBgColor);
|
||||
color:var(--chromeColor);
|
||||
}
|
||||
|
||||
#fauxBody > footer {
|
||||
z-index:800;
|
||||
}
|
||||
|
||||
#fauxBody > footer p span {
|
||||
display:inline-block;
|
||||
}
|
||||
|
||||
#top {
|
||||
justify-content:space-between;
|
||||
gap:2rem;
|
||||
z-index:900;
|
||||
}
|
||||
|
||||
#top a,
|
||||
#fauxBody > footer a {
|
||||
color:var(--chromeAnchorNormal);
|
||||
text-decoration:none;
|
||||
}
|
||||
|
||||
#top > a:first-child {
|
||||
display:block;
|
||||
overflow:hidden;
|
||||
flex-grow:0;
|
||||
font-size:0.875rem;
|
||||
line-height:1.1;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size:2rem;
|
||||
text-transform:uppercase;
|
||||
transform-origin:center left;
|
||||
letter-spacing:0.125rem;
|
||||
scale:1.15 1;
|
||||
color:var(--mainHeadingColor);
|
||||
}
|
||||
|
||||
#mainMenu {
|
||||
flex-grow:1;
|
||||
text-align:right;
|
||||
}
|
||||
|
||||
#mainMenu li {
|
||||
list-style:none;
|
||||
display:inline;
|
||||
margin-right:1.5rem;
|
||||
}
|
||||
|
||||
#mainMenu li a {
|
||||
display:inline-block;
|
||||
font-size:1.125rem;
|
||||
}
|
||||
|
||||
#mainMenu li a:focus,
|
||||
#mainMenu li a:hover,
|
||||
.socialMenu a:focus,
|
||||
.socialMenu a:hover,
|
||||
.mainMenuOpen:focus,
|
||||
.mainMenuOpen:hover {
|
||||
color:var(--chromeAnchorHover);
|
||||
scale:1.2;
|
||||
}
|
||||
|
||||
#fauxBody > footer > section:first-child {
|
||||
width:1%;
|
||||
flex-grow:1;
|
||||
}
|
||||
|
||||
.socialMenu {
|
||||
list-style:none;
|
||||
display:flex;
|
||||
gap:1.5rem;
|
||||
}
|
||||
|
||||
.socialMenu a {
|
||||
position:relative;
|
||||
display:block;
|
||||
}
|
||||
|
||||
.socialMenu a:before {
|
||||
font-size:2.5rem;
|
||||
transition:color 0.3s, scale 0.3s;
|
||||
}
|
||||
|
||||
.socialMenu a:focus:before,
|
||||
.socialMenu a:hover:before {
|
||||
scale:1.375;
|
||||
}
|
||||
|
||||
.socialMenu a span,
|
||||
#backToTop span {
|
||||
position:absolute;
|
||||
font-size:0.875rem;
|
||||
color:var(--flyoutColor);
|
||||
background:var(--flyoutBgColor);
|
||||
border:0.125rem solid var(--flyoutColor);
|
||||
}
|
||||
|
||||
.socialMenu a span {
|
||||
bottom:3.5rem;
|
||||
right:999em;
|
||||
padding:0.25rem 0.75rem;
|
||||
white-space:nowrap;
|
||||
border-radius:1rem;
|
||||
transition:right 0s 0.3s, opacity 0.3s;
|
||||
opacity:0;
|
||||
}
|
||||
|
||||
.socialMenu a span:after {
|
||||
content:"";
|
||||
position:absolute;
|
||||
bottom:-0.5625rem;
|
||||
right:1rem;
|
||||
width:1rem;
|
||||
height:1rem;
|
||||
background:var(--flyoutBgColor);
|
||||
border:solid var(--flyoutColor);
|
||||
border-width:0 0.125rem 0.125rem 0;
|
||||
rotate:45deg;
|
||||
}
|
||||
|
||||
.socialMenu a:focus span,
|
||||
.socialMenu a:hover span {
|
||||
right:-0.5rem;
|
||||
opacity:1;
|
||||
transition:opacity 0.3s;
|
||||
}
|
||||
|
||||
main > section:not(.hero),
|
||||
.hero > div,
|
||||
.hasCards > header,
|
||||
.hasPlate {
|
||||
max-width:56rem;
|
||||
margin:0 auto;
|
||||
}
|
||||
|
||||
main > section:not(.hero),
|
||||
.hero > div,
|
||||
.hasPlate {
|
||||
padding:var(--standardPad);
|
||||
}
|
||||
|
||||
.hasPlate {
|
||||
padding-top:0;
|
||||
}
|
||||
|
||||
main > section:not(.hero) {
|
||||
border-bottom:var(--flowAltBorder);
|
||||
}
|
||||
|
||||
main > section > header:not(.hasPlate) {
|
||||
text-align:center;
|
||||
}
|
||||
|
||||
main > section:not(.hero):nth-child(odd) {
|
||||
background:var(--flowAltBg);
|
||||
}
|
||||
|
||||
main h2 {
|
||||
font-size:clamp(1.75rem, 5vw, 2.5rem);
|
||||
font-weight:normal;
|
||||
}
|
||||
|
||||
main h2 span {
|
||||
display:inline-block; /* soft keep-together */
|
||||
}
|
||||
|
||||
main h3 {
|
||||
font-size:clamp(1.25rem, 3vw, 2rem);
|
||||
font-weight:normal;
|
||||
}
|
||||
|
||||
main p {
|
||||
max-width:40em;
|
||||
margin:1em 0;
|
||||
}
|
||||
|
||||
main section > header p {
|
||||
font-size:1.125rem;
|
||||
}
|
||||
|
||||
main > section > header:not(.hasPlate) p {
|
||||
margin:1em auto;
|
||||
}
|
||||
|
||||
main > section.hasCards {
|
||||
max-width:100%;
|
||||
}
|
||||
|
||||
.cards,
|
||||
.hasPlate {
|
||||
gap:2rem;
|
||||
}
|
||||
|
||||
.cards {
|
||||
margin:2rem auto 0;
|
||||
align-items:stretch;
|
||||
gap:2rem 4rem;
|
||||
}
|
||||
|
||||
#whatIDo .cards {
|
||||
max-width:68em;
|
||||
}
|
||||
|
||||
.cards > * {
|
||||
flex-grow:1;
|
||||
width:1%;
|
||||
min-width:min(20rem, 100%);
|
||||
max-width:24rem;
|
||||
}
|
||||
|
||||
#whatIDo .cards > * {
|
||||
min-width:min(24rem, 100%);
|
||||
max-width:40rem;
|
||||
}
|
||||
|
||||
.cards h3[class*="icon_"]:before {
|
||||
font-size:4rem;
|
||||
margin-right:1rem;
|
||||
}
|
||||
|
||||
.cards li {
|
||||
list-style:none;
|
||||
position:Relative;
|
||||
margin-bottom:0.5rem;
|
||||
padding-left:2rem;
|
||||
}
|
||||
|
||||
.cards li:before {
|
||||
content:"\F058";
|
||||
position:absolute;
|
||||
top:0;
|
||||
left:0.5rem;
|
||||
color:var(--flowMarker);
|
||||
font-family:interface;
|
||||
}
|
||||
|
||||
.hasPlate > div {
|
||||
flex-grow:1;
|
||||
width:1%;
|
||||
min-width:min(20rem, 100%);
|
||||
}
|
||||
|
||||
.hasPlate.trailing > figure,
|
||||
.hasPlate.trailing > picture {
|
||||
position:relative;
|
||||
flex-grow:0;
|
||||
width:30%;
|
||||
max-width:16rem;
|
||||
text-align:center;
|
||||
}
|
||||
|
||||
figure img,
|
||||
figure picture {
|
||||
width:100%;
|
||||
height:auto;
|
||||
border-radius:1rem;
|
||||
}
|
||||
|
||||
.note {
|
||||
text-align:center;
|
||||
}
|
||||
|
||||
.action {
|
||||
display:inline-block;
|
||||
position:relative;
|
||||
overflow:hidden;
|
||||
margin-top:1rem;
|
||||
z-index:1;
|
||||
text-decoration:none;
|
||||
padding:0.75rem 1.5rem;
|
||||
color:var(--actionColor);
|
||||
background:var(--actionBg);
|
||||
border:var(--actionBorder);
|
||||
border-radius:0.5em;
|
||||
transition:color 0.3s, text-shadow 0.3s;
|
||||
}
|
||||
|
||||
.action:focus,
|
||||
.action:hover {
|
||||
color:var(--actionHoverColor);
|
||||
text-shadow:none;
|
||||
}
|
||||
|
||||
.action:after {
|
||||
content:"";
|
||||
position:absolute;
|
||||
z-index:-1;
|
||||
top:50%;
|
||||
left:50%;
|
||||
width:100%;
|
||||
height:100%;
|
||||
border-radius:0.5rem;
|
||||
translate:-50% -50%;
|
||||
scale:0;
|
||||
opacity:0;
|
||||
background:var(--actionHoverBg);
|
||||
transition:scale 0.3s, opacity 0.3s;
|
||||
}
|
||||
|
||||
.action:focus:after,
|
||||
.action:hover:after {
|
||||
scale:1.1;
|
||||
opacity:1;
|
||||
}
|
||||
|
||||
.hero {
|
||||
padding:var(--heroPad);
|
||||
background-color:var(--heroBgColor);
|
||||
color:var(--heroColor);
|
||||
text-shadow:var(--heroTextShadow);
|
||||
}
|
||||
|
||||
.hero .action {
|
||||
color:var(--heroActionColor);
|
||||
background:var(--heroActionBg);
|
||||
border-color:var(--heroActionColor);
|
||||
}
|
||||
|
||||
.hero .action:focus,
|
||||
.hero .action:hover {
|
||||
color:var(--heroActionHoverColor);
|
||||
}
|
||||
|
||||
.hero .action:after {
|
||||
background:var(--heroActionHoverBg);
|
||||
}
|
||||
|
||||
.hero header {
|
||||
margin-bottom:1.5rem;
|
||||
line-height:1.2;
|
||||
}
|
||||
|
||||
.hero header p {
|
||||
margin:0.25rem 0 1.5rem;
|
||||
font-size:1.5rem;
|
||||
}
|
||||
|
||||
#semanticEasy {
|
||||
background-image:url(images/heroBg.avif), var(--heroBg);
|
||||
background-position:center;
|
||||
background-size:cover;
|
||||
}
|
||||
|
||||
section:not(.hero) h2,
|
||||
section:not(.hero) h3 {
|
||||
color:var(--mainHeadingColor);
|
||||
}
|
||||
|
||||
#testimonials > header {
|
||||
margin-bottom:var(--vertPad);
|
||||
}
|
||||
|
||||
#testimonials > .cards {
|
||||
max-width:76rem;
|
||||
margin:0 auto;
|
||||
}
|
||||
|
||||
#testimonials figcaption {
|
||||
font-size:1.25rem;
|
||||
font-style:italic;
|
||||
}
|
||||
|
||||
#testimonials figcaption img {
|
||||
display:inline-block;
|
||||
vertical-align:middle;
|
||||
width:4rem;
|
||||
height:4rem;
|
||||
margin-right:0.5rem;
|
||||
border-radius:50%;
|
||||
}
|
||||
|
||||
#backToTop {
|
||||
display:block;
|
||||
position:sticky;
|
||||
z-index:600;
|
||||
bottom:0;
|
||||
width:2.5rem;
|
||||
height:3.5rem;
|
||||
padding-bottom:1rem;
|
||||
margin:-3.5rem 1rem 0 auto;
|
||||
opacity:0.6;
|
||||
transition:opacity 0.3s;
|
||||
}
|
||||
|
||||
#backToTop.hide {
|
||||
opacity:0;
|
||||
}
|
||||
|
||||
#backToTop:not(.hide):focus,
|
||||
#backToTop:not(.hide):hover {
|
||||
opacity:1;
|
||||
}
|
||||
|
||||
#backToTop span {
|
||||
right:1.5rem;
|
||||
top:0.25rem;
|
||||
padding:0.125rem 2rem 0.125rem 1rem;
|
||||
white-space:nowrap;
|
||||
border-radius:1.5rem 0 0 1.5rem;
|
||||
transform-origin:center right;
|
||||
transition:scale 0.3s;
|
||||
scale:0 1;
|
||||
}
|
||||
|
||||
#backToTop:focus span,
|
||||
#backToTop:hover span {
|
||||
scale:1;
|
||||
}
|
||||
|
||||
#backToTop:after {
|
||||
content:"\F102";
|
||||
position:relative;
|
||||
display:block;
|
||||
width:2.5rem;
|
||||
height:2.5rem;
|
||||
text-align:center;
|
||||
font-family:interface;
|
||||
font-size:1.5rem;
|
||||
line-height:2rem;
|
||||
border:0.25rem solid var(--flyoutColor);
|
||||
border-radius:50%;
|
||||
background:var(--heroBgColor);
|
||||
color:var(--heroColor);
|
||||
}
|
||||
|
||||
@media (max-width:56rem) {
|
||||
|
||||
/*
|
||||
It sucks to have to repeat all this,
|
||||
one of the few cases where native mixins
|
||||
would be a godsend.
|
||||
*/
|
||||
|
||||
#mainMenu,
|
||||
#mainMenu > .modalClose {
|
||||
top:0;
|
||||
left:0;
|
||||
width:100%;
|
||||
height:100%;
|
||||
overflow:auto;
|
||||
scroll-behavior:smooth;
|
||||
}
|
||||
|
||||
#mainMenu {
|
||||
position:fixed;
|
||||
display:flex;
|
||||
flex-wrap:wrap;
|
||||
align-items:center;
|
||||
justify-content:center;
|
||||
left:-200vw;
|
||||
background:var(--modalOuterBg);
|
||||
box-shadow:var(--modalOuterShadow);
|
||||
opacity:0;
|
||||
transition:left 0s 0.5s, opacity 0.5s;
|
||||
}
|
||||
|
||||
#mainMenu:target {
|
||||
left:0;
|
||||
opacity:1;
|
||||
transition:opacity 0.5s;
|
||||
}
|
||||
|
||||
#mainMenu > div {
|
||||
position:relative;
|
||||
margin:auto 1rem;
|
||||
overflow:hidden;
|
||||
background:var(--modalInnerBg);
|
||||
color:var(--flowColor);
|
||||
box-shadow:var(--modalShadow);
|
||||
border:var(--standardBorder);
|
||||
border-radius:1rem;
|
||||
scale:0;
|
||||
transition:scale 0.5s;
|
||||
}
|
||||
|
||||
#mainMenu:target > div {
|
||||
scale:1;
|
||||
}
|
||||
|
||||
#mainMenu:target .modalClose {
|
||||
display:block;
|
||||
}
|
||||
|
||||
#mainMenu > * > .modalClose:focus,
|
||||
#mainMenu > * > .modalClose:hover {
|
||||
scale:1.2;
|
||||
}
|
||||
|
||||
#mainMenu > div:before {
|
||||
content:attr(data-modalTitle);
|
||||
display:block;
|
||||
font-size:1.25rem;
|
||||
padding:0.5rem 4rem 0.5rem 1rem;
|
||||
margin-bottom:1rem;
|
||||
background:var(--modalHeadingBg);
|
||||
border-bottom:var(--standardBorder);
|
||||
}
|
||||
|
||||
#mainMenu ul {
|
||||
margin:1rem;
|
||||
}
|
||||
|
||||
#mainMenu li {
|
||||
display:block;
|
||||
text-align:center;
|
||||
margin:0.5rem 0;
|
||||
}
|
||||
|
||||
.mainMenuOpen {
|
||||
display:block;
|
||||
width:2.5rem;
|
||||
height:2rem;
|
||||
background:linear-gradient(
|
||||
#000 20%,
|
||||
transparent 20% 40%,
|
||||
#000 40% 60%,
|
||||
transparent 60% 80%,
|
||||
#000 80%
|
||||
);
|
||||
}
|
||||
|
||||
} /* max-width:56rem */
|
||||
BIN
web/static/favicon.ico
Normal file
BIN
web/static/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 37 KiB |
1
web/static/favicon.svg
Normal file
1
web/static/favicon.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg width="16em" height="16em" viewBox="0 0 203.2 203.2" xmlns="http://www.w3.org/2000/svg"><g transform="matrix(.20387 .2137 -.20387 .2137 128.46 -10.68)"><path d="m271.76 703.73-211.3-314.83 276.27-58.724-64.977 373.55" fill="#d5b360"/><path d="m271.76 703.73-211.3-314.83 276.27-58.724z" fill-opacity="0" stroke="#3e3632" stroke-linecap="round" stroke-linejoin="round" stroke-width="11"/><path d="m215.67 405.24 65.519 63.54m-76.56 6.867 63.54-65.519m-45.433 88.23 63.54-65.519m-84.739 15.245 65.519 63.541" fill-opacity="0" stroke="#3e3632" stroke-linecap="round" stroke-linejoin="round" stroke-width="8"/><path d="m328.56 236.75c3.897-10.97 5.02-23.007 2.554-34.554-4.783-22.409-21.817-36.657-41.676-37.89 1.346-7.609 1.314-15.557-0.369-23.415-5.828-27.213-28.979-44.343-53.839-40.513-6.532-24.271-27.356-39.494-49.689-38.994-3.032-7.637-17.489-39.799-49.025-49.658-22.371-6.975-82.684 7.057-82.687 7.05-3e-3 -0.012 25.332 8.591 40.719 33.116 4.867 7.753 7.006 17.012 7.502 26.468-1.321 0.266-2.643 0.532-3.964 0.797-25.644 5.213-42.087 30.802-37.683 58.993-24.66 6.33-39.817 31.39-34.022 58.86 1.657 7.863 4.834 15.002 9.158 21.406-17.641 9.202-27.421 29.078-22.676 51.496 2.444 11.551 8.358 22.059 16.38 30.495-14.956 8.922-22.819 26.303-18.529 46.499 5.914 27.873 37.743 48.009 60.763 52.573 22.953 4.707 75.488 4.761 133.59-7.818 58.266-11.895 111.3-34.354 125.22-47.197 14.132-12.498 40.091-44.813 34.124-72.753-4.295-20.195-18.551-32.893-35.844-34.961" fill="#fffffe"/><path d="m328.56 236.75c3.897-10.97 5.02-23.007 2.554-34.554-4.783-22.409-21.817-36.657-41.676-37.89 1.346-7.609 1.314-15.557-0.369-23.415-5.828-27.213-28.979-44.343-53.839-40.513-6.532-24.271-27.356-39.494-49.689-38.994-3.032-7.637-17.489-39.799-49.025-49.658-22.371-6.975-82.684 7.057-82.687 7.05-3e-3 -0.012 25.332 8.591 40.719 33.116 4.867 7.753 7.006 17.012 7.502 26.468-1.321 0.266-2.643 0.532-3.964 0.797-25.644 5.213-42.087 30.802-37.683 58.993-24.66 6.33-39.817 31.39-34.022 58.86 1.657 7.863 4.834 15.002 9.158 21.406-17.641 9.202-27.421 29.078-22.676 51.496 2.444 11.551 8.358 22.059 16.38 30.495-14.956 8.922-22.819 26.303-18.529 46.499 5.914 27.873 37.743 48.009 60.763 52.573 22.953 4.707 75.488 4.761 133.59-7.818 58.266-11.895 111.3-34.354 125.22-47.197 14.132-12.498 40.091-44.813 34.124-72.753-4.295-20.195-18.551-32.893-35.844-34.961z" fill-opacity="0" stroke="#3e3632" stroke-linecap="round" stroke-linejoin="round" stroke-width="11"/><path d="m184.49 72.517c-0.108-0.604-13.1 42.635-107.01 66.574m149.56-23.297c-0.017 0.146-5.601 15.147-29.231 36.635-23.687 21.079-65.42 48.646-139.02 64.457m222.03-37.656c-0.109 0.174-8.437 23.849-40.838 53.951-32.5 29.173-89.075 64.773-187.98 67.361m265.38-48.424c-0.048-0.057-11.438 19.506-34.151 44.665-22.74 24.947-56.804 55.49-102.83 72.474m-84.823-340.9c0 3e-3 26.33 1.97 34.616 40.955" fill-opacity="0" stroke="#3e3632" stroke-linecap="round" stroke-linejoin="round" stroke-width="9"/></g></svg>
|
||||
|
After Width: | Height: | Size: 2.9 KiB |
Reference in New Issue
Block a user