admin/avrahamsociety
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

JEKYLLLLLLLL

Browse Source
This commit is contained in:
Lazy Hippopotamus
2023-06-20 08:57:12 -04:00
parent 56f6ed07f9
commit e6e92e5b73
12 changed files with 259 additions and 351 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
.gitignore vendored Normal file
View File

@@ -0,0 +1,5 @@
_site
.sass-cache
.jekyll-cache
.jekyll-metadata
vendor

25
404.html Normal file
View File

@@ -0,0 +1,25 @@
---
permalink: /404.html
layout: default
---
<style type="text/css" media="screen">
.container {
margin: 10px auto;
max-width: 600px;
text-align: center;
}
h1 {
margin: 30px 0;
font-size: 4em;
line-height: 1;
letter-spacing: -1px;
}
</style>
<div class="container">
<h1>404</h1>
<p><strong>Page not found :(</strong></p>
<p>The requested page could not be found.</p>
</div>

33
Gemfile Normal file
View File

@@ -0,0 +1,33 @@
source "https://rubygems.org"
# Hello! This is where you manage which Jekyll version is used to run.
# When you want to use a different version, change it below, save the
# file and run `bundle install`. Run Jekyll with `bundle exec`, like so:
#
# bundle exec jekyll serve
#
# This will help ensure the proper Jekyll version is running.
# Happy Jekylling!
gem "jekyll", "~> 4.3.2"
# This is the default theme for new Jekyll sites. You may change this to anything you like.
gem "minima", "~> 2.5"
# If you want to use GitHub Pages, remove the "gem "jekyll"" above and
# uncomment the line below. To upgrade, run `bundle update github-pages`.
# gem "github-pages", group: :jekyll_plugins
# If you have any plugins, put them here!
group :jekyll_plugins do
gem "jekyll-feed", "~> 0.12"
end
# Windows and JRuby does not include zoneinfo files, so bundle the tzinfo-data gem
# and associated library.
platforms :mingw, :x64_mingw, :mswin, :jruby do
gem "tzinfo", ">= 1", "< 3"
gem "tzinfo-data"
end
# Performance-booster for watching directories on Windows
gem "wdm", "~> 0.1.1", :platforms => [:mingw, :x64_mingw, :mswin]
# Lock `http_parser.rb` gem to `v0.6.x` on JRuby builds since newer versions of the gem
# do not have a Java counterpart.
gem "http_parser.rb", "~> 0.6.0", :platforms => [:jruby]

84
Gemfile.lock Normal file
View File

@@ -0,0 +1,84 @@
GEM
remote: https://rubygems.org/
specs:
addressable (2.8.4)
public_suffix (>= 2.0.2, < 6.0)
colorator (1.1.0)
concurrent-ruby (1.2.2)
em-websocket (0.5.3)
eventmachine (>= 0.12.9)
http_parser.rb (~> 0)
eventmachine (1.2.7)
ffi (1.15.5)
forwardable-extended (2.6.0)
google-protobuf (3.23.3-x86_64-linux)
http_parser.rb (0.8.0)
i18n (1.14.1)
concurrent-ruby (~> 1.0)
jekyll (4.3.2)
addressable (~> 2.4)
colorator (~> 1.0)
em-websocket (~> 0.5)
i18n (~> 1.0)
jekyll-sass-converter (>= 2.0, < 4.0)
jekyll-watch (~> 2.0)
kramdown (~> 2.3, >= 2.3.1)
kramdown-parser-gfm (~> 1.0)
liquid (~> 4.0)
mercenary (>= 0.3.6, < 0.5)
pathutil (~> 0.9)
rouge (>= 3.0, < 5.0)
safe_yaml (~> 1.0)
terminal-table (>= 1.8, < 4.0)
webrick (~> 1.7)
jekyll-feed (0.17.0)
jekyll (>= 3.7, < 5.0)
jekyll-sass-converter (3.0.0)
sass-embedded (~> 1.54)
jekyll-seo-tag (2.8.0)
jekyll (>= 3.8, < 5.0)
jekyll-watch (2.2.1)
listen (~> 3.0)
kramdown (2.4.0)
rexml
kramdown-parser-gfm (1.1.0)
kramdown (~> 2.0)
liquid (4.0.4)
listen (3.8.0)
rb-fsevent (~> 0.10, >= 0.10.3)
rb-inotify (~> 0.9, >= 0.9.10)
mercenary (0.4.0)
minima (2.5.1)
jekyll (>= 3.5, < 5.0)
jekyll-feed (~> 0.9)
jekyll-seo-tag (~> 2.1)
pathutil (0.16.2)
forwardable-extended (~> 2.6)
public_suffix (5.0.1)
rb-fsevent (0.11.2)
rb-inotify (0.10.1)
ffi (~> 1.0)
rexml (3.2.5)
rouge (4.1.2)
safe_yaml (1.0.5)
sass-embedded (1.63.4-x86_64-linux-gnu)
google-protobuf (~> 3.23)
terminal-table (3.0.2)
unicode-display_width (>= 1.1.1, < 3)
unicode-display_width (2.4.2)
webrick (1.8.1)
PLATFORMS
x86_64-linux
DEPENDENCIES
http_parser.rb (~> 0.6.0)
jekyll (~> 4.3.2)
jekyll-feed (~> 0.12)
minima (~> 2.5)
tzinfo (>= 1, < 3)
tzinfo-data
wdm (~> 0.1.1)
BUNDLED WITH
2.4.14

50
_config.yml Normal file
View File

@@ -0,0 +1,50 @@
# Welcome to Jekyll!
#
# This config file is meant for settings that affect your whole blog, values
# which you are expected to set up once and rarely edit after that. If you find
# yourself editing this file very often, consider using Jekyll's data files
# feature for the data you need to update frequently.
#
# For technical reasons, this file is *NOT* reloaded automatically when you use
# 'bundle exec jekyll serve'. If you change this file, please restart the server process.
#
# If you need help with YAML syntax, here are some quick references for you:
# https://learn-the-web.algonquindesign.ca/topics/markdown-yaml-cheat-sheet/#yaml
# https://learnxinyminutes.com/docs/yaml/
#
# Site settings
# These are used to personalize your new site. If you look in the HTML files,
# you will see them accessed via {{ site.title }}, {{ site.email }}, and so on.
# You can create any custom variable you would like, and they will be accessible
# in the templates via {{ site.myvariable }}.
title: Jhew It
email: your-email@example.com
description: >- # this means to ignore newlines until "baseurl:"
Write an awesome description for your new site here. You can edit this
line in _config.yml. It will appear in your document head meta (for
Google search results) and in your feed.xml site description.
baseurl: "" # the subpath of your site, e.g. /blog
url: "" # the base hostname & protocol for your site, e.g. http://example.com
twitter_username: jekyllrb
github_username: jekyll
# Exclude from processing.
# The following items will not be processed, by default.
# Any item listed under the `exclude:` key here will be automatically added to
# the internal "default list".
#
# Excluded items can be processed by explicitly listing the directories or
# their entries' file path in the `include:` list.
#
# exclude:
# - .sass-cache/
# - .jekyll-cache/
# - gemfiles/
# - Gemfile
# - Gemfile.lock
# - node_modules/
# - vendor/bundle/
# - vendor/cache/
# - vendor/gems/
# - vendor/ruby/

4
src/template.html → _layouts/default.html
View File

@@ -13,7 +13,7 @@
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Jhewit | Home</title>
<title>{{ site.title }} | {{ page.title }}</title>
<link rel="stylesheet" href="main.css" />
</head>
<body>
@@ -115,7 +115,7 @@
<img src="res/arrow-right.svg" />
</div>
<div id="content">
{content}
{{ content }}
</div>
<div id="footer">
<p>

18
about.markdown Normal file
View File

@@ -0,0 +1,18 @@
---
layout: default
title: About
permalink: /about/
---
This is the base Jekyll theme. You can find out more info about customizing your Jekyll theme, as well as basic Jekyll usage documentation at [jekyllrb.com](https://jekyllrb.com/)
You can find the source code for Minima at GitHub:
[jekyll][jekyll-organization] /
[minima](https://github.com/jekyll/minima)
You can find the source code for Jekyll at GitHub:
[jekyll][jekyll-organization] /
[jekyll](https://github.com/jekyll/jekyll)
[jekyll-organization]: https://github.com/jekyll

180
index.html
View File

@@ -1,143 +1,51 @@
<!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">
<div class="image-relational-scrolling">
---
layout: default
title: Home
---
<div class="image-relational-scrolling">
<div>
<img src="https://www.rebeccas.com/mm5/graphics/00000001/nv1364.jpg" class="selected" />
<img src="https://www.badeloftusa.com/wp-content/uploads/2019/09/BW-02-XL-WHT-2020.jpg" />
<img src="https://www.applesfromny.com/wp-content/uploads/2020/05/20Ounce_NYAS-Apples2.png" />
<img src="https://res.cloudinary.com/dk-find-out/image/upload/q_80,w_1920,f_auto/pi_gqp5ha.jpg" />
<img src="https://www.thespruceeats.com/thmb/wiFS2z1vLTt3fHKDVaka5KiWshI=/1500x0/filters:no_upscale():max_bytes(150000):strip_icc()/basic-cherry-pie-recipe-995136-14-dfe79487adf64a848a49dd07983b6614.jpg" />
<img
src="https://www.thespruceeats.com/thmb/wiFS2z1vLTt3fHKDVaka5KiWshI=/1500x0/filters:no_upscale():max_bytes(150000):strip_icc()/basic-cherry-pie-recipe-995136-14-dfe79487adf64a848a49dd07983b6614.jpg" />
</div>
<div>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptatibus optio ratione sit. Quibusdam veritatis nemo distinctio dolorem doloribus quos ullam, quisquam consectetur numquam ab fuga sint, nostrum corporis dolor iusto! Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quibusdam consequatur suscipit vitae similique nulla animi inventore nisi perferendis eos, itaque nobis odit ut facilis tempore rerum delectus unde ducimus fuga.
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptatibus optio ratione sit. Quibusdam
veritatis nemo distinctio dolorem doloribus quos ullam, quisquam consectetur numquam ab fuga sint, nostrum
corporis dolor iusto! Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quibusdam consequatur
suscipit vitae similique nulla animi inventore nisi perferendis eos, itaque nobis odit ut facilis tempore
rerum delectus unde ducimus fuga.
</p>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Vitae, quam quisquam. Iste veniam ut velit. Voluptatem laborum repellat, aliquid nisi earum nesciunt eius voluptatum at quis sint perferendis eos dolore. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repellat temporibus omnis excepturi tempore! Illo maxime vel dolor nulla, velit iure. Dolore asperiores accusantium sunt obcaecati nam doloremque suscipit laborum animi!
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Vitae, quam quisquam. Iste veniam ut velit.
Voluptatem laborum repellat, aliquid nisi earum nesciunt eius voluptatum at quis sint perferendis eos
dolore. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repellat temporibus omnis excepturi
tempore! Illo maxime vel dolor nulla, velit iure. Dolore asperiores accusantium sunt obcaecati nam
doloremque suscipit laborum animi!
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit labore ut nihil, tempore quis mollitia voluptates magni? Tenetur, corporis voluptates quia earum blanditiis molestias dignissimos provident inventore aspernatur error assumenda. Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam, et rem. Quo corporis dolorum magnam recusandae facilis voluptatum nostrum a, in perferendis sunt numquam maiores corrupti sed excepturi repudiandae. Tempora!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit labore ut nihil, tempore quis
mollitia voluptates magni? Tenetur, corporis voluptates quia earum blanditiis molestias dignissimos
provident inventore aspernatur error assumenda. Lorem ipsum dolor sit amet consectetur adipisicing elit.
Laboriosam, et rem. Quo corporis dolorum magnam recusandae facilis voluptatum nostrum a, in perferendis sunt
numquam maiores corrupti sed excepturi repudiandae. Tempora!
</p>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Rerum accusamus aliquam commodi voluptates laborum, quia sint facilis dolores aliquid eaque repellat dolor dolorem? Temporibus et rem dolorum neque excepturi optio. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolorem, adipisci rem natus magni eum ducimus alias tempore reprehenderit nulla architecto eveniet a nemo non quis ipsum quo officiis, vel sit!
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Rerum accusamus aliquam commodi voluptates
laborum, quia sint facilis dolores aliquid eaque repellat dolor dolorem? Temporibus et rem dolorum neque
excepturi optio. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolorem, adipisci rem natus magni
eum ducimus alias tempore reprehenderit nulla architecto eveniet a nemo non quis ipsum quo officiis, vel
sit!
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum earum quia laudantium ipsam eius, qui sint. Repellat consectetur asperiores ex ea, earum deserunt in distinctio corrupti, soluta voluptates, tenetur dolore. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Maiores animi necessitatibus, quia expedita architecto molestiae autem perferendis nulla minima quisquam consequatur laborum saepe repellat corporis, temporibus quibusdam omnis id nesciunt.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum earum quia laudantium ipsam eius, qui sint.
Repellat consectetur asperiores ex ea, earum deserunt in distinctio corrupti, soluta voluptates, tenetur
dolore. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Maiores animi necessitatibus, quia
expedita architecto molestiae autem perferendis nulla minima quisquam consequatur laborum saepe repellat
corporis, temporibus quibusdam omnis id nesciunt.
</p>
</div>
</div>
@@ -145,27 +53,9 @@
Parallaxing image below. For reasons beyond my control it may look bad (or even not function at all) on iOS devices.
Parallaxes are primarily useful as dividers between paragraphs.
</p>
<div class="parallax" style="background-image: url('https://www.thoughtco.com/thmb/EXpjUAx2ZEgV64eKcsAsX7Ucl6w=/1500x0/filters:no_upscale():max_bytes(150000):strip_icc():format(webp)/GettyImages_482194715-56a1329e5f9b58b7d0bcf666.jpg');"></div>
<div class="parallax"
style="background-image: url('https://www.thoughtco.com/thmb/EXpjUAx2ZEgV64eKcsAsX7Ucl6w=/1500x0/filters:no_upscale():max_bytes(150000):strip_icc():format(webp)/GettyImages_482194715-56a1329e5f9b58b7d0bcf666.jpg');">
</div>
<p>
Generic paragraph element here
</p>
</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>

9
src/_about.html
View File

@@ -1,9 +0,0 @@
<p>
Some information about Jhewit
</p>
<p>
Some images and such
</p>
<p>
Contact info, perhaps?
</p>

34
src/_index.html
View File

@@ -1,34 +0,0 @@
<div class="image-relational-scrolling">
<div>
<img src="https://www.rebeccas.com/mm5/graphics/00000001/nv1364.jpg" class="selected" />
<img src="https://www.badeloftusa.com/wp-content/uploads/2019/09/BW-02-XL-WHT-2020.jpg" />
<img src="https://www.applesfromny.com/wp-content/uploads/2020/05/20Ounce_NYAS-Apples2.png" />
<img src="https://res.cloudinary.com/dk-find-out/image/upload/q_80,w_1920,f_auto/pi_gqp5ha.jpg" />
<img src="https://www.thespruceeats.com/thmb/wiFS2z1vLTt3fHKDVaka5KiWshI=/1500x0/filters:no_upscale():max_bytes(150000):strip_icc()/basic-cherry-pie-recipe-995136-14-dfe79487adf64a848a49dd07983b6614.jpg" />
</div>
<div>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptatibus optio ratione sit. Quibusdam veritatis nemo distinctio dolorem doloribus quos ullam, quisquam consectetur numquam ab fuga sint, nostrum corporis dolor iusto! Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quibusdam consequatur suscipit vitae similique nulla animi inventore nisi perferendis eos, itaque nobis odit ut facilis tempore rerum delectus unde ducimus fuga.
</p>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Vitae, quam quisquam. Iste veniam ut velit. Voluptatem laborum repellat, aliquid nisi earum nesciunt eius voluptatum at quis sint perferendis eos dolore. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repellat temporibus omnis excepturi tempore! Illo maxime vel dolor nulla, velit iure. Dolore asperiores accusantium sunt obcaecati nam doloremque suscipit laborum animi!
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit labore ut nihil, tempore quis mollitia voluptates magni? Tenetur, corporis voluptates quia earum blanditiis molestias dignissimos provident inventore aspernatur error assumenda. Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam, et rem. Quo corporis dolorum magnam recusandae facilis voluptatum nostrum a, in perferendis sunt numquam maiores corrupti sed excepturi repudiandae. Tempora!
</p>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Rerum accusamus aliquam commodi voluptates laborum, quia sint facilis dolores aliquid eaque repellat dolor dolorem? Temporibus et rem dolorum neque excepturi optio. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolorem, adipisci rem natus magni eum ducimus alias tempore reprehenderit nulla architecto eveniet a nemo non quis ipsum quo officiis, vel sit!
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum earum quia laudantium ipsam eius, qui sint. Repellat consectetur asperiores ex ea, earum deserunt in distinctio corrupti, soluta voluptates, tenetur dolore. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Maiores animi necessitatibus, quia expedita architecto molestiae autem perferendis nulla minima quisquam consequatur laborum saepe repellat corporis, temporibus quibusdam omnis id nesciunt.
</p>
</div>
</div>
<p>
Parallaxing image below. For reasons beyond my control it may look bad (or even not function at all) on iOS devices.
Parallaxes are primarily useful as dividers between paragraphs.
</p>
<div class="parallax" style="background-image: url('https://www.thoughtco.com/thmb/EXpjUAx2ZEgV64eKcsAsX7Ucl6w=/1500x0/filters:no_upscale():max_bytes(150000):strip_icc():format(webp)/GettyImages_482194715-56a1329e5f9b58b7d0bcf666.jpg');"></div>
<p>
Generic paragraph element here
</p>

22
src/_workshop.html
View File

@@ -1,22 +0,0 @@
<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>

142
workshop.html
View File

@@ -1,121 +1,8 @@
<!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>
---
layout: default
title: Workshop
---
<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>
@@ -137,22 +24,3 @@
}
});
</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>