Begin frontend
This commit is contained in:
Elijah Lucian
99
frontend/public/css/dev.css
Normal file
99
frontend/public/css/dev.css
Normal file
@@ -0,0 +1,99 @@
|
||||
@font-face {
|
||||
font-family: 'LCARS';
|
||||
src: url('./fonts/lcarsgtj3-webfont.eot');
|
||||
src: url('./fonts/lcars.ttf') format('embedded-opentype'), url('/fonts/lcars.ttf') format('truetype');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'LCARS Lower';
|
||||
src: url('/web/20160330232832im_/http://lcarssdk.org/lcarssdk/fonts/lcarsunknown.eot');
|
||||
src: url('/web/20160330232832im_/http://lcarssdk.org/lcarssdk/fonts/lcarsunknown.eot#iefix') format('embedded-opentype'), url('/web/20160330232832im_/http://lcarssdk.org/lcarssdk/fonts/lcarsunknown.ttf') format('truetype');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'LCARS Block';
|
||||
src: url('/web/20160330232832im_/http://lcarssdk.org/lcarssdk/fonts/LCARS-Block.eot');
|
||||
src: url('/web/20160330232832im_/http://lcarssdk.org/lcarssdk/fonts/LCARS-Block.eot#iefix') format('embedded-opentype'), url('/web/20160330232832im_/http://lcarssdk.org/lcarssdk/fonts/LCARS-Block.ttf') format('truetype');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
|
||||
:root{
|
||||
--space1: 5px;
|
||||
--textpadding1: 5px 10px;
|
||||
--regText: 'Open Sans', sans-serif;
|
||||
--fancyText: 'LCARS', sans-serif;
|
||||
--hoverBack: #cdf;
|
||||
--hoverText: #821;
|
||||
--lcarsFirst: #cc6699;
|
||||
--lcarsSecond: #ff9933;
|
||||
--lcarsThird: #99ccff;
|
||||
--lcarsGrey: #171113;
|
||||
--lcarsMid: #241721;
|
||||
}
|
||||
|
||||
|
||||
html, body{
|
||||
margin:0;
|
||||
padding:0;
|
||||
background: var(--lcarsGrey);
|
||||
color:#fff;
|
||||
font-family: var(--fancyText);
|
||||
|
||||
font-size:1.4em;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
h1,h2,h3,h4,h5 {
|
||||
letter-spacing: 0.05em;
|
||||
font-family: var(--regText);
|
||||
text-transform: uppercase;
|
||||
margin: 0.5em;
|
||||
padding: 0.5em;
|
||||
}
|
||||
|
||||
/* Layout Related */
|
||||
|
||||
.mainContainer{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.left {
|
||||
flex: 4;
|
||||
}
|
||||
|
||||
.right {
|
||||
flex: 5;
|
||||
}
|
||||
|
||||
/* Other Shit */
|
||||
|
||||
.heading {
|
||||
margin: 1em;
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
.course-list {
|
||||
margin: 2em;
|
||||
border-radius: 0.6em;
|
||||
border: 1px solid var(--lcarsMid);
|
||||
padding: 1em;
|
||||
}
|
||||
|
||||
.subject {
|
||||
font-family: var(--regText);
|
||||
text-transform: uppercase;
|
||||
font-size: 0.7em;
|
||||
color: var(--lcarsSecond);
|
||||
}
|
||||
|
||||
.course-list:hover {
|
||||
background: var(--lcarsMid);
|
||||
color: var(--hoverBack);
|
||||
}
|
||||
0
frontend/public/css/dev.scss
Normal file
0
frontend/public/css/dev.scss
Normal file
214
frontend/public/css/main.css
Normal file
214
frontend/public/css/main.css
Normal file
@@ -0,0 +1,214 @@
|
||||
@font-face {
|
||||
font-family: 'LCARS';
|
||||
src: url('./fonts/lcarsgtj3-webfont.eot');
|
||||
src: url('./fonts/lcars.ttf') format('embedded-opentype'), url('/fonts/lcars.ttf') format('truetype');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'LCARS Lower';
|
||||
src: url('/web/20160330232832im_/http://lcarssdk.org/lcarssdk/fonts/lcarsunknown.eot');
|
||||
src: url('/web/20160330232832im_/http://lcarssdk.org/lcarssdk/fonts/lcarsunknown.eot#iefix') format('embedded-opentype'), url('/web/20160330232832im_/http://lcarssdk.org/lcarssdk/fonts/lcarsunknown.ttf') format('truetype');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'LCARS Block';
|
||||
src: url('/web/20160330232832im_/http://lcarssdk.org/lcarssdk/fonts/LCARS-Block.eot');
|
||||
src: url('/web/20160330232832im_/http://lcarssdk.org/lcarssdk/fonts/LCARS-Block.eot#iefix') format('embedded-opentype'), url('/web/20160330232832im_/http://lcarssdk.org/lcarssdk/fonts/LCARS-Block.ttf') format('truetype');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
:root{
|
||||
--space1: 5px;
|
||||
--textpadding1: 5px 10px;
|
||||
--regText: 'Open Sans', sans-serif;
|
||||
--fancyText: 'LCARS', sans-serif;
|
||||
--hoverBack: #cdf;
|
||||
--hoverText: #821;
|
||||
}
|
||||
|
||||
html, body{
|
||||
margin:0;
|
||||
padding:0;
|
||||
background:#111;
|
||||
color:#fff;
|
||||
font-family: var(--fancyText);
|
||||
font-weight: 500;
|
||||
font-size:1.4em;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
.mainContainer{
|
||||
background:#111;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
height:100vh;
|
||||
}
|
||||
|
||||
/* Left Side */
|
||||
|
||||
.leftColumn{
|
||||
flex:4;
|
||||
background:#333;
|
||||
display:flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
/* Left Information Panel */
|
||||
|
||||
.infoLeft{
|
||||
display:flex;
|
||||
flex-direction: column;
|
||||
flex:6;
|
||||
background:#222;
|
||||
}
|
||||
|
||||
.leftTop{
|
||||
flex:3;
|
||||
background:#111;
|
||||
text-align:center;
|
||||
}
|
||||
|
||||
.logo{
|
||||
width:60%;
|
||||
padding-top:17%;
|
||||
}
|
||||
|
||||
.leftInfo{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex:7;
|
||||
background:#111;
|
||||
}
|
||||
|
||||
.leftItem{
|
||||
flex:1;
|
||||
margin:var(--space1);
|
||||
text-align: left;
|
||||
border-radius: 10vh;
|
||||
padding:2vh;
|
||||
background: #9cf;
|
||||
}
|
||||
|
||||
/* Left LCARS Panel (menu?) */
|
||||
|
||||
.lcarsLeft{
|
||||
background:#111;
|
||||
flex:4;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.lcarsLeft div{
|
||||
margin:var(--space1);
|
||||
padding:var(--textpadding1);
|
||||
}
|
||||
|
||||
|
||||
.lcarsLeftItem{
|
||||
flex:1;
|
||||
background:#99ccff;
|
||||
}
|
||||
.lcarsLeftItemBig{
|
||||
flex:4;
|
||||
background:#cc6699;
|
||||
}
|
||||
.lcarsLeftItemMed{
|
||||
flex:2;
|
||||
background:#ff9933;
|
||||
}
|
||||
|
||||
/* Right Side */
|
||||
|
||||
.rightContainer{
|
||||
flex:10;
|
||||
background: #111;
|
||||
display:flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.rightTop{
|
||||
flex: 3;
|
||||
background:#222;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.lcarsMiddleTop, .lcarsMiddleBottom{
|
||||
background:#111;
|
||||
flex:2;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.lcarsMiddleItem{
|
||||
background:#069;
|
||||
margin:var(--space1);
|
||||
padding:var(--textpadding1);
|
||||
flex:2;
|
||||
}
|
||||
|
||||
.lcarsMiddleElbow{
|
||||
margin:var(--space1);
|
||||
flex:2;
|
||||
|
||||
}
|
||||
|
||||
.dataTopRight{
|
||||
flex:7;
|
||||
background:#171717;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.datatopRightUpper{
|
||||
flex:7;
|
||||
}
|
||||
|
||||
.lcarsHorizontalTop{
|
||||
flex:1;
|
||||
background:#111;
|
||||
}
|
||||
/* LCARS HORIZONTAL LINES */
|
||||
|
||||
.lcarsHorizontalBottom{
|
||||
flex:1;
|
||||
background:#111;
|
||||
}
|
||||
|
||||
.dataRightLower{
|
||||
flex:9;
|
||||
}
|
||||
|
||||
.rightBottom{
|
||||
flex: 5;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
background:#333;
|
||||
}
|
||||
|
||||
|
||||
.dataBottomRight{
|
||||
flex:7;
|
||||
background:#171717;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* LCARS Middle Elbow */
|
||||
|
||||
.lcarsElbow{
|
||||
width:100%;
|
||||
}
|
||||
|
||||
/* LCARS General Hover */
|
||||
|
||||
.lcarsLeft div:hover, .leftItem:hover,.lcarsMiddleTop div:hover, .lcarsMiddleBottom div:hover{
|
||||
background:var(--hoverBack);
|
||||
color:var(--hoverText);
|
||||
}
|
||||
BIN
frontend/public/favicon.ico
Normal file
BIN
frontend/public/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.8 KiB |
BIN
frontend/public/fonts/LCARS.ttf
Normal file
BIN
frontend/public/fonts/LCARS.ttf
Normal file
Binary file not shown.
0
frontend/public/fonts/lcarsgtj3-webfont.eot
Normal file
0
frontend/public/fonts/lcarsgtj3-webfont.eot
Normal file
44
frontend/public/index.html
Normal file
44
frontend/public/index.html
Normal file
@@ -0,0 +1,44 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<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="stylesheet" href="/css/main.css"> -->
|
||||
<link href="https://fonts.googleapis.com/css?family=Open+Sans|Orbitron" rel="stylesheet">
|
||||
<link rel="stylesheet" href="/css/dev.css">
|
||||
|
||||
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
|
||||
<link rel="shortcut icon" href="%PUBLIC_URL%/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`.
|
||||
-->
|
||||
<title>React App</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>
|
||||
15
frontend/public/manifest.json
Normal file
15
frontend/public/manifest.json
Normal file
@@ -0,0 +1,15 @@
|
||||
{
|
||||
"short_name": "React App",
|
||||
"name": "Create React App Sample",
|
||||
"icons": [
|
||||
{
|
||||
"src": "favicon.ico",
|
||||
"sizes": "64x64 32x32 24x24 16x16",
|
||||
"type": "image/x-icon"
|
||||
}
|
||||
],
|
||||
"start_url": "./index.html",
|
||||
"display": "standalone",
|
||||
"theme_color": "#000000",
|
||||
"background_color": "#ffffff"
|
||||
}
|
||||
Reference in New Issue
Block a user