Initial CSS work. This is somewhat different but it should be close to GitHub's layout.

This commit is contained in:
Midou
2023-06-15 17:28:21 +01:00
parent 5ec6b2f9a9
commit 3183a3616b
2 changed files with 70 additions and 19 deletions
+44 -7
View File
@@ -6,12 +6,14 @@
--secondary-background: #353535;
--background-darker: #151515;
--accent: #00b7c3;
--yellow: #8B8000;
--yellow: #8b8000;
color-scheme: dark;
}
body {
font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif;
font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui,
helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial,
sans-serif;
color: var(--text);
background-color: var(--background-darker);
transition: ease-in-out 0.25s;
@@ -32,6 +34,9 @@ main {
margin: 0 24vw;
}
#wrap {
display: flex;
}
.navbar {
display: flex;
align-items: center;
@@ -73,7 +78,9 @@ main {
background-color: var(--background);
padding: 8px;
border-radius: 4px;
font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif;
font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui,
helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial,
sans-serif;
color: var(--text);
}
@@ -95,7 +102,9 @@ a:hover {
background-color: var(--yellow);
padding: 8px;
border-radius: 4px;
font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif;
font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui,
helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial,
sans-serif;
color: var(--text);
}
@@ -111,7 +120,8 @@ a:hover {
/* URI: /explore */
.explore-card, .user-repo-card {
.explore-card,
.user-repo-card {
background-color: var(--background);
padding: 8px;
border-radius: 4px;
@@ -125,7 +135,8 @@ a:hover {
transition: ease-in-out 0.25s;
}
.explore-card:hover, .user-repo-card:hover {
.explore-card:hover,
.user-repo-card:hover {
background-color: var(--secondary-background);
color: var(--text);
}
@@ -267,6 +278,23 @@ a:hover {
background-color: var(--secondary-background);
}
/* Overwrite */
.no-margin {
margin: 0;
}
.no-padding {
padding: 0;
}
.float-right {
float: right;
display: grid;
flex: none;
align-self: flex-start;
}
@media screen and (prefers-color-scheme: light) {
:root {
--text: #000;
@@ -294,6 +322,15 @@ a:hover {
margin: 8px;
}
#wrap {
display: inline-grid;
}
.float-right {
float: none;
display: inline-grid;
}
.navbar-slogan {
display: none;
}
@@ -313,5 +350,5 @@ a:hover {
}
}
.cl {
padding-left: 8px
padding-left: 8px;
}
+26 -12
View File
@@ -1,18 +1,32 @@
{{ template "header" .}}
<main>
<!-- prettier-ignore -->
<main class="no-margin" style="margin: 0 12vw;">
{{ if .wiki }} {{ range $key, $value := .wiki}}
<p>RepoUser: {{.RepoUser}}</p>
<p>RepoName: {{.RepoName}}</p>
<p>Title: {{.Title}}</p>
<p>LastEdit: {{.LastEdit}}</p>
<p>LastEditor: {{.LastEditor}}</p>
<p>RevisionNum: {{.RevisionNum}}</p>
<p>PageNum: {{.PageNum}}</p>
<p>Sidebar: {{.Sidebar}}</p>
<p>Content:</p>
{{ unescape .PageContent }}
{{ end }} {{ else }}
<div id="wrap">
<div>
<h1>{{.Title}}</h1>
<h2>{{.RepoUser}}/{{.RepoName}}</h2>
<p>
{{.LastEditor}} edited this page on {{.LastEdit}} · {{.RevisionNum}} revisions
</p>
<hr style="border-color: #252525;">
<div style="margin-right: auto;">
{{ unescape .PageContent }}
<div/>
</div>
<div class="user-readme float-right">
<h3><b>{{.PageNum}}</b> pages</h3>
<div class="no-padding user-readme-text">
{{ range $key, $value := .Sidebar }}
<hr style="border-color: #252525;">
<a href="{{.Link}}"><p style="padding:0px 8px 0px 8px;">{{.Name}}</p></a>
{{end}}
</div>
</div>
</div>
{{ end }}
{{ else }}
<h2>Wiki not found</h2>
<p>That wiki doesn't exist.</p>
{{ end }}