ruidy/devbook_ts
1
0
Fork 0
mirror of https://github.com/rjNemo/devbook_ts synced 2026-06-12 13:36:43 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

add static assets for styling

Browse source
This commit is contained in:
Ruidy Nemausat 2020-05-12 10:47:44 +02:00
parent 3164d231e6
commit fea8c3b281
9 changed files with 1085 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
src/index.css
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;
}

2
src/index.tsx
View file

@ -1,6 +1,6 @@
import React from 'react'; import React from 'react';
import ReactDOM from 'react-dom'; import ReactDOM from 'react-dom';
import './index.css'; import './static/css/style.min.css';
import App from './App'; import App from './App';
import * as serviceWorker from './serviceWorker'; import * as serviceWorker from './serviceWorker';

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
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 300 KiB

39
src/static/scss/_config.scss Normal file
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;
}
}

52
src/static/scss/_form.scss Normal file
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;
}
}
}
}

76
src/static/scss/_mobile.scss Normal file
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;
}
}