Skip to content

Commit

Permalink
feat: styles
Browse files Browse the repository at this point in the history
  • Loading branch information
@matoous
matoous committed Apr 1, 2024
1 parent 74f445d commit ae9664d
Show file tree
Hide file tree
Showing 4 changed files with 210 additions and 36 deletions.
11 changes: 9 additions & 2 deletions mwp-web/src/main.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -66,6 +66,8 @@ async fn search_page(q: web::Query<SearchQuery>, index: web::Data<Index>) -> AwR
},
html! {
div {(format!("{:.2?}", result.timing))}
},
html! {
(listing(searcher, schema, result.docs))
}
))
Expand All @@ -91,10 +93,13 @@ async fn tag_page(tag: web::Path<String>, index: web::Data<Index>) -> AwResult<M
(render::header("Tags | Matt's Wiki"))
body {
(render::layout(
html! {
html! {
div {(render::tags_filter(result.tags))}
},
listing(searcher, schema, result.docs)
html! {

},
listing(searcher, schema, result.docs)
))
}
}
Expand Down Expand Up @@ -163,6 +168,8 @@ async fn content_page(
}
}
}
},
html! {
article { (PreEscaped(html)) }
}
))
Expand Down
41 changes: 30 additions & 11 deletions mwp-web/src/render.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,26 @@ fn tags_list(v: Vec<&str>) -> Markup {
}
}

pub fn layout(sidebar: Markup, content: Markup) -> Markup {
fn footer() -> Markup {
html! {
footer {
div {
"© Matous Dzivjak, 2024"
}
div {
"Software Engineer @ SumUp"
}
address {
"Berlin, Germany · Litomerice, Czech Republic"
}
div {
"[email protected] · GitHub · Keybase · LinkedIn · Instagram"
}
}
}
}

pub fn layout(sidebar: Markup, meta: Markup, content: Markup) -> Markup {
html! {
.layout {
.nav {
Expand All @@ -31,12 +50,14 @@ pub fn layout(sidebar: Markup, content: Markup) -> Markup {
}
.search {
form method="GET" action="/search" {
input type="text" name="query" id="query" placeholder="Search...";
input type="search" name="query" id="query" placeholder="Search..." accesskey="f";
}
}
}
.sidebar {(sidebar)}
main .content {(content)}
.meta {(meta)}
main {(content)}
(footer())
}
}
}
Expand Down Expand Up @@ -93,15 +114,13 @@ pub fn content_navigation(children: Vec<mwp_content::Node>) -> Markup {

pub fn link(title: &str, url: &str, tags: Vec<&str>) -> Markup {
html! {
div {
div .link {
div .title {
h3 {
@if !url.starts_with('/') {
"↗ "
}
a href=(url) {
(title)
}
@if !url.starts_with('/') {
"↗ "
}
a href=(url) {
(title)
}
}
div .url {
Expand Down
94 changes: 83 additions & 11 deletions mwp-web/static/styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -75,13 +75,30 @@ h2,
h3,
h4,
h5 {
font-weight: 700;
letter-spacing: -0.0425em;
font-weight: 400;
font-family: var(--font-serif);
letter-spacing: -0.05em;
margin: 0.25em 0 0.25em 0;
line-height: 1.375;
padding-top: 0.5em;
overflow: hidden;
}

h1 {
font-size: 2.4em;
font-weight: 800;
font-size: 1.8em;
border-bottom: 1px solid var(--light);
padding-bottom: 0.17em;
}

h2 {
font-size: 1.5em;
border-bottom: 1px solid var(--light);
padding-bottom: 0.17em;
}

h3,
h4 {
font-weight: bold;
}

hr {
Expand Down Expand Up @@ -111,26 +128,56 @@ ol {
padding-left: 1.2em;
}

form {
margin: 0;
}

.layout {
padding: var(--spacings-giga);
gap: var(--spacings-giga);
display: grid;
grid-template-columns: minmax(10em, 1fr) minmax(20em, 860px) 1fr;
grid-template-areas: "nav nav nav" "sidebar content .";
grid-template-columns: 16em minmax(0, 1fr);
grid-template-rows: auto auto 1fr auto;
grid-template-areas: "nav nav" "sidebar meta" "sidebar content" "footer footer";
}

.nav {
grid-area: nav;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
padding: var(--spacings-kilo) var(--spacings-giga);
border-bottom: 2px solid var(--light);
}

.sidebar {
grid-area: sidebar;
padding: var(--spacings-giga);
border-right: 2px solid var(--light);
}

.meta {
grid-area: meta;
padding: var(--spacings-kilo) var(--spacings-giga);
border-bottom: 2px solid var(--light);
}

.content {
main {
grid-area: content;
padding: var(--spacings-kilo) var(--spacings-giga);
}

footer {
grid-area: footer;
padding: var(--spacings-giga);
border-top: 2px solid var(--light);
font-size: 0.875em;
color: var(--light);
}

article {
max-width: 920px;
width: 100%;
margin: 0 auto;
}

.tags {
Expand Down Expand Up @@ -176,8 +223,25 @@ ol {
}

.search input {
font-size: 1rem;
font-family: var(--font-mono);
border-radius: 0;
outline: none;
border: 1px solid #a2a9b1;
box-shadow: inset 0 0 0 1px transparent;
box-sizing: border-box;
display: block;
font-family: inherit;
font-size: inherit;
line-height: 1.375;
margin: 0;
min-height: 32px;
padding: 4px 8px;
transition-duration: 0.25s;
transition-property: background-color, color, border-color, box-shadow;
width: 100%;
}
.search input[type=search] {
-webkit-appearance: none;
-moz-appearance: textfield;
}

.logo {
Expand All @@ -186,3 +250,11 @@ ol {
font-family: var(--font-mono);
font-weight: bold;
}

.link {
margin-bottom: var(--spacings-mega);
}
.link .title {
margin-bottom: var(--spacings-bit);
font-weight: bold;
}
100 changes: 88 additions & 12 deletions mwp-web/static/styles.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -80,13 +80,30 @@ h2,
h3,
h4,
h5 {
font-weight: 700;
letter-spacing: -0.0425em;
font-weight: 400;
font-family: var(--font-serif);
letter-spacing: -.05em;
margin: 0.25em 0 0.25em 0;
line-height: 1.375;
padding-top: 0.5em;
overflow: hidden;
}

h1 {
font-size: 2.4em;
font-weight: 800;
font-size: 1.8em;
border-bottom: 1px solid var(--light);
padding-bottom: 0.17em;
}

h2 {
font-size: 1.5em;
border-bottom: 1px solid var(--light);
padding-bottom: 0.17em;
}

h3,
h4 {
font-weight: bold
}

hr {
Expand Down Expand Up @@ -116,30 +133,62 @@ ol {
padding-left: 1.2em;
}

form {
margin: 0;
}

// content

.layout {
padding: var(--spacings-giga);
gap: var(--spacings-giga);
display: grid;
grid-template-columns: minmax(10em, 1fr) minmax(20em, 860px) 1fr;
grid-template-columns: 16em minmax(0, 1fr);
grid-template-rows: auto auto 1fr auto;
grid-template-areas:
'nav nav nav'
'sidebar content .';
'nav nav'
'sidebar meta'
'sidebar content'
'footer footer';
}

.nav {
grid-area: nav;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
padding: var(--spacings-kilo) var(--spacings-giga);
border-bottom: 2px solid var(--light);
}

.sidebar {
grid-area: sidebar;
padding: var(--spacings-giga);
border-right: 2px solid var(--light);
}

.content {
.meta {
grid-area: meta;
padding: var(--spacings-kilo) var(--spacings-giga);
border-bottom: 2px solid var(--light);
}

main {
grid-area: content;
padding: var(--spacings-kilo) var(--spacings-giga);
}

footer {
grid-area: footer;
padding: var(--spacings-giga);
border-top: 2px solid var(--light);
font-size: .875em;
color: var(--light);
}

article {
max-width: 920px;
width: 100%;
margin: 0 auto;
}

.tags {
Expand Down Expand Up @@ -193,8 +242,26 @@ ol {

.search {
input {
font-size: 1rem;
font-family: var(--font-mono);
border-radius: 0;
outline: none;
border: 1px solid #a2a9b1;
box-shadow: inset 0 0 0 1px transparent;
box-sizing: border-box;
display: block;
font-family: inherit;
font-size: inherit;
line-height: 1.375;
margin: 0;
min-height: 32px;
padding: 4px 8px;
transition-duration: .25s;
transition-property: background-color, color, border-color, box-shadow;
width: 100%;
}

input[type="search"] {
-webkit-appearance: none;
-moz-appearance: textfield;
}
}

Expand All @@ -203,4 +270,13 @@ ol {
text-decoration: none;
font-family: var(--font-mono);
font-weight: bold;
}

.link {
.title {
margin-bottom: var(--spacings-bit);
font-weight: bold;
}

margin-bottom: var(--spacings-mega);
}

0 comments on commit ae9664d

Please sign in to comment.