serv/surwiki
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Start trying out implementing new layout

Browse source
This commit is contained in:
Magnus Hoff 2018-06-16 10:58:00 +02:00
parent 67ac61ee42
commit 4516534b39
6 changed files with 43 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

51
assets/style.css
View file

@ -1,10 +1,4 @@
@font-face { @import "themes.css";
font-family: 'Amatic SC';
font-style: normal;
font-weight: 400;
src: local('Amatic SC Regular'), local('AmaticSC-Regular'),
url('amatic-sc-v9-latin-regular.woff') format('woff');
}
.prototype { .prototype {
display: none; display: none;
@ -17,8 +11,6 @@ html {
} }
h1 { h1 {
font-family: 'Amatic SC', sans-serif;
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
@ -82,6 +74,22 @@ article>hr {
margin: 30px auto; margin: 30px auto;
} }
.hero {
background: var(--theme-main);
color: var(--theme-text);
/* Hack to force containing the children instead of collapsing marigins */
border: 1px solid var(--theme-main);
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
}
.search-container {
background: var(--theme-main);
color: var(--theme-text);
z-index: 1;
}
header, article>*, .search { header, article>*, .search {
box-sizing: border-box; box-sizing: border-box;
max-width: 616px; max-width: 616px;
@ -97,7 +105,7 @@ header {
} }
article { article {
margin: 0 auto 120px auto; margin: 50px auto 120px auto;
font-size: 18px; font-size: 18px;
line-height: 32px; line-height: 32px;
@ -148,7 +156,7 @@ pre {
} }
a { a {
color: #457796; color: var(--theme-link);
text-decoration: none; text-decoration: none;
} }
@ -182,15 +190,17 @@ body {
footer { footer {
padding: 0 8px; padding: 16px 8px 16px 8px;
background: #f8f8f8; background: var(--theme-main);
color: #444; color: var(--theme-text);
text-align: center; text-align: center;
font-family: -apple-system, BlinkMacSystemFont, font-family: -apple-system, BlinkMacSystemFont,
"Segoe UI", "Roboto", "Oxygen", "Segoe UI", "Roboto", "Oxygen",
"Ubuntu", "Cantarell", "Fira Sans", "Ubuntu", "Cantarell", "Fira Sans",
"Droid Sans", "Helvetica Neue", sans-serif; "Droid Sans", "Helvetica Neue", sans-serif;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
} }
ul.dense { ul.dense {
@ -248,6 +258,11 @@ h1>input {
width: 100%; width: 100%;
} }
.hero input {
background: var(--theme-input);
color: var(--theme-text);
}
.shadow-control { .shadow-control {
visibility: hidden; visibility: hidden;
position: fixed; position: fixed;
@ -277,7 +292,8 @@ h1>input {
bottom: 0; bottom: 0;
left: 0; left: 0;
background: #91A238; background: var(--theme-main);
color: var(--theme-text);
padding: 10px 20px; padding: 10px 20px;
} }
@ -342,7 +358,8 @@ input[type="search"] {
padding: 0 16px; padding: 0 16px;
margin: 0; margin: 0;
border: 1px solid #ccc; border: none;
background: var(--theme-input);
font: inherit; font: inherit;
font-size: 18px; font-size: 18px;
@ -350,7 +367,7 @@ input[type="search"] {
line-height: 32px; line-height: 32px;
height: 34px; height: 34px;
border-radius: 18px; border-radius: 2px;
text-overflow: ellipsis; text-overflow: ellipsis;
} }

2
templates/about.html
View file

@ -1,7 +1,9 @@
<div class="container"> <div class="container">
<div class="hero">
<header> <header>
<h1>About Sausagewiki</h1> <h1>About Sausagewiki</h1>
</header> </header>
</div>
<article> <article>
<p>This site is running Sausagewiki, a simple, self-contained wiki engine, <p>This site is running Sausagewiki, a simple, self-contained wiki engine,

2
templates/article.html
View file

@ -8,9 +8,11 @@
<div class="editor"> <div class="editor">
<form action="" method="POST"> <form action="" method="POST">
<div class="hero" style="z-index: -1">
<header> <header>
<h1><input autocomplete=off type=text name=title value="{{title}}" placeholder="Title" required></h1> <h1><input autocomplete=off type=text name=title value="{{title}}" placeholder="Title" required></h1>
</header> </header>
</div>
<article> <article>
<p> <p>

2
templates/article_contents.html
View file

@ -1,6 +1,8 @@
<div class="hero">
<header> <header>
<h1>{{title}}</h1> <h1>{{title}}</h1>
</header> </header>
</div>
<article> <article>
{{{rendered}}} {{{rendered}}}

2
templates/layout.html
View file

@ -8,7 +8,7 @@
<link href="_assets/style-{{style_css_checksum()}}.css" rel="stylesheet"> <link href="_assets/style-{{style_css_checksum()}}.css" rel="stylesheet">
<meta name="generator" content="{{project_name()}} {{version()}}" /> <meta name="generator" content="{{project_name()}} {{version()}}" />
</head> </head>
<body> <body class="theme-purple">
{{>search_input.html}} {{>search_input.html}}
{{{body}}} {{{body}}}
</body> </body>

2
templates/search_input.html
View file

@ -1,3 +1,4 @@
<div class="search-container">
<form class="search keyboard-focus-control" action=_search method=GET> <form class="search keyboard-focus-control" action=_search method=GET>
<input data-focusindex="0" type=search name=q placeholder=search autocomplete=off> <input data-focusindex="0" type=search name=q placeholder=search autocomplete=off>
<ul class="live-results search-results"> <ul class="live-results search-results">
@ -5,3 +6,4 @@
</form> </form>
<ul id="search-result-prototype" class="prototype"><li class="search-result"><a tabindex="0" class="link" href=""><span class="title"></span> &ndash; <span class="snippet"></span></a></li></ul> <ul id="search-result-prototype" class="prototype"><li class="search-result"><a tabindex="0" class="link" href=""><span class="title"></span> &ndash; <span class="snippet"></span></a></li></ul>
<script src="_assets/search-{{search_js_checksum()}}.js" defer></script> <script src="_assets/search-{{search_js_checksum()}}.js" defer></script>
</div>