~spacekookie/public-inbox

material-ish design with gitea-style tabs v1 APPLIED

Milan Pässler <me@pbb.lc>
3 years ago 
Milan Pässler: 1
 material-ish design with gitea-style tabs

 2 files changed, 171 insertions(+), 103 deletions(-)
Export patchset (mbox)
How do I use this?

Copy & paste the following snippet into your terminal to import this patchset into git: 

curl -s https://lists.sr.ht/~spacekookie/public-inbox/patches/9416/mbox | git am -3
Learn more about email & git
Reply to thread View this thread in the archives

[PATCH] material-ish design with gitea-style tabs Export this patch

Milan Pässler <me@pbb.lc>
3 years ago 
---
 static/main.css     | 222 ++++++++++++++++++++++++++++----------------
 templates/repo.html |  52 ++++++-----
 2 files changed, 171 insertions(+), 103 deletions(-)

diff --git a/static/main.css b/static/main.css
index b7aae97..36940a4 100644
--- a/static/main.css
+++ b/static/main.css
@@ -5,11 +5,12 @@ body {

a {
    text-decoration: none;
		color: #800000;
    color: #800000;
}

a:hover {
    text-decoration: underline;
    color: black;
    text-decoration: none;
}

.logo {
@@ -19,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;
}
@@ -32,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 @@
    <meta charset="utf-8" />
    <title>{{ project_name }} | /{{ project_name }}</title>
    <link href="../static/main.css" rel="stylesheet">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<meta name="Description" content="{{ project_owner }} by {{ project_owner }}; {{ project_summary }}">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="Description" content="{{ project_owner }} by {{ project_owner }}; {{ project_summary }}">
  </head>
  <body>
    <div class="header">
      <div class="title">
				<img class="logo" alt="{{ project_logo_alt_text }}" src="../static/{{ project_logo }}" />
				<div>
					<h1>/ <a href="">{{ project_owner }}</a> / <a href="">{{ project_name }}</a></h1>
        <img class="logo" alt="{{ project_logo_alt_text }}" src="../static/{{ project_logo }}" />
        <div>
          <h1>/ <a href="">{{ project_owner }}</a> / <a href="">{{ project_name }}</a></h1>

					<p>
					  {{ project_summary }}
					</p>
          <p>
            {{ project_summary }}
          </p>

				</div>
        </div>

			</div>
			<div class="links">
				<a href="">RSS</a><a href="">Clone</a> <a href="">Star</a>
			</div>
		</div>
    <div class="content">
      <div class="nav">
        <a class="nav-item" href="">readme</a>
        <a class="nav-item" href="">summary</a>
        <a class="nav-item" href="">tree</a>
        <a class="nav-item" href="">log</a>
        <a class="nav-item" href="">tags</a>
        <a class="nav-item" href="">branches</a>
        <a class="nav-item" href="">stats</a>
        <a class="nav-item" href="">contribute</a>
      </div>
      <div class="links">
        <a href="">RSS</a><a href="">Clone</a> <a href="">Star</a>
      </div>
    </div>
    <div class="nav">
    <div class="nav-tabs">
      <a class="nav-item" href="">readme</a>
      <a class="nav-item active" href="">summary</a>
      <a class="nav-item" href="">tree</a>
      <a class="nav-item" href="">log</a>
      <a class="nav-item" href="">tags</a>
      <a class="nav-item" href="">branches</a>
      <a class="nav-item" href="">stats</a>
      <a class="nav-item" href="">contribute</a>
    </div>
    </div>
    <div class="content">
      <p>
  			<strong>{{ project_name }}</strong> was created on 2019-11-29 at 21:20
        <strong>{{ project_name }}</strong> was created on 2019-11-29 at 21:20
        with commit <a href="">{{ first_commit }}</a>. Since then, <a href="">{{ num_commits }}
          commits</a> have been authered by
        <a href="">{{ num_contributors }} contributers</a>.
-- 
2.24.1