From c896fcdab70f101a6eaaa4fd6f7f03f9b1324e81 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Milan=20P=C3=A4ssler?= Date: Sun, 29 Dec 2019 14:17:41 +0100 Subject: material-ish design with gitea-style tabs --- static/main.css | 219 ++++++++++++++++++++++++++++++++++------------------ templates/repo.html | 52 +++++++------ 2 files changed, 169 insertions(+), 102 deletions(-) diff --git a/static/main.css b/static/main.css index d2b423e..36940a4 100644 --- a/static/main.css +++ b/static/main.css @@ -5,7 +5,7 @@ body { a { text-decoration: none; - color: #800000; + color: #800000; } a:hover { @@ -20,9 +20,9 @@ a:hover { } .title { - align-items: center; - display: flex; - flex-direction: column; + align-items: center; + display: flex; + flex-direction: column; display: flex; max-width: 120ch; } @@ -33,108 +33,173 @@ a:hover { } .title .logo { - padding-top: 15px; + padding-top: 15px; } .title>div>:first-child { - margin-top: 0; + margin-top: 0; } .title>div>:last-child { - margin-bottom: 0; + margin-bottom: 0; } .header .links { - display: flex; - flex-direction: row; - justify-content: center; + display: flex; + flex-direction: row; + justify-content: center; } .header .links>* { - margin: .5em 1em; + height: 1em; + padding: .5em; + margin: .5em 1em; + box-shadow: 0 0 5px #aaa; + border-radius: 5px; + background: #4060a0; + color: white; +} +.header .links>*:hover { + box-shadow: 0 0 10px #555; } body { - display: flex; - flex-direction: column; - /*background: linear-gradient(to bottom, #cc2020, #cc4040);*/ /* red */ - background: linear-gradient(to bottom, #101070, #101040); /* blue */ - box-sizing: border-box; - min-height: 100vh; + display: flex; + flex-direction: column; + /*background: linear-gradient(to bottom, #cc2020, #cc4040);*/ /* red */ + /*background: linear-gradient(to bottom, #f3f0ff, #c0c0f0);*/ /* blue */ + background: #f4f4f4; + box-sizing: border-box; + min-height: 100vh; } .header { - display: flex; - flex-direction: column; - justify-content: space-between; - padding: 1em; + background: white; + display: flex; + flex-direction: column; + justify-content: space-between; + padding: 1em; + border-bottom: 1px solid grey; + box-shadow: 0 0 20px #ccc; } .content { - display: flex; - flex-direction: column; - justify-content: space-between; - padding-top: 1.5em; - margin-top: 3px; + border-bottom: 1px solid #ccc; + box-shadow: 0 0 10px #ccc; + + display: flex; + flex-direction: column; + justify-content: space-between; + padding-top: 1.5em; + background: white; + width: 100%; + max-width: 1000px; + padding: 0; + padding-left: max(10%, calc(50vw - 400px)); } .content>p::before { - content: '\1f6c8'; - display: block; - position: absolute; - margin-left: -1.3em; + content: '\1f6c8'; + display: block; + position: absolute; + margin-left: -1.3em; } .content>p { - border: 1px solid #ccc; - background: white; - padding: .5em; - padding-left: 2.1em; + border: 1px solid #ccc; + background: white; + padding: .5em; + margin: 1em; + padding-left: 2.1em; } body>* { - padding: 0 .8em; - box-sizing: border-box; - background-color: rgba(255, 255, 255, .8); + padding: 0 .8em; + box-sizing: border-box; } .nav { - display: flex; - flex-direction: row; - justify-content: space-between; - flex-wrap: wrap; + padding: 0; + width: 100%; + max-width: 1000px; + text-align: center; +} +.nav-tabs { + margin-top: 1em; + display: flex; + flex-direction: row; + justify-content: space-between; +} +.nav .nav-item:hover { } .nav .nav-item { - margin: 0 .5em; + width: 100%; + display: block; + padding: .7em 0; +} +.nav .nav-item.active::after { + content: ' '; + display: block; + height: 20px; + width: 100%; + box-sizing: border-box; + background: white; + margin-bottom: -20px; +} +.nav .nav-item.active { + background: white; + box-shadow: 0 0 10px #ccc; + z-index: 5; + border: 1px solid #ccc; + border-bottom: none; + border-top-left-radius: 7px; + border-top-right-radius: 7px; +} +.nav .nav-item:not(.active) { + border-bottom: 1px solid #ccc; } +@media (min-width: 1000px) { + .header { + border: 1px solid #ccc; + } +} @media (min-width: 600px) { - body { - padding: 7vh 0; - align-items: center; - } - body>*:first-child { - border-top-left-radius: 0; - border-top-right-radius: 0; - } - body>*:last-child { - border-bottom-left-radius: 0; - border-bottom-right-radius: 0; - } - body>* { - /*box-shadow: 0 0 10px #ccc;*/ - /*border: 1px solid #ccc;*/ - width: 80%; - max-width: 800px; - } - .title { - flex-direction: row; - } - .header { - flex-direction: row; - } - .header .links { - justify-content: center; - flex-direction: column; - } - .header .links>* { - margin: .1em 0; - } - .title .logo { - padding-top: 0; - padding-right: 15px; - } + body { + align-items: center; + } + body>*:first-child { + border-top-left-radius: 0; + border-top-right-radius: 0; + } + + .header { + width: 100%; + max-width: 1000px; + } + .content { + border: 1px solid #ccc; + + border-top: none; + } + + body>:nth-child(2) { + /*margin-top: 7vh;*/ + } + body>*:last-child { + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + } + .title { + flex-direction: row; + } + .header { + flex-direction: row; + } + .header .links>*{ + } + .header .links { + justify-content: center; + align-items: center; + } + .header .links>* { + margin: .1em .25em; + } + .title .logo { + padding-top: 0; + padding-right: 15px; + } } diff --git a/templates/repo.html b/templates/repo.html index 156c48a..da297f6 100644 --- a/templates/repo.html +++ b/templates/repo.html @@ -4,40 +4,42 @@ {{ project_name }} | /{{ project_name }} - - + +
- -
-

/ {{ project_owner }} / {{ project_name }}

+ +
+

/ {{ project_owner }} / {{ project_name }}

-

- {{ project_summary }} -

+

+ {{ project_summary }} +

-
+
-
-
- RSSClone Star -
-
-
-
- readme - summary - tree - log - tags - branches - stats - contribute
+
+ RSSClone Star +
+
+
+
+ readme + summary + tree + log + tags + branches + stats + contribute +
+
+

- {{ project_name }} was created on 2019-11-29 at 21:20 + {{ project_name }} was created on 2019-11-29 at 21:20 with commit {{ first_commit }}. Since then, {{ num_commits }} commits have been authered by {{ num_contributors }} contributers. -- cgit v1.2.3