forked from GNUsocial/gnu-social
[UI] Basic implementation of the new base design
This commit is contained in:
rainydaysavings
parent
115257f3bb
commit
4eaf272929
GPG Key ID:
7D0C7EAFC9D835A0
@ -6,7 +6,8 @@
|
||||
--medium-size: 0.8em;
|
||||
--small-size: 0.65em;
|
||||
--unit-size: 1em;
|
||||
--side-margin: 20%;
|
||||
--side-margin: 5em;
|
||||
--nav-size: 12em;
|
||||
}
|
||||
|
||||
body,
|
||||
@ -29,55 +30,28 @@ ul {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.drop-down ul li {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.drop-down ul li ul a {
|
||||
line-height: 0.8em;
|
||||
}
|
||||
|
||||
.drop-down ul li ul {
|
||||
display: none;
|
||||
position: absolute;
|
||||
background-color: #F6F6F6;
|
||||
padding: 0.4em 0.8em 0.8em 0.8em;
|
||||
border-radius: 0.5em;
|
||||
color: #29323c;
|
||||
}
|
||||
|
||||
.drop-down ul li:hover ul {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.drop-down ul li ul a:hover {
|
||||
color: rgb(0, 0, 0);
|
||||
transition: all 0.8s ease;
|
||||
}
|
||||
|
||||
#hover-effect:hover {
|
||||
color: #F6F6F6;
|
||||
transition: all 0.8s ease;
|
||||
li {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
a:link {
|
||||
text-decoration: none;
|
||||
outline: 0;
|
||||
color: #F6F6F6;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
a:visited {
|
||||
outline: 0;
|
||||
color: #F6F6F6;
|
||||
}
|
||||
|
||||
ul li ul a {
|
||||
font-size: var(--small-size);
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
b {
|
||||
font-family: 'Montserrat', sans-serif;
|
||||
font-family: var(--head-font);
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
@ -92,31 +66,28 @@ b {
|
||||
/*-------------------------------------*/
|
||||
/* HEADER -----------------------------*/
|
||||
#header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
order: 1;
|
||||
width: 100%;
|
||||
margin-left: var(--side-margin);
|
||||
margin-right: var(--side-margin);
|
||||
background-color: rgba(0, 0, 0, 0.40);
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background-color: #272E36;
|
||||
box-shadow: 0px 0px 60px -20px rgba(41, 50, 60, 1);
|
||||
padding: var(--medium-size) var(--unit-size) var(--medium-size) var(--unit-size);
|
||||
}
|
||||
|
||||
#top {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
vertical-align: top;
|
||||
flex-wrap: wrap;
|
||||
order: 1;
|
||||
width: 100%;
|
||||
padding: var(--unit-size) var(--unit-size) var(--small-size) var(--unit-size);
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* MENU -------------------------------*/
|
||||
.icon-menu {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
width: var(--unit-size);
|
||||
height: var(--unit-size);
|
||||
stroke-width: 0;
|
||||
@ -137,8 +108,9 @@ b {
|
||||
}
|
||||
|
||||
.icon-logo {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
width: var(--unit-size);
|
||||
height: var(--unit-size);
|
||||
stroke-width: 0;
|
||||
@ -153,8 +125,9 @@ b {
|
||||
}
|
||||
|
||||
.icon-search {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
width: var(--unit-size);
|
||||
height: var(--unit-size);
|
||||
stroke-width: 0;
|
||||
@ -162,64 +135,44 @@ b {
|
||||
fill: currentColor;
|
||||
}
|
||||
|
||||
/*-------------------------------------*/
|
||||
/* PROFILE ----------------------------*/
|
||||
#cover {
|
||||
display: flex;
|
||||
justify-content: start;
|
||||
align-items: center;
|
||||
order: 3;
|
||||
width: 100%;
|
||||
|
||||
.navbar {
|
||||
width: var(--nav-size);
|
||||
height: calc(100vh - (3 * var(--unit-size)));
|
||||
position: fixed;
|
||||
background-color: rgba(0, 0, 0, 0.40);
|
||||
margin-top: calc(2 * var(--medium-size) + var(--main-size));
|
||||
}
|
||||
|
||||
#cover-img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
#avatar {
|
||||
z-index: 1;
|
||||
position: absolute;
|
||||
width: 4em;
|
||||
height: 4em;
|
||||
margin-left: var(--unit-size);
|
||||
}
|
||||
|
||||
#profile {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-start;
|
||||
width: 100%;
|
||||
padding: var(--medium-size) var(--medium-size);
|
||||
order: 4;
|
||||
font-size: var(--medium-size);
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
|
||||
#info {
|
||||
order: 1;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
#tags {
|
||||
.nav-item a {
|
||||
color: #91B9D0;
|
||||
}
|
||||
|
||||
#tags i {
|
||||
margin-left: var(--small-size);
|
||||
}
|
||||
|
||||
#stats {
|
||||
margin-left: auto;
|
||||
order: 2;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
#stats b:last-child {
|
||||
margin-left: var(--unit-size);
|
||||
font-size: var(--medium-size);
|
||||
}
|
||||
|
||||
/*-------------------------------------*/
|
||||
.nav-item a:hover {
|
||||
color: #F6F6F6;
|
||||
transition: all 0.8s ease;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
cursor: pointer
|
||||
}
|
||||
|
||||
.navbar {
|
||||
width: 100%;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.navbar a {
|
||||
display: block;
|
||||
}
|
||||
|
||||
#toggle {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#toggle:checked+.navbar {
|
||||
display: block;
|
||||
}
|
||||
@ -1,18 +1,26 @@
|
||||
/*-------------------------------------*/
|
||||
/* PAGES ------------------------------*/
|
||||
.content {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin-top: 5em;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-left: calc(var(--nav-size) + var(--side-margin));
|
||||
margin-right: var(--side-margin);
|
||||
box-shadow: 0px 0px 60px -20px rgba(41, 50, 60, 1);
|
||||
}
|
||||
|
||||
.faq-nav {
|
||||
order: 1;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
order: 2;
|
||||
width: 100%;
|
||||
margin-left: var(--side-margin);
|
||||
margin-right: var(--side-margin);
|
||||
background-color: #00000080;
|
||||
padding: var(--medium-size) var(--medium-size);
|
||||
font-size: var(--medium-size);
|
||||
font-family: var(--head-font);
|
||||
box-shadow: 0px 0px 60px -20px rgba(41, 50, 60, 1);
|
||||
}
|
||||
|
||||
.faq-nav ul {
|
||||
@ -43,28 +51,11 @@
|
||||
.faq-nav a:hover {
|
||||
color: #F6F6F6;
|
||||
transition: all 0.8s ease;
|
||||
|
||||
}
|
||||
|
||||
/*-------------------------------------*/
|
||||
/*-------------------------------------*/
|
||||
/* CONTENT ----------------------------*/
|
||||
.content {
|
||||
order: 3;
|
||||
width: 100%;
|
||||
margin-top: var(--unit-size);
|
||||
margin-bottom: var(--unit-size);
|
||||
margin-left: var(--side-margin);
|
||||
margin-right: var(--side-margin);
|
||||
background-color: rgba(0, 0, 0, 0.40);
|
||||
padding: 0 var(--unit-size) var(--unit-size) var(--unit-size);
|
||||
border-radius: var(--unit-size);
|
||||
font-size: var(--small-size);
|
||||
box-shadow: 0px 0px 60px -20px rgba(41, 50, 60, 1);
|
||||
}
|
||||
|
||||
.content ul {
|
||||
margin: 0;
|
||||
padding-left: calc(var(--unit-size) * 2);
|
||||
list-style: disc;
|
||||
.markd {
|
||||
order: 2;
|
||||
background-color: #00000040;
|
||||
font-size: var(--medium-size);
|
||||
padding: var(--unit-size);
|
||||
}
|
||||
@ -52,64 +52,31 @@
|
||||
{% block header %}
|
||||
<div id='header'>
|
||||
<div id='top'>
|
||||
<nav class='drop-down' id='menu'>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="#" class='hover-effect'>
|
||||
<svg class="icon icon-menu"><use xlink:href="#icon-menu"></use></svg>
|
||||
</a>
|
||||
<ul>
|
||||
<li><a>Main Page</a></li>
|
||||
<li><a>Social</a></li>
|
||||
<li><a>Bookmarks</a></li>
|
||||
<li><a>Messages</a></li>
|
||||
<li><a>Settings</a></li>
|
||||
<li><a>Logout</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<div>
|
||||
<label for="toggle" id='menu'>
|
||||
<svg class="icon icon-menu"><use xlink:href="#icon-menu"></use></svg>
|
||||
</label>
|
||||
<input type="checkbox" id="toggle" class='visually-hidden'>
|
||||
<div class='navbar'>
|
||||
<a href='#'>Bookmarks</a>
|
||||
<a href='#'>Happenings</a>
|
||||
<a href='#'>Messages</a>
|
||||
</div>
|
||||
</div>
|
||||
<nav id='instance'>
|
||||
<a href="#" class='hover-effect'>
|
||||
<a href="#">
|
||||
<svg class="icon icon-logo"><use xlink:href="#icon-logo"></use></svg>
|
||||
<b>GNU social</b>
|
||||
</a>
|
||||
</nav>
|
||||
<div id='search'>
|
||||
<svg class="icon icon-search"><use xlink:href="#icon-search"></use></svg>
|
||||
</div>
|
||||
<svg id='search' class="icon icon-search"><use xlink:href="#icon-search"></use></svg>
|
||||
</div>
|
||||
|
||||
<div id='cover'>
|
||||
<img id="cover-img" src="{{ asset('assets/bitmap.png') }}">
|
||||
<svg id="avatar"><use xlink:href="#icon-avatar"></use></svg>
|
||||
</div>
|
||||
|
||||
<div id='profile'>
|
||||
<div id='info'>
|
||||
<div id='nick'>
|
||||
<b id='name'>someone</b>
|
||||
</div>
|
||||
<div id='tags'>
|
||||
<i>coffee addict</i>
|
||||
<i>lazy</i>
|
||||
</div>
|
||||
</div>
|
||||
<div id='stats'>
|
||||
<div id='followers'>
|
||||
<b>1337</b> Followers
|
||||
</div>
|
||||
<div id='following'>
|
||||
<b>42</b> Following
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
{% block nav %}{% endblock %}
|
||||
{% block body %}{% endblock %}
|
||||
</div>
|
||||
|
||||
|
||||
{% block javascripts %}{% endblock %}
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -4,47 +4,47 @@
|
||||
|
||||
{% block header %}{{ parent() }}{% endblock %}
|
||||
|
||||
{% block nav %}
|
||||
<nav class='faq-nav'>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="{{ path('doc_faq') }}" class='hover-effect {% if app.request.attributes.get('_route') starts with 'doc_faq' %}active{% endif %}'>FAQ</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="{{ path('doc_contact') }}" class='hover-effect {% if app.request.attributes.get('_route') starts with 'doc_contact' %}active{% endif %}'>Contact</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="{{ path('doc_tags') }}" class='hover-effect {% if app.request.attributes.get('_route') starts with 'doc_tags' %}active{% endif %}'>Tags</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="{{ path('doc_groups') }}" class='hover-effect {% if app.request.attributes.get('_route') starts with 'doc_groups' %}active{% endif %}'>Groups</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="{{ path('doc_openid') }}" class='hover-effect {% if app.request.attributes.get('_route') starts with 'doc_openid' %}active{% endif %}'>OpenID</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
{% endblock %}
|
||||
{% block body %}
|
||||
<div class="content">
|
||||
{% block markdown %}
|
||||
{% apply markdown_to_html %}
|
||||
## What is this site?
|
||||
This is a social network, running the GNU social software.
|
||||
<div class='content'>
|
||||
<nav class='faq-nav'>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="{{ path('doc_faq') }}" class='hover-effect {% if app.request.attributes.get('_route') starts with 'doc_faq' %}active{% endif %}'>FAQ</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="{{ path('doc_contact') }}" class='hover-effect {% if app.request.attributes.get('_route') starts with 'doc_contact' %}active{% endif %}'>Contact</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="{{ path('doc_tags') }}" class='hover-effect {% if app.request.attributes.get('_route') starts with 'doc_tags' %}active{% endif %}'>Tags</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="{{ path('doc_groups') }}" class='hover-effect {% if app.request.attributes.get('_route') starts with 'doc_groups' %}active{% endif %}'>Groups</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="{{ path('doc_openid') }}" class='hover-effect {% if app.request.attributes.get('_route') starts with 'doc_openid' %}active{% endif %}'>OpenID</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<div class='markd'>
|
||||
{% block markdown %}
|
||||
{% apply markdown_to_html %}
|
||||
## What is this site?
|
||||
This is a social network, running the GNU social software.
|
||||
|
||||
You can use it to make connections between friends, family and colleagues -- writing short notices about yourself, where you are, and what you're doing, and those notices will be sent to all your contacts.
|
||||
You can use it to make connections between friends, family and colleagues -- writing short notices about yourself, where you are, and what you're doing, and those notices will be sent to all your contacts.
|
||||
|
||||
In the future, we'll be adding support for photo, video and file sharing, as well as events, better contact management and mobile devices.
|
||||
In the future, we'll be adding support for photo, video and file sharing, as well as events, better contact management and mobile devices.
|
||||
|
||||
## Help
|
||||
GNU social is a **social service**. Users can post short status messages which are shared to their friends and colleagues on the service and (optionally) onto the Web.
|
||||
## Help
|
||||
GNU social is a **social service**. Users can post short status messages which are shared to their friends and colleagues on the service and (optionally) onto the Web.
|
||||
|
||||
You can also share other types of data, like bookmarks, event invitations, polls, and questions.
|
||||
You can also share other types of data, like bookmarks, event invitations, polls, and questions.
|
||||
|
||||
If you'd like to try it out, first register a new account. Then, on the public timeline, enter your message into the textbox at the top of the page, and click "Send". It will go out on the public timeline and to anyone who is subscribed to your notices.
|
||||
If you'd like to try it out, first register a new account. Then, on the public timeline, enter your message into the textbox at the top of the page, and click "Send". It will go out on the public timeline and to anyone who is subscribed to your notices.
|
||||
|
||||
To subscribe to other people's notifications, go to their profile page and click the "subscribe" button. They'll get a notice that you're now subscribed to their notifications.
|
||||
{% endapply %}
|
||||
{% endblock %}
|
||||
To subscribe to other people's notifications, go to their profile page and click the "subscribe" button. They'll get a notice that you're now subscribed to their notifications.
|
||||
{% endapply %}
|
||||
{% endblock %}
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
Loading…
Reference in New Issue
Block a user