Commit 685b058f authored by Anush's avatar Anush

Added Techstream Demo styles

parent 45d5cbd0
Pipeline #31243784 failed with stages
in 9 minutes and 17 seconds
......@@ -3657,6 +3657,11 @@
"strip-eof": "^1.0.0"
}
},
"exenv": {
"version": "1.2.2",
"resolved": "https://registry.npmjs.org/exenv/-/exenv-1.2.2.tgz",
"integrity": "sha1-KueOhdmJQVhnCwPUe+wfA72Ru50="
},
"expand-brackets": {
"version": "0.1.5",
"resolved": "https://registry.npmjs.org/expand-brackets/-/expand-brackets-0.1.5.tgz",
......@@ -8722,6 +8727,17 @@
"resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-4.0.1.tgz",
"integrity": "sha512-xXUbDAZkU08aAkjtUvldqbvI04ogv+a1XdHxvYuHPYKIVk/42BIOD0zSKTHAWV4+gDy3yGm283z2072rA2gdtw=="
},
"react-helmet": {
"version": "5.2.0",
"resolved": "https://registry.npmjs.org/react-helmet/-/react-helmet-5.2.0.tgz",
"integrity": "sha1-qBgR3yExOm1VxfBYxK66XW89l6c=",
"requires": {
"deep-equal": "^1.0.1",
"object-assign": "^4.1.1",
"prop-types": "^15.5.4",
"react-side-effect": "^1.1.0"
}
},
"react-scripts": {
"version": "1.1.5",
"resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-1.1.5.tgz",
......@@ -8768,6 +8784,15 @@
"whatwg-fetch": "2.0.3"
}
},
"react-side-effect": {
"version": "1.1.5",
"resolved": "https://registry.npmjs.org/react-side-effect/-/react-side-effect-1.1.5.tgz",
"integrity": "sha512-Z2ZJE4p/jIfvUpiUMRydEVpQRf2f8GMHczT6qLcARmX7QRb28JDBTpnM2g/i5y/p7ZDEXYGHWg0RbhikE+hJRw==",
"requires": {
"exenv": "^1.2.1",
"shallowequal": "^1.0.1"
}
},
"react-snap": {
"version": "1.19.0",
"resolved": "https://registry.npmjs.org/react-snap/-/react-snap-1.19.0.tgz",
......@@ -9650,6 +9675,11 @@
"safe-buffer": "^5.0.1"
}
},
"shallowequal": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz",
"integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ=="
},
"shebang-command": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-1.2.0.tgz",
......
......@@ -5,6 +5,7 @@
"dependencies": {
"react": "^16.5.2",
"react-dom": "^16.5.2",
"react-helmet": "^5.2.0",
"react-scripts": "1.1.5"
},
"scripts": {
......
This source diff could not be displayed because it is too large. You can view the blob instead.
.row {
max-width: 75.5rem;
}
/* Genearal Styles */
.inline-list li:first-child {
margin-left: 0 !important;
}
.nostyle-list {
list-style: none;
margin: 0 !important;
}
/* Styles */
.center-element-container {
position: relative;
}
.center-element {
margin-top: 0px;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
[data-abide] small.error, .error2{
background-color: transparent;
color: rgb(240, 65, 36);
font-size: 0.7rem !important;
margin: 0px !important;
padding: 0px;
position: absolute;
bottom: -0.1rem;
}
/* Genearal Styles */
a {
color: rgb(85, 172, 238);
text-decoration: none;
}
a:hover {
color: rgb(67, 153, 249);
}
a:visited {
text-decoration: underline !important;
}
/* Pre code */
pre code, .hljs{
background: rgba(0, 0, 0, 0.05);
border: none;
display:block;
margin-bottom: 1.25rem;
white-space: pre-wrap;
}
code {
overflow: auto;
}
body{
font-family: "Merriweather Sans";
font-weight: 100;
}
/* Font decleration */
h1, h2, h3, h4, h5, h6 {
color: rgba(0,0,0,0.8);
font-family: "Merriweather Sans";
font-weight: bold;
letter-spacing: -1px;
line-height: 1;
text-transform: capitalize;
}
h1.post-title{
font-size: 3.25rem;
}
.section-heading-container{
padding-top: 15px;
margin-bottom: 10px;
}
a.section-heading{
color: rgba(0,0,0,0.6);
}
.section-heading {
border-top: 1px solid rgba(0, 0, 0, 0.44);
font-size: 0.8rem;
letter-spacing: 0.1em;
margin-top: -16px;
padding-top: 16px;
text-transform: uppercase;
}
p{
font-family: "Merriweather";
font-size: 0.9rem;
line-height: 1.6em;
color: rgba(0,0,0,0.8);
font-weight: 100;
}
/* === End of styles */
/* == Ads == */
.ads{
min-height: 100px;
width: 100%;
}
/* Utlity Classes */
.block {
display: block;
}
.inline {
display: inline-block !important;
}
.opaque {
opacity: 1;
}
.nospace, .nospace-top {
margin-top: 0 !important;
}
.nospace, .nospace-bottom {
margin-bottom: 0 !important;
}
.nospace, .nospace-right {
margin-right: 0 !important;
}
.nospace, .nospace-left {
margin-left: 0 !important;
}
.padd-0, .padd-0-right {
padding-right: 0 !important;
}
.padd-0, .padd-0-left {
padding-left: 0 !important;
}
.padd-0, .padd-0-top {
padding-top: 0 !important;
}
.padd-0, .padd-0-bottom {
padding-bottom: 0 !important;
}
.padd-1, .padd-1-right {
padding-right: 0.5em !important;
}
.padd-1, .padd-1-left {
padding-left: 0.5em !important;
}
.padd-1, .padd-1-top {
padding-top: 0.5em !important;
}
.padd-1, .padd-1-bottom {
padding-bottom: 0.5em !important;
}
.padd-2, .padd-2-right {
padding-right: 1em !important;
}
.padd-2, .padd-2-left {
padding-left: 1em !important;
}
.padd-2, .padd-2-top {
padding-top: 1em !important;
}
.padd-2, .padd-2-bottom {
padding-bottom: 1em !important;
}
.padd-3, .padd-3-right {
padding-right: 1.5em !important;
}
.padd-3, .padd-3-left {
padding-left: 1.5em !important;
}
.padd-3, .padd-3-top {
padding-top: 1.5em !important;
}
.padd-3, .padd-3-bottom {
padding-bottom: 1.5em !important;
}
.padd-4, .padd-4-right {
padding-right: 2em !important;
}
.padd-4, .padd-4-left {
padding-left: 2em !important;
}
.padd-4, .padd-4-top {
padding-top: 2em !important;
}
.padd-4, .padd-4-bottom {
padding-bottom: 2em !important;
}
.push-2, .push-2-right {
margin-right: 1em !important;
}
.push-2, .push-2-left {
margin-left: 1em !important;
}
.push-2, .push-2-top {
margin-top: 1em !important;
}
.push-2, .push-2-bottom {
margin-bottom: 1em !important;
}
.push-3, .push-3-right {
margin-right: 1.5em !important;
}
.push-3, .push-3-left {
margin-left: 1.5em !important;
}
.push-3, .push-3-top {
margin-top: 1.5em !important;
}
.push-3, .push-3-bottom {
margin-bottom: 1.5em !important;
}
.push-4, .push-4-right {
margin-right: 2em !important;
}
.push-4, .push-4-left {
margin-left: 2em !important;
}
.push-4, .push-4-top {
margin-top: 2em !important;
}
.push-4, .push-4-bottom {
margin-bottom: 2em !important;
}
/* Border */
.border {
border-color: rgb(221, 221, 221) !important;
}
.bt {
border-top: 1px solid;
}
.br {
border-right: 1px solid;
}
.bb {
border-bottom: 1px solid;
}
.bl {
border-left: 1px solid;
}
/* Button */
.button {
background-color: rgb(85, 172, 238);
border: 1px solid;
border-color: rgba(0, 0, 0, 0.1);
color:
display: inline-block;
font-family: "Merriweather Sans",Helvetica,Roboto,Arial,sans-serif;
font-size: 0.9rem;
font-weight: 100;
letter-spacing: -0.02em;
line-height: normal;
margin: 0px 0px 1.25rem;
padding: 0.5rem 2rem 0.5625rem;
position: relative;
text-align: center;
text-decoration: none;
text-rendering: optimizelegibility;
transition: background-color 300ms ease-out 0s;
-moz-appearance: none;
}
.button:hover {
background-color: rgb(67, 153, 249);
border-color: rgba(0, 0, 0, 0.2);
}
.button.transparent {
background-color: transparent;
border-color: rgba(0, 0, 0, 0.1);
color: rgba(0, 0, 0, 0.44);
}
.button.transparent:hover {
background-color: transparent;
border-color: rgba(0, 0, 0, 0.3);
color: rgba(0, 0, 0, 0.44);
}
/* Images */
.responsive-image {
height: 0px;
overflow: hidden;
padding-bottom: 54%;
}
img {
display: block;
max-width: 100%;
}
/* Template Styles */
#header {
border-bottom: 1px solid rgba(0,0,0,0.1);
min-height: 50px;
width: 100%;
}
.logo a {
background: url('../images/logo.png');
background-position: center;
background-repeat: no-repeat;
background-size: 100%;
display: block;
height: 70px;
text-indent: -999px;
width: 90px;
}
/* == Content == */
/* Article & Pages */
.article {
}
.article p{
font-family: "Merriweather";
font-size: 1.1rem;
line-height: 2rem;
color: rgba(0,0,0,0.8);
font-weight: 100;
}
.article p a, .article li a, a.p-anchor{
color: inherit !important;
display: inline !important;
font-style: italic;
text-decoration: underline;
}
.article p a:hover, .article li a:hover, a.p-anchor:hover {
color : rgb(0, 120, 160) !important;
}
.article ul , .article ol{
color: rgba(0,0,0,0.8);
font-family: "Merriweather";
font-size: 1.1rem;
font-weight: 100;
margin-left: 0;
line-height: 2rem;
}
.article li {
margin-bottom: 12px;
}
.article img {
margin: 0 auto;
margin-bottom: 1.25rem;
}
.article img + small {
padding-bottom: 1.25rem;
color: rgba(0,0,0,0.6);
display: block;
font-style: italic;
text-align: center;
}
/* == Footer == */
#footer {
background: rgba(0,0,0,0.1);
font-size: 0.7rem;
font-weight:100;
}
#footer ul, #footer li {
font-size: 0.8rem;
}
#footer, #footer a {
color: rgba(0,0,0,1);
}
#footer a:hover {
text-decoration: underline;
}
#footer .link-1 a {
text-decoration: underline;
}
#footer .link-1 {
border-color: rgba(255,255,255,1) !important;
}
#footer .link-1 a {
font-weight: bold;
}
.friendLinks li {
display: inline-block;
float: none;
}
/* ## CARBON ADS ## */
#carbonads {
border: 1px solid rgb(229, 229, 229);
max-width: 180px;
margin: 0 auto;
padding: 5px;
position: absolute;
right: 10px;
top: 100px;
}
.carbon-wrap {
display: inline-block;
}
.carbonad{
background-color:#FBFBFB;
border:2px solid #E8E8E8;
height:215px;
line-height:1.2;
width:150px
}
.carbon-img{
float:left;
height:100px;
margin-left:11px;
margin-top:11px;
width:130px
}
.carbon-text{
float:left;
font-family:Arial,Helvetica,sans-serif;
font-size:11px;
font-weight:400;
height:50px;
margin-left:15px;
margin-top:9px;
width:119px
}
.carbon-text a{
color:rgba(0, 0, 0, 0.8);
text-decoration:none;
text-transform:none;
}
.carbon-tag{
color:#999;
float:left;
font-family:Arial,Helvetica,sans-serif;
font-size:11px;
font-weight:400;
margin-left:17px;
margin-top:15px;
padding-top:5px
}
.carbon-tag a{
color:#999;
text-align:center;
text-decoration:none;
font-weight:700
}
.carbon-poweredby {
color: rgb(119, 119, 119) !important;
margin-top: 2px;
font-size: 12px;
display: inline-block;
float : right;
text-align: right;
}
\ No newline at end of file
......@@ -10,6 +10,14 @@
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<link rel="publisher" href="https://plus.google.com/109470966265063246951">
<link rel="stylesheet" type="text/css" href="%PUBLIC_URL%/css/foundation.min.css" media="all">
<link rel="stylesheet" type="text/css" href="%PUBLIC_URL%/css/style.css" media="all">
<link href='https://fonts.googleapis.com/css?family=Merriweather+Sans:400,700' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Merriweather:400,700' rel='stylesheet' type='text/css'>
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
......
.App {
text-align: center;
}
.App-logo {
animation: App-logo-spin infinite 20s linear;
height: 80px;
}
.App-header {
background-color: #222;
height: 150px;
padding: 20px;
color: white;
}
.App-title {
font-size: 1.5em;
}
.App-intro {
font-size: large;
}
@keyframes App-logo-spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
import React, { Component } from 'react';
import Helmet from 'react-helmet';
import logo from './logo.svg';
import './App.css';
import './css/demo.css';
class App extends Component {
render() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h1 className="App-title">Welcome to React</h1>
</header>
<p className="App-intro">
To get started, edit <code>src/App.js</code> and save to reload.
</p>
<div id="container">
<Helmet>
<title> Server Side Render ReactJS Application | Tech Stream</title>
<meta name="description" content="--Description--"/>
<meta property="og:title" content="Server Side Render ReactJS Application" />
<meta property="og:image" content="https://techstream.org/images/img/Server-Sider-Render-React-JS-Application.jpg" />
<meta property="og:site_name" content="Tech Stream" />
<meta property="og:description" content="Server Side Rendering  or SSR  means you pre-render the markup of a front-end framework on a back-end system before delivering to users. A guide to do Static Pre-render of reactjs application."/>
<meta property="og:type" content="article"/>
<meta name="twitter:title" content="Server Side Render ReactJS Application" />
<meta name="twitter:card" content="summary" />
<meta name="twitter:image" content="https://techstream.org/images/img/Server-Sider-Render-React-JS-Application.jpg" />
<meta name="twitter:site" content="@techstream_org" />
<meta name="twitter:creator" content="@techstream_org" />
<meta name="twitter:domain" content="techstream.org" />
<meta name="twitter:description" content="Server Side Rendering  or SSR  means you pre-render the markup of a front-end framework on a back-end system before delivering to users. A guide to do Static Pre-render of reactjs application."/>
</Helmet>
<section id="header">
<div className="row">
<div className="column medium-4 small-12">
<div className="row">
<div className="column small-4 medium-3 large-2 small-centered medium-uncentered logo">
<a href=""></a>
</div>
</div>
</div>
<div className="column medium-2 small-12">
<div className="row">
<div className="column small-4 medium-3 large-12 small-centered medium-uncentered nospace push-2-top ">
<a href="https://techstream.org/Web-Development/Server-Sider-Render-React-JS-Application" className="button"> Back to Demo</a>
</div>
</div>
</div>
</div>
</section>
<script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?serve=CKYI5KJJ&placement=techstreamorg" id="_carbonads_js"></script>
<section id="content">
<div className="row">
<div className="small-12 push-4-top column text-center">
<img src={logo} alt="logo" className={'react-logo'} />
<h3>Server Side Render ReactJS Application</h3>
<p>This is a server side rendered ReactJS application, check the page source to see the pre-rendered html.</p>
</div>
</div>
</section>
<section id="footer">
</section>
</div>
);
}
......
.App {
text-align: center;
}
.react-logo{
animation: App-logo-spin infinite 20s linear;
height: 80px;
display: inline-block;
}
@keyframes App-logo-spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
body {
margin: 0;
padding: 0;
font-family: sans-serif;
}
import React from 'react';
import ReactDOM from 'react-dom';