(feat) New Footer.
This commit is contained in:
Gabriel Rodríguez Alsina
parent
b1d0e7d60f
commit
27ee4ad781
|
|
@ -4,21 +4,9 @@
|
|||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="theme-color" content="#000000">
|
||||
<!--
|
||||
manifest.json provides metadata used when your web app is added to the
|
||||
homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
|
||||
-->
|
||||
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
|
||||
<link rel="shortcut icon" href="%PUBLIC_URL%/favicons/favicon.ico">
|
||||
<!--
|
||||
Notice the use of %PUBLIC_URL% in the tags above.
|
||||
It will be replaced with the URL of the `public` folder during the build.
|
||||
Only files inside the `public` folder can be referenced from the HTML.
|
||||
|
||||
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
|
||||
work correctly both with client-side routing and a non-root public URL.
|
||||
Learn how to configure a non-root public URL by running `npm run build`.
|
||||
-->
|
||||
<link href="https://fonts.googleapis.com/css?family=Nunito:300,400,700" rel="stylesheet">
|
||||
<title>POA Network Governance DApp</title>
|
||||
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD97qDOBYZ2fH86Wq1vzhDOiSUsZGVqbVQ&libraries=places"></script>
|
||||
</head>
|
||||
|
|
@ -27,15 +15,5 @@
|
|||
You need to enable JavaScript to run this app.
|
||||
</noscript>
|
||||
<div id="root"></div>
|
||||
<!--
|
||||
This HTML file is a template.
|
||||
If you open it directly in the browser, you will see an empty page.
|
||||
|
||||
You can add webfonts, meta tags, or analytics to this file.
|
||||
The build step will place the bundled scripts into the <body> tag.
|
||||
|
||||
To begin the development, run `npm start` or `yarn start`.
|
||||
To create a production bundle, use `npm run build` or `yarn build`.
|
||||
-->
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"short_name": "React App",
|
||||
"name": "Create React App Sample",
|
||||
"short_name": "Governance",
|
||||
"name": "Governance DApp",
|
||||
"icons": [
|
||||
{
|
||||
"src": "favicon.ico",
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -1,28 +1,29 @@
|
|||
@import 'stylesheets/vars';
|
||||
@import 'stylesheets/mixins';
|
||||
@import 'stylesheets/placeholders';
|
||||
@import 'stylesheets/helpers/vars';
|
||||
@import 'stylesheets/helpers/mixins';
|
||||
@import 'stylesheets/helpers/placeholders';
|
||||
|
||||
@import 'stylesheets/fonts';
|
||||
@import 'stylesheets/base';
|
||||
@import 'stylesheets/controls';
|
||||
@import 'stylesheets/footer';
|
||||
@import 'stylesheets/header';
|
||||
@import 'stylesheets/info';
|
||||
@import 'stylesheets/loading';
|
||||
@import 'stylesheets/nav';
|
||||
@import 'stylesheets/new';
|
||||
@import 'stylesheets/search';
|
||||
@import 'stylesheets/settings';
|
||||
@import 'stylesheets/socials';
|
||||
@import 'stylesheets/vote-scale';
|
||||
@import 'stylesheets/ballot-types';
|
||||
@import 'stylesheets/ballots/placeholders';
|
||||
@import 'stylesheets/ballots/base';
|
||||
@import 'stylesheets/ballots/about';
|
||||
@import 'stylesheets/ballots/footer';
|
||||
@import 'stylesheets/select/select';
|
||||
@import 'stylesheets/select/control';
|
||||
@import 'stylesheets/select/menu';
|
||||
@import 'stylesheets/select/mixins';
|
||||
@import 'stylesheets/select/multi';
|
||||
@import 'stylesheets/select/spinner';
|
||||
@import 'stylesheets/application/base';
|
||||
@import 'stylesheets/application/controls';
|
||||
@import 'stylesheets/application/footer';
|
||||
@import 'stylesheets/application/header';
|
||||
@import 'stylesheets/application/info';
|
||||
@import 'stylesheets/application/loading';
|
||||
@import 'stylesheets/application/nav';
|
||||
@import 'stylesheets/application/new';
|
||||
@import 'stylesheets/application/search';
|
||||
@import 'stylesheets/application/settings';
|
||||
@import 'stylesheets/application/socials';
|
||||
@import 'stylesheets/application/vote-scale';
|
||||
|
||||
@import 'stylesheets/application/select/select';
|
||||
@import 'stylesheets/application/select/control';
|
||||
@import 'stylesheets/application/select/menu';
|
||||
@import 'stylesheets/application/select/mixins';
|
||||
@import 'stylesheets/application/select/multi';
|
||||
@import 'stylesheets/application/select/spinner';
|
||||
|
||||
@import 'stylesheets/application/ballot-types';
|
||||
@import 'stylesheets/application/ballots/placeholders';
|
||||
@import 'stylesheets/application/ballots/base';
|
||||
@import 'stylesheets/application/ballots/about';
|
||||
@import 'stylesheets/application/ballots/footer';
|
||||
|
|
|
|||
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 214.64 31"><title>logo-loader</title><g style="isolation:isolate"><path d="M123.06,33.95a1,1,0,0,1-.31-0.74v-17a1.14,1.14,0,0,1,.29-0.82,1.2,1.2,0,0,1,1.61,0,1.15,1.15,0,0,1,.29.82v16.1h8.65a1.07,1.07,0,0,1,.75.24,1,1,0,0,1,0,1.4,1.08,1.08,0,0,1-.75.24h-9.78A1.09,1.09,0,0,1,123.06,33.95Z" transform="translate(0 -10)" fill="#fff"/><path d="M139,33.58a5.55,5.55,0,0,1-2.17-2.38,8,8,0,0,1-.76-3.59,8,8,0,0,1,.76-3.59A5.54,5.54,0,0,1,139,21.63a6.25,6.25,0,0,1,3.25-.83,6.34,6.34,0,0,1,3.27.83A5.53,5.53,0,0,1,147.74,24a8,8,0,0,1,.76,3.59,8,8,0,0,1-.76,3.59,5.54,5.54,0,0,1-2.18,2.38,6.34,6.34,0,0,1-3.27.83A6.26,6.26,0,0,1,139,33.58Zm6.21-2.25a5.83,5.83,0,0,0,1-3.73,5.79,5.79,0,0,0-1-3.7,4,4,0,0,0-5.89,0,5.8,5.8,0,0,0-1,3.7,5.84,5.84,0,0,0,1,3.72A4.05,4.05,0,0,0,145.25,31.34Z" transform="translate(0 -10)" fill="#fff"/><path d="M162,26v7.32a1.09,1.09,0,0,1-.28.78,1,1,0,0,1-.76.3,1,1,0,0,1-1.07-1.08V32a3.85,3.85,0,0,1-1.55,1.79,4.56,4.56,0,0,1-2.41.63,5.26,5.26,0,0,1-2.32-.51,4.14,4.14,0,0,1-1.67-1.43,3.54,3.54,0,0,1-.62-2,3.29,3.29,0,0,1,.75-2.3A4.54,4.54,0,0,1,154.5,27a24.24,24.24,0,0,1,4.77-.36h0.59V25.72a3.55,3.55,0,0,0-.66-2.37,2.69,2.69,0,0,0-2.13-.75,7.84,7.84,0,0,0-3.7,1,2.44,2.44,0,0,1-1,.46,0.69,0.69,0,0,1-.54-0.24,0.9,0.9,0,0,1-.21-0.62,1,1,0,0,1,.23-0.66,2.67,2.67,0,0,1,.74-0.58,8.61,8.61,0,0,1,2.13-.85,9.4,9.4,0,0,1,2.37-.31Q162,20.79,162,26Zm-3.15,5.64a3.93,3.93,0,0,0,1-2.81V28h-0.48a23.82,23.82,0,0,0-3.59.2,3.47,3.47,0,0,0-1.75.67,1.77,1.77,0,0,0-.52,1.39,2.23,2.23,0,0,0,.76,1.74,2.76,2.76,0,0,0,1.92.69A3.47,3.47,0,0,0,158.83,31.6Z" transform="translate(0 -10)" fill="#fff"/><path d="M177.22,15.41a1,1,0,0,1,.29.75V33.29a1.06,1.06,0,0,1-.29.78,1.08,1.08,0,0,1-.8.3,1,1,0,0,1-.79-0.3,1.09,1.09,0,0,1-.28-0.78V31.83a4.32,4.32,0,0,1-1.73,1.91,5.14,5.14,0,0,1-2.67.67,5.39,5.39,0,0,1-3-.86,5.67,5.67,0,0,1-2-2.41,8.41,8.41,0,0,1-.72-3.59,8.26,8.26,0,0,1,.72-3.55,5.37,5.37,0,0,1,5.06-3.2,5.14,5.14,0,0,1,2.67.67,4.32,4.32,0,0,1,1.73,1.91V16.16a1,1,0,0,1,.28-0.77,1.07,1.07,0,0,1,.79-0.28A1.08,1.08,0,0,1,177.22,15.41Zm-2.91,15.9a5.85,5.85,0,0,0,1-3.7,5.79,5.79,0,0,0-1-3.69,3.54,3.54,0,0,0-2.93-1.29,3.61,3.61,0,0,0-3,1.29,5.59,5.59,0,0,0-1.06,3.63,5.85,5.85,0,0,0,1.06,3.73,3.57,3.57,0,0,0,3,1.33A3.52,3.52,0,0,0,174.31,31.31Z" transform="translate(0 -10)" fill="#fff"/><path d="M181.59,17.65a1.3,1.3,0,0,1-.4-1,1.27,1.27,0,0,1,.4-1,1.64,1.64,0,0,1,2.09,0,1.27,1.27,0,0,1,.4,1,1.3,1.3,0,0,1-.4,1A1.64,1.64,0,0,1,181.59,17.65Zm0.25,16.44a1,1,0,0,1-.31-0.79V21.93a1,1,0,0,1,.31-0.79,1.12,1.12,0,0,1,.79-0.28,1.08,1.08,0,0,1,.78.28,1.05,1.05,0,0,1,.29.79V33.29a1,1,0,0,1-.29.81,1.11,1.11,0,0,1-.78.27A1.13,1.13,0,0,1,181.84,34.08Z" transform="translate(0 -10)" fill="#fff"/><path d="M199,26v7.3a1,1,0,0,1-1.07,1.08,1.12,1.12,0,0,1-.8-0.28,1.05,1.05,0,0,1-.29-0.79V26.13a4.08,4.08,0,0,0-.71-2.66,2.82,2.82,0,0,0-2.26-.83,3.81,3.81,0,0,0-2.87,1.1,4.11,4.11,0,0,0-1.07,3v6.57a1,1,0,0,1-1.07,1.08,1.12,1.12,0,0,1-.8-0.28,1.05,1.05,0,0,1-.29-0.79V21.93a1.06,1.06,0,0,1,.29-0.78,1.08,1.08,0,0,1,.8-0.3,1,1,0,0,1,.76.3,1.05,1.05,0,0,1,.28.75v1.37a4.41,4.41,0,0,1,1.79-1.84,5.36,5.36,0,0,1,2.63-.63Q199,20.79,199,26Z" transform="translate(0 -10)" fill="#fff"/><path d="M214.35,21.15a1.06,1.06,0,0,1,.29.78V33.34a6,6,0,0,1-1.5,4.43,6,6,0,0,1-4.45,1.49,9.2,9.2,0,0,1-4.77-1.13,1.51,1.51,0,0,1-1-1.24,0.94,0.94,0,0,1,.2-0.62,0.65,0.65,0,0,1,.52-0.24,2.58,2.58,0,0,1,1,.38,12.4,12.4,0,0,0,1.85.78,7.06,7.06,0,0,0,2.17.3,3.79,3.79,0,0,0,2.87-1,4.11,4.11,0,0,0,1-2.95V31.21a4.09,4.09,0,0,1-1.73,1.94,5.39,5.39,0,0,1-2.75.67,5.73,5.73,0,0,1-3-.81,5.46,5.46,0,0,1-2.06-2.29,7.58,7.58,0,0,1-.74-3.42,7.58,7.58,0,0,1,.74-3.42A5.46,5.46,0,0,1,205,21.6a5.73,5.73,0,0,1,3-.81,5.27,5.27,0,0,1,2.71.67,4.3,4.3,0,0,1,1.74,1.91V21.93a1.09,1.09,0,0,1,.28-0.78,1,1,0,0,1,.79-0.3A1.08,1.08,0,0,1,214.35,21.15Zm-2.95,9.62a5.15,5.15,0,0,0,1.07-3.46,5.15,5.15,0,0,0-1.06-3.43,3.66,3.66,0,0,0-3-1.25,3.75,3.75,0,0,0-3,1.25,5.07,5.07,0,0,0-1.08,3.43,5.11,5.11,0,0,0,1.08,3.46,3.74,3.74,0,0,0,3,1.25A3.67,3.67,0,0,0,211.4,30.77Z" transform="translate(0 -10)" fill="#fff"/></g><path d="M17.38,34.81H15.81v4.63h0A1.57,1.57,0,0,1,14.22,41H1.59A1.57,1.57,0,0,1,0,39.45H0V11.56H0v0A1.57,1.57,0,0,1,1.59,10H17.38A12.52,12.52,0,0,1,30,22.41,12.52,12.52,0,0,1,17.38,34.81ZM48.5,10A15.5,15.5,0,1,1,33,25.5,15.5,15.5,0,0,1,48.5,10ZM99,40a1,1,0,0,1-1,1H62.94a0.94,0.94,0,0,1-.74-1.51l0,0L79.54,10.77h0a0.93,0.93,0,0,1,1.83,0h0L99,39.65l-0.06.08A0.93,0.93,0,0,1,99,40Z" transform="translate(0 -10)" fill="#fff"/></svg>
|
||||
|
After Width: | Height: | Size: 4.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 439 B |
Binary file not shown.
|
After Width: | Height: | Size: 850 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 294 B |
Binary file not shown.
|
After Width: | Height: | Size: 468 B |
Binary file not shown.
|
After Width: | Height: | Size: 291 B |
Binary file not shown.
|
After Width: | Height: | Size: 461 B |
Binary file not shown.
|
Before Width: | Height: | Size: 1.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 372 B |
Binary file not shown.
|
After Width: | Height: | Size: 690 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.4 KiB After Width: | Height: | Size: 1.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 356 B |
Binary file not shown.
|
After Width: | Height: | Size: 655 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.3 KiB |
|
|
@ -1,10 +0,0 @@
|
|||
$container-width: 960px;
|
||||
$tablet-width: 768px;
|
||||
$mobile-width: 414px;
|
||||
$footer-height: 60px;
|
||||
|
||||
$desktop-indent: 30px;
|
||||
$tablet-indent: 20px;
|
||||
$mobile-indent: 15px;
|
||||
|
||||
$input-height: 40px;
|
||||
|
|
@ -1,47 +1,43 @@
|
|||
html,
|
||||
body {
|
||||
body,
|
||||
p, h1, h2, h3 {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
html {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
p, h1, h2, h3, h4 {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: 'Open Sans', sans-serif;
|
||||
display: flex;
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
-webkit-font-smoothing: antialiased;
|
||||
background-color: #ffffff;
|
||||
box-sizing: border-box;
|
||||
color: #333;
|
||||
font-family: 'Nunito', sans-serif;
|
||||
font-size: 14px;
|
||||
padding-bottom: $footer-height_desktop;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
min-height: 100%;
|
||||
box-sizing: border-box;
|
||||
padding-bottom: $footer-height + 10px;
|
||||
background-color: #f4f9ff;
|
||||
|
||||
@media screen and (max-width: $tablet-width) {
|
||||
padding-bottom: $footer-height_mobile;
|
||||
}
|
||||
@media screen and (max-width: $mobile-width) {
|
||||
padding-bottom: $footer-height + 30px;
|
||||
padding-bottom: $footer-height_mobile;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
color: #08b3f2;
|
||||
color: $primary-color;
|
||||
text-decoration: none;
|
||||
font-size: 14px;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
color: #444;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
hr {
|
||||
display: block;
|
||||
width: 100%;
|
||||
|
|
@ -0,0 +1,58 @@
|
|||
.footer {
|
||||
@extend %full-width;
|
||||
|
||||
background-color: $primary-color;
|
||||
bottom: 0;
|
||||
padding: 18px 0;
|
||||
position: absolute;
|
||||
|
||||
&.sokol {
|
||||
background-color: $secondary-color;
|
||||
}
|
||||
|
||||
.container {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
|
||||
@media screen and (max-width: $tablet-width) {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
.socials {
|
||||
order: 2;
|
||||
|
||||
@media screen and (max-width: $tablet-width) {
|
||||
margin-top: 15px;
|
||||
order: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&-logo {
|
||||
@include image-2x('#{ $base-images-path}/logos/logo_validators_dapp_footer@2x.png');
|
||||
background-image: url('#{ $base-images-path}/logos/logo_validators_dapp_footer.png');
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
display: block;
|
||||
height: 20px;
|
||||
left: 0;
|
||||
order: 0;
|
||||
width: 123px;
|
||||
}
|
||||
|
||||
&-rights {
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
order: 1;
|
||||
text-align: center;
|
||||
|
||||
@media screen and (max-width: $tablet-width) {
|
||||
line-height: normal;
|
||||
margin-top: 15px;
|
||||
order: 2;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,181 @@
|
|||
.socials {
|
||||
&-item {
|
||||
&:not(:first-child) {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
&-i {
|
||||
background-color: #ffffff;
|
||||
border-radius: 3px;
|
||||
display: inline-block;
|
||||
font-size: 0;
|
||||
height: 30px;
|
||||
position: relative;
|
||||
transition: 0.3s background-color;
|
||||
vertical-align: top;
|
||||
width: 30px;
|
||||
|
||||
&:not(:first-child) {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: fade-out(#fff, 0.6);
|
||||
}
|
||||
|
||||
&:before {
|
||||
background-position: 50% 50%;
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
content: '';
|
||||
height: 16px;
|
||||
left: 50%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 16px;
|
||||
}
|
||||
|
||||
&_github {
|
||||
&:before {
|
||||
@include image-2x('#{ $base-images-path }/socials/git@2x.png');
|
||||
background-image: url('#{ $base-images-path }/socials/git.png');
|
||||
}
|
||||
}
|
||||
|
||||
&_telegram {
|
||||
&:before {
|
||||
@include image-2x('#{ $base-images-path }/socials/telegram@2x.png');
|
||||
background-image: url('#{ $base-images-path }/socials/telegram.png');
|
||||
}
|
||||
}
|
||||
|
||||
&_twitter {
|
||||
&:before {
|
||||
@include image-2x('#{ $base-images-path }/socials/tw@2x.png');
|
||||
background-image: url('#{ $base-images-path }/socials/tw.png');
|
||||
}
|
||||
}
|
||||
|
||||
&_poa {
|
||||
&:before {
|
||||
@include image-2x('#{ $base-images-path }/socials/poa@2x.png');
|
||||
background-image: url('#{ $base-images-path }/socials/poa.png');
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.sokol {
|
||||
.socials {
|
||||
|
||||
.socials-i_github {
|
||||
&:before {
|
||||
@include image-2x('#{ $base-images-path }/socials/git-sokol@2x.png');
|
||||
background-image: url('#{ $base-images-path }/socials/git-sokol.png');
|
||||
}
|
||||
}
|
||||
|
||||
.socials-i_telegram {
|
||||
&:before {
|
||||
@include image-2x('#{ $base-images-path }/socials/telegram-sokol@2x.png');
|
||||
background-image: url('#{ $base-images-path }/socials/telegram-sokol.png');
|
||||
}
|
||||
}
|
||||
|
||||
.socials-i_twitter {
|
||||
&:before {
|
||||
@include image-2x('#{ $base-images-path }/socials/tw-sokol@2x.png');
|
||||
background-image: url('#{ $base-images-path }/socials/tw-sokol.png');
|
||||
}
|
||||
}
|
||||
|
||||
.socials-i_poa {
|
||||
&:before {
|
||||
@include image-2x('#{ $base-images-path }/socials/poa-sokol@2x.png');
|
||||
background-image: url('#{ $base-images-path }/socials/poa-sokol.png');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// .socials {
|
||||
// font-size: 0;
|
||||
|
||||
// .footer & {
|
||||
// right: 0;
|
||||
// }
|
||||
|
||||
// &-i {
|
||||
// transition: 0.3s background-color;
|
||||
// position: relative;
|
||||
// display: inline-block;
|
||||
// vertical-align: top;
|
||||
// width: 30px;
|
||||
// height: 30px;
|
||||
// border-radius: 50%;
|
||||
// background-color: fade-out(#fff, 0.8);
|
||||
|
||||
// &:not(:first-child) {
|
||||
// margin-left: 10px;
|
||||
// }
|
||||
|
||||
// &:hover {
|
||||
// background-color: fade-out(#fff, 0.6);
|
||||
// }
|
||||
|
||||
// &:before {
|
||||
// @include image-2x('./images/socials@2x.png', 16px, 69px);
|
||||
// transform: translate(-50%, -50%);
|
||||
// content: '';
|
||||
// position: absolute;
|
||||
// left: 50%;
|
||||
// top: 50%;
|
||||
// background-image: url(./images/socials.png);
|
||||
// }
|
||||
|
||||
// &_github {
|
||||
// &:before {
|
||||
// width: 16px;
|
||||
// height: 16px;
|
||||
// background-position: 0 0;
|
||||
// }
|
||||
// }
|
||||
|
||||
// &_oracles {
|
||||
// &:before {
|
||||
// width: 16px;
|
||||
// height: 14px;
|
||||
// background-position: 0 -16px;
|
||||
// }
|
||||
// }
|
||||
|
||||
// &_reddit {
|
||||
// &:before {
|
||||
// width: 15px;
|
||||
// height: 13px;
|
||||
// background-position: 0 -30px;
|
||||
// }
|
||||
// }
|
||||
|
||||
// &_telegram {
|
||||
// &:before {
|
||||
// width: 16px;
|
||||
// height: 14px;
|
||||
// background-position: 0 -43px;
|
||||
// }
|
||||
// }
|
||||
|
||||
// &_twitter {
|
||||
// &:before {
|
||||
// width: 15px;
|
||||
// height: 12px;
|
||||
// background-position: 0 -57px;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
|
@ -1,32 +0,0 @@
|
|||
@font-face {
|
||||
font-family: 'Open Sans';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: local('Open Sans'), local('OpenSans'), url(https://fonts.gstatic.com/s/opensans/v13/cJZKeOuBrn4kERxqtaUH3ZBw1xU1rKptJj_0jans920.woff2) format('woff2');
|
||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Open Sans';
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
src: local('Open Sans SemiBold'), local('OpenSans-SemiBold'), url(https://fonts.gstatic.com/s/opensans/v14/MTP_ySUJH_bn48VBG8sNShampu5_7CjHW5spxoeN3Vs.woff2) format('woff2');
|
||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Open Sans';
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
src: local('Open Sans Bold'), local('OpenSans-Bold'), url(https://fonts.gstatic.com/s/opensans/v13/k3k702ZOKiLJc3WVjuplzBampu5_7CjHW5spxoeN3Vs.woff2) format('woff2');
|
||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
color: #444;
|
||||
line-height: 1;
|
||||
font-size: 14px;
|
||||
font-family: 'Open Sans', sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
|
@ -1,57 +0,0 @@
|
|||
.footer {
|
||||
@extend %full-width;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
height: $footer-height;
|
||||
background-color: #6d2eae;
|
||||
|
||||
@media screen and (max-width: $mobile-width) {
|
||||
height: auto;
|
||||
padding: 20px 10px 0;
|
||||
}
|
||||
|
||||
|
||||
&.sokol {
|
||||
background-color: #6ac9b9;
|
||||
}
|
||||
|
||||
.container {
|
||||
position: relative;
|
||||
|
||||
@media screen and (max-width: $mobile-width) {
|
||||
padding-top: $footer-height - 20;
|
||||
}
|
||||
}
|
||||
|
||||
&-logo,
|
||||
.socials {
|
||||
transform: translateY(-50%);
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
top: 50%;
|
||||
|
||||
@media screen and (max-width: $mobile-width) {
|
||||
transform: translateY(0);
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&-logo {
|
||||
@extend %logos;
|
||||
left: 0;
|
||||
width: 127px;
|
||||
height: 24px;
|
||||
background-position: 0 0
|
||||
}
|
||||
|
||||
&-rights {
|
||||
color: #fff;
|
||||
line-height: $footer-height;
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
|
||||
@media screen and (max-width: $mobile-width) {
|
||||
line-height: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
$base-images-path: '../assets/images';
|
||||
|
||||
// colors
|
||||
$primary-color: #5c34a2;
|
||||
$primary-color-darker: #45277a;
|
||||
$secondary-color: #6ac9b9;
|
||||
$secondary-color-darker: darken(#6ac9b9, 10%);
|
||||
|
||||
// borders
|
||||
$base-border-color: #b8c1cb;
|
||||
|
||||
// widths
|
||||
$container-width: 960px;
|
||||
$container-responsive-width: 980px;
|
||||
$tablet-width: 768px;
|
||||
$mobile-width: 414px;
|
||||
$small-mobile-width: 360px;
|
||||
|
||||
// header
|
||||
$header-links-container-height: 70px;
|
||||
$header-height_mobile: 70px;
|
||||
|
||||
// mobile menu
|
||||
$header-mobile-menu-container-height: 172px;
|
||||
|
||||
// footer
|
||||
$footer-height_desktop: 66px;
|
||||
$footer-height_mobile: 132px;
|
||||
|
||||
// misc
|
||||
$desktop-indent: 30px;
|
||||
$tablet-indent: 20px;
|
||||
$mobile-indent: 15px;
|
||||
|
||||
// forms
|
||||
$input-height: 40px;
|
||||
$input-color: #202d3c;
|
||||
|
||||
$footer-height: 60px;
|
||||
|
|
@ -1,76 +0,0 @@
|
|||
.socials {
|
||||
font-size: 0;
|
||||
|
||||
.footer & {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
&-i {
|
||||
transition: 0.3s background-color;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border-radius: 50%;
|
||||
background-color: fade-out(#fff, 0.8);
|
||||
|
||||
&:not(:first-child) {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: fade-out(#fff, 0.6);
|
||||
}
|
||||
|
||||
&:before {
|
||||
@include image-2x('./images/socials@2x.png', 16px, 69px);
|
||||
transform: translate(-50%, -50%);
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
background-image: url(./images/socials.png);
|
||||
}
|
||||
|
||||
&_github {
|
||||
&:before {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
background-position: 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
&_oracles {
|
||||
&:before {
|
||||
width: 16px;
|
||||
height: 14px;
|
||||
background-position: 0 -16px;
|
||||
}
|
||||
}
|
||||
|
||||
&_reddit {
|
||||
&:before {
|
||||
width: 15px;
|
||||
height: 13px;
|
||||
background-position: 0 -30px;
|
||||
}
|
||||
}
|
||||
|
||||
&_telegram {
|
||||
&:before {
|
||||
width: 16px;
|
||||
height: 14px;
|
||||
background-position: 0 -43px;
|
||||
}
|
||||
}
|
||||
|
||||
&_twitter {
|
||||
&:before {
|
||||
width: 15px;
|
||||
height: 12px;
|
||||
background-position: 0 -57px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,21 +1,19 @@
|
|||
import React from "react";
|
||||
import moment from "moment";
|
||||
import { Link } from "react-router-dom";
|
||||
import Socials from './Socials';
|
||||
|
||||
export const Footer = ({ netId }) => {
|
||||
|
||||
const footerClassName = netId === "77" ? "sokol" : "";
|
||||
|
||||
export const Footer = ({netId}) => {
|
||||
const footerClassName = netId === '77' ? 'sokol' : '';
|
||||
return (
|
||||
<footer className={`footer ${footerClassName}`}>
|
||||
<footer className={`footer ${ footerClassName }`}>
|
||||
<div className="container">
|
||||
<p className="footer-rights">{moment().format("YYYY")} POA Network. All rights reserved.</p>
|
||||
<Link to="/poa-dapps-voting" className="footer-logo"></Link>
|
||||
<div className="socials">
|
||||
<a href="https://twitter.com/poanetwork" className="socials-i socials-i_twitter"></a>
|
||||
<a href="https://poa.network" className="socials-i socials-i_oracles"></a>
|
||||
<a href="https://t.me/oraclesnetwork" className="socials-i socials-i_telegram"></a>
|
||||
<a href="https://github.com/poanetwork/" className="socials-i socials-i_github"></a>
|
||||
</div>
|
||||
<Link to="/poa-dapps-voting" className="footer-logo" />
|
||||
<p className="footer-rights">{ moment().format("YYYY") } POA Network. All rights reserved.</p>
|
||||
<Socials />
|
||||
</div>
|
||||
</footer>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,16 +1,18 @@
|
|||
import React from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import React from "react";
|
||||
import { Link } from "react-router-dom";
|
||||
|
||||
export const Header = ({netId}) => {
|
||||
let headerClassName = netId === '77' ? 'sokol' : '';
|
||||
const logoClassName = netId === '77' ? 'header-logo-sokol' : 'header-logo';
|
||||
return(
|
||||
<header className={`header ${headerClassName}`}>
|
||||
<div className="container">
|
||||
<Link to="/poa-dapps-voting" className={logoClassName}></Link>
|
||||
<Link to="/poa-dapps-voting/new" className="header-new-ballot">New ballot</Link>
|
||||
{/*<Link to="/poa-dapps-voting/settings" className="header-settings">Settings</Link>*/}
|
||||
</div>
|
||||
</header>
|
||||
)
|
||||
export const Header = ({ netId }) => {
|
||||
let headerClassName = netId === "77" ? "sokol" : "";
|
||||
const logoClassName = netId === "77" ? "header-logo-sokol" : "header-logo";
|
||||
return (
|
||||
<header className={`header ${headerClassName}`}>
|
||||
<div className="container">
|
||||
<Link to="/poa-dapps-voting" className={logoClassName} />
|
||||
<Link to="/poa-dapps-voting/new" className="header-new-ballot">
|
||||
New ballot
|
||||
</Link>
|
||||
{/*<Link to="/poa-dapps-voting/settings" className="header-settings">Settings</Link>*/}
|
||||
</div>
|
||||
</header>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -0,0 +1,40 @@
|
|||
import React from 'react';
|
||||
|
||||
let Socials = () => {
|
||||
|
||||
const socialItems = [
|
||||
{
|
||||
'icon': 'socials-i_twitter',
|
||||
'title': 'Twitter',
|
||||
'url': 'https://twitter.com/poanetwork'
|
||||
},
|
||||
{
|
||||
'icon': 'socials-i_poa',
|
||||
'title': 'POA Network',
|
||||
'url': 'https://poa.network'
|
||||
},
|
||||
{
|
||||
'icon': 'socials-i_telegram',
|
||||
'title': 'Telegram',
|
||||
'url': 'https://t.me/oraclesnetwork'
|
||||
},
|
||||
{
|
||||
'icon': 'socials-i_github',
|
||||
'title': 'GitHub',
|
||||
'url': 'https://github.com/poanetwork/'
|
||||
}];
|
||||
|
||||
return (
|
||||
<div className="socials">
|
||||
{socialItems.map((item, index) =>
|
||||
<a
|
||||
className={`socials-i ${ item.icon }`}
|
||||
key={ index }
|
||||
href={ item.url }
|
||||
>{ item.title }</a>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Socials;
|
||||
Loading…
Reference in New Issue