First version of new page footer

This commit is contained in:
Teemu Patja 2017-10-28 23:06:55 +03:00
parent e71b17a565
commit c12cc5e7ed
No known key found for this signature in database
GPG Key ID: F5B7035E6580FD4C
9 changed files with 184 additions and 14 deletions

View File

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path fill="#FFF" fill-rule="evenodd" d="M13.203 13.07h2.349l.353-2.633h-2.702v-1.69c0-.764.213-1.285 1.349-1.285H16V5.1a20.754 20.754 0 0 0-2.11-.1C11.8 5 10.37 6.225 10.37 8.486v1.95H8v2.634h2.371v6.787h2.832V13.07z"/>
</svg>

After

Width:  |  Height:  |  Size: 316 B

View File

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path fill="#FFF" fill-rule="evenodd" d="M4 12.334a8.334 8.334 0 0 0 5.699 7.907c.417.076.569-.181.569-.402 0-.198-.007-.722-.011-1.417-2.318.503-2.807-1.117-2.807-1.117-.38-.963-.926-1.22-.926-1.22-.757-.516.057-.506.057-.506.837.059 1.277.859 1.277.859.743 1.273 1.95.905 2.425.692.076-.538.291-.905.53-1.114-1.851-.21-3.797-.925-3.797-4.118 0-.91.325-1.654.858-2.236-.086-.211-.372-1.059.082-2.206 0 0 .7-.224 2.291.855a7.982 7.982 0 0 1 2.087-.281 7.99 7.99 0 0 1 2.086.28c1.59-1.078 2.29-.854 2.29-.854.454 1.147.168 1.995.082 2.206.535.582.857 1.326.857 2.236 0 3.201-1.949 3.906-3.805 4.112.299.257.566.766.566 1.543 0 1.114-.01 2.013-.01 2.286 0 .223.15.482.572.401A8.334 8.334 0 1 0 4 12.334z"/>
</svg>

After

Width:  |  Height:  |  Size: 800 B

View File

@ -0,0 +1,7 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<g fill="none" fill-rule="evenodd">
<path fill="#FFF" fill-rule="nonzero" d="M19.65 13a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm-15.3 0a2 2 0 1 0 0-4 2 2 0 0 0 0 4zM12 21c4.694 0 8.5-2.686 8.5-6S16.694 9 12 9s-8.5 2.686-8.5 6 3.806 6 8.5 6zm-.002-2.042v-.001a7.103 7.103 0 0 1-3.234-.782 3.965 3.965 0 0 1-.281-.16c-.374-.253-.434-.743-.125-1.063.281-.291.775-.335 1.118-.102 1.058.736 2.998 1.104 5.108-.04.363-.203.848-.118 1.1.197.286.346.165.826-.234 1.048-1.136.62-2.299.903-3.452.903zM8.6 14.9a1.7 1.7 0 1 1 0-3.4 1.7 1.7 0 0 1 0 3.4zm6.8 0a1.7 1.7 0 1 1 0-3.4 1.7 1.7 0 0 1 0 3.4z"/>
<path stroke="#FFF" stroke-width="1.5" d="M11.844 11.805l.493-5.544 4.123-1.07"/>
<circle cx="16.7" cy="5.1" r="1.5" fill="#FFF" fill-rule="nonzero" stroke="#FFF" stroke-width=".8"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 890 B

View File

@ -0,0 +1,16 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24">
<defs>
<path id="a" d="M.048 15.992h12.236V.005H.048v15.987z"/>
</defs>
<g fill="none" fill-rule="evenodd">
<g transform="translate(4.836 4)">
<mask id="b" fill="#fff">
<use xlink:href="#a"/>
</mask>
<path fill="#FFF" d="M8.537.99a1.425 1.425 0 1 0-2.71.88L9.51 13.206a1.425 1.425 0 0 0 1.733.883c.756-.218 1.217-1.02.976-1.763L8.537.99M2.828 2.845a1.425 1.425 0 0 0-2.71.88l3.684 11.336a1.425 1.425 0 0 0 1.733.883c.757-.218 1.218-1.02.976-1.764L2.828 2.845" mask="url(#b)"/>
</g>
<path fill="#FFF" d="M18.01 14.378a1.425 1.425 0 1 0-.88-2.71L5.794 15.352a1.425 1.425 0 0 0-.883 1.733c.218.756 1.02 1.217 1.763.976l11.336-3.683"/>
<path fill="#FFF" d="M8.157 17.58c.738-.24 1.689-.55 2.709-.88l-.88-2.71-2.71.88.88 2.71M13.865 15.724l2.71-.88c-.24-.738-.55-1.689-.88-2.71l-2.71.88.88 2.71M16.155 8.67a1.425 1.425 0 0 0-.88-2.711L3.939 9.643a1.424 1.424 0 0 0-.883 1.733c.218.757 1.02 1.218 1.764.976L16.155 8.67"/>
<path fill="#FFF" d="M6.301 11.87l2.71-.88-.88-2.71-2.71.882.88 2.709M12.01 10.016l2.71-.88-.88-2.71-2.71.88.88 2.71"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.3 KiB

View File

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path fill="#FFF" fill-rule="evenodd" d="M18.232 8.056a3.268 3.268 0 0 0 1.354-1.816c-.599.38-1.261.65-1.955.796A2.988 2.988 0 0 0 15.385 6c-1.7 0-3.078 1.469-3.078 3.282 0 .251.027.502.081.747-2.558-.136-4.826-1.442-6.344-3.428a3.427 3.427 0 0 0-.416 1.65c0 1.138.542 2.143 1.368 2.731a2.922 2.922 0 0 1-1.394-.41v.041c0 1.59 1.062 2.917 2.47 3.218-.452.131-.93.15-1.39.057.391 1.304 1.528 2.252 2.875 2.279A5.935 5.935 0 0 1 5 17.526 8.322 8.322 0 0 0 9.717 19c5.66 0 8.756-5 8.756-9.338 0-.142-.003-.284-.009-.424A6.502 6.502 0 0 0 20 7.539a5.866 5.866 0 0 1-1.768.517z"/>
</svg>

After

Width:  |  Height:  |  Size: 671 B

View File

@ -0,0 +1 @@
<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>icon_yt</title><path d="M10.142 14.356l-.001-5.057 4.864 2.537-4.863 2.52zM20.82 8.422s-.176-1.24-.715-1.786c-.685-.717-1.452-.72-1.804-.763-2.519-.182-6.297-.182-6.297-.182h-.008s-3.778 0-6.297.182c-.352.042-1.119.046-1.804.763-.54.546-.715 1.786-.715 1.786S3 9.88 3 11.336V12.7c0 1.457.18 2.913.18 2.913s.176 1.24.715 1.787c.685.717 1.584.694 1.985.77 1.44.138 6.12.18 6.12.18s3.782-.005 6.301-.187c.352-.042 1.12-.046 1.804-.763.54-.546.715-1.787.715-1.787S21 14.157 21 12.7v-1.365c0-1.457-.18-2.914-.18-2.914z" fill="#FFF" fill-rule="evenodd"/></svg>

After

Width:  |  Height:  |  Size: 644 B

View File

@ -0,0 +1 @@
<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>icon_dropdown-dark</title><path d="M12 14.33l-3.538-3.538a1.003 1.003 0 0 0-1.412.003.996.996 0 0 0-.002 1.412l4.247 4.246c.192.192.447.29.702.29a.981.981 0 0 0 .708-.29l4.247-4.246a1.003 1.003 0 0 0-.002-1.412.996.996 0 0 0-1.412-.003L12 14.33z" fill="#FFF" fill-rule="evenodd" opacity=".6"/></svg>

After

Width:  |  Height:  |  Size: 389 B

View File

@ -135,9 +135,47 @@
@top-hunters))))))
(defn footer []
[:div.commiteth-footer "Built by " [:a {:href "https://status.im"} "Status"]
(when-not (= "unknown" version)
[:div.version-footer "version " [:a {:href (str "https://github.com/status-im/commiteth/commit/" version)} version]])])
(let [social-links [["icon-fb" "Facebook" "https://www.facebook.com/ethstatus"]
["icon-tw" "Twitter" "https://twitter.com/ethstatus"]
["icon-gh" "Github" "https://github.com/status-im"]
["icon-rd" "Reddit" "https://www.reddit.com/r/statusim/"]
["icon-yt" "YouTube" "https://www.youtube.com/channel/UCFzdJTUdzqyX4e9dOW7UpPQ/"]]]
[:div.commiteth-footer
[:div.commiteth-footer-inner
[:div.commiteth-footer-logo-container
[:div
(svg/status-logo-footer)]
[:div.commiteth-footer-status-addr
"Status Research & Development GmbH
Baarerstrasse 10
Zug, Switzerland"]]
[:div.commiteth-footer-table
[:div.commiteth-footer-table__column
[:h4.commiteth-footer-header "Social networks"]
[:ul.commiteth-footer-list
(for [[svg caption url] social-links]
[:li.commiteth-footer-link
[:a {:href url}
[:div.commiteth-footer-icon
{:style {"background-image" (str "url(/img/" svg ".svg)")}}]
[:span.commiteth-footer-link-label caption]]])]]
[:div.commiteth-footer-table__column
[:h4.commiteth-footer-header "Community"]
[:ul.commiteth-footer-list
[:li.commiteth-footer-link
[:a {:href "https://wiki.status.im/"}
"Wiki"]]
[:li.commiteth-footer-link
[:a {:href "https://status.im/jobs.html"}
"Jobs"]]]]
[:div.commiteth-footer-table__column
[:h4.commiteth-footer-header "Language"]
[:ul.commiteth-footer-list
[:li.commiteth-footer-link
[:select.commiteth-language-switcher {:name "lang"}
[:option {:value "en"} "English"]]]]]]]
(when-not (= "unknown" version)
[:div.version-footer "version " [:a {:href (str "https://github.com/status-im/commiteth/commit/" version)} version]])]))
(defn page []
(let [current-page (rf/subscribe [:page])
@ -157,8 +195,8 @@
[:div.ui.container.top-hunters
[:h3.top-hunters-header "Top hunters"]
[:div.top-hunters-subheader "All time"]
[top-hunters]]])]
[footer]]]])))
[top-hunters]]])]]
[footer]]])))
(secretary/set-config! :prefix "#")

View File

@ -422,20 +422,118 @@
}
}
.commiteth-footer {
background-color: #4a5c69;
line-height: 1.8em;
a {
&:hover {
color: #a8aab1!important;
}
color: #a8aab1!important;
}
&.group-title { color: #fff; opacity: 0.6; }
background-color: #1e3751;
width: 100%;
bottom: 0;
left: 0;
z-index: -1;
display: flex;
justify-content: center;
margin-top: 20px;
}
.commiteth-footer-inner {
display: flex;
justify-content: space-between;
width: 1080px;
}
.commiteth-footer-table {
display: flex;
}
.commiteth-footer-table__column {
box-sizing: border-box;
padding: 60px 40px;
li { display: list-item; }
ul { list-style: none; }
}
.commiteth-footer-column-header {
color: #fff;
font-size: 17px;
opacity: .5;
}
.commiteth-footer-header {
color: #fff;
opacity: .5;
font-size: 17px;
margin: 0 0 40px 0;
font-weight: 300;
}
.commiteth-footer-logo-container {
width: 26%;
padding: 65px 75px 0 10px;
}
.commiteth-footer-link a {
color: #fff;
height: 32px;
line-height: 32px;
font-size: 16px;
margin: 0 0 15px 0;
}
.commiteth-footer-link-label {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
text-align: left;
}
.commieteth-footer-social-container {
width: 40%;
padding: 65px 100px 75px 300px;
}
.commiteth-footer-status-addr {
color: #fff;
opacity: 0.4;
width: 168px;
line-height: 1.67;
text-align: left;
height: 50px;
padding-top: 30px;
padding-bottom: 30px;
}
.commiteth-footer-icon {
display: inline-block;
width: 32px;
height: 32px;
background-color: rgba(255, 255, 255, 0.1);
border-radius: 50%;
margin: 0 15px 0 0;
background-repeat: no-repeat;
background-size: 24px;
background-position: center;
}
.commiteth-language-switcher {
color: white;
-webkit-appearance: none;
font-size: 16px;
line-height: 32px;
padding: 0 24px 0 0;
background-image: url(../img/icon_dropdown-white.svg);
background-size: 24px;
background-repeat: no-repeat;
background-position: right center;
background-color: #1e3751;
border: 0;
}
.version-footer {
bottom: 0;
font-size: .8em;
a {
&:hover {