Changed layout
This commit is contained in:
parent
4ba47a9999
commit
fd76dc570f
6
package-lock.json
generated
6
package-lock.json
generated
@ -12,7 +12,6 @@
|
||||
"@types/node": "^20.10.1",
|
||||
"@types/react": "^18.2.39",
|
||||
"@types/react-dom": "^18.2.17",
|
||||
"purecss": "^3.0.0",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0"
|
||||
},
|
||||
@ -3853,11 +3852,6 @@
|
||||
"node": ">=6"
|
||||
}
|
||||
},
|
||||
"node_modules/purecss": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/purecss/-/purecss-3.0.0.tgz",
|
||||
"integrity": "sha512-IdYbGwbmuA7Hy9ACIO1q7ks4xGLcJSVHxJT2BXIz2c4Ve1aSrNU5bAzA1ILT4Gmdy5K59ruWoRPf9WvJZU5fbA=="
|
||||
},
|
||||
"node_modules/randombytes": {
|
||||
"version": "2.1.0",
|
||||
"resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz",
|
||||
|
||||
@ -22,7 +22,6 @@
|
||||
"@types/node": "^20.10.1",
|
||||
"@types/react": "^18.2.39",
|
||||
"@types/react-dom": "^18.2.17",
|
||||
"purecss": "^3.0.0",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0"
|
||||
}
|
||||
|
||||
@ -1,284 +1,101 @@
|
||||
@import 'npm:purecss/build/pure.css';
|
||||
:root {
|
||||
--menu-header-color: #FF99C9;
|
||||
--menu-header-text: #FFEBF4;
|
||||
--menu-background-color: #C1BDDB;
|
||||
--menu-item-color: #A2C7E5;
|
||||
--menu-item-hover: #B7D8BE;
|
||||
--menu-selected-color: #CBE896;
|
||||
--main-background: #FCDFA6;
|
||||
}
|
||||
|
||||
body {
|
||||
color: #777;
|
||||
}
|
||||
|
||||
.pure-img-responsive {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
/*
|
||||
Add transition to containers so they can push in and out.
|
||||
*/
|
||||
#layout,
|
||||
#menu,
|
||||
.menu-link {
|
||||
-webkit-transition: all 0.2s ease-out;
|
||||
-moz-transition: all 0.2s ease-out;
|
||||
-ms-transition: all 0.2s ease-out;
|
||||
-o-transition: all 0.2s ease-out;
|
||||
transition: all 0.2s ease-out;
|
||||
}
|
||||
|
||||
/*
|
||||
This is the parent `<div>` that contains the menu and the content area.
|
||||
*/
|
||||
#layout {
|
||||
position: relative;
|
||||
left: 0;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
#layout.active #menu {
|
||||
left: 150px;
|
||||
width: 150px;
|
||||
}
|
||||
|
||||
#layout.active .menu-link {
|
||||
left: 150px;
|
||||
}
|
||||
|
||||
/*
|
||||
The content `<div>` is where all your content goes.
|
||||
*/
|
||||
.content {
|
||||
margin: 0 auto;
|
||||
padding: 0 2em;
|
||||
margin-left: 150px;
|
||||
|
||||
/* max-width: 800px; */
|
||||
margin-bottom: 50px;
|
||||
line-height: 1.6em;
|
||||
}
|
||||
|
||||
.content video {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
min-width: 100%;
|
||||
min-height: 100%;
|
||||
width: auto;
|
||||
height: auto;
|
||||
z-index: -100;
|
||||
background-size: cover;
|
||||
overflow: hidden;
|
||||
height: 100vh;
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
.content p {
|
||||
padding-left: 5em;
|
||||
#main {
|
||||
flex: 1 1 auto;
|
||||
height: 100%;
|
||||
background-color: var(--main-background);
|
||||
}
|
||||
|
||||
.header {
|
||||
margin: 0;
|
||||
color: #333;
|
||||
text-align: center;
|
||||
padding: 2.5em 2em 0;
|
||||
border-bottom: 1px solid #eee;
|
||||
.video-wrapper {
|
||||
justify-content: left;
|
||||
align-items: left;
|
||||
}
|
||||
|
||||
.header h1 {
|
||||
margin: 0.2em 0;
|
||||
font-size: 3em;
|
||||
font-weight: 300;
|
||||
video {
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.header h2 {
|
||||
font-weight: 300;
|
||||
color: #ccc;
|
||||
padding: 0;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.content-subhead {
|
||||
margin: 50px 0 20px 0;
|
||||
font-weight: 300;
|
||||
color: #888;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*
|
||||
The `#menu` `<div>` is the parent `<div>` that contains the `.pure-menu` that
|
||||
appears on the left side of the page.
|
||||
*/
|
||||
|
||||
#menu {
|
||||
margin-left: -150px;
|
||||
/* "#menu" width */
|
||||
width: 240px;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
z-index: 1000;
|
||||
/* so the menu or its navicon stays above all content */
|
||||
background: #191818;
|
||||
main {
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
/*
|
||||
All anchors inside the menu should be styled like this.
|
||||
*/
|
||||
#menu a {
|
||||
color: #999;
|
||||
border: none;
|
||||
padding: 0.6em 0 0.6em 0.6em;
|
||||
aside {
|
||||
width: max-content;
|
||||
flex: 1 0 auto;
|
||||
margin-left: 0px;
|
||||
padding-left: 0px;
|
||||
background-color: var(--menu-background-color);
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/*
|
||||
Remove all background/borders, since we are applying them to #menu.
|
||||
*/
|
||||
#menu .pure-menu,
|
||||
#menu .pure-menu ul {
|
||||
border: none;
|
||||
background: transparent;
|
||||
.menu-list {
|
||||
list-style: none;
|
||||
background-color: brown;
|
||||
margin-top: 0px;
|
||||
}
|
||||
|
||||
/*
|
||||
Add that light border to separate items into groups.
|
||||
*/
|
||||
#menu .pure-menu ul,
|
||||
#menu .pure-menu .menu-item-divided {
|
||||
border-top: 1px solid #333;
|
||||
ul.menu-list {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
/*
|
||||
Change color of the anchor links on hover/focus.
|
||||
*/
|
||||
#menu .pure-menu li a:hover,
|
||||
#menu .pure-menu li a:focus {
|
||||
background: #333;
|
||||
}
|
||||
|
||||
/*
|
||||
This styles the selected menu item `<li>`.
|
||||
*/
|
||||
#menu .pure-menu-selected,
|
||||
#menu .pure-menu-heading {
|
||||
background: #1f8dd6;
|
||||
}
|
||||
|
||||
/*
|
||||
This styles a link within a selected menu item `<li>`.
|
||||
*/
|
||||
#menu .pure-menu-selected a {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/*
|
||||
This styles the menu heading.
|
||||
*/
|
||||
#menu .pure-menu-heading {
|
||||
font-size: 110%;
|
||||
color: #fff;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* -- Dynamic Button For Responsive Menu -------------------------------------*/
|
||||
|
||||
/*
|
||||
The button to open/close the Menu is custom-made and not part of Pure. Here's
|
||||
how it works:
|
||||
*/
|
||||
|
||||
/*
|
||||
`.menu-link` represents the responsive menu toggle that shows/hides on
|
||||
small screens.
|
||||
*/
|
||||
.menu-link {
|
||||
position: fixed;
|
||||
display: block;
|
||||
/* show this only on small screens */
|
||||
top: 0;
|
||||
left: 0;
|
||||
/* "#menu width" */
|
||||
background: #000;
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
font-size: 10px;
|
||||
/* change this value to increase/decrease button size */
|
||||
z-index: 10;
|
||||
width: 2em;
|
||||
height: auto;
|
||||
padding: 2.1em 1.6em;
|
||||
}
|
||||
|
||||
.menu-link:hover,
|
||||
.menu-link:focus {
|
||||
background: #000;
|
||||
}
|
||||
|
||||
.menu-link span {
|
||||
position: relative;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.menu-link span,
|
||||
.menu-link span:before,
|
||||
.menu-link span:after {
|
||||
background-color: #fff;
|
||||
pointer-events: none;
|
||||
width: 100%;
|
||||
height: 0.2em;
|
||||
}
|
||||
|
||||
.menu-link span:before,
|
||||
.menu-link span:after {
|
||||
position: absolute;
|
||||
margin-top: -0.6em;
|
||||
content: " ";
|
||||
}
|
||||
|
||||
.menu-link span:after {
|
||||
margin-top: 0.6em;
|
||||
}
|
||||
|
||||
|
||||
/* -- Responsive Styles (Media Queries) ------------------------------------- */
|
||||
|
||||
/*
|
||||
Hides the menu at `48em`, but modify this based on your app's needs.
|
||||
*/
|
||||
@media (min-width: 48em) {
|
||||
|
||||
.header,
|
||||
.content {
|
||||
a.menu-link {
|
||||
padding-left: 2em;
|
||||
padding-right: 2em;
|
||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
font-size: larger;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
#layout {
|
||||
padding-left: 150px;
|
||||
/* left col width "#menu" */
|
||||
left: 0;
|
||||
.menu-heading {
|
||||
padding-left: 1em;
|
||||
padding-right: 1em;
|
||||
background-color: var(--menu-header-color);
|
||||
color: var(--menu-header-text);
|
||||
font-size: larger;
|
||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
}
|
||||
|
||||
#menu {
|
||||
left: 150px;
|
||||
a.menu-heading {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.menu-link {
|
||||
position: fixed;
|
||||
left: 150px;
|
||||
display: none;
|
||||
.menu-item a {
|
||||
color: aliceblue;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
#layout.active .menu-link {
|
||||
left: 150px;
|
||||
}
|
||||
.menu-item {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@media (max-width: 48em) {
|
||||
li.menu-item {
|
||||
background-color: var(--menu-item-color);
|
||||
margin-top: 1px;
|
||||
}
|
||||
li.menu-item:hover {
|
||||
background-color: var(--menu-item-hover);
|
||||
}
|
||||
|
||||
/* Only apply this when the window is small. Otherwise, the following
|
||||
case results in extra padding on the left:
|
||||
* Make the window small.
|
||||
* Tap the menu to trigger the active state.
|
||||
* Make the window large again.
|
||||
*/
|
||||
#layout.active {
|
||||
position: relative;
|
||||
left: 150px;
|
||||
li.menu-selected {
|
||||
background-color: var(--menu-selected-color)
|
||||
}
|
||||
|
||||
#app {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
}
|
||||
@ -121,9 +121,11 @@ export class MediaContainer extends React.Component<MediaContainerProps, MediaCo
|
||||
render() {
|
||||
return (
|
||||
<div id="main">
|
||||
<div className="content">
|
||||
<main>
|
||||
<div className="video-wrapper">
|
||||
{this.renderVideo()}
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@ -17,12 +17,12 @@ export class Menu extends React.Component<MenuProps> {
|
||||
render() {
|
||||
return (
|
||||
<div id="menu">
|
||||
<div className="pure-menu">
|
||||
<a className="pure-menu-heading" href="#">stream.t-juice.club</a>
|
||||
<ul className="pure-menu-list">
|
||||
<aside>
|
||||
<a className="menu-heading" href="#">stream.t-juice.club</a>
|
||||
<ul className="menu-list">
|
||||
{this.menuitems()}
|
||||
</ul>
|
||||
</div>
|
||||
</aside>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@ -32,11 +32,11 @@ export class Menu extends React.Component<MenuProps> {
|
||||
<>
|
||||
{this.props.items.map((value, idx) => {
|
||||
if (this.props.selectedItem == value) {
|
||||
return <li key={idx} className="pure-menu-item pure-menu-selected"><a href={"#" + value} className="pure-menu-link">{value}</a></li>
|
||||
return <li key={idx} className="menu-item menu-selected"><a href={"#" + value} className="menu-link">{value}</a></li>
|
||||
} else {
|
||||
return <li key={idx} onClick={() => {
|
||||
this.props.selectCallback(value)
|
||||
}} className="pure-menu-item"><a href={"#" + value} className="pure-menu-link">{value}</a></li>
|
||||
}} className="menu-item"><a href={"#" + value} className="menu-link">{value}</a></li>
|
||||
}
|
||||
})}
|
||||
</>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user