Create and style Landing page (#2)

* readme

* specify landing must show app name

* clean default project

* write landing page layout

* add static assets for styling

* add Landing page unit test
install fontawesome
This commit is contained in:
Ruidy 2020-05-12 11:09:51 +02:00 committed by GitHub
parent 7ccb8fb9aa
commit ef6d97f2fc
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
20 changed files with 1210 additions and 127 deletions

View file

@ -3,7 +3,8 @@
![Deploy](https://github.com/rjNemo/devbook_ts/workflows/Deploy/badge.svg?branch=master)
Social App for connecting with developers & tech enthusiasts.
🕸 [Check it out](https://devbook.onrender.com/)
🕸 [Check it out!](https://devbook.onrender.com/)
## Tests
@ -19,6 +20,14 @@ yarn cypress
and edit your E2E test cases in `cypress/integration/` folder.
### Unit
Open test runner with:
```sh
yarn test
```
## Deployment
We use Github Actions to check push and pull requests.

View file

@ -0,0 +1,6 @@
describe('Landing page', () => {
it('contains app name', () => {
cy.visit('/');
cy.get('h1').contains('DevBook');
});
});

View file

@ -1,6 +0,0 @@
describe('smoke', () => {
it('sees learn', () => {
cy.visit('/');
cy.get('a').contains('Learn');
});
});

View file

@ -3,6 +3,12 @@
"version": "0.1.0",
"private": true,
"dependencies": {
"@fortawesome/fontawesome-free": "^5.13.0",
"@fortawesome/fontawesome-svg-core": "^1.2.28",
"@fortawesome/free-brands-svg-icons": "^5.13.0",
"@fortawesome/free-regular-svg-icons": "^5.13.0",
"@fortawesome/free-solid-svg-icons": "^5.13.0",
"@fortawesome/react-fontawesome": "^0.1.9",
"@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^9.3.2",
"@testing-library/user-event": "^7.1.2",
@ -38,4 +44,4 @@
"last 1 safari version"
]
}
}
}

View file

@ -4,40 +4,18 @@
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta name="theme-color" content="#17a2b8" />
<meta
name="description"
content="Web site created using create-react-app"
content="Create developer profiles, portfolio, share and get help from other
devs"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!--
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`.
-->
<title>React App</title>
<title>DevBook</title>
</head>
<body>
<noscript>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>

View file

@ -1,6 +1,6 @@
{
"short_name": "React App",
"name": "Create React App Sample",
"short_name": "DevBook",
"name": "DevBook | Social App for devs",
"icons": [
{
"src": "favicon.ico",
@ -20,6 +20,6 @@
],
"start_url": ".",
"display": "standalone",
"theme_color": "#000000",
"background_color": "#ffffff"
}
"theme_color": "#17a2b8",
"background_color": "#000000"
}

View file

@ -1,38 +0,0 @@
.App {
text-align: center;
}
.App-logo {
height: 40vmin;
pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
.App-logo {
animation: App-logo-spin infinite 20s linear;
}
}
.App-header {
background-color: #282c34;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: calc(10px + 2vmin);
color: white;
}
.App-link {
color: #61dafb;
}
@keyframes App-logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}

View file

@ -1,9 +1,9 @@
import React from 'react';
import { render } from '@testing-library/react';
import {render} from '@testing-library/react';
import App from './App';
test('renders learn react link', () => {
const { getByText } = render(<App />);
const linkElement = getByText(/learn react/i);
expect(linkElement).toBeInTheDocument();
const {getAllByText} = render(<App />);
const title = getAllByText('DevBook');
expect(title.length).toEqual(2);
});

View file

@ -1,26 +1,48 @@
import React from 'react';
import logo from './logo.svg';
import './App.css';
function App() {
import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
import {faCode} from '@fortawesome/free-solid-svg-icons';
const App = () => {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.tsx</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
<>
<nav className="navbar bg-dark">
<h1>
<a href="dashboard.html">
<FontAwesomeIcon icon={faCode} /> {' '} DevBook
</a>
</h1>
<ul>
<li>
<a href="profiles.html">Developers</a>
</li>
<li>
<a href="register.html">Register</a>
</li>
<li>
<a href="login.html">Login</a>
</li>
</ul>
</nav>
<section className="landing">
<div className="dark-overlay">
<div className="landing-inner">
<h1 className="x-large">DevBook</h1>
<p className="lead">
Create developer profiles, portfolio, share and get help from
other devs
</p>
<div className="buttons">
<a href="register.html" className="btn btn-primary">
Sign up
</a>
<a href="login.html" className="btn btn-light">
Login
</a>
</div>
</div>
</div>
</section>
</>
);
}
};
export default App;

View file

@ -1,13 +0,0 @@
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
code {
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
monospace;
}

View file

@ -1,6 +1,6 @@
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import './static/css/style.min.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
@ -8,10 +8,7 @@ ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
document.getElementById('root'),
);
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

View file

@ -1,7 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3">
<g fill="#61DAFB">
<path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/>
<circle cx="420.9" cy="296.5" r="45.7"/>
<path d="M520.5 78.1z"/>
</g>
</svg>

Before

Width:  |  Height:  |  Size: 2.6 KiB

542
src/static/css/style.min.css vendored Normal file
View file

@ -0,0 +1,542 @@
.m-1 {
margin: 1rem;
}
.my-1 {
margin: 1rem 0;
}
.p-1 {
padding: 1rem;
}
.py-1 {
padding: 1rem 0;
}
.m-2 {
margin: 2rem;
}
.my-2 {
margin: 2rem 0;
}
.p-2 {
padding: 2rem;
}
.py-2 {
padding: 2rem 0;
}
.m-3 {
margin: 3rem;
}
.my-3 {
margin: 3rem 0;
}
.p-3 {
padding: 3rem;
}
.py-3 {
padding: 3rem 0;
}
.m-4 {
margin: 4rem;
}
.my-4 {
margin: 4rem 0;
}
.p-4 {
padding: 4rem;
}
.py-4 {
padding: 4rem 0;
}
.m-5 {
margin: 5rem;
}
.my-5 {
margin: 5rem 0;
}
.p-5 {
padding: 5rem;
}
.py-5 {
padding: 5rem 0;
}
.m-1 {
margin: 1rem;
}
.my-1 {
margin: 1rem 0;
}
.p-1 {
padding: 1rem;
}
.py-1 {
padding: 1rem 0;
}
.m-2 {
margin: 2rem;
}
.my-2 {
margin: 2rem 0;
}
.p-2 {
padding: 2rem;
}
.py-2 {
padding: 2rem 0;
}
.m-3 {
margin: 3rem;
}
.my-3 {
margin: 3rem 0;
}
.p-3 {
padding: 3rem;
}
.py-3 {
padding: 3rem 0;
}
.m-4 {
margin: 4rem;
}
.my-4 {
margin: 4rem 0;
}
.p-4 {
padding: 4rem;
}
.py-4 {
padding: 4rem 0;
}
.m-5 {
margin: 5rem;
}
.my-5 {
margin: 5rem 0;
}
.p-5 {
padding: 5rem;
}
.py-5 {
padding: 5rem 0;
}
.bg-primary {
background-color: #17a2b8;
color: #fff;
}
.bg-light {
background-color: #f4f4f4;
color: #333;
border: #ccc 1px solid;
}
.bg-dark {
background-color: #343a40;
color: #fff;
}
.bg-danger {
background-color: #dc3545;
color: #fff;
}
.bg-success {
background-color: #28a745;
color: #fff;
}
.bg-white {
background-color: #fff;
color: #333;
border: #ccc 1px solid;
}
.dark-overlay {
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.7);
}
.x-large {
font-size: 4rem;
line-height: 1.2;
margin-bottom: 1rem;
}
.large {
font-size: 3rem;
line-height: 1.2;
margin-bottom: 1rem;
}
.lead {
font-size: 1.5rem;
margin-bottom: 1rem;
}
.text-primary {
color: #17a2b8;
}
.btn {
display: inline-block;
background-color: #f4f4f4;
color: #333;
padding: 0.4rem 1.3rem;
border: none;
cursor: pointer;
font-size: 1rem;
margin-right: 0.5rem;
outline: none;
transition: all 0.3s ease-in;
}
.btn.btn-primary {
background-color: #17a2b8;
color: #fff;
}
.btn.btn-primary:hover {
background: #1ab6cf;
}
.btn.btn-dark {
background-color: #343a40;
color: #fff;
}
.btn.btn-dark:hover {
background: #3f474e;
}
.btn.btn-light {
background-color: #f4f4f4;
color: #333;
}
.btn.btn-light:hover {
background: #626d78;
color: white;
}
.btn.btn-danger {
background-color: #dc3545;
color: #fff;
}
.btn.btn-danger:hover {
background: #e04b59;
}
.btn.btn-success {
background-color: #28a745;
color: #fff;
}
.btn.btn-success:hover {
background: #2dbc4e;
}
.container {
max-width: 1100px;
margin: auto;
overflow: hidden;
padding: 0 2rem;
margin-top: 5rem;
margin-bottom: 3rem;
}
.alert {
padding: 0.8rem;
margin: 1rem;
opacity: 0.9;
background-color: #f4f4f4;
color: #333;
}
.alert.alert-primary {
background-color: #17a2b8;
color: #fff;
}
.alert.alert-dark {
background-color: #343a40;
color: #fff;
}
.alert.alert-success {
background-color: #28a745;
color: #fff;
}
.alert.alert-danger {
background-color: #dc3545;
color: #fff;
}
.round-img {
border-radius: 50%;
}
.line {
height: 1px;
background: #ccc;
margin: 1.5rem 0;
}
.badge {
font-size: 0.8rem;
padding: 0.1rem;
text-align: center;
margin: 0.3rem;
background: #f4f4f4;
color: #333;
border-radius: 1rem;
}
.badge.badge-primary {
background-color: #17a2b8;
color: #fff;
}
.badge.badge-dark {
background-color: #343a40;
color: #fff;
}
.badge.badge-success {
background-color: #28a745;
color: #fff;
}
.badge.badge-danger {
background-color: #dc3545;
color: #fff;
}
.table th,
.table td {
padding: 1rem;
text-align: left;
}
.table th {
background: #f4f4f4;
}
.form-group {
margin: 1.2rem 0;
}
.form-text {
display: block;
margin-top: 0.3rem;
color: #888;
}
.form input[type='text'],
.form input[type='email'],
.form input[type='password'],
.form input[type='date'],
.form select,
.form textarea {
display: block;
width: 100%;
padding: 0.4rem;
font-size: 1.2rem;
border: 1px solid #ccc;
border-radius: 0.3rem;
}
.form input[type='submit'] {
font: inherit;
}
.form .social-input {
display: flex;
}
.form .social-input i {
padding: 0.5rem;
width: 4rem;
}
.form .social-input i.fa-twitter {
color: #38a1f3;
}
.form .social-input i.fa-facebook {
color: #3b5998;
}
.form .social-input i.fa-instagram {
color: #3f729b;
}
.form .social-input i.fa-youtube {
color: #c4302b;
}
.form .social-input i.fa-linkedin {
color: #0077b5;
}
@media (max-width: 700px) {
.hide-sm {
display: none;
}
.container {
margin-top: 8rem;
}
.x-large {
font-size: 3rem;
}
.large {
font-size: 2rem;
}
.lead {
font-size: 1rem;
}
.navbar {
flex-direction: column;
text-align: center;
}
.navbar ul {
text-align: center;
justify-content: center;
}
.navbar h1 {
margin-bottom: 1rem;
}
.dash-buttons a {
display: block;
width: 100%;
margin-bottom: 0.2rem;
}
.profile {
grid-template-columns: 1fr;
text-align: center;
}
.profile ul {
display: none;
}
.profile-grid {
grid-template-areas: 'top' 'about' 'exp' 'edu' 'github';
}
.profile-about .skills {
flex-direction: column;
}
.post {
grid-template-columns: 1fr;
}
.post a,
.post button {
padding: 0.3rem 0.4rem;
}
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: 'Raleway', sans-serif;
font-size: 1rem;
line-height: 1.6;
background-color: white;
color: #333;
}
a {
text-decoration: none;
color: #17a2b8;
}
ul {
list-style: none;
}
img {
width: 100%;
}
.navbar {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.7rem 2rem;
position: fixed;
z-index: 1;
width: 100%;
top: 0;
border-bottom: solid 1px #17a2b8;
opacity: 0.9;
}
.navbar ul {
display: flex;
}
.navbar a {
color: white;
padding: 0.45rem;
margin: 0 0.25rem;
}
.navbar a:hover {
color: #17a2b8;
}
.landing {
position: relative;
background: url('../img/showcase.jpg') no-repeat center center/cover;
height: 100vh;
}
.landing-inner {
color: white;
height: 100%;
display: flex;
flex-direction: column;
width: 80%;
margin: auto;
align-items: center;
justify-content: center;
text-align: center;
}
.profile {
display: grid;
grid-template-columns: 2fr 4fr 2fr;
grid-gap: 2rem;
padding: 1rem;
line-height: 1.8;
margin-bottom: 1rem;
align-items: center;
}
.profile-grid {
display: grid;
grid-template-areas: 'top top' 'about about' 'exp edu' 'github github';
grid-gap: 1rem;
}
.profile-grid .profile-top {
grid-area: top;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
}
.profile-grid .profile-top img {
width: 250px;
}
.profile-grid .profile-top .icons a {
color: white;
margin: 0 0.3rem;
}
.profile-grid .profile-top .icons a:hover {
color: #343a40;
}
.profile-grid .profile-about {
grid-area: about;
text-align: center;
}
.profile-grid .profile-about .skills {
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
.profile-grid .profile-exp {
grid-area: exp;
}
.profile-grid .profile-edu {
grid-area: edu;
}
.profile-grid .profile-exp > div,
.profile-grid .profile-edu > div {
margin-bottom: 1rem;
padding-bottom: 1rem;
border-bottom: #ccc 1px dotted;
}
.profile-grid .profile-exp > div:last-child,
.profile-grid .profile-edu > div:last-child {
border: none;
}
.profile-grid .profile-exp > div p,
.profile-grid .profile-edu > div p {
margin: 0.5rem 0;
}
.profile-grid .profile-github {
grid-area: github;
}
.profile-grid .profile-github .repo {
display: flex;
}
.profile-grid .profile-github .repo > div:first-child {
flex: 7;
flex-basis: 70%;
}
.profile-grid .profile-github .repo > div:last-child {
flex: 3;
flex-basis: 30%;
}
.post-form-header {
padding: 0.5rem;
}
.post {
display: grid;
grid-template-columns: 1fr 4fr;
grid-gap: 2rem;
align-items: center;
}
.post > div:first-child {
text-align: center;
}
.post img {
width: 150px;
}

BIN
src/static/img/showcase.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 300 KiB

View file

@ -0,0 +1,39 @@
$primary-color: #17a2b8;
$dark-color: #343a40;
$light-color: #f4f4f4;
$danger-color: #dc3545;
$success-color: #28a745;
$dark: #333;
$max-width: 1100px;
// set text color based on background
@function set-text-color($color) {
@if (lightness($color) >60) {
@return $dark;
} @else {
@return white;
}
}
// set background and text color
@mixin set-background($color) {
background-color: $color;
color: set-text-color($color);
}
// margin and padding
$spaceamounts: (1, 2, 3, 4, 5);
@each $space in $spaceamounts {
.m-#{$space} {
margin: #{$space}rem;
}
.my-#{$space} {
margin: #{$space}rem 0;
}
.p-#{$space} {
padding: #{$space}rem;
}
.py-#{$space} {
padding: #{$space}rem 0;
}
}

View file

@ -0,0 +1,52 @@
.form {
&-group {
margin: 1.2rem 0;
}
&-text {
display: block;
margin-top: 0.3rem;
color: #888;
}
input[type="text"],
input[type="email"],
input[type="password"],
input[type="date"],
select,
textarea {
display: block;
width: 100%;
padding: 0.4rem;
font-size: 1.2rem;
border: 1px solid #ccc;
border-radius: 0.3rem;
}
input[type="submit"] {
font: inherit;
}
.social-input {
display: flex;
i {
padding: 0.5rem;
width: 4rem;
&.fa-twitter {
color: #38a1f3;
}
&.fa-facebook {
color: #3b5998;
}
&.fa-instagram {
color: #3f729b;
}
&.fa-youtube {
color: #c4302b;
}
&.fa-linkedin {
color: #0077b5;
}
}
}
}

View file

@ -0,0 +1,76 @@
@media (max-width: 700px) {
.hide-sm {
display: none;
}
.container {
margin-top: 8rem;
}
// Text Styles
.x-large {
font-size: 3rem;
}
.large {
font-size: 2rem;
}
.lead {
font-size: 1rem;
}
// Navbar
.navbar {
flex-direction: column;
text-align: center;
ul {
text-align: center;
justify-content: center;
}
h1 {
margin-bottom: 1rem;
}
}
.dash-buttons a {
display: block;
width: 100%;
margin-bottom: 0.2rem;
}
// Profiles
.profile {
grid-template-columns: 1fr;
text-align: center;
ul {
display: none;
}
}
.profile-grid {
grid-template-areas:
"top"
"about"
"exp"
"edu"
"github";
}
.profile-about {
.skills {
flex-direction: column;
}
}
.post {
grid-template-columns: 1fr;
a,
button {
padding: 0.3rem 0.4rem;
}
}
}

183
src/static/scss/_utils.scss Normal file
View file

@ -0,0 +1,183 @@
@import "_config";
// Backgrounds
.bg {
&-primary {
@include set-background($primary-color);
}
&-light {
@include set-background($light-color);
border: #ccc 1px solid;
}
&-dark {
@include set-background($dark-color);
}
&-danger {
@include set-background($danger-color);
}
&-success {
@include set-background($success-color);
}
&-white {
@include set-background(white);
border: #ccc 1px solid;
}
}
// dark overlay
.dark-overlay {
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.7);
}
// Text-styles
.x-large {
font-size: 4rem;
line-height: 1.2;
margin-bottom: 1rem;
}
.large {
font-size: 3rem;
line-height: 1.2;
margin-bottom: 1rem;
}
.lead {
font-size: 1.5rem;
margin-bottom: 1rem;
}
.text-primary {
color: $primary-color;
}
// Buttons
.btn {
display: inline-block;
background-color: $light-color;
color: $dark;
padding: 0.4rem 1.3rem;
border: none;
cursor: pointer;
font-size: 1rem;
margin-right: 0.5rem;
outline: none;
transition: all 0.3s ease-in;
&.btn-primary {
@include set-background($primary-color);
&:hover {
background: lighten($primary-color, 5%);
}
}
&.btn-dark {
@include set-background($dark-color);
&:hover {
background: lighten($dark-color, 5%);
}
}
&.btn-light {
@include set-background($light-color);
&:hover {
background: lighten($dark-color, 20%);
color: white;
}
}
&.btn-danger {
@include set-background($danger-color);
&:hover {
background: lighten($danger-color, 5%);
}
}
&.btn-success {
@include set-background($success-color);
&:hover {
background: lighten($success-color, 5%);
}
}
}
// Container
.container {
max-width: $max-width;
margin: auto;
overflow: hidden;
padding: 0 2rem;
margin-top: 5rem;
margin-bottom: 3rem;
}
// Alerts
.alert {
padding: 0.8rem;
margin: 1rem;
opacity: 0.9;
background-color: $light-color;
color: $dark;
&.alert-primary {
@include set-background($primary-color);
}
&.alert-dark {
@include set-background($dark-color);
}
&.alert-success {
@include set-background($success-color);
}
&.alert-danger {
@include set-background($danger-color);
}
}
.round-img {
border-radius: 50%;
}
.line {
height: 1px;
background: #ccc;
margin: 1.5rem 0;
}
// badge
.badge {
font-size: 0.8rem;
padding: 0.1rem;
text-align: center;
margin: 0.3rem;
background: $light-color;
color: $dark;
border-radius: 1rem;
&.badge-primary {
@include set-background($primary-color);
}
&.badge-dark {
@include set-background($dark-color);
}
&.badge-success {
@include set-background($success-color);
}
&.badge-danger {
@include set-background($danger-color);
}
}
// Table
.table {
th,
td {
padding: 1rem;
text-align: left;
}
th {
background: $light-color;
}
}

192
src/static/scss/style.scss Normal file
View file

@ -0,0 +1,192 @@
@import "_config";
@import "_utils";
@import "_form";
@import "_mobile";
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: "Raleway", sans-serif;
font-size: 1rem;
line-height: 1.6;
background-color: white;
color: $dark;
}
a {
text-decoration: none;
color: $primary-color;
}
ul {
list-style: none;
}
img {
width: 100%;
}
// Navbar
.navbar {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.7rem 2rem;
position: fixed;
z-index: 1;
width: 100%;
top: 0;
border-bottom: solid 1px $primary-color;
opacity: 0.9;
ul {
display: flex;
}
a {
color: white;
padding: 0.45rem;
margin: 0 0.25rem;
&:hover {
color: $primary-color;
}
}
}
// landing
.landing {
position: relative;
background: url("../img/showcase.jpg") no-repeat center center/cover;
height: 100vh;
&-inner {
color: white;
height: 100%;
display: flex;
flex-direction: column;
width: 80%;
margin: auto;
align-items: center;
justify-content: center;
text-align: center;
}
}
// profiles
.profile {
display: grid;
grid-template-columns: 2fr 4fr 2fr;
grid-gap: 2rem;
padding: 1rem;
line-height: 1.8;
margin-bottom: 1rem;
align-items: center;
}
// Profile Page
.profile-grid {
display: grid;
grid-template-areas: "top top" "about about" "exp edu" "github github";
grid-gap: 1rem;
.profile-top {
grid-area: top;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
img {
width: 250px;
}
.icons a {
color: white;
margin: 0 0.3rem;
&:hover {
color: $dark-color;
}
}
}
.profile-about {
grid-area: about;
text-align: center;
.skills {
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
}
.profile-exp {
grid-area: exp;
}
.profile-edu {
grid-area: edu;
}
.profile-exp,
.profile-edu {
& > div {
margin-bottom: 1rem;
padding-bottom: 1rem;
border-bottom: #ccc 1px dotted;
&:last-child {
border: none;
}
p {
margin: 0.5rem 0;
}
}
}
.profile-github {
grid-area: github;
.repo {
display: flex;
& > div:first-child {
flex: 7;
flex-basis: 70%;
}
& > div:last-child {
flex: 3;
flex-basis: 30%;
}
}
}
}
// Posts
.post-form-header {
padding: 0.5rem;
}
.post {
display: grid;
grid-template-columns: 1fr 4fr;
grid-gap: 2rem;
align-items: center;
& > div:first-child {
text-align: center;
}
img {
width: 150px;
}
}

View file

@ -1082,6 +1082,51 @@
debug "^3.1.0"
lodash.once "^4.1.1"
"@fortawesome/fontawesome-common-types@^0.2.28":
version "0.2.28"
resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.28.tgz#1091bdfe63b3f139441e9cba27aa022bff97d8b2"
integrity sha512-gtis2/5yLdfI6n0ia0jH7NJs5i/Z/8M/ZbQL6jXQhCthEOe5Cr5NcQPhgTvFxNOtURE03/ZqUcEskdn2M+QaBg==
"@fortawesome/fontawesome-free@^5.13.0":
version "5.13.0"
resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-free/-/fontawesome-free-5.13.0.tgz#fcb113d1aca4b471b709e8c9c168674fbd6e06d9"
integrity sha512-xKOeQEl5O47GPZYIMToj6uuA2syyFlq9EMSl2ui0uytjY9xbe8XS0pexNWmxrdcCyNGyDmLyYw5FtKsalBUeOg==
"@fortawesome/fontawesome-svg-core@^1.2.28":
version "1.2.28"
resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.28.tgz#e5b8c8814ef375f01f5d7c132d3c3a2f83a3abf9"
integrity sha512-4LeaNHWvrneoU0i8b5RTOJHKx7E+y7jYejplR7uSVB34+mp3Veg7cbKk7NBCLiI4TyoWS1wh9ZdoyLJR8wSAdg==
dependencies:
"@fortawesome/fontawesome-common-types" "^0.2.28"
"@fortawesome/free-brands-svg-icons@^5.13.0":
version "5.13.0"
resolved "https://registry.yarnpkg.com/@fortawesome/free-brands-svg-icons/-/free-brands-svg-icons-5.13.0.tgz#e79de73ba6555055204828dca9c0691e7ce5242b"
integrity sha512-/6xXiJFCMEQxqxXbL0FPJpwq5Cv6MRrjsbJEmH/t5vOvB4dILDpnY0f7zZSlA8+TG7jwlt12miF/yZpZkykucA==
dependencies:
"@fortawesome/fontawesome-common-types" "^0.2.28"
"@fortawesome/free-regular-svg-icons@^5.13.0":
version "5.13.0"
resolved "https://registry.yarnpkg.com/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-5.13.0.tgz#925a13d8bdda0678f71551828cac80ab47b8150c"
integrity sha512-70FAyiS5j+ANYD4dh9NGowTorNDnyvQHHpCM7FpnF7GxtDjBUCKdrFqCPzesEIpNDFNd+La3vex+jDk4nnUfpA==
dependencies:
"@fortawesome/fontawesome-common-types" "^0.2.28"
"@fortawesome/free-solid-svg-icons@^5.13.0":
version "5.13.0"
resolved "https://registry.yarnpkg.com/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.13.0.tgz#44d9118668ad96b4fd5c9434a43efc5903525739"
integrity sha512-IHUgDJdomv6YtG4p3zl1B5wWf9ffinHIvebqQOmV3U+3SLw4fC+LUCCgwfETkbTtjy5/Qws2VoVf6z/ETQpFpg==
dependencies:
"@fortawesome/fontawesome-common-types" "^0.2.28"
"@fortawesome/react-fontawesome@^0.1.9":
version "0.1.9"
resolved "https://registry.yarnpkg.com/@fortawesome/react-fontawesome/-/react-fontawesome-0.1.9.tgz#c865b9286c707407effcec99958043711367cd02"
integrity sha512-49V3WNysLZU5fZ3sqSuys4nGRytsrxJktbv3vuaXkEoxv22C6T7TEG0TW6+nqVjMnkfCQd5xOnmJoZHMF78tOw==
dependencies:
prop-types "^15.7.2"
"@hapi/address@2.x.x":
version "2.1.4"
resolved "https://registry.yarnpkg.com/@hapi/address/-/address-2.1.4.tgz#5d67ed43f3fd41a69d4b9ff7b56e7c0d1d0a81e5"