slanty sidebar
This commit is contained in:
Lazy Hippopotamus
18
about.html
18
about.html
@@ -17,7 +17,19 @@
|
||||
<link rel="stylesheet" href="main.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="sider-outer">
|
||||
<svg width="0" height="0"> <!-- clip paths for the sidebar -->
|
||||
<defs>
|
||||
<clipPath id="design-2" clipPathUnits="objectBoundingBox">
|
||||
<path d="M 0,1
|
||||
L 0,0
|
||||
L 0.8,0
|
||||
C 0.8 .5, 0.83 .65, 1 1
|
||||
C .65 1, 0 1, 0 .8
|
||||
Z" />
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
<div id="sider-outer" class="design-1">
|
||||
<div id="sider">
|
||||
<h2>Sidebar</h2>
|
||||
<div id="sider-cats">
|
||||
@@ -54,6 +66,10 @@
|
||||
<a href="about.html">ABOUT JHEWIT</a>
|
||||
</div>
|
||||
<div></div>
|
||||
<div class="link">
|
||||
<a href="workshop.html">DESIGN WORKSHOP</a>
|
||||
</div>
|
||||
<div></div>
|
||||
<div class="dropdown">
|
||||
DROPDOWN MENU
|
||||
</div>
|
||||
|
||||
18
index.html
18
index.html
@@ -17,7 +17,19 @@
|
||||
<link rel="stylesheet" href="main.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="sider-outer">
|
||||
<svg width="0" height="0"> <!-- clip paths for the sidebar -->
|
||||
<defs>
|
||||
<clipPath id="design-2" clipPathUnits="objectBoundingBox">
|
||||
<path d="M 0,1
|
||||
L 0,0
|
||||
L 0.8,0
|
||||
C 0.8 .5, 0.83 .65, 1 1
|
||||
C .65 1, 0 1, 0 .8
|
||||
Z" />
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
<div id="sider-outer" class="design-1">
|
||||
<div id="sider">
|
||||
<h2>Sidebar</h2>
|
||||
<div id="sider-cats">
|
||||
@@ -54,6 +66,10 @@
|
||||
<a href="about.html">ABOUT JHEWIT</a>
|
||||
</div>
|
||||
<div></div>
|
||||
<div class="link">
|
||||
<a href="workshop.html">DESIGN WORKSHOP</a>
|
||||
</div>
|
||||
<div></div>
|
||||
<div class="dropdown">
|
||||
DROPDOWN MENU
|
||||
</div>
|
||||
|
||||
28
main.css
28
main.css
@@ -139,17 +139,39 @@ h1 {
|
||||
}
|
||||
|
||||
#sider-outer {
|
||||
box-sizing: border-box;
|
||||
background-color: pink;
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
position: absolute;
|
||||
overflow: visible !important;
|
||||
z-index: 1000000;
|
||||
width: var(--sidebar-size);
|
||||
top: 0%;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
min-height: 40vh;
|
||||
background-color: blanchedalmond;
|
||||
}
|
||||
|
||||
body.sidebar-opened > #sider-outer.design-1 {
|
||||
clip-path: polygon(0% 0%, 0% 90%, 100% 100%, 100vw 100%, 100vw 0%, 100% 10%);
|
||||
padding-bottom: 5vh;
|
||||
padding-top: 5vh;
|
||||
}
|
||||
|
||||
body.sidebar-opened > #sider-outer.design-2 {
|
||||
clip-path: url(#design-2);
|
||||
padding-bottom: 5vh;
|
||||
padding-top: 5vh;
|
||||
padding-right: 5vw;
|
||||
}
|
||||
|
||||
#sider-outer.design-4 {
|
||||
height: 100vh;
|
||||
padding-top: 3.5em;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#sider {
|
||||
|
||||
22
src/_workshop.html
Normal file
22
src/_workshop.html
Normal file
@@ -0,0 +1,22 @@
|
||||
<h2>This is a development page for sampling new styles &c. I will be removing it for the page launch, of course.</h2>
|
||||
<p>
|
||||
Please select your sidebar style preference:<br></br>
|
||||
<input name="sidebar-style" type="radio" value="design-1" onchange="setStyle(this.value)">Slanted Down<br>
|
||||
<input name="sidebar-style" type="radio" value="design-2" onchange="setStyle(this.value)">Smooth Curve (based on your suggestion)<br>
|
||||
<input name="sidebar-style" type="radio" value="design-3" onchange="setStyle(this.value)">Square (original; bad)<br>
|
||||
<input name="sidebar-style" type="radio" value="design-4" onchange="setStyle(this.value)">Full Height<br>
|
||||
<b>NOTE: On mobile devices, the sidebar will probably fill the whole screen. This is intentional: trying to fit it into half the screen or smaller will leave the text broken.</b>
|
||||
</p>
|
||||
|
||||
<script>
|
||||
function setStyle(valyer) {
|
||||
document.getElementById("sider-outer").className = valyer;
|
||||
}
|
||||
Array.from(document.getElementsByTagName("input")).forEach(item => {
|
||||
if (item.name == "sidebar-style") {
|
||||
if (item.checked) {
|
||||
setStyle(item.value);
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
@@ -17,7 +17,19 @@
|
||||
<link rel="stylesheet" href="main.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="sider-outer">
|
||||
<svg width="0" height="0"> <!-- clip paths for the sidebar -->
|
||||
<defs>
|
||||
<clipPath id="design-2" clipPathUnits="objectBoundingBox">
|
||||
<path d="M 0,1
|
||||
L 0,0
|
||||
L 0.8,0
|
||||
C 0.8 .5, 0.83 .65, 1 1
|
||||
C .65 1, 0 1, 0 .8
|
||||
Z" />
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
<div id="sider-outer" class="design-1">
|
||||
<div id="sider">
|
||||
<h2>Sidebar</h2>
|
||||
<div id="sider-cats">
|
||||
@@ -54,6 +66,10 @@
|
||||
<a href="about.html">ABOUT JHEWIT</a>
|
||||
</div>
|
||||
<div></div>
|
||||
<div class="link">
|
||||
<a href="workshop.html">DESIGN WORKSHOP</a>
|
||||
</div>
|
||||
<div></div>
|
||||
<div class="dropdown">
|
||||
DROPDOWN MENU
|
||||
</div>
|
||||
|
||||
158
workshop.html
Normal file
158
workshop.html
Normal file
@@ -0,0 +1,158 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
|
||||
<!--
|
||||
Kuwait flag colors:
|
||||
Green: #007b3a
|
||||
Red: #cf0821
|
||||
Black: black
|
||||
White: white
|
||||
-->
|
||||
|
||||
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Jhewit | Home</title>
|
||||
<link rel="stylesheet" href="main.css" />
|
||||
</head>
|
||||
<body>
|
||||
<svg width="0" height="0"> <!-- clip paths for the sidebar -->
|
||||
<defs>
|
||||
<clipPath id="design-2" clipPathUnits="objectBoundingBox">
|
||||
<path d="M 0,1
|
||||
L 0,0
|
||||
L 0.8,0
|
||||
C 0.8 .5, 0.83 .65, 1 1
|
||||
C .65 1, 0 1, 0 .8
|
||||
Z" />
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
<div id="sider-outer" class="design-1">
|
||||
<div id="sider">
|
||||
<h2>Sidebar</h2>
|
||||
<div id="sider-cats">
|
||||
<input type="checkbox" id="i_1" class="hidden" />
|
||||
<label for="i_1">Category 1</label>
|
||||
<div>
|
||||
<a href="#">This is a link</a><br>
|
||||
<a href="#">Another link</a>
|
||||
</div><br>
|
||||
<input type="checkbox" id="i_2" class="hidden" />
|
||||
<label for="i_2">Category 2</label>
|
||||
<div>
|
||||
<a href="#">Third link, new category</a><br>
|
||||
<a href="#">Links.</a>
|
||||
</div>
|
||||
</div>
|
||||
<img src="res/arrow-none.svg" onclick="toggle_sidebar()" />
|
||||
</div>
|
||||
</div>
|
||||
<div id="outer">
|
||||
<div id="header">
|
||||
<div id="head-marker" class="scrolly"></div>
|
||||
<div id="headin">
|
||||
<h1>Jhewit</h1>
|
||||
<div id="links-outer">
|
||||
<input id="hambugha" type="checkbox" style="display: none;">
|
||||
<label for="hambugha">Ham</label>
|
||||
<div id="links">
|
||||
<div class="link">
|
||||
<a href="index.html">HOME</a>
|
||||
</div>
|
||||
<div></div>
|
||||
<div class="link">
|
||||
<a href="about.html">ABOUT JHEWIT</a>
|
||||
</div>
|
||||
<div></div>
|
||||
<div class="link">
|
||||
<a href="workshop.html">DESIGN WORKSHOP</a>
|
||||
</div>
|
||||
<div></div>
|
||||
<div class="dropdown">
|
||||
DROPDOWN MENU
|
||||
</div>
|
||||
<div>
|
||||
<div class="dropdown-inner">
|
||||
<a>DROPDOWN MENU LINK</a>
|
||||
</div>
|
||||
</div>
|
||||
<!--<div>
|
||||
<div class="dropdown-inner">
|
||||
<a href="#">
|
||||
LINK
|
||||
</a>
|
||||
<a href="#">
|
||||
LINK
|
||||
</a>
|
||||
<a href="#">
|
||||
LINK
|
||||
</a>
|
||||
</div>
|
||||
</div>-->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="carousel-outer">
|
||||
<img src="res/arrow-left.svg" />
|
||||
<div class="carousel" id="carousel_1">
|
||||
<div style="background-image: url(https://www.rebeccas.com/mm5/graphics/00000001/nv1364.jpg);" class="selected">Category #1</div>
|
||||
<div style="background-image: url(https://www.rebeccas.com/mm5/graphics/00000001/nv1364.jpg);">Category #2</div>
|
||||
<div style="background-image: url(https://www.rebeccas.com/mm5/graphics/00000001/nv1364.jpg);">Category #3</div>
|
||||
<div style="background-image: url(https://www.rebeccas.com/mm5/graphics/00000001/nv1364.jpg);">Category #4</div>
|
||||
<div style="background-image: url(https://www.rebeccas.com/mm5/graphics/00000001/nv1364.jpg);">Category #5</div>
|
||||
<div style="background-image: url(https://www.rebeccas.com/mm5/graphics/00000001/nv1364.jpg);">Category #6</div>
|
||||
<div style="background-image: url(https://www.rebeccas.com/mm5/graphics/00000001/nv1364.jpg);">Category #7</div>
|
||||
<div style="background-image: url(https://www.rebeccas.com/mm5/graphics/00000001/nv1364.jpg);">Category #8</div>
|
||||
<div style="background-image: url(https://www.rebeccas.com/mm5/graphics/00000001/nv1364.jpg);">Category #9</div>
|
||||
<div style="background-image: url(https://www.rebeccas.com/mm5/graphics/00000001/nv1364.jpg);">Category #10</div>
|
||||
<div style="background-image: url(https://www.rebeccas.com/mm5/graphics/00000001/nv1364.jpg);">Category #11</div>
|
||||
<div style="background-image: url(https://www.rebeccas.com/mm5/graphics/00000001/nv1364.jpg);">Category #12</div>
|
||||
<div style="background-image: url(https://www.rebeccas.com/mm5/graphics/00000001/nv1364.jpg);">Category #13</div>
|
||||
</div>
|
||||
<img src="res/arrow-right.svg" />
|
||||
</div>
|
||||
<div id="content">
|
||||
<h2>This is a development page for sampling new styles &c. I will be removing it for the page launch, of course.</h2>
|
||||
<p>
|
||||
Please select your sidebar style preference:<br></br>
|
||||
<input name="sidebar-style" type="radio" value="design-1" onchange="setStyle(this.value)">Slanted Down<br>
|
||||
<input name="sidebar-style" type="radio" value="design-2" onchange="setStyle(this.value)">Smooth Curve (based on your suggestion)<br>
|
||||
<input name="sidebar-style" type="radio" value="design-3" onchange="setStyle(this.value)">Square (original; bad)<br>
|
||||
<input name="sidebar-style" type="radio" value="design-4" onchange="setStyle(this.value)">Full Height<br>
|
||||
<b>NOTE: On mobile devices, the sidebar will probably fill the whole screen. This is intentional: trying to fit it into half the screen or smaller will leave the text broken.</b>
|
||||
</p>
|
||||
|
||||
<script>
|
||||
function setStyle(valyer) {
|
||||
document.getElementById("sider-outer").className = valyer;
|
||||
}
|
||||
Array.from(document.getElementsByTagName("input")).forEach(item => {
|
||||
if (item.name == "sidebar-style") {
|
||||
if (item.checked) {
|
||||
setStyle(item.value);
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</div>
|
||||
<div id="footer">
|
||||
<p>
|
||||
This is a footer for content to go into.
|
||||
</p>
|
||||
<p>
|
||||
This is another part of the footer for more content.
|
||||
</p>
|
||||
<p>
|
||||
The footer is good for a quick About blurb, social icons, etc.
|
||||
</p>
|
||||
</div>
|
||||
<div id="truebottom">
|
||||
Website by <a href="https://swaous.asuscomm.com">Tyler Clarke</a>.
|
||||
</div>
|
||||
</div>
|
||||
<script src="main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user