├── .github
    ├── ISSUE_TEMPLATE
    │   ├── bugreport.yml
    │   └── newidea.yml
    └── PULL_REQUEST_TEMPLATE
    │   └── Pull_Request_Template.md
├── CODE_OF_CONDUCT.md
├── CONTRIBUTING.md
├── Contributors.md
├── LICENSE
├── README.md
├── SECURITY.md
├── TOOLBOX.md
├── index.html
├── layout.css
├── logo.png
├── pages
    ├── hrithik0112.html
    ├── img
    │   ├── hrithik0112
    │   │   └── hrithik0112-social.png
    │   ├── omicreativedev
    │   │   └── omicreative-social.jpg
    │   └── thankyou
    │   │   ├── bg.gif
    │   │   ├── contributor_badge.png
    │   │   ├── thankyou-social.jpg
    │   │   └── w9nksc8w.png
    ├── js
    │   └── themeswitcher_subdir.js
    ├── omicreativedev.html
    ├── pranav-reddy.html
    └── thankyou.html
├── pages_list.txt
├── script.js
├── themes
    ├── dark.css
    ├── fall.css
    ├── galaxy.css
    ├── light.css
    ├── spring.css
    └── tritan.css
└── themes_list.txt


/.github/ISSUE_TEMPLATE/bugreport.yml:
--------------------------------------------------------------------------------
 1 | name: "🐞 Bug Report"
 2 | description: Encountered a bug? Report it here
 3 | title: "🐞 [BUG] - <title>"
 4 | labels: ["bug"]
 5 | body:
 6 |   - type: checkboxes
 7 |     id: terms
 8 |     attributes:
 9 |       label: Issue Verification
10 |       description: Before you open an issue, please verify that it's indeed a bug and hasn't been reported before.
11 |       options:
12 |         - label: I have verified that this is a new bug report.
13 |           required: true
14 |   - type: textarea
15 |     id: describe-the-bug
16 |     attributes:
17 |       label: Describe the Bug
18 |       description: Please provide a clear and detailed description of the bug you've encountered.
19 |       placeholder: Describe the issue you're facing, including any error messages, unexpected behavior, and steps to reproduce.
20 |     validations:
21 |       required: false
22 |   - type: textarea
23 |     id: expected-behavior
24 |     attributes:
25 |       label: Expected Behavior
26 |       description: What did you expect to happen instead of the bug you've described?
27 |       placeholder: Explain the expected outcome or behavior.
28 |     validations:
29 |       required: false
30 |   - type: textarea
31 |     id: steps-to-reproduce
32 |     attributes:
33 |       label: Steps to Reproduce
34 |       description: Please provide clear, step-by-step instructions on how to reproduce the bug.
35 |       placeholder: List the exact steps you followed to encounter the bug.
36 |     validations:
37 |       required: false
38 |   - type: textarea
39 |     attributes:
40 |       label: Additional Context, Suggestions or Instructions
41 |       description: Additional information (Optional).
42 |     validations:
43 |       required: false
44 | 


--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/newidea.yml:
--------------------------------------------------------------------------------
 1 | name: "💡 New Idea"
 2 | description: Have an idea? Explain it here.
 3 | title: "💡 [IDEA] - <title>"
 4 | labels: ["hacktoberfest"]
 5 | body:
 6 |   - type: checkboxes
 7 |     id: terms
 8 |     attributes:
 9 |       label: Idea Verification
10 |       description: Before you create an idea, please verify that you've visited the site and read the Docs.
11 |       options:
12 |         - label: I have viewed the site and read the documentation.
13 |           required: true
14 |   - type: textarea
15 |     id: describe-the-idea
16 |     attributes:
17 |       label: Describe the Idea
18 |       description: Please provide a clear and detailed description of the idea you have.
19 |       placeholder: Describe the idea.
20 |     validations:
21 |       required: false
22 |   - type: textarea
23 |     id: additional-tools
24 |     attributes:
25 |       label: Additional Tools
26 |       description: Will any additional tools or libraries be needed to implement this idea?
27 |       placeholder: List links, images, concepts, etc.
28 |     validations:
29 |       required: false
30 |   - type: textarea
31 |     attributes:
32 |       label: Additional Context, Suggestions or Instructions
33 |       description: Additional information (Optional).
34 |     validations:
35 |       required: false
36 | 


--------------------------------------------------------------------------------
/.github/PULL_REQUEST_TEMPLATE/Pull_Request_Template.md:
--------------------------------------------------------------------------------
 1 | ### Summary
 2 | _Give an overview of the issue._
 3 | 
 4 | ### Issue related to
 5 | _What is the issue related to?_
 6 | <!-- If so, What's the issue number? -->
 7 | Issue Number: #ISSUE_NUMBER
 8 | 
 9 | # Changes made
10 | _What are the changes that you have applied?_
11 | 
12 | ### Contribution
13 | _What is the category of your contribution?_
14 | - [ ] Page  
15 | - [ ] Theme
16 | - [ ] Debugging
17 | - [ ] Enhancement
18 | - [ ] Feature
19 | 
20 | # Checklist
21 | - [ ] I have read the documentation
22 | - [ ] I have ensured my fork/branch was updated
23 | - [ ] I have checked for and resolved conflicts
24 | - [ ] I crafted this pull request on my own, free from any plagiarism
25 | 
26 | 


--------------------------------------------------------------------------------
/CODE_OF_CONDUCT.md:
--------------------------------------------------------------------------------
 1 | # Code-of-Conduct
 2 | 
 3 | This is a Code of Conduct for this repository. This is [largely based on the p5.js Code of Conduct](https://github.com/processing/p5.js/blob/main/CODE_OF_CONDUCT.md) and applies to all interactions here on GitHub, Discord, YouTube comments, and YouTube chat.
 4 | 
 5 | * **Be mindful of your language.** Any of the following behavior is unacceptable: 
 6 |   * Offensive comments related to gender identity and expression, sexual orientation, race, ethnicity, language, neuro-type, size, ability, class, religion, culture, subculture, political opinion, age, skill level, occupation, or background
 7 |   * Threats of violence
 8 |   * Deliberate intimidation
 9 |   * Sexually explicit or violent material
10 |   * Unwelcome sexual attention
11 |   * Stalking or following
12 |   * Or any other kinds of harassment
13 | 
14 |   Use your best judgement. If it will possibly make others uncomfortable, do not post it.
15 | 
16 | * **Be respectful.** Disagreement is not an opportunity to attack someone else's thoughts or opinions. Although views may differ, remember to approach every situation with patience and care. 
17 | * **Be considerate.** Think about how your contribution will affect others in the community. 
18 | * **Be open minded.** Embrace new people and new ideas. Our community is continually evolving and we welcome positive change.
19 | 
20 | If you believe someone is violating the code of conduct, we ask that you report it by emailing omi@omicreative.dev. Please include your name and a description of the incident, and we will get back to you ASAP.
21 | 
22 | Participants asked to stop any harassing behavior are expected to comply immediately. If a participant engages in harassing behavior, the Coding Train may take any action they deem appropriate, up to and including expulsion from all Coding Train spaces and identification of the participant as a harasser to other Coding Train members or the general public. 
23 | 
24 | Read https://www.contributor-covenant.org/adopters/
25 | This code of conduct may change based on problems that may arise.
26 | 


--------------------------------------------------------------------------------
/CONTRIBUTING.md:
--------------------------------------------------------------------------------
 1 | ## Important Notes:
 2 | * If handling an Issue or Bug or Enhancement, PLEASE WAIT FOR APPROVAL to get started.
 3 | * **ALWAYS MAKE SURE YOUR BRANCH IS UP TO DATE AND CONFLICTS RESOLVED (IF POSSIBLE) BEFORE YOU PR**
 4 |   
 5 | ## PR 1 - Create A New DEMO Page
 6 | * Copy and existing page and name it anything, ex: demo.html and should be in the same folder as omicreativedev.html
 7 | * Edit the contents ofdemo.html
 8 | * Don't remove the javascript, the themeswitch drowpdown, or the link back to home!
 9 | * YES, you can change or remove styling classes BUT your page SHOULD use the themeswitcher and look good with all themes.
10 | * YES, you can add custom CSS to the header of demo.html IN ADDITION to using the themes.
11 | * TEST ALL YOUR CODE LOCALLY and make SURE it is SAFE and that nothing breaks BEFORE requesting to merge.
12 | * YES, if you know how, you can add custom Javascript. It MUST be safe!
13 | * DO NOT ALTER any theme files when making a page or other pages in the site.
14 | * If your page needs images, you can add them in pages/img/filename/
15 | * If your make an external JS file for just your page, put it in pages/js/filename/
16 | * If you have an image or js file that ANYONE can use, put it in pages/img/ or pages/js/ respectively.
17 | * If you have to make a change to another page or theme, please comment your change with your username and profile link
18 | * When you create a page, you must update pages_list.txt
19 | * Your PR should be demo.html, pages_list.txt, and contributors.md ONLY
20 |   #### SOME PAGE IDEAS - MAKE PAGES NICE not EASY. Challenge yourself! Be creative!
21 |     * Soundcloud Playlist
22 |     * Spotify Pre-save
23 |     * Link In Bio Page
24 |     * A Haiku
25 |     * A Pure CSS Graphic
26 |     * An AI Generated Meme
27 | ## PR 2 - Create A New Theme in Themes Folder
28 | * Start by copying an existing theme and renaming it to whatever you like (keep it PG rated!)
29 | * Edit the theme so that it is 100% unique.
30 | * Add your name in a comment and link to your github and/or twitter to the top of the theme
31 | * Changes to other themes/pages should NOT break or significantly disturb other people's themes, pages, layouts.
32 | * TEST ALL YOUR CODE LOCALLY and make SURE it is SAFE and that nothing breaks BEFORE requesting to merge.
33 | * WE ARE NOT converting to LESS or SCSS for the purpose of this being beginner friendly.
34 | * When you create a theme, you must update themes_list.txt
35 | * Your PR should be yourtheme.css, themes_list.txt, and contributors.md ONLY
36 |   #### SOME THEME IDEAS
37 |     * A Halloween Theme
38 |     * A Winter Theme with Snow
39 |     * A Hyperwave Theme
40 |     * A Minimalist Theme
41 | ## OTHER PR IDEAS
42 | * Fix an Issue
43 | * Suggest an Enhancement
44 | ## WHAT NOT TO DO
45 | * Do not forget to keep your branch updated and resolve any problems before making a pull request.
46 | * Do not stray too far from the path! I don't have the capacity to deal with a lot of branch conflicts. Please stay within the the scope of creating pages and themes. Themes should work on all pages. Nothing should break. Everything should be in neat folders where it belongs so nothing becomes too messy.
47 | * Do not spam. This includes making PRs for small typos, fixing white space, etc. [Here are some examples of bad practices](https://twitter.com/shitoberfest). If it is a small change, just bring it up in a discussion or raise an issue.
48 | ## Note About Contributors.md
49 |   You should update [this file](https://github.com/omicreativedev/hacktoberfest2023/blob/main/Contributors.md) when you make any request to merge to ensure your information is in this file.
50 | 


--------------------------------------------------------------------------------
/Contributors.md:
--------------------------------------------------------------------------------
 1 | 
 2 | <div align="center">
 3 | <a href="https://github.com/omicreativedev/ThemeSwitcher/graphs/contributors">
 4 | <!-- <img src="https://contrib.rocks/image?repo=omicreativedev/ThemeSwitcher"> -->
 5 |  <img src="https://readme-contributors.now.sh/omicreativedev/ThemeSwitcher?width=500&spacing=2">
 6 | </a>
 7 | </div>
 8 | 
 9 | 
10 | 
11 | [Starkuser24](https://github.com/Starkuser24)
12 | * Created Pull Request Template
13 | 
14 | [medinamohamed](https://github.com/medinamohamed)
15 | * Added Fall.css Theme
16 | 
17 | [hemanth110702](https://github.com/hemanth110702)
18 | * Fixed Bug: Removed blank spaces from dropdown
19 | 
20 | [jfmartinz](https://github.com/jfmartinz)
21 | * Added Issue Template
22 | 
23 |   [dxeon](https://github.com/dxeon)
24 | * Refactor populateThemeDropdown() function
25 | 
26 | 
27 | [debuuuu007](https://github.com/debuuuu007)
28 | * added a theme tritan and also refactor a little part of css code
29 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
  1 | Creative Commons Legal Code
  2 | 
  3 | CC0 1.0 Universal
  4 | 
  5 |     CREATIVE COMMONS CORPORATION IS NOT A LAW FIRM AND DOES NOT PROVIDE
  6 |     LEGAL SERVICES. DISTRIBUTION OF THIS DOCUMENT DOES NOT CREATE AN
  7 |     ATTORNEY-CLIENT RELATIONSHIP. CREATIVE COMMONS PROVIDES THIS
  8 |     INFORMATION ON AN "AS-IS" BASIS. CREATIVE COMMONS MAKES NO WARRANTIES
  9 |     REGARDING THE USE OF THIS DOCUMENT OR THE INFORMATION OR WORKS
 10 |     PROVIDED HEREUNDER, AND DISCLAIMS LIABILITY FOR DAMAGES RESULTING FROM
 11 |     THE USE OF THIS DOCUMENT OR THE INFORMATION OR WORKS PROVIDED
 12 |     HEREUNDER.
 13 | 
 14 | Statement of Purpose
 15 | 
 16 | The laws of most jurisdictions throughout the world automatically confer
 17 | exclusive Copyright and Related Rights (defined below) upon the creator
 18 | and subsequent owner(s) (each and all, an "owner") of an original work of
 19 | authorship and/or a database (each, a "Work").
 20 | 
 21 | Certain owners wish to permanently relinquish those rights to a Work for
 22 | the purpose of contributing to a commons of creative, cultural and
 23 | scientific works ("Commons") that the public can reliably and without fear
 24 | of later claims of infringement build upon, modify, incorporate in other
 25 | works, reuse and redistribute as freely as possible in any form whatsoever
 26 | and for any purposes, including without limitation commercial purposes.
 27 | These owners may contribute to the Commons to promote the ideal of a free
 28 | culture and the further production of creative, cultural and scientific
 29 | works, or to gain reputation or greater distribution for their Work in
 30 | part through the use and efforts of others.
 31 | 
 32 | For these and/or other purposes and motivations, and without any
 33 | expectation of additional consideration or compensation, the person
 34 | associating CC0 with a Work (the "Affirmer"), to the extent that he or she
 35 | is an owner of Copyright and Related Rights in the Work, voluntarily
 36 | elects to apply CC0 to the Work and publicly distribute the Work under its
 37 | terms, with knowledge of his or her Copyright and Related Rights in the
 38 | Work and the meaning and intended legal effect of CC0 on those rights.
 39 | 
 40 | 1. Copyright and Related Rights. A Work made available under CC0 may be
 41 | protected by copyright and related or neighboring rights ("Copyright and
 42 | Related Rights"). Copyright and Related Rights include, but are not
 43 | limited to, the following:
 44 | 
 45 |   i. the right to reproduce, adapt, distribute, perform, display,
 46 |      communicate, and translate a Work;
 47 |  ii. moral rights retained by the original author(s) and/or performer(s);
 48 | iii. publicity and privacy rights pertaining to a person's image or
 49 |      likeness depicted in a Work;
 50 |  iv. rights protecting against unfair competition in regards to a Work,
 51 |      subject to the limitations in paragraph 4(a), below;
 52 |   v. rights protecting the extraction, dissemination, use and reuse of data
 53 |      in a Work;
 54 |  vi. database rights (such as those arising under Directive 96/9/EC of the
 55 |      European Parliament and of the Council of 11 March 1996 on the legal
 56 |      protection of databases, and under any national implementation
 57 |      thereof, including any amended or successor version of such
 58 |      directive); and
 59 | vii. other similar, equivalent or corresponding rights throughout the
 60 |      world based on applicable law or treaty, and any national
 61 |      implementations thereof.
 62 | 
 63 | 2. Waiver. To the greatest extent permitted by, but not in contravention
 64 | of, applicable law, Affirmer hereby overtly, fully, permanently,
 65 | irrevocably and unconditionally waives, abandons, and surrenders all of
 66 | Affirmer's Copyright and Related Rights and associated claims and causes
 67 | of action, whether now known or unknown (including existing as well as
 68 | future claims and causes of action), in the Work (i) in all territories
 69 | worldwide, (ii) for the maximum duration provided by applicable law or
 70 | treaty (including future time extensions), (iii) in any current or future
 71 | medium and for any number of copies, and (iv) for any purpose whatsoever,
 72 | including without limitation commercial, advertising or promotional
 73 | purposes (the "Waiver"). Affirmer makes the Waiver for the benefit of each
 74 | member of the public at large and to the detriment of Affirmer's heirs and
 75 | successors, fully intending that such Waiver shall not be subject to
 76 | revocation, rescission, cancellation, termination, or any other legal or
 77 | equitable action to disrupt the quiet enjoyment of the Work by the public
 78 | as contemplated by Affirmer's express Statement of Purpose.
 79 | 
 80 | 3. Public License Fallback. Should any part of the Waiver for any reason
 81 | be judged legally invalid or ineffective under applicable law, then the
 82 | Waiver shall be preserved to the maximum extent permitted taking into
 83 | account Affirmer's express Statement of Purpose. In addition, to the
 84 | extent the Waiver is so judged Affirmer hereby grants to each affected
 85 | person a royalty-free, non transferable, non sublicensable, non exclusive,
 86 | irrevocable and unconditional license to exercise Affirmer's Copyright and
 87 | Related Rights in the Work (i) in all territories worldwide, (ii) for the
 88 | maximum duration provided by applicable law or treaty (including future
 89 | time extensions), (iii) in any current or future medium and for any number
 90 | of copies, and (iv) for any purpose whatsoever, including without
 91 | limitation commercial, advertising or promotional purposes (the
 92 | "License"). The License shall be deemed effective as of the date CC0 was
 93 | applied by Affirmer to the Work. Should any part of the License for any
 94 | reason be judged legally invalid or ineffective under applicable law, such
 95 | partial invalidity or ineffectiveness shall not invalidate the remainder
 96 | of the License, and in such case Affirmer hereby affirms that he or she
 97 | will not (i) exercise any of his or her remaining Copyright and Related
 98 | Rights in the Work or (ii) assert any associated claims and causes of
 99 | action with respect to the Work, in either case contrary to Affirmer's
100 | express Statement of Purpose.
101 | 
102 | 4. Limitations and Disclaimers.
103 | 
104 |  a. No trademark or patent rights held by Affirmer are waived, abandoned,
105 |     surrendered, licensed or otherwise affected by this document.
106 |  b. Affirmer offers the Work as-is and makes no representations or
107 |     warranties of any kind concerning the Work, express, implied,
108 |     statutory or otherwise, including without limitation warranties of
109 |     title, merchantability, fitness for a particular purpose, non
110 |     infringement, or the absence of latent or other defects, accuracy, or
111 |     the present or absence of errors, whether or not discoverable, all to
112 |     the greatest extent permissible under applicable law.
113 |  c. Affirmer disclaims responsibility for clearing rights of other persons
114 |     that may apply to the Work or any use thereof, including without
115 |     limitation any person's Copyright and Related Rights in the Work.
116 |     Further, Affirmer disclaims responsibility for obtaining any necessary
117 |     consents, permissions or other rights required for any use of the
118 |     Work.
119 |  d. Affirmer understands and acknowledges that Creative Commons is not a
120 |     party to this document and has no duty or obligation with respect to
121 |     this CC0 or use of the Work.
122 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | ![ThemeSwitcher Logo](https://github.com/omicreativedev/ThemeSwitcher/raw/main/logo.png)
 2 | 
 3 | Autism wcag a11y
 4 | 
 5 | This project is a free website template (CC0-OpenSource) with theme switcher and page switcher written in Javascript. You can drop the theme switcher and/or page switcher into your project. Or you can download the website as a free template and use it to get started.
 6 | 
 7 | ### Features
 8 | - Flat file list of themes located in a theme folder so you can make multiple css files for your site!
 9 | - Flat file list of pages located in a pages folder so you can make webpages, presentation slides, activities, etc.
10 | - Magically ✨🧙‍♂️✨ switch your fancy theme to an <a href="https://venngage.com/blog/accessible-colors/">Accessible Color Scheme</a> or Darkmode 🐱‍👤
11 | 
12 | For Hacktoberfest, I will be listing ongoing issues and enhancement ideas that you can partake in including no-code, low-code, documentation, ux, graphics, and more. If you have an idea or suggestion, feel free to raise an issue or start a  [Discussions](https://github.com/omicreativedev/hacktoberfest2023/discussions). This site is very basic, and I made it after learning on freeCodeCamp. 💖💖💖 Anyone can do it!
13 | 
14 | 🤩
15 | 
16 | ## Stack
17 | <div align="center">
18 | <img src="https://img.shields.io/badge/html5-%23E34F26.svg?style=for-the-badge&logo=html5&logoColor=white" alt="HTML5">
19 | <img src="https://img.shields.io/badge/css3-%231572B6.svg?style=for-the-badge&logo=css3&logoColor=white" alt="CSS3">
20 | <img src="https://img.shields.io/badge/javascript-%23323330.svg?style=for-the-badge&logo=javascript&logoColor=%23F7DF1E" alt="JAVASCRIPT">
21 | </div>
22 | 
23 | ## Contributors  🎉
24 | <div align="center">
25 | <a href="https://github.com/omicreativedev/ThemeSwitcher/graphs/contributors">
26 | <!-- <img src="https://contrib.rocks/image?repo=omicreativedev/ThemeSwitcher"> -->
27 |  <img src="https://readme-contributors.now.sh/omicreativedev/ThemeSwitcher?width=400&spacing=1">
28 | </a>
29 | </div>
30 | 
31 | ## Contributing
32 | 
33 | * Read the [README.md](https://github.com/omicreativedev/ThemeSwitcher/blob/main/README.md)
34 | * Look at how the [Website](https://omicreativedev.github.io/ThemeSwitcher/) works
35 | * Read about [CONTRIBUTING.md](https://github.com/omicreativedev/ThemeSwitcher/blob/main/CONTRIBUTING.md)
36 | * Read the [CODE_OF_CONDUCT.md](https://github.com/omicreativedev/ThemeSwitcher/blob/main/CODE_OF_CONDUCT.md)
37 | * Find or Raise an issue and wait for approval -OR- just get started making a page or theme.
38 | * [Learn more about the fork workflow here 🏹](https://reflectoring.io/github-fork-and-pull/)
39 | * Fork the repository and make your changes.
40 | * Create your PR!
41 | * Wait for feedback or approval (Tweet me or DM on X or Discord for faster response)
42 | * Get Merged 🎉🎈🥳
43 | 
44 | ## Demo
45 | - Live: https://omicreative.dev/Themer/
46 | - Dev: https://omicreativedev.github.io/ThemeSwitcher/
47 | 
48 | ## Support
49 | * 👽 [Github](https://github.com/omicreativedev)
50 | * 🐤 [❌itter](https://twitter.com/omicreativedev)
51 | * 👾 [DISCORD](https://discord.gg/DWFRBv3JEy)
52 | 
53 | ## License
54 | CC0
55 | 
56 | ## Share
57 | 
58 | [...](https://twitter.com/intent/tweet?text=https%3A%2F%2Fomicreativedev.github.io%2Fhacktoberfest2023%2Fpages%2Fthankyou.html%0A%F0%9F%8E%88%F0%9F%A5%B3%20I%20just%20merged%20an%20%23opensource%20PR%20for%20%23Hacktoberfest%20)
59 | 


--------------------------------------------------------------------------------
/SECURITY.md:
--------------------------------------------------------------------------------
 1 | # Security Policy
 2 | 
 3 | ## Supported Versions
 4 | 
 5 | Use this section to tell people about which versions of your project are
 6 | currently being supported with security updates.
 7 | 
 8 | | Version | Supported          |
 9 | | ------- | ------------------ |
10 | | 5.1.x   | :white_check_mark: |
11 | | 5.0.x   | :x:                |
12 | | 4.0.x   | :white_check_mark: |
13 | | < 4.0   | :x:                |
14 | 
15 | ## Reporting a Vulnerability
16 | 
17 | Use this section to tell people how to report a vulnerability.
18 | 
19 | Tell them where to go, how often they can expect to get an update on a
20 | reported vulnerability, what to expect if the vulnerability is accepted or
21 | declined, etc.
22 | 


--------------------------------------------------------------------------------
/TOOLBOX.md:
--------------------------------------------------------------------------------
 1 | Below are some helpful free tools for working with this repository. 
 2 | 
 3 | 
 4 | [Screenshot Machine Screenshot Generator](https://www.screenshotmachine.com/website-screenshot-generator.php)
 5 | This tool is helpful for making an og:image for your profile page you create. This will make your page show up nice if you post it to social media. You can use 1200 (width) x 630 (height) as a JPG to make the right size for an og:image. You can upload it to img/yourusername/ and link it in the meta tags of your page.
 6 | ```
 7 |   <meta property="og:image" content="img/yourname/social.jpg">
 8 | ```
 9 | [Favicon Favicon Generator](https://favicon.io/)
10 | This tool will help you to make a favicon for your page. It may or may not show up (YMMV). A favicon is 32 (width) x 32 (height) and in ico format.
11 | [Meta URL Debugger](https://developers.facebook.com/tools/debug/)
12 | Use this tool to verify if your meta-tags on your page are as expected.
13 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <meta name="description" content="omicreativedev/hacktoberfest2023" />
 8 |     <meta property="og:title" content="Happy Hacktoberfest!" />
 9 |     <meta property="og:description" content="omicreativedev/hacktoberfest2023" />
10 |     <!--DON'T EDIT og:image-->
11 |     <meta property="og:image" content="https://repository-images.githubusercontent.com/701103132/df77a062-b115-4b01-8c8e-a5d7d9ebd6c7" />
12 |     <meta property="og:url" content="https://github.com/omicreativedev/hacktoberfest2023" />
13 |     <link id="default-css" rel="stylesheet" type="text/css" href="layout.css" />
14 |     <link id="theme-style" rel="stylesheet" type="text/css" href="themes/light.css" />
15 |     <title>Happy Hacktoberfest</title>
16 | </head>
17 | 
18 | <body>
19 |     <div class="profile-content">
20 |         <div class="page-main whtbg">
21 |             <main>
22 |                 <h1 class="index">
23 |                     Simple JS ThemeSwitcher
24 |                 </h1>
25 |                 <p class="index-text">
26 |                     Happy Hacktoberfest! This repository is a website demonstrating Simple JS ThemSwitcher (and PageSwitcher) written in Javascript. The purpose of this project is for practicing Github use and basic raw HTML, CSS, and Javascript. The project is mostly aimed towards people taking FreeCodeCamp's introduction to web design modules and Git module. You can make mistakes here, get practice and guidance, and learn how to participate in Hacktoberfest.
27 |                 </p>
28 | 
29 |                 <h2 class="index">Things You Can Do In This Repository</h2>
30 | 
31 | 
32 |                 <h3 class="index">PR 1</h3>
33 |                 <h4 class="index">Create a Page</h4>
34 |                 <p class="index-text">
35 |                     <!-- Page Selection Dropdown -->
36 |                 <div class="page-selection">
37 |                     <label for="page-select">Example Pages:</label>
38 |                     <select id="page-select" style="cursor: pointer;" onchange="changePage()">
39 |                         <option value="">Select A Page</option>
40 |                     </select>
41 |                 </div>
42 |                 </p>
43 | 
44 |                 <h3 class="index">PR 2</h3>
45 |                 <h4 class="index">Create a Theme</h4>
46 |                 <p class="index-text">
47 |                     <!-- Theme Switching Dropdown -->
48 |                 <div class="theme-switch">
49 |                     <label for="theme-select">Example Themes:</label>
50 |                     <select id="theme-select" style="cursor: pointer;" onchange="changeTheme()">
51 |                         <option value="">Default Theme</option>
52 |                     </select>
53 |                 </div>
54 |                 </p>
55 | 
56 |                 <h3 class="index">PR 3</h3>
57 |                 <h4 class="index">Fix Issues:</h4>
58 |                 <p class="index-text">
59 |                     Ask to resolve an problem in the Issues area and get assigned to handle an Issue.</p>
60 | 
61 |                 <h3 class="index">PR 4</h3>
62 |                 <h4 class="index">Create Enhancements</h4>
63 |                 <p class="index-text">
64 |                     Make a suggestion in the Discussions Forums or Raise An Issue.</p>
65 | 
66 |                 <h2 class="index">Join Us!</h2>
67 |                 <a href="https://github.com/omicreativedev/hacktoberfest2023" class="footer-link">
68 |                     <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="30" height="30" viewBox="0 0 64 64">
69 |                         <path d="M32 6C17.641 6 6 17.641 6 32c0 12.277 8.512 22.56 19.955 25.286-.592-.141-1.179-.299-1.755-.479V50.85c0 0-.975.325-2.275.325-3.637 0-5.148-3.245-5.525-4.875-.229-.993-.827-1.934-1.469-2.509-.767-.684-1.126-.686-1.131-.92-.01-.491.658-.471.975-.471 1.625 0 2.857 1.729 3.429 2.623 1.417 2.207 2.938 2.577 3.721 2.577.975 0 1.817-.146 2.397-.426.268-1.888 1.108-3.57 2.478-4.774-6.097-1.219-10.4-4.716-10.4-10.4 0-2.928 1.175-5.619 3.133-7.792C19.333 23.641 19 22.494 19 20.625c0-1.235.086-2.751.65-4.225 0 0 3.708.026 7.205 3.338C28.469 19.268 30.196 19 32 19s3.531.268 5.145.738c3.497-3.312 7.205-3.338 7.205-3.338.567 1.474.65 2.99.65 4.225 0 2.015-.268 3.19-.432 3.697C46.466 26.475 47.6 29.124 47.6 32c0 5.684-4.303 9.181-10.4 10.4 1.628 1.43 2.6 3.513 2.6 5.85v8.557c-.576.181-1.162.338-1.755.479C49.488 54.56 58 44.277 58 32 58 17.641 46.359 6 32 6zM33.813 57.93C33.214 57.972 32.61 58 32 58 32.61 58 33.213 57.971 33.813 57.93zM37.786 57.346c-1.164.265-2.357.451-3.575.554C35.429 57.797 36.622 57.61 37.786 57.346zM32 58c-.61 0-1.214-.028-1.813-.07C30.787 57.971 31.39 58 32 58zM29.788 57.9c-1.217-.103-2.411-.289-3.574-.554C27.378 57.61 28.571 57.797 29.788 57.9z"></path>
70 |                     </svg>
71 |                 </a>
72 |             </main>
73 |         </div>
74 |     </div>
75 | 
76 |     <div class="bottom-container">
77 |         <a href="#">&#x1F95A;&#129430;&#129370;</a>
78 |     </div>
79 | 
80 |     <script src="./script.js"></script>
81 | </body>
82 | </html>


--------------------------------------------------------------------------------
/layout.css:
--------------------------------------------------------------------------------
 1 | /* CSS for the Layout and Structure Only!
 2 | CSS Code in this file should apply to every
 3 | page on the website and not include any
 4 | aesthetic styling.
 5 | */
 6 | body {
 7 |     background: rgba(76, 175, 79, 0);
 8 |     margin: 0;
 9 |     text-align: center;
10 |     font-family: JetBrains Mono, monospace;
11 |     -webkit-font-smoothing: antialiased;
12 |         -moz-osx-font-smoothing: grayscale;
13 |         scroll-behavior: smooth;
14 |     display: block;
15 |     align-self: end;
16 |     text-decoration-thickness:72;
17 |      Left: 0; Top:0 ;
18 |      Width:917;
19 |       
20 | }
21 | p {
22 |     line-height: 2;
23 | }
24 | 
25 | h1 {
26 |     color: #66BFBF;
27 |     font-size: 5.625rem;
28 |     margin: 50px auto 0 auto;
29 |     font-family: 'Sacramento', cursive;
30 | }
31 | 
32 | h2 {
33 |     color: #66BFBF;
34 |     font-family: 'Montserrat', sans-serif;
35 |     font-size: 2.5rem;
36 |     font-weight: normal;
37 |     padding-bottom: 10px;
38 | }
39 | 
40 | h3 {
41 | color: rgb(236, 66, 55);
42 |     text-transform: uppercase;
43 |     font-size: 16px;
44 |     font-style: normal;
45 |     font-weight: 400;
46 |     line-height: 26px;
47 | }
48 | 
49 | h4{
50 |     padding-top: 5px;
51 |     color:aqua;
52 | 
53 | 
54 | }
55 | a {
56 |     color: black;
57 |     font-family: 'Montserrat', sans-serif;
58 |     margin: 10px 20px;
59 |     text-decoration: none;
60 | }
61 | 
62 | a:hover {
63 |     color: #EAF6F6;
64 | }
65 | .bottom-container {
66 |     background: rgba(76, 175, 79, 0);
67 |     padding: 150px 0 10px;
68 | }
69 | .copyright {
70 |     color: #EAF6F6;
71 |     font-size: 0.75rem;
72 |     padding: 15px 0 10px;
73 | }
74 | 
75 | 
76 | #fiy:hover
77 | {
78 |     text-shadow: .5px 1px yellow;
79 | 
80 | 
81 | }
82 | #fly{
83 |     transition: text-shadow 2s;
84 |     transition-delay: 2s;
85 | }
86 | 
87 | .space{
88 |     padding-top: 25px; 
89 | }


--------------------------------------------------------------------------------
/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/omicreativedev/ThemeSwitcher/687c2ee514baf39ba63209d16ac5611e85405ac2/logo.png


--------------------------------------------------------------------------------
/pages/hrithik0112.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 |   <head>
  4 |     <meta charset="UTF-8" />
  5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6 |     <meta property="og:title" content="@Hrithik0112" />
  7 |     <meta property="og:description" content="@Hrithik0112 Hacktoberfest Profile Card" />
  8 |     <meta name="description" content="@Hrithik0112 Hacktoberfest Profile Card" />
  9 |     <!-- This is the image that shows up on Social Media when you link to the page. -->
 10 |     <meta property="og:image" content="https://omicreativedev.github.io/hacktoberfest2023/pages/img/hrithik0112/hrithik0112-social.jpg" />
 11 |     <meta property="og:image:width" content="1200" />
 12 |     <meta property="og:image:height" content="630" />
 13 |     <link id="theme-style" rel="stylesheet" type="text/css" href="../themes/light.css" />
 14 |     <!-- Favicon is a small image that appears in the tab of some browsers. -->
 15 |     <link rel="icon" href="img/omicreativedev/favicon.ico" />
 16 |     <title>@Hrithik0112</title>
 17 |   </head>
 18 | 
 19 | 
 20 |   <body>
 21 |     <div class="profile-content">
 22 | 
 23 | <!--START NAVIGATION BAR-->
 24 |       <div class="profile-nav">
 25 |         <a href="../index.html" class="homeButton">Home</a>
 26 |  <!-- Theme Switching Dropdown -->
 27 |         <div class="theme-switch">
 28 |           <select id="theme-select" onchange="changeTheme()">
 29 |             <option value="">Switch Theme</option>
 30 |           </select>
 31 |         </div>
 32 | <!-- End Theme Switching Dropdown -->
 33 |       </div>
 34 | <!--END NAVIGATION BAR-->
 35 | 
 36 |       <!-- Begin Profile Card (the white box) -->
 37 |       <div class="profile-main hrithik0112-profile" style="height: 490px; width: 400px;">
 38 |         <section class="profile-photo">
 39 |           <!-- Use your github picture or upload an image to -> img/yourname/ folder-->
 40 |           <img src="https://avatars.githubusercontent.com/u/122002784?v=4" alt="@Hrithik0112" />
 41 |         </section>
 42 |         <section class="profile-info">
 43 |           <h1 class="name">@Hrithik0112</h1>
 44 |           <h2 class="title">Frontend Developer</h2>
 45 |           <div>
 46 |             A Frontend developer based in India, Curently Pursuing B.Tech Computer Science (2024 Grad)
 47 |           </div>
 48 |         </section>
 49 |         <section class="profile-links">
 50 |           <a href="www.linkedin.com/in/contact-hrithik-dev">
 51 |             <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="100" height="100" viewBox="0 0 50 50">
 52 |               <path
 53 |                 d="M41,4H9C6.24,4,4,6.24,4,9v32c0,2.76,2.24,5,5,5h32c2.76,0,5-2.24,5-5V9C46,6.24,43.76,4,41,4z M17,20v19h-6V20H17z M11,14.47c0-1.4,1.2-2.47,3-2.47s2.93,1.07,3,2.47c0,1.4-1.12,2.53-3,2.53C12.2,17,11,15.87,11,14.47z M39,39h-6c0,0,0-9.26,0-10 c0-2-1-4-3.5-4.04h-0.08C27,24.96,26,27.02,26,29c0,0.91,0,10,0,10h-6V20h6v2.56c0,0,1.93-2.56,5.81-2.56 c3.97,0,7.19,2.73,7.19,8.26V39z"
 54 |               ></path>
 55 |             </svg>
 56 |           </a>
 57 |           <a href="https://github.com/Hrithik0112">
 58 |             <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="100" height="100" viewBox="0 0 64 64">
 59 |               <path
 60 |                 d="M32 6C17.641 6 6 17.641 6 32c0 12.277 8.512 22.56 19.955 25.286-.592-.141-1.179-.299-1.755-.479V50.85c0 0-.975.325-2.275.325-3.637 0-5.148-3.245-5.525-4.875-.229-.993-.827-1.934-1.469-2.509-.767-.684-1.126-.686-1.131-.92-.01-.491.658-.471.975-.471 1.625 0 2.857 1.729 3.429 2.623 1.417 2.207 2.938 2.577 3.721 2.577.975 0 1.817-.146 2.397-.426.268-1.888 1.108-3.57 2.478-4.774-6.097-1.219-10.4-4.716-10.4-10.4 0-2.928 1.175-5.619 3.133-7.792C19.333 23.641 19 22.494 19 20.625c0-1.235.086-2.751.65-4.225 0 0 3.708.026 7.205 3.338C28.469 19.268 30.196 19 32 19s3.531.268 5.145.738c3.497-3.312 7.205-3.338 7.205-3.338.567 1.474.65 2.99.65 4.225 0 2.015-.268 3.19-.432 3.697C46.466 26.475 47.6 29.124 47.6 32c0 5.684-4.303 9.181-10.4 10.4 1.628 1.43 2.6 3.513 2.6 5.85v8.557c-.576.181-1.162.338-1.755.479C49.488 54.56 58 44.277 58 32 58 17.641 46.359 6 32 6zM33.813 57.93C33.214 57.972 32.61 58 32 58 32.61 58 33.213 57.971 33.813 57.93zM37.786 57.346c-1.164.265-2.357.451-3.575.554C35.429 57.797 36.622 57.61 37.786 57.346zM32 58c-.61 0-1.214-.028-1.813-.07C30.787 57.971 31.39 58 32 58zM29.788 57.9c-1.217-.103-2.411-.289-3.574-.554C27.378 57.61 28.571 57.797 29.788 57.9z"
 61 |               ></path>
 62 |             </svg>
 63 |           </a>
 64 |           <a href="@Hrithik#007">
 65 |             <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="100" height="100" viewBox="0 0 50 50">
 66 |               <path
 67 |                 d="M 41.625 10.769531 C 37.644531 7.566406 31.347656 7.023438 31.078125 7.003906 C 30.660156 6.96875 30.261719 7.203125 30.089844 7.589844 C 30.074219 7.613281 29.9375 7.929688 29.785156 8.421875 C 32.417969 8.867188 35.652344 9.761719 38.578125 11.578125 C 39.046875 11.867188 39.191406 12.484375 38.902344 12.953125 C 38.710938 13.261719 38.386719 13.429688 38.050781 13.429688 C 37.871094 13.429688 37.6875 13.378906 37.523438 13.277344 C 32.492188 10.15625 26.210938 10 25 10 C 23.789063 10 17.503906 10.15625 12.476563 13.277344 C 12.007813 13.570313 11.390625 13.425781 11.101563 12.957031 C 10.808594 12.484375 10.953125 11.871094 11.421875 11.578125 C 14.347656 9.765625 17.582031 8.867188 20.214844 8.425781 C 20.0625 7.929688 19.925781 7.617188 19.914063 7.589844 C 19.738281 7.203125 19.34375 6.960938 18.921875 7.003906 C 18.652344 7.023438 12.355469 7.566406 8.320313 10.8125 C 6.214844 12.761719 2 24.152344 2 34 C 2 34.175781 2.046875 34.34375 2.132813 34.496094 C 5.039063 39.605469 12.972656 40.941406 14.78125 41 C 14.789063 41 14.800781 41 14.8125 41 C 15.132813 41 15.433594 40.847656 15.621094 40.589844 L 17.449219 38.074219 C 12.515625 36.800781 9.996094 34.636719 9.851563 34.507813 C 9.4375 34.144531 9.398438 33.511719 9.765625 33.097656 C 10.128906 32.683594 10.761719 32.644531 11.175781 33.007813 C 11.234375 33.0625 15.875 37 25 37 C 34.140625 37 38.78125 33.046875 38.828125 33.007813 C 39.242188 32.648438 39.871094 32.683594 40.238281 33.101563 C 40.601563 33.515625 40.5625 34.144531 40.148438 34.507813 C 40.003906 34.636719 37.484375 36.800781 32.550781 38.074219 L 34.378906 40.589844 C 34.566406 40.847656 34.867188 41 35.1875 41 C 35.199219 41 35.210938 41 35.21875 41 C 37.027344 40.941406 44.960938 39.605469 47.867188 34.496094 C 47.953125 34.34375 48 34.175781 48 34 C 48 24.152344 43.785156 12.761719 41.625 10.769531 Z M 18.5 30 C 16.566406 30 15 28.210938 15 26 C 15 23.789063 16.566406 22 18.5 22 C 20.433594 22 22 23.789063 22 26 C 22 28.210938 20.433594 30 18.5 30 Z M 31.5 30 C 29.566406 30 28 28.210938 28 26 C 28 23.789063 29.566406 22 31.5 22 C 33.433594 22 35 23.789063 35 26 C 35 28.210938 33.433594 30 31.5 30 Z"
 68 |               ></path>
 69 |             </svg>
 70 |           </a>
 71 |         </section>
 72 |       </div>
 73 |       <footer><div class="profile-footer"></div></footer>
 74 |     </div>
 75 | 
 76 |     <script>
 77 | // Javascript for themeswitcher_subdir.js
 78 | 
 79 |     async function populateThemeDropdown() {
 80 |       try {
 81 |         const themeSelect = document.getElementById("theme-select");
 82 |         const response = await fetch("../themes_list.txt");
 83 |         const data = await response.text();
 84 |         const themeFiles = data.split("\n");
 85 | 
 86 |     themeFiles.forEach((themeFileName) => {
 87 |           const trimmedFileName = themeFileName.trim();
 88 |           if (trimmedFileName !== "") {
 89 |             const option = new Option(trimmedFileName, `../themes/${trimmedFileName}`);
 90 |           themeSelect.appendChild(option);
 91 |       }
 92 |     });
 93 |   } catch (error) {
 94 |     console.error("Error fetching theme list:", error);
 95 |   }
 96 | }
 97 | 
 98 | // Call the functions to populate the themeswitcher_subdir.js dropdowns
 99 |     populateThemeDropdown();
100 | 
101 | // Function to handle theme selection change for themeswitcher_subdir.js
102 |     function changeTheme() {
103 |         const selectedValue = document.getElementById("theme-select").value;
104 |         if (selectedValue !== "") {
105 | 
106 | // Change the theme by updating the stylesheet with themeswitcher_subdir.js
107 |           document.getElementById("theme-style").href = selectedValue;
108 |         }
109 |       }
110 | 
111 | // Attach the changePage and changeTheme functions to the select elements' onchange events with themeswitcher_subdir.js
112 |       document.getElementById("theme-select").addEventListener("change", changeTheme);
113 |     </script>
114 |   </body>
115 | </html>


--------------------------------------------------------------------------------
/pages/img/hrithik0112/hrithik0112-social.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/omicreativedev/ThemeSwitcher/687c2ee514baf39ba63209d16ac5611e85405ac2/pages/img/hrithik0112/hrithik0112-social.png


--------------------------------------------------------------------------------
/pages/img/omicreativedev/omicreative-social.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/omicreativedev/ThemeSwitcher/687c2ee514baf39ba63209d16ac5611e85405ac2/pages/img/omicreativedev/omicreative-social.jpg


--------------------------------------------------------------------------------
/pages/img/thankyou/bg.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/omicreativedev/ThemeSwitcher/687c2ee514baf39ba63209d16ac5611e85405ac2/pages/img/thankyou/bg.gif


--------------------------------------------------------------------------------
/pages/img/thankyou/contributor_badge.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/omicreativedev/ThemeSwitcher/687c2ee514baf39ba63209d16ac5611e85405ac2/pages/img/thankyou/contributor_badge.png


--------------------------------------------------------------------------------
/pages/img/thankyou/thankyou-social.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/omicreativedev/ThemeSwitcher/687c2ee514baf39ba63209d16ac5611e85405ac2/pages/img/thankyou/thankyou-social.jpg


--------------------------------------------------------------------------------
/pages/img/thankyou/w9nksc8w.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/omicreativedev/ThemeSwitcher/687c2ee514baf39ba63209d16ac5611e85405ac2/pages/img/thankyou/w9nksc8w.png


--------------------------------------------------------------------------------
/pages/js/themeswitcher_subdir.js:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 |  // Function to populate the theme select dropdown
 4 |     async function populateThemeDropdown() {
 5 |       try {
 6 |         const themeSelect = document.getElementById("theme-select");
 7 |         const response = await fetch("../themes_list.txt");
 8 |         const data = await response.text();
 9 |         const themeFiles = data.split("\n");
10 | 
11 |     themeFiles.forEach((themeFileName) => {
12 |           const trimmedFileName = themeFileName.trim();
13 |           if (trimmedFileName !== "") {
14 |             const option = new Option(trimmedFileName, `../themes/${trimmedFileName}`);
15 |           themeSelect.appendChild(option);
16 |       }
17 |     });
18 |   } catch (error) {
19 |     console.error("Error fetching theme list:", error);
20 |   }
21 | }
22 | 
23 | 
24 |     // Call the functions to populate the dropdowns
25 |     populateThemeDropdown();
26 | 
27 | 
28 | 
29 |     // Function to handle theme selection change
30 |     function changeTheme() {
31 |         const selectedValue = document.getElementById("theme-select").value;
32 |         if (selectedValue !== "") {
33 |             // Change the theme by updating the stylesheet
34 |             document.getElementById("theme-style").href = selectedValue;
35 |         }
36 |     }
37 | 
38 |     // Attach the changePage and changeTheme functions to the select elements' onchange events
39 | 
40 |     document.getElementById("theme-select").addEventListener("change", changeTheme);


--------------------------------------------------------------------------------
/pages/omicreativedev.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 |   <head>
  4 |     <meta charset="UTF-8" />
  5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6 |     <meta property="og:title" content="@omicreativedev" />
  7 |     <meta property="og:description" content="@omicreativedev" />
  8 |     <meta name="description" content="@omicreativedev" />
  9 |     <!-- This is the image that shows up on Social Media when you link to the page. -->
 10 |     <meta property="og:image" content="https://omicreativedev.github.io/ThemeSwitcher/pages/img/omicreativedev/omicreative-social.jpg" />
 11 |     <meta property="og:image:width" content="1200" />
 12 |     <meta property="og:image:height" content="630" />
 13 |     <link id="theme-style" rel="stylesheet" type="text/css" href="../themes/light.css" />
 14 |     <!-- Favicon is a small image that appears in the tab of some browsers. -->
 15 |     <link rel="icon" href="img/omicreativedev/favicon.ico" />
 16 |     <!-- CDN for Tabler icons -->
 17 |     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@latest/tabler-icons.min.css" />
 18 |     <title>@omicreativedev</title>
 19 |     <!-- Format your HTML with https://webformatter.com/html & use 2 tab indent! -->
 20 | 
 21 |     <style>
 22 | 
 23 | .profile-main {
 24 |             box-shadow: 0 0 10px rgba(0, 0, 0, 0.9) !important;
 25 | }
 26 | 
 27 |       .profile-links .ti {
 28 |         font-size: 45px;
 29 |         color: #747373;
 30 |         border-radius: 40%;
 31 |         padding: 0.5rem;
 32 |         transition: 0.1s;
 33 |       }
 34 | 
 35 |       .profile-links a:hover .ti {
 36 |         color: #292929;
 37 |       }
 38 |     </style>
 39 |   </head>
 40 | 
 41 | 
 42 |   <body>
 43 |     <div class="profile-content">
 44 | 
 45 | <!--START NAVIGATION BAR-->
 46 |       <div class="profile-nav">
 47 |         <a href="../index.html" class="homeButton">Home</a>
 48 |  <!-- Theme Switching Dropdown -->
 49 |         <div class="theme-switch">
 50 |           <select id="theme-select" onchange="changeTheme()">
 51 |             <option value="">Switch Theme</option>
 52 |           </select>
 53 |         </div>
 54 | <!-- End Theme Switching Dropdown -->
 55 |       </div>
 56 | <!--END NAVIGATION BAR-->
 57 | 
 58 |       <!-- Begin Profile Card (the white box) -->
 59 |       <div class="profile-main grybg" style="height: 490px; width: 400px;">
 60 |         <section class="profile-photo">
 61 |           <!-- Use your github picture or upload an image to -> img/yourname/ folder-->
 62 |           <img src="https://avatars.githubusercontent.com/u/82254764?v=4" alt="@omicreativedev" />
 63 |         </section>
 64 |         <section class="profile-info">
 65 |           <h1 class="name">@omicreativedev</h1>
 66 |           <h2 class="title">Computer Science Student</h2>
 67 |         </section>
 68 |         <section class="profile-links">
 69 |           <a href="https://twitter.com/omicreativedev" target="_blank">
 70 |             <i class="ti ti-brand-x"></i>
 71 |           </a>
 72 |           <a href="https://github.com/omicreativedev" target="_blank">
 73 |             <i class="ti ti-brand-github"></i>
 74 |           </a>
 75 |           <a href="https://www.linkedin.com/in/sshunamon/" target="_blank">
 76 |             <i class="ti ti-brand-linkedin"></i>
 77 |           </a>
 78 |         </section>
 79 |       </div>
 80 |       <footer><div class="profile-footer"></div></footer>
 81 |     </div>
 82 | 
 83 |     <script>
 84 | // Javascript for themeswitcher_subdir.js
 85 | 
 86 |     async function populateThemeDropdown() {
 87 |       try {
 88 |         const themeSelect = document.getElementById("theme-select");
 89 |         const response = await fetch("../themes_list.txt");
 90 |         const data = await response.text();
 91 |         const themeFiles = data.split("\n");
 92 | 
 93 |     themeFiles.forEach((themeFileName) => {
 94 |           const trimmedFileName = themeFileName.trim();
 95 |           if (trimmedFileName !== "") {
 96 |             const option = new Option(trimmedFileName, `../themes/${trimmedFileName}`);
 97 |           themeSelect.appendChild(option);
 98 |       }
 99 |     });
100 |   } catch (error) {
101 |     console.error("Error fetching theme list:", error);
102 |   }
103 | }
104 | 
105 | // Call the functions to populate the themeswitcher_subdir.js dropdowns
106 |     populateThemeDropdown();
107 | 
108 | // Function to handle theme selection change for themeswitcher_subdir.js
109 |     function changeTheme() {
110 |         const selectedValue = document.getElementById("theme-select").value;
111 |         if (selectedValue !== "") {
112 | 
113 | // Change the theme by updating the stylesheet with themeswitcher_subdir.js
114 |           document.getElementById("theme-style").href = selectedValue;
115 |         }
116 |       }
117 | 
118 | // Attach the changePage and changeTheme functions to the select elements' onchange events with themeswitcher_subdir.js
119 |       document.getElementById("theme-select").addEventListener("change", changeTheme);
120 |     </script>
121 |   </body>
122 | </html>
123 | 


--------------------------------------------------------------------------------
/pages/pranav-reddy.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 |     <meta charset="UTF-8">
  5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6 |     <meta property="og:title" content="Pranav Reddy's Profile">
  7 |     <meta property="og:description" content="Pranav Reddy">
  8 |     <meta name="description" content="Pranav Reddy>
  9 |     <meta property="og:image" content="https://omicreativedev.github.io/ThemeSwitcher/pages/img/omicreativedev/omicreative-social.jpg">
 10 |     <meta property="og:image:width" content="1200" />
 11 |     <meta property="og:image:height" content="630" />
 12 |     <link id="theme-style" rel="stylesheet" type="text/css" href="../themes/light.css">
 13 |     <link rel="icon" href="img/pranavreddy/favicon.ico">
 14 |     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@latest/tabler-icons.min.css">
 15 |     <style>
 16 |         .profile-links .ti {
 17 |             font-size: 45px;
 18 |             color: #747373;
 19 |             border-radius: 40%;
 20 |             padding: 0.5rem;
 21 |             transition: 0.1s;
 22 |         }
 23 | 
 24 |         .profile-links a:hover .ti {
 25 |             color: #292929;
 26 |         }
 27 | 
 28 |         body {
 29 |             font-family: Arial, sans-serif;
 30 |             background-color: #f0f0f0;
 31 |         }
 32 | 
 33 |         .profile-content {
 34 |             max-width: 800px;
 35 |             margin: 0 auto;
 36 |             padding: 20px;
 37 |             background-color: #ffffff;
 38 |         }
 39 | 
 40 | .profile-main {
 41 |             box-shadow: 0 0 10px rgba(0, 0, 0, 0.9) !important;
 42 | }
 43 | 
 44 |         .profile-nav {
 45 |             text-align: center;
 46 |             margin: 0 auto;
 47 |             margin-bottom: 10px;
 48 |         }
 49 | 
 50 |         .myButton {
 51 |             display: inline-block;
 52 |             padding: 10px 20px;
 53 |             background-color: #007BFF;
 54 |             color: #fff;
 55 |             text-decoration: none;
 56 |             border-radius: 5px;
 57 |         }
 58 | 
 59 |         .homeButton:hover {
 60 |             background-color: #0056b3;
 61 |         }
 62 | 
 63 | .profile-nav {
 64 | text-align: center !important;
 65 |   margin: 4px;
 66 | }
 67 | 
 68 |         .profile-main {
 69 |             width: 700px;
 70 |         }
 71 |     
 72 | 
 73 |         .profile-photo img {
 74 |             max-width: 200px;
 75 |             border-radius: 50%;
 76 |         }
 77 | 
 78 |         .name {
 79 |             color: #333;
 80 |         }
 81 | 
 82 |   
 83 | 
 84 |         .profile-links a {
 85 |             margin: 0 10px;
 86 |             text-decoration: none;
 87 |         }
 88 |     </style>
 89 |     <title>Pranav Reddy</title>
 90 | </head>
 91 | 
 92 | <body>
 93 | <div class="profile-content">
 94 |     <div class="profile-nav">
 95 |         <a href="../index.html" class="homeButton">Home</a>
 96 | 
 97 |         <div class="theme-switch">
 98 |             <select id="theme-select" onchange="changeTheme()">
 99 |                 <option value="">Default Theme</option>
100 |             </select>
101 |         </div>
102 |     </div>
103 |     <div class="profile-main whtbg" style="height: 500px; width: 400px;">
104 |         <section class="profile-photo">
105 |             <img src="https://avatars.githubusercontent.com/u/123138487?v=4" alt="Pranav Reddy">
106 |         </section>
107 |         <section class="profile-info">
108 |             <h1 class="name">Pranav Reddy</h1>
109 |             <h2>Computer Science Student</h2>
110 |             <div>
111 |                 I'm a B.Tech student specializing in AI, skilled in various programming languages and ML
112 |               </div>
113 |         </section>
114 |         <section class="profile-links">
115 |             <a href="https://twitter.com/Pranav77203" target="_blank">
116 |                 <i class="ti ti-brand-x"></i>
117 |             </a>
118 |             <a href="https://github.com/772003pranav" target="_blank">
119 |                 <i class="ti ti-brand-github"></i>
120 |             </a>
121 |             <a href="https://www.linkedin.com/in/pranav-reddy-sanikommu-270723270" target="_blank">
122 |                 <i class="ti ti-brand-linkedin"></i>
123 |             </a>
124 |         </section>
125 |     </div>
126 |     <footer>
127 |         <div class="profile-footer">
128 |         </div>
129 |     </footer>
130 | </div>
131 | 
132 | <script>
133 |     async function populateThemeDropdown() {
134 |         try {
135 |             const themeSelect = document.getElementById("theme-select");
136 |             const response = await fetch("../themes_list.txt");
137 |             const data = await response.text();
138 |             const themeFiles = data.split("\n");
139 | 
140 |             themeFiles.forEach((themeFileName) => {
141 |                 const trimmedFileName = themeFileName.trim();
142 |                 if (trimmedFileName !== "") {
143 |                     const option = new Option(trimmedFileName, `../themes/${trimmedFileName}`);
144 |                     themeSelect.appendChild(option);
145 |                 }
146 |             });
147 |         } catch (error) {
148 |             console.error("Error fetching theme list:", error);
149 |         }
150 |     }
151 | 
152 |     populateThemeDropdown();
153 | 
154 |     function changeTheme() {
155 |         const selectedValue = document.getElementById("theme-select").value;
156 |         if (selectedValue !== "") {
157 |             document.getElementById("theme-style").href = selectedValue;
158 |         }
159 |     }
160 | 
161 |     document.getElementById("theme-select").addEventListener("change", changeTheme);
162 | </script>
163 | </body>
164 | </html>
165 | 


--------------------------------------------------------------------------------
/pages/thankyou.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 |   <head>
  4 |     <meta charset="UTF-8">
  5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6 |     <meta property="og:title" content="You've Earned a Badge!">
  7 |     <meta property="og:description" content="Thank you for contributing to omicreativedev/Hacktoberfest2023">
  8 |     <meta name="description" content="Thank you for contributing to omicreativedev/Hacktoberfest2023">
  9 |     <!-- This is the image that shows up on Social Media when you link to the page. -->
 10 |     <meta property="og:image" content="https://omicreativedev.github.io/ThemeSwitcher/pages/img/thankyou/thankyou-social.jpg">
 11 |     <meta property="og:image:width" content="1200" />
 12 |     <meta property="og:image:height" content="630" />
 13 |     <link id="theme-style" rel="stylesheet" type="text/css" href="../themes/light.css">
 14 |     <!-- Favicon is a small image that appears in the tab of some browsers. -->
 15 |     <link rel="icon" href="img/omicreativedev/favicon.ico">
 16 |     <title>You've Earned a Badge!</title>
 17 | <!-- Format your HTML with https://webformatter.com/html & use 2 tab indent! -->
 18 | 
 19 | <!--Stylesheet for Confetti-->
 20 |     <style>
 21 |       body {
 22 |         margin: 0;
 23 |         < !-- display: flex;
 24 |         -->justify-content: center;
 25 |         align-items: center;
 26 |         < !-- height: 100vh;
 27 |         -->background-color: #f1f1f1;
 28 |       }
 29 | 
 30 |       .profile-main {
 31 |         text-align: center !important;
 32 |         padding: 0;
 33 |         margin: 0;
 34 |       }
 35 | 
 36 |       .badge {
 37 |         width: 196px;
 38 |         height: 230px;
 39 |         background-color: transparent;
 40 |         text-align: center;
 41 |         margin: 0 auto;
 42 |         cursor: pointer;
 43 |         overflow: hidden;
 44 |       }
 45 | 
 46 |       .badge img {
 47 |         width: 100%;
 48 |         height: 100%;
 49 |         object-fit: cover;
 50 |         object-position: center;
 51 |       }
 52 | 
 53 |       .confetti {
 54 |         position: absolute;
 55 |         width: 20px;
 56 |         height: 10px;
 57 |         background-color: #f39c12;
 58 |         clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
 59 |         pointer-events: none;
 60 |         animation: fall 3s ease infinite;
 61 |       }
 62 | 
 63 |       @keyframes fall {
 64 |         0% {
 65 |           transform: translateY(-100vh) rotate(0deg);
 66 |           opacity: 0;
 67 |         }
 68 | 
 69 |         50% {
 70 |           opacity: 1;
 71 |         }
 72 | 
 73 |         100% {
 74 |           transform: translateY(100vh) rotate(360deg);
 75 |           opacity: 0;
 76 |         }
 77 |       }
 78 |     </style>
 79 |   </head>
 80 | 
 81 | 
 82 |   <body>
 83 |     <div class="profile-content">
 84 | 
 85 | <!--START NAVIGATION BAR-->
 86 |       <div class="profile-nav">
 87 |         <a href="../index.html" class="homeButton">Home</a>
 88 |  <!-- Theme Switching Dropdown -->
 89 |         <div class="theme-switch">
 90 |           <select id="theme-select" onchange="changeTheme()">
 91 |             <option value="">Switch Theme</option>
 92 |           </select>
 93 |         </div>
 94 | <!-- End Theme Switching Dropdown -->
 95 |       </div>
 96 | <!--END NAVIGATION BAR-->
 97 | 
 98 | <!-- Begin Profile Card (the white box) -->
 99 |       <div class="profile-main whtbg" style="height: 500px; width: 400px;">
100 |         <div class="badge" onclick="burstConfetti()">
101 |           <img src="https://omicreativedev.github.io/ThemeSwitcher/pages/img/thankyou/contributor_badge.png" alt="Official Contributor Badge" height="231" width="196">
102 |         </div>
103 |         <section class="profile-info">
104 |           <h1 class="small">Contributor Recognition</h1>
105 |         </section>
106 |         <section>
107 |           <div align="center">
108 |             <a href="https://github.com/omicreativedev/ThemeSwitcher/graphs/contributors">
109 |               <!-- <img src="https://contrib.rocks/image?repo=omicreativedev/ThemeSwitcher"> -->
110 |               <img class="contrib-box" src="https://readme-contributors.now.sh/omicreativedev/ThemeSwitcher?width=180&spacing=2&avatarSize=17">
111 |             </a>
112 |           </div>
113 |         </section>
114 |       </div>
115 |       <footer>
116 |         <div class="profile-footer"></div>
117 |       </footer>
118 |     </div>
119 | 
120 |     <script>
121 | 
122 | // Javascript for Confetti 
123 |       function createConfetti(x, y) {
124 |         const confetti = document.createElement('div');
125 |         confetti.className = 'confetti';
126 |         confetti.style.left = x + 'px';
127 |         confetti.style.top = y + 'px';
128 |         document.body.appendChild(confetti);
129 |         setTimeout(() => {
130 |           confetti.remove();
131 |         }, 3000);
132 |       }
133 | 
134 |       function burstConfetti() {
135 |         for (let i = 0; i < 100; i++) {
136 |           const x = Math.random() * window.innerWidth;
137 |           const y = Math.random() * window.innerHeight;
138 |           createConfetti(x, y);
139 |         }
140 |       }
141 | 
142 | // Trigger confetti burst effect on page load
143 |       window.onload = function() {
144 |         burstConfetti();
145 |       }
146 | 
147 | // Javascript for themeswitcher_subdir.js
148 | 
149 |     async function populateThemeDropdown() {
150 |       try {
151 |         const themeSelect = document.getElementById("theme-select");
152 |         const response = await fetch("../themes_list.txt");
153 |         const data = await response.text();
154 |         const themeFiles = data.split("\n");
155 | 
156 |     themeFiles.forEach((themeFileName) => {
157 |           const trimmedFileName = themeFileName.trim();
158 |           if (trimmedFileName !== "") {
159 |             const option = new Option(trimmedFileName, `../themes/${trimmedFileName}`);
160 |           themeSelect.appendChild(option);
161 |       }
162 |     });
163 |   } catch (error) {
164 |     console.error("Error fetching theme list:", error);
165 |   }
166 | }
167 | 
168 | // Call the functions to populate the themeswitcher_subdir.js dropdowns
169 |     populateThemeDropdown();
170 | 
171 | // Function to handle theme selection change for themeswitcher_subdir.js
172 |     function changeTheme() {
173 |         const selectedValue = document.getElementById("theme-select").value;
174 |         if (selectedValue !== "") {
175 | 
176 | // Change the theme by updating the stylesheet with themeswitcher_subdir.js
177 |           document.getElementById("theme-style").href = selectedValue;
178 |         }
179 |       }
180 | 
181 | // Attach the changePage and changeTheme functions to the select elements' onchange events with themeswitcher_subdir.js
182 |       document.getElementById("theme-select").addEventListener("change", changeTheme);
183 |     </script>
184 |   </body>
185 | </html>
186 | 


--------------------------------------------------------------------------------
/pages_list.txt:
--------------------------------------------------------------------------------
1 | omicreativedev.html
2 | thankyou.html
3 | hrithik0112.html
4 | pranav-reddy.html


--------------------------------------------------------------------------------
/script.js:
--------------------------------------------------------------------------------
 1 | 
 2 |     // Function to populate the page select dropdown
 3 |     function populatePageDropdown() {
 4 |         const pageSelect = document.getElementById("page-select");
 5 |         fetch("pages_list.txt")
 6 |             .then(response => response.text())
 7 |             .then(data => {
 8 |                 const pageFiles = data.split("\n");
 9 |                 pageFiles.forEach(pageFileName => {
10 |                     // Trim the page file name to remove leading/trailing whitespace
11 |                     const trimmedFileName = pageFileName.trim();
12 |                     if (trimmedFileName !== "") {
13 |                         const option = document.createElement("option");
14 |                         option.value = "pages/" + trimmedFileName;
15 |                         option.textContent = trimmedFileName;
16 |                         option.style.cursor="pointer";
17 |                         pageSelect.appendChild(option);
18 |                        
19 |                     }
20 |                 });
21 |             })
22 |             .catch(error => {
23 |                 console.error("Error fetching page list:", error);
24 |             });
25 |     }
26 | 
27 | 
28 |     // Function to populate the theme select dropdown
29 |     async function populateThemeDropdown() {
30 |       try {
31 |         const themeSelect = document.getElementById("theme-select");
32 |         const response = await fetch("themes_list.txt");
33 |         const data = await response.text();
34 |         const themeFiles = data.split("\n");
35 | 
36 |     themeFiles.forEach((themeFileName) => {
37 |           const trimmedFileName = themeFileName.trim();
38 |           if (trimmedFileName !== "") {
39 |             const option = new Option(trimmedFileName, `themes/${trimmedFileName}`);
40 |           themeSelect.appendChild(option);
41 |       }
42 |     });
43 |   } catch (error) {
44 |     console.error("Error fetching theme list:", error);
45 |   }
46 | }
47 | 
48 | 
49 |     // Call the functions to populate the dropdowns
50 |     populatePageDropdown();
51 |     populateThemeDropdown();
52 | 
53 |     // Function to handle page selection change
54 |     function changePage() {
55 |         const selectedValue = document.getElementById("page-select").value;
56 |         if (selectedValue !== "") {
57 |             // Redirect to the selected page
58 |             window.location.href = selectedValue;
59 |         }
60 |     }
61 | 
62 |     // Function to handle theme selection change
63 |     function changeTheme() {
64 |         const selectedValue = document.getElementById("theme-select").value;
65 |         if (selectedValue !== "") {
66 |             // Change the theme by updating the stylesheet
67 |             document.getElementById("theme-style").href = selectedValue;
68 |         }
69 |     }
70 | 
71 |     // Attach the changePage and changeTheme functions to the select elements' onchange events
72 |     document.getElementById("page-select").addEventListener("change", changePage);
73 |     document.getElementById("theme-select").addEventListener("change", changeTheme);
74 | 


--------------------------------------------------------------------------------
/themes/dark.css:
--------------------------------------------------------------------------------
  1 | @import "https://fonts.googleapis.com/css?family=Source+Sans+Pro&display=swap";
  2 | 
  3 | /*After working in this file, use https://codebeautify.org/css-beautify-minify to clean up with 2 indents. Remove double verticle spaces.*/
  4 | 
  5 | /* Body applies to ALL pages (including index.html) */
  6 | body {
  7 |   background-color: #000000;
  8 |   color: #414f57;
  9 |   background: linear-gradient(-45deg, #222222, #555555, #111111, #666666);
 10 |   background-size: 400% 400%;
 11 |   animation: gradient 15s ease infinite;
 12 |   margin: 0;
 13 |   padding: 0;
 14 |   -webkit-font-smoothing: antialiased;
 15 |   -moz-osx-font-smoothing: grayscale;
 16 | }
 17 | 
 18 | a {
 19 |   color: #222222;
 20 | }
 21 | 
 22 | a:hover {
 23 |   color: yellow;
 24 | }
 25 | 
 26 | p {
 27 |     line-height: 1;
 28 | }
 29 | 
 30 | h1 {
 31 |     color: #23a6d5;
 32 |     font-size: 3.625rem;
 33 |     margin: 10px auto;
 34 | }
 35 | 
 36 | h1.small {
 37 |     color: #9f4590;
 38 |     font-size: 1rem;
 39 |     font-weight: bold;
 40 |     margin: 10px auto;
 41 | }
 42 | 
 43 | h1.name {
 44 |     color: #444444;
 45 |     font-size: 1rem;
 46 |     font-weight: bold;
 47 |     margin: 10px auto;
 48 | }
 49 | 
 50 | h1.index {
 51 |     color: #eeeeee;
 52 |     font-size: 3rem;
 53 |     font-weight: bold;
 54 |     margin: 10px auto;
 55 | }
 56 | 
 57 | h2 {
 58 |     color: #23a6d5;
 59 |     font-size: 2rem;
 60 |     font-weight: normal;
 61 |     margin: 10px auto;
 62 | }
 63 | 
 64 | h2.title {    
 65 |     color: #eeeeee;
 66 |     font-size: 1rem;
 67 |     font-weight: bold;
 68 |     margin: 10px auto;
 69 | }
 70 |     
 71 | h2.index {
 72 |     color: #ffffff;
 73 |     font-size: 2rem;
 74 |     font-weight: bold;
 75 |     margin: 10px auto;
 76 | }
 77 | 
 78 | h3 {
 79 | color: #ee7752;
 80 |     text-transform: uppercase;
 81 |     font-size: 16px;
 82 |     font-style: normal;
 83 |     font-weight: 400;
 84 |     line-height: 26px;
 85 | }
 86 | 
 87 | h3.index {
 88 | color: #eeeeee;
 89 | }
 90 | 
 91 | h4{
 92 |     color: #23a6d5;
 93 | }
 94 | 
 95 | h4.index {
 96 | color: #eeeeee;
 97 | }
 98 | 
 99 | ul, li {
100 | color:#eeeeee;
101 | }
102 | 
103 | /* Main class for index.html */
104 | div.page-main {
105 |   width: 85%;
106 |   background-color: rgba(255, 255, 255, 0.5);
107 |   border-radius: 10px;
108 |   text-align: left;
109 |   box-sizing: border-box;
110 |   padding: 75px 25px;
111 |   display: inline-block;
112 |   padding-top: 50px;
113 |   padding-bottom: 50px;
114 | }
115 | 
116 | p.index-text, .theme-switch label, .page-selection label {
117 |   color: white;
118 |     line-height: 1.5;
119 | }
120 | 
121 | /* Profile Pages Navigation */
122 | /*--------------------------*/
123 | .profile-nav {
124 |   text-align: left;
125 |   margin: 4px;
126 | }
127 | 
128 | .profile-nav a {
129 |   color: #fff;
130 | }
131 | 
132 | .homeButton {
133 |   box-shadow: 3px 4px 0 0 #4e6096;
134 |   background: linear-gradient(to bottom, #ee7752 5%, #e73c7d 100%);
135 |   background-color: #ee7752;
136 |   border-radius: 10px;
137 |   border: 1px solid #4e6096;
138 |   display: inline-block;
139 |   cursor: pointer;
140 |   padding: 0.5em 1em;
141 |   text-decoration: none;
142 |   text-shadow: 0 1px 0 #0c4a3a;
143 | }
144 | 
145 | .homeButton:hover {
146 |   background: linear-gradient(to bottom, #e73c7d 5%, #ee7752 100%);
147 |   background-color: #e73c7d;
148 | }
149 | 
150 | .theme-switch {
151 |   display: inline;
152 | }
153 | 
154 | /*SELECT BOX FOR THEME DROPDOWN*/
155 | 
156 | select {
157 |   /* styling */
158 |   box-shadow: 3px 4px 0 0 #4e6096;
159 |   background-color: white;
160 |   border-radius: 10px;
161 |   border: 1px solid #4e6096;
162 |   display: inline-block;
163 |   font: inherit;
164 |   line-height: 1.5em;
165 |   padding: 0.4em 3.5em 0.4em 1em;
166 |   /* reset */
167 |   margin: 0;
168 |   -webkit-box-sizing: border-box;
169 |   -moz-box-sizing: border-box;
170 |   box-sizing: border-box;
171 |   -webkit-appearance: none;
172 |   -moz-appearance: none;
173 | }
174 | 
175 | /*Selectbox Arrow*/
176 | select.classic {
177 |   background-image: linear-gradient(45deg, transparent 50%, blue 50%),
178 |     linear-gradient(135deg, blue 50%, transparent 50%),
179 |     linear-gradient(to right, skyblue, skyblue);
180 |   background-position: calc(100% - 20px) calc(1em + 2px),
181 |     calc(100% - 15px) calc(1em + 2px), 100% 0;
182 |   background-size: 5px 5px, 5px 5px, 2.5em 2.5em;
183 |   background-repeat: no-repeat;
184 | }
185 | 
186 | select.classic:focus {
187 |   background-image: linear-gradient(45deg, white 50%, transparent 50%),
188 |     linear-gradient(135deg, transparent 50%, white 50%),
189 |     linear-gradient(to right, gray, gray);
190 |   background-position: calc(100% - 15px) 1em, calc(100% - 20px) 1em, 100% 0;
191 |   background-size: 5px 5px, 5px 5px, 2.5em 2.5em;
192 |   background-repeat: no-repeat;
193 |   border-color: grey;
194 |   outline: 0;
195 | }
196 | 
197 | /* Profile Body (main big box around card) */
198 | /*-----------------------------------------*/
199 | .profile-content {
200 |   margin: 10px;
201 |   padding: 10px;
202 |   border-radius: 10px;
203 |   text-align: center;
204 |   color: #414f57;
205 |   font-weight: 300;
206 |   background: linear-gradient(-45deg, #222222, #555555, #111111, #666666);
207 |   background-size: 400% 400%;
208 |   animation: gradient 15s ease infinite;
209 |   font-family: "Source Sans Pro", "Lucida Sans", "Lucida Sans Regular",
210 |     "Lucida Grande", "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
211 |   -webkit-font-smoothing: antialiased;
212 |   -moz-osx-font-smoothing: grayscale;
213 |   scroll-behavior: smooth;
214 |   display: block;
215 |   align-self: end;
216 | }
217 | 
218 | @keyframes gradient {
219 |   0% {
220 |     background-position: 0 50%;
221 |   }
222 | 
223 |   50% {
224 |     background-position: 100% 50%;
225 |   }
226 | 
227 |   100% {
228 |     background-position: 0 50%;
229 |   }
230 | }
231 | 
232 | @-webkit-keyframes {
233 |   0% {
234 |     background-position: 0 50%;
235 |   }
236 | 
237 |   50% {
238 |     background-position: 100% 50%;
239 |   }
240 | 
241 |   100% {
242 |     background-position: 0 50%;
243 |   }
244 | }
245 | 
246 | footer div.profile-footer {
247 |   width: 100%;
248 |   display: block;
249 |   text-align: center;
250 |   font-size: 17.5px;
251 |   color: white;
252 |   line-height: 75px;
253 |   position: absolute;
254 |   bottom: 0;
255 | }
256 | 
257 | /* Section - Profile Main (Card Box) */
258 | /*-----------------------------------*/
259 | div.profile-main {
260 |   border-radius: 10px;
261 |   text-align: center;
262 |   box-sizing: border-box;
263 |   padding: 65px 25px;
264 |   display: inline-block;
265 |   margin-top: 25px;
266 | }
267 | 
268 | .whtbg {
269 |  background: white;
270 | }
271 | 
272 | .grybg {
273 |  background: rgb(255, 255, 250);
274 |   background: radial-gradient(
275 |     circle,
276 |     rgba(255, 255, 255, 1) 0%,
277 |     rgba(225, 225, 225, 1) 100%
278 |   );
279 | }
280 | 
281 | div.hrithik0112-profile {
282 |   background: rgb(245, 245, 245);
283 |   background: radial-gradient(
284 |     circle,
285 |     rgba(245, 245, 245, 1) 8%,
286 |     rgba(22, 29, 29, 1) 100%
287 |   );
288 | }
289 | 
290 | /* Section - Profile Photo */
291 | /*-------------------------*/
292 | div.profile-main section.profile-photo {
293 |   height: 125px;
294 | }
295 | 
296 | div.profile-main section.profile-photo img {
297 |   height: 125px;
298 |   border-radius: 20%;
299 | }
300 | 
301 | /* Contributor Box on thankyou.html */
302 | .contrib-box {
303 |    border: solid white 0px;
304 | }
305 | 
306 | /* Section - Profile Info */
307 | /*------------------------*/
308 | div.profile-main section.profile-info {
309 |   width: 100%;
310 | }
311 | 
312 | div.profile-main section.profile-info h1 {
313 |   font-size: 24px;
314 |   font-weight: 700;
315 |   line-height: 25px;
316 |   padding-top: 25px;
317 |   padding-bottom: 10px;
318 | }
319 | 
320 | div.profile-main section.profile-info h2 {
321 |   font-size: 18px;
322 |   font-weight: 600;
323 |   line-height: 30px;
324 | }
325 | 
326 | div.profile-main section.profile-info div {
327 |   font-size: 20px;
328 |   font-weight: 500;
329 |   line-height: 30px;
330 | }
331 | 
332 | /* Section - Profile Links */
333 | /*-------------------------*/
334 | div.profile-main section.profile-links {
335 |   height: 100px;
336 |   padding-top: 20px;
337 |   padding-bottom: 10px;
338 |   box-sizing: border-box;
339 | }
340 | 
341 | div.profile-main section.profile-links a {
342 |   height: 50px;
343 |   text-decoration: none;
344 |   display: inline-block;
345 |   margin: 0 7.5px;
346 | }
347 | 
348 | div.profile-main section.profile-links a svg {
349 |   height: 50px;
350 |   width: auto;
351 | }
352 | 
353 | div.profile-main section.profile-links a svg path {
354 |   fill: #414f57;
355 |   transition: fill 0.25s ease;
356 | }
357 | 
358 | div.profile-main section.profile-links a:hover svg path {
359 |   fill: #c8cccf;
360 | }
361 | 
362 | /* Responsive Screen Resizing */
363 | /*----------------------------*/
364 | @media only screen and (max-width: 444.44px) {
365 |   div.main {
366 |     width: 90%;
367 |   }
368 | }
369 | 
370 | @media only screen and (max-height: 653.88px) and (max-width: 444.44px) {
371 |   div.main {
372 |     margin: 5vw 0;
373 |     margin-bottom: 0;
374 |   }
375 | 
376 |   footer {
377 |     position: relative;
378 |   }
379 | }
380 | 


--------------------------------------------------------------------------------
/themes/fall.css:
--------------------------------------------------------------------------------
  1 | /* Medina Mohamed https://github.com/medinamohamed */
  2 | @import "https://fonts.googleapis.com/css?family=Source+Sans+Pro&display=swap";
  3 | 
  4 | /*After working in this file, use https://codebeautify.org/css-beautify-minify to clean up with 2 indents. Remove double verticle spaces.*/
  5 | 
  6 | /* Body applies to ALL pages (including index.html) */
  7 | body {
  8 |   background-color: #d5904b;
  9 |   color: #414f57;
 10 |   background: linear-gradient(-45deg, #ffbb5c, #ff9b50, #e25e3e, #c63d2f);
 11 |   background-size: 400% 400%;
 12 |   animation: gradient 15s ease infinite;
 13 |   margin: 0;
 14 |   padding: 0;
 15 |   -webkit-font-smoothing: antialiased;
 16 |   -moz-osx-font-smoothing: grayscale;
 17 | }
 18 | 
 19 | a {
 20 |   color: #c63d2f;
 21 | }
 22 | 
 23 | a:hover {
 24 |   color: #ff9b50;
 25 | }
 26 | 
 27 | p {
 28 |     line-height: 1;
 29 | }
 30 | 
 31 | h1 {
 32 |     color: #23a6d5;
 33 |     font-size: 3.625rem;
 34 |     margin: 10px auto;
 35 | }
 36 | 
 37 | h1.small {
 38 |     color: #9f4590;
 39 |     font-size: 1rem;
 40 |     font-weight: bold;
 41 |     margin: 10px auto;
 42 | }
 43 | 
 44 | h1.name {
 45 |     color: #444444;
 46 |     font-size: 1rem;
 47 |     font-weight: bold;
 48 |     margin: 10px auto;
 49 | }
 50 | h1.index {
 51 |     color: #444444;
 52 |     font-size: 3rem;
 53 |     font-weight: bold;
 54 |     margin: 10px auto;
 55 | }
 56 | 
 57 | h2 {
 58 |     color: #23a6d5;
 59 |     font-size: 2rem;
 60 |     font-weight: normal;
 61 |     margin: 10px auto;
 62 | }
 63 | 
 64 | h2.title {    
 65 |     color: #444444;
 66 |     font-size: 1rem;
 67 |     font-weight: bold;
 68 |     margin: 10px auto;
 69 | }
 70 |      
 71 | h2.index {
 72 |     color: #444444;
 73 |     font-size: 2rem;
 74 |     font-weight: bold;
 75 |     margin: 10px auto;
 76 | }
 77 | 
 78 | h3 {
 79 | color: #ee7752;
 80 |     text-transform: uppercase;
 81 |     font-size: 16px;
 82 |     font-style: normal;
 83 |     font-weight: 400;
 84 |     line-height: 26px;
 85 | }
 86 | 
 87 | h3.index {
 88 | color: #444444;
 89 | }
 90 | 
 91 | h4{
 92 |     color: #23a6d5;
 93 | }
 94 | 
 95 | h4.index {
 96 | color: #444444;
 97 | }
 98 | 
 99 | ul, li {
100 | color:#444444;
101 | }
102 | 
103 | /* Main class for index.html */
104 | div.page-main {
105 |   width: 85%;
106 |   background-color: rgba(255, 255, 255, 0.7);
107 |   border-radius: 10px;
108 |   text-align: left;
109 |   box-sizing: border-box;
110 |   padding: 75px 25px;
111 |   display: inline-block;
112 |   padding-top: 50px;
113 |   padding-bottom: 50px;
114 | }
115 | 
116 | p.index-text, .theme-switch label, .page-selection label {
117 |   color: #444444;
118 |     line-height: 1.5;
119 | }
120 | 
121 | /* Profile Pages Navigation */
122 | /*--------------------------*/
123 | .profile-nav {
124 |   text-align: left;
125 |   margin: 4px;
126 | }
127 | 
128 | .profile-nav a {
129 |   color: #fff;
130 | }
131 | 
132 | .homeButton {
133 |   box-shadow: 3px 4px 0 0 #4e6096;
134 |   background: linear-gradient(to bottom, #ee7752 5%, #e73c7d 100%);
135 |   background-color: #ee7752;
136 |   border-radius: 10px;
137 |   border: 1px solid #4e6096;
138 |   display: inline-block;
139 |   cursor: pointer;
140 |   padding: 0.5em 1em;
141 |   text-decoration: none;
142 |   text-shadow: 0 1px 0 #0c4a3a;
143 | }
144 | 
145 | .homeButton:hover {
146 |   background: linear-gradient(to bottom, #e73c7d 5%, #ee7752 100%);
147 |   background-color: #e73c7d;
148 | }
149 | 
150 | .theme-switch {
151 |   display: inline;
152 | }
153 | 
154 | /*SELECT BOX FOR THEME DROPDOWN*/
155 | select {
156 |   /* styling */
157 |   box-shadow: 3px 4px 0 0 #4e6096;
158 |   background-color: white;
159 |   border-radius: 10px;
160 |   border: 1px solid #4e6096;
161 |   display: inline-block;
162 |   font: inherit;
163 |   line-height: 1.5em;
164 |   padding: 0.4em 3.5em 0.4em 1em;
165 |   /* reset */
166 |   margin: 0;
167 |   -webkit-box-sizing: border-box;
168 |   -moz-box-sizing: border-box;
169 |   box-sizing: border-box;
170 |   -webkit-appearance: none;
171 |   -moz-appearance: none;
172 | }
173 | 
174 | /*Selectbox Arrow*/
175 | select.classic {
176 |   background-image: linear-gradient(45deg, transparent 50%, blue 50%),
177 |     linear-gradient(135deg, blue 50%, transparent 50%),
178 |     linear-gradient(to right, skyblue, skyblue);
179 |   background-position: calc(100% - 20px) calc(1em + 2px),
180 |     calc(100% - 15px) calc(1em + 2px), 100% 0;
181 |   background-size: 5px 5px, 5px 5px, 2.5em 2.5em;
182 |   background-repeat: no-repeat;
183 | }
184 | 
185 | select.classic:focus {
186 |   background-image: linear-gradient(45deg, white 50%, transparent 50%),
187 |     linear-gradient(135deg, transparent 50%, white 50%),
188 |     linear-gradient(to right, gray, gray);
189 |   background-position: calc(100% - 15px) 1em, calc(100% - 20px) 1em, 100% 0;
190 |   background-size: 5px 5px, 5px 5px, 2.5em 2.5em;
191 |   background-repeat: no-repeat;
192 |   border-color: grey;
193 |   outline: 0;
194 | }
195 | 
196 | /* Profile Body (main big box around card) */
197 | /*-----------------------------------------*/
198 | .profile-content {
199 |   margin: 10px;
200 |   padding: 10px;
201 |   border-radius: 10px;
202 |   font-family: "Source Sans Pro", "Lucida Sans", "Lucida Sans Regular",
203 |     "Lucida Grande", "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
204 |   font-weight: 300;
205 |   text-align: center;
206 |   color: #414f57;
207 |   background: linear-gradient(-45deg, #ffbb5c, #ff9b50, #e25e3e, #c63d2f);
208 |   background-size: 400% 400%;
209 |   animation: gradient 15s ease infinite;
210 | }
211 | 
212 | @keyframes gradient {
213 |   0% {
214 |     background-position: 0 50%;
215 |   }
216 | 
217 |   50% {
218 |     background-position: 100% 50%;
219 |   }
220 | 
221 |   100% {
222 |     background-position: 0 50%;
223 |   }
224 | }
225 | 
226 | @-webkit-keyframes {
227 |   0% {
228 |     background-position: 0 50%;
229 |   }
230 | 
231 |   50% {
232 |     background-position: 100% 50%;
233 |   }
234 | 
235 |   100% {
236 |     background-position: 0 50%;
237 |   }
238 | }
239 | 
240 | footer div.profile-footer {
241 |   width: 100%;
242 |   display: block;
243 |   text-align: center;
244 |   font-size: 17.5px;
245 |   color: white;
246 |   line-height: 75px;
247 |   position: absolute;
248 |   bottom: 0;
249 | }
250 | 
251 | /* Section - Profile Main (Card Box) */
252 | /*-----------------------------------*/
253 | div.profile-main {
254 |   border-radius: 10px;
255 |   text-align: center;
256 |   box-sizing: border-box;
257 |   padding: 65px 25px;
258 |   display: inline-block;
259 |   margin-top: 25px;
260 | }
261 | 
262 | .whtbg {
263 |  background: white;
264 | }
265 | 
266 | .grybg {
267 |  background: rgb(255, 255, 250);
268 |   background: radial-gradient(
269 |     circle,
270 |     rgba(255, 255, 255, 1) 0%,
271 |     rgba(225, 225, 225, 1) 100%
272 |   );
273 | } 
274 | 
275 | div.hrithik0112-profile {
276 |   background: rgb(219, 230, 127);
277 |   background: linear-gradient(
278 |     90deg,
279 |     rgba(219, 230, 127, 1) 8%,
280 |     rgba(29, 232, 219, 1) 99%
281 |   );
282 | }
283 | 
284 | /* Section - Profile Photo */
285 | /*-------------------------*/
286 | div.profile-main section.profile-photo {
287 |   height: 125px;
288 | }
289 | 
290 | div.profile-main section.profile-photo img {
291 |   height: 125px;
292 |   border-radius: 50%;
293 | }
294 | 
295 | /* Contributor Box on thankyou.html */
296 | .contrib-box {
297 |    border: solid white 0px;
298 | }
299 | 
300 | /* Section - Profile Info */
301 | /*------------------------*/
302 | div.profile-main section.profile-info {
303 |   width: 100%;
304 | }
305 | 
306 | div.profile-main section.profile-info h1 {
307 |   font-size: 24px;
308 |   font-weight: 700;
309 |   line-height: 25px;
310 |   padding-top: 25px;
311 |   padding-bottom: 10px;
312 | }
313 | 
314 | div.profile-main section.profile-info h2 {
315 |   font-size: 18px;
316 |   font-weight: 600;
317 |   line-height: 30px;
318 | }
319 | 
320 | div.profile-main section.profile-info div {
321 |   font-size: 20px;
322 |   font-weight: 500;
323 |   line-height: 30px;
324 | }
325 | 
326 | /* Section - Profile Links */
327 | /*-------------------------*/
328 | div.profile-main section.profile-links {
329 |   height: 100px;
330 |   padding-top: 20px;
331 |   padding-bottom: 10px;
332 |   box-sizing: border-box;
333 | }
334 | 
335 | div.profile-main section.profile-links a {
336 |   height: 50px;
337 |   text-decoration: none;
338 |   display: inline-block;
339 |   margin: 0 7.5px;
340 | }
341 | 
342 | div.profile-main section.profile-links a svg {
343 |   height: 50px;
344 |   width: auto;
345 | }
346 | 
347 | div.profile-main section.profile-links a svg path {
348 |   fill: #414f57;
349 |   transition: fill 0.25s ease;
350 | }
351 | 
352 | div.profile-main section.profile-links a:hover svg path {
353 |   fill: #c8cccf;
354 | }
355 | 
356 | /* Responsive Screen Resizing */
357 | /*----------------------------*/
358 | @media only screen and (max-width: 444.44px) {
359 |   div.main {
360 |     width: 90%;
361 |   }
362 | }
363 | 
364 | @media only screen and (max-height: 653.88px) and (max-width: 444.44px) {
365 |   div.main {
366 |     margin: 5vw 0;
367 |     margin-bottom: 0;
368 |   }
369 | 
370 |   footer {
371 |     position: relative;
372 |   }
373 | }
374 | 


--------------------------------------------------------------------------------
/themes/galaxy.css:
--------------------------------------------------------------------------------
  1 | @import "https://fonts.googleapis.com/css?family=Source+Sans+Pro&display=swap";
  2 | 
  3 | /*After working in this file, use https://codebeautify.org/css-beautify-minify to clean up with 2 indents. Remove double verticle spaces.*/
  4 | 
  5 | /* Body applies to ALL pages (including index.html) */
  6 | body {
  7 |   color: #414f57;
  8 |   background: linear-gradient(-45deg, #440760, #e73c7e, #9f4590, #000761);
  9 |   background-size: 400% 400%;
 10 |   animation: gradient 15s ease infinite;
 11 |   margin: 0;
 12 |   padding: 0;
 13 |   -webkit-font-smoothing: antialiased;
 14 |   -moz-osx-font-smoothing: grayscale;
 15 | }
 16 | 
 17 | a {
 18 |   color: #23a6d5;
 19 | }
 20 | 
 21 | a:hover {
 22 |   color: #9f4590;
 23 | }
 24 | 
 25 | p {
 26 |     line-height: 1;
 27 | }
 28 | 
 29 | h1 {
 30 |     color: #23a6d5;
 31 |     font-size: 3.625rem;
 32 |     margin: 10px auto;
 33 | }
 34 | 
 35 | h1.small {
 36 |     color: #9f4590;
 37 |     font-size: 1rem;
 38 |     font-weight: bold;
 39 |     margin: 10px auto;
 40 | }
 41 | 
 42 | h1.name {
 43 |     color: #444444;
 44 |     font-size: 1rem;
 45 |     font-weight: bold;
 46 |     margin: 10px auto;
 47 | }
 48 | 
 49 | h1.index {
 50 |     color: #000000;
 51 |     font-size: 3rem;
 52 |     font-weight: bold;
 53 |     margin: 10px auto;
 54 | }
 55 | 
 56 | h2 {
 57 |     color: #23a6d5;
 58 |     font-size: 2rem;
 59 |     font-weight: normal;
 60 |     margin: 10px auto;
 61 | }
 62 | 
 63 | h2.title {    
 64 |     color: #444444;
 65 |     font-size: 1rem;
 66 |     font-weight: bold;
 67 |     margin: 10px auto;
 68 |     }
 69 |     
 70 | h2.index {
 71 |     color: #444444;
 72 |     font-size: 2rem;
 73 |     font-weight: bold;
 74 |     margin: 10px auto;
 75 | }
 76 | 
 77 | h3 {
 78 | color: #ee7752;
 79 |     text-transform: uppercase;
 80 |     font-size: 16px;
 81 |     font-style: normal;
 82 |     font-weight: 400;
 83 |     line-height: 26px;
 84 | }
 85 | 
 86 | h3.index {
 87 | color: #444444;
 88 | }
 89 | 
 90 | h4{
 91 |     color: #23a6d5;
 92 | }
 93 | 
 94 | h4.index {
 95 | color: #444444;
 96 | }
 97 | 
 98 | ul, li {
 99 | color:#444444;
100 | }
101 | 
102 | /* Main class for index.html */
103 | div.page-main {
104 |   width: 85%;
105 |   background-color: rgba(255, 255, 255, 0.7);
106 |   border-radius: 10px;
107 |   text-align: left;
108 |   box-sizing: border-box;
109 |   padding: 75px 25px;
110 |   display: inline-block;
111 |   padding-top: 50px;
112 |   padding-bottom: 50px;
113 | }
114 | 
115 | p.index-text, .theme-switch label, .page-selection label {
116 |   color: #444444;
117 |     line-height: 1.5;
118 | }
119 | 
120 | /* Profile Pages Navigation */
121 | /*--------------------------*/
122 | .profile-nav {
123 |   text-align: left;
124 |   margin: 4px;
125 | }
126 | 
127 | .profile-nav a {
128 |   color: #fff;
129 | }
130 | 
131 | .homeButton {
132 |   box-shadow: 3px 4px 0 0 #4e6096;
133 |   background: linear-gradient(to bottom, #ee7752 5%, #e73c7d 100%);
134 |   background-color: #ee7752;
135 |   border-radius: 10px;
136 |   border: 1px solid #4e6096;
137 |   display: inline-block;
138 |   cursor: pointer;
139 |   padding: 0.5em 1em;
140 |   text-decoration: none;
141 |   text-shadow: 0 1px 0 #0c4a3a;
142 | }
143 | 
144 | .homeButton:hover {
145 |   background: linear-gradient(to bottom, #e73c7d 5%, #ee7752 100%);
146 |   background-color: #e73c7d;
147 | }
148 | 
149 | .theme-switch {
150 |   display: inline;
151 | }
152 | 
153 | /*SELECT BOX FOR THEME DROPDOWN*/
154 | select {
155 |   /* styling */
156 |   box-shadow: 3px 4px 0 0 #4e6096;
157 |   background-color: white;
158 |   border-radius: 10px;
159 |   border: 1px solid #4e6096;
160 |   display: inline-block;
161 |   font: inherit;
162 |   line-height: 1.5em;
163 |   padding: 0.4em 3.5em 0.4em 1em;
164 |   /* reset */
165 |   margin: 0;
166 |   -webkit-box-sizing: border-box;
167 |   -moz-box-sizing: border-box;
168 |   box-sizing: border-box;
169 |   -webkit-appearance: none;
170 |   -moz-appearance: none;
171 | }
172 | 
173 | /*Selectbox Arrow*/
174 | select.classic {
175 |   background-image: linear-gradient(45deg, transparent 50%, blue 50%),
176 |     linear-gradient(135deg, blue 50%, transparent 50%),
177 |     linear-gradient(to right, skyblue, skyblue);
178 |   background-position: calc(100% - 20px) calc(1em + 2px),
179 |     calc(100% - 15px) calc(1em + 2px), 100% 0;
180 |   background-size: 5px 5px, 5px 5px, 2.5em 2.5em;
181 |   background-repeat: no-repeat;
182 | }
183 | 
184 | select.classic:focus {
185 |   background-image: linear-gradient(45deg, white 50%, transparent 50%),
186 |     linear-gradient(135deg, transparent 50%, white 50%),
187 |     linear-gradient(to right, gray, gray);
188 |   background-position: calc(100% - 15px) 1em, calc(100% - 20px) 1em, 100% 0;
189 |   background-size: 5px 5px, 5px 5px, 2.5em 2.5em;
190 |   background-repeat: no-repeat;
191 |   border-color: grey;
192 |   outline: 0;
193 | }
194 | 
195 | /* Profile Body (main big box around card) */
196 | /*-----------------------------------------*/
197 | .profile-content {
198 |   margin: 10px;
199 |   padding: 10px;
200 |   border-radius: 10px;
201 |   font-family: "Source Sans Pro", "Lucida Sans", "Lucida Sans Regular",
202 |     "Lucida Grande", "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
203 |   font-weight: 300;
204 |   text-align: center;
205 |   color: #414f57;
206 |   background: linear-gradient(-45deg, #440760, #e73c7e, #9f4590, #000761);
207 |   background-size: 400% 400%;
208 |   animation: gradient 15s ease infinite;
209 | }
210 | 
211 | @keyframes gradient {
212 |   0% {
213 |     background-position: 0 50%;
214 |   }
215 | 
216 |   50% {
217 |     background-position: 100% 50%;
218 |   }
219 | 
220 |   100% {
221 |     background-position: 0 50%;
222 |   }
223 | }
224 | 
225 | @-webkit-keyframes {
226 |   0% {
227 |     background-position: 0 50%;
228 |   }
229 | 
230 |   50% {
231 |     background-position: 100% 50%;
232 |   }
233 | 
234 |   100% {
235 |     background-position: 0 50%;
236 |   }
237 | }
238 | 
239 | footer div.profile-footer {
240 |   width: 100%;
241 |   display: block;
242 |   text-align: center;
243 |   font-size: 17.5px;
244 |   color: white;
245 |   line-height: 75px;
246 |   position: absolute;
247 |   bottom: 0;
248 | }
249 | 
250 | /* Section - Profile Main (Card Box) */
251 | /*-----------------------------------*/
252 | div.profile-main {
253 |   border-radius: 10px;
254 |   text-align: center;
255 |   box-sizing: border-box;
256 |   padding: 65px 25px;
257 |   display: inline-block;
258 |   margin-top: 25px;
259 | }
260 | 
261 | .whtbg {
262 |  background: white;
263 | }
264 | 
265 | .grybg {
266 |  background: rgb(255, 255, 250);
267 |   background: radial-gradient(
268 |     circle,
269 |     rgba(255, 255, 255, 1) 0%,
270 |     rgba(225, 225, 225, 1) 100%
271 |   );
272 | }
273 | 
274 | div.hrithik0112-profile {
275 |   background: rgb(238, 174, 202);
276 |   background: radial-gradient(
277 |     circle,
278 |     rgba(238, 174, 202, 1) 0%,
279 |     rgba(148, 187, 233, 1) 100%
280 |   );
281 | }
282 | 
283 | /* Section - Profile Photo */
284 | /*-------------------------*/
285 | div.profile-main section.profile-photo {
286 |   height: 125px;
287 | }
288 | 
289 | div.profile-main section.profile-photo img {
290 |   height: 125px;
291 |   border-radius: 50%;
292 | }
293 | 
294 | /* Contributor Box on thankyou.html */
295 | .contrib-box {
296 |    border: solid white 0px;
297 | }
298 | 
299 | /* Section - Profile Info */
300 | /*------------------------*/
301 | div.profile-main section.profile-info {
302 |   width: 100%;
303 | }
304 | 
305 | div.profile-main section.profile-info h1 {
306 |   font-size: 24px;
307 |   font-weight: 700;
308 |   line-height: 25px;
309 |   padding-top: 25px;
310 |   padding-bottom: 10px;
311 | }
312 | 
313 | div.profile-main section.profile-info h2 {
314 |   font-size: 18px;
315 |   font-weight: 600;
316 |   line-height: 30px;
317 | }
318 | 
319 | div.profile-main section.profile-info div {
320 |   font-size: 20px;
321 |   font-weight: 500;
322 |   line-height: 30px;
323 | }
324 | 
325 | /* Section - Profile Links */
326 | /*-------------------------*/
327 | div.profile-main section.profile-links {
328 |   height: 100px;
329 |   padding-top: 20px;
330 |   padding-bottom: 10px;
331 |   box-sizing: border-box;
332 | }
333 | 
334 | div.profile-main section.profile-links a {
335 |   height: 50px;
336 |   text-decoration: none;
337 |   display: inline-block;
338 |   margin: 0 7.5px;
339 | }
340 | 
341 | div.profile-main section.profile-links a svg {
342 |   height: 50px;
343 |   width: auto;
344 | }
345 | 
346 | div.profile-main section.profile-links a svg path {
347 |   fill: #414f57;
348 |   transition: fill 0.25s ease;
349 | }
350 | 
351 | div.profile-main section.profile-links a:hover svg path {
352 |   fill: #c8cccf;
353 | }
354 | 
355 | /* Responsive Screen Resizing */
356 | /*----------------------------*/
357 | @media only screen and (max-width: 444.44px) {
358 |   div.main {
359 |     width: 90%;
360 |   }
361 | }
362 | 
363 | @media only screen and (max-height: 653.88px) and (max-width: 444.44px) {
364 |   div.main {
365 |     margin: 5vw 0;
366 |     margin-bottom: 0;
367 |   }
368 | 
369 |   footer {
370 |     position: relative;
371 |   }
372 | }
373 | 


--------------------------------------------------------------------------------
/themes/light.css:
--------------------------------------------------------------------------------
  1 | @import "https://fonts.googleapis.com/css?family=Source+Sans+Pro&display=swap";
  2 | 
  3 | /*After working in this file, use https://codebeautify.org/css-beautify-minify to clean up with 2 indents. Remove double verticle spaces.*/
  4 | 
  5 | /* Body applies to ALL pages (including index.html) */
  6 | body {
  7 |   background-color: #23a6d5;
  8 |   color: #FFFFFF;
  9 |   background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
 10 |   background-size: 400% 400%;
 11 |   animation: gradient 15s ease infinite;
 12 |   margin: 0;
 13 |   padding: 0;
 14 |   -webkit-font-smoothing: antialiased;
 15 |   -moz-osx-font-smoothing: grayscale;
 16 | }
 17 | 
 18 | a {
 19 |   color: #2310df;
 20 | }
 21 | 
 22 | a:hover {
 23 |   color: #23a6d5;
 24 | }
 25 | 
 26 | p {
 27 |     line-height: 1;
 28 | }
 29 | 
 30 | h1 {
 31 |     color: #23a6d5;
 32 |     font-size: 3.625rem;
 33 |     margin: 10px auto;
 34 | }
 35 | 
 36 | h1.small {
 37 |     color: #9f4590;
 38 |     font-size: 1rem;
 39 |     font-weight: bold;
 40 |     margin: 10px auto;
 41 | }
 42 | 
 43 | h1.name {
 44 |     color: #444444;
 45 |     font-size: 1rem;
 46 |     font-weight: bold;
 47 |     margin: 10px auto;
 48 | }
 49 | 
 50 | h1.index {
 51 |     color: #000000;
 52 |     font-size: 3rem;
 53 |     font-weight: bold;
 54 |     margin: 10px auto;
 55 | }
 56 | 
 57 | h2 {
 58 |     color: #23a6d5;
 59 |     font-size: 2rem;
 60 |     font-weight: normal;
 61 |     margin: 10px auto;
 62 | }
 63 | 
 64 | h2.title {    
 65 |     color: #444444;
 66 |     font-size: 1rem;
 67 |     font-weight: bold;
 68 |     margin: 10px auto;
 69 | }
 70 | 
 71 | h2.index {
 72 |     color: #444444;
 73 |     font-size: 2rem;
 74 |     font-weight: bold;
 75 |     margin: 10px auto;
 76 | }
 77 | 
 78 | h3 {
 79 | color: #ee7752;
 80 |     text-transform: uppercase;
 81 |     font-size: 16px;
 82 |     font-style: normal;
 83 |     font-weight: 400;
 84 |     line-height: 26px;
 85 | }
 86 | 
 87 | h3.index {
 88 | color: #444444;
 89 | }
 90 | 
 91 | h4{
 92 |     color: #23a6d5;
 93 | }
 94 | 
 95 | h4.index{
 96 | color: #444444;
 97 | }
 98 | 
 99 | ul, li {
100 | color:#000000;
101 | }
102 | 
103 | /* Main class for index.html */
104 | div.page-main {
105 |   width: 85%;
106 |   background-color: rgba(255, 255, 255, 0.7);
107 |   border-radius: 10px;
108 |   text-align: left;
109 |   box-sizing: border-box;
110 |   padding: 75px 25px;
111 |   display: inline-block;
112 |   padding-top: 50px;
113 |   padding-bottom: 50px;
114 | }
115 | 
116 | p.index-text, .theme-switch label, .page-selection label {
117 |   color: #444444;
118 |     line-height: 1.5;
119 | }
120 | 
121 | /* Profile Pages Navigation */
122 | /*--------------------------*/
123 | .profile-nav {
124 |   text-align: left;
125 |   margin: 4px;
126 | }
127 | 
128 | .profile-nav a {
129 |   color: #222222;
130 | }
131 | 
132 | .homeButton {
133 |   box-shadow: 3px 4px 0 0 #4e6096;
134 |   background: linear-gradient(to bottom, #ee7752 5%, #e73c7d 100%);
135 |   background-color: #ee7752;
136 |   border-radius: 10px;
137 |   border: 1px solid #4e6096;
138 |   display: inline-block;
139 |   cursor: pointer;
140 |   padding: 0.5em 1em;
141 |   text-decoration: none;
142 |   text-shadow: 0 1px 0 #0c4a3a;
143 | }
144 | 
145 | .homeButton:hover {
146 |   background: linear-gradient(to bottom, #e73c7d 5%, #ee7752 100%);
147 |   background-color: #e73c7d;
148 | }
149 | 
150 | .theme-switch {
151 |   display: inline;
152 | }
153 | 
154 | /*SELECT BOX FOR THEME DROPDOWN*/
155 | select {
156 |   /* styling */
157 |   box-shadow: 3px 4px 0 0 #4e6096;
158 |   background-color: white;
159 |   border-radius: 10px;
160 |   border: 1px solid #4e6096;
161 |   display: inline-block;
162 |   font: inherit;
163 |   line-height: 1.5em;
164 |   padding: 0.4em 3.5em 0.4em 1em;
165 |   /* reset */
166 |   margin: 0;
167 |   -webkit-box-sizing: border-box;
168 |   -moz-box-sizing: border-box;
169 |   box-sizing: border-box;
170 |   -webkit-appearance: none;
171 |   -moz-appearance: none;
172 | }
173 | 
174 | /*Selectbox Arrow*/
175 | select.classic {
176 |   background-image: linear-gradient(45deg, transparent 50%, blue 50%),
177 |     linear-gradient(135deg, blue 50%, transparent 50%),
178 |     linear-gradient(to right, skyblue, skyblue);
179 |   background-position: calc(100% - 20px) calc(1em + 2px),
180 |     calc(100% - 15px) calc(1em + 2px), 100% 0;
181 |   background-size: 5px 5px, 5px 5px, 2.5em 2.5em;
182 |   background-repeat: no-repeat;
183 | }
184 | 
185 | select.classic:focus {
186 |   background-image: linear-gradient(45deg, white 50%, transparent 50%),
187 |     linear-gradient(135deg, transparent 50%, white 50%),
188 |     linear-gradient(to right, gray, gray);
189 |   background-position: calc(100% - 15px) 1em, calc(100% - 20px) 1em, 100% 0;
190 |   background-size: 5px 5px, 5px 5px, 2.5em 2.5em;
191 |   background-repeat: no-repeat;
192 |   border-color: grey;
193 |   outline: 0;
194 | }
195 | 
196 | /* Profile Body (main big box around card) */
197 | /*-----------------------------------------*/
198 | .profile-content {
199 |   margin: 10px;
200 |   padding: 10px;
201 |   border-radius: 10px;
202 |   font-family: "Source Sans Pro", "Lucida Sans", "Lucida Sans Regular",
203 |     "Lucida Grande", "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
204 |   font-weight: 300;
205 |   text-align: center;
206 |   color: #414f57;
207 |   background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
208 |   background-size: 400% 400%;
209 |   animation: gradient 15s ease infinite;
210 | }
211 | 
212 | @keyframes gradient {
213 |   0% {
214 |     background-position: 0 50%;
215 |   }
216 | 
217 |   50% {
218 |     background-position: 100% 50%;
219 |   }
220 | 
221 |   100% {
222 |     background-position: 0 50%;
223 |   }
224 | }
225 | 
226 | @-webkit-keyframes {
227 |   0% {
228 |     background-position: 0 50%;
229 |   }
230 | 
231 |   50% {
232 |     background-position: 100% 50%;
233 |   }
234 | 
235 |   100% {
236 |     background-position: 0 50%;
237 |   }
238 | }
239 | 
240 | footer div.profile-footer {
241 |   width: 100%;
242 |   display: block;
243 |   text-align: center;
244 |   font-size: 17.5px;
245 |   color: white;
246 |   line-height: 75px;
247 |   position: absolute;
248 |   bottom: 0;
249 | }
250 | 
251 | /* Section - Profile Main (Card Box) */
252 | /*-----------------------------------*/
253 | div.profile-main {
254 |   border-radius: 10px;
255 |   text-align: center;
256 |   box-sizing: border-box;
257 |   padding: 65px 25px;
258 |   display: inline-block;
259 |   margin-top: 25px;
260 | }
261 | 
262 | .whtbg {
263 |  background: white;
264 | }
265 | 
266 | .grybg {
267 |  background: rgb(255, 255, 250);
268 |   background: radial-gradient(
269 |     circle,
270 |     rgba(255, 255, 255, 1) 0%,
271 |     rgba(225, 225, 225, 1) 100%
272 |   );
273 | }
274 | 
275 | div.hrithik0112-profile {
276 |   background: rgb(237, 221, 221);
277 |   background: linear-gradient(
278 |     90deg,
279 |     rgb(237, 221, 221) 8%,
280 |     rgba(137, 128, 199, 1) 99%
281 |   );
282 | }
283 | 
284 | /* Section - Profile Photo */
285 | /*-------------------------*/
286 | div.profile-main section.profile-photo {
287 |   height: 125px;
288 | }
289 | 
290 | div.profile-main section.profile-photo img {
291 |   height: 125px;
292 |   border-radius: 50%;
293 | }
294 | 
295 | /* Contributor Box on thankyou.html */
296 | .contrib-box {
297 |    border: solid white 0px;
298 | }
299 | 
300 | /* Section - Profile Info */
301 | /*------------------------*/
302 | div.profile-main section.profile-info {
303 |   width: 100%;
304 | }
305 | 
306 | div.profile-main section.profile-info h1 {
307 |   font-size: 24px;
308 |   font-weight: 700;
309 |   line-height: 25px;
310 |   padding-top: 25px;
311 |   padding-bottom: 10px;
312 | }
313 | 
314 | div.profile-main section.profile-info h2 {
315 |   font-size: 18px;
316 |   font-weight: 600;
317 |   line-height: 30px;
318 | }
319 | 
320 | div.profile-main section.profile-info div {
321 |   font-size: 20px;
322 |   font-weight: 500;
323 |   line-height: 30px;
324 | }
325 | 
326 | /* Section - Profile Links */
327 | /*-------------------------*/
328 | div.profile-main section.profile-links {
329 |   height: 100px;
330 |   padding-top: 20px;
331 |   padding-bottom: 10px;
332 |   box-sizing: border-box;
333 | }
334 | 
335 | div.profile-main section.profile-links a {
336 |   height: 50px;
337 |   text-decoration: none;
338 |   display: inline-block;
339 |   margin: 0 7.5px;
340 | }
341 | 
342 | div.profile-main section.profile-links a svg {
343 |   height: 50px;
344 |   width: auto;
345 | }
346 | 
347 | div.profile-main section.profile-links a svg path {
348 |   fill: #414f57;
349 |   transition: fill 0.25s ease;
350 | }
351 | 
352 | div.profile-main section.profile-links a:hover svg path {
353 |   fill: #c8cccf;
354 | }
355 | 
356 | /* Responsive Screen Resizing */
357 | /*----------------------------*/
358 | @media only screen and (max-width: 444.44px) {
359 |   div.main {
360 |     width: 90%;
361 |   }
362 | }
363 | 
364 | @media only screen and (max-height: 653.88px) and (max-width: 444.44px) {
365 |   div.main {
366 |     margin: 5vw 0;
367 |     margin-bottom: 0;
368 |   }
369 | 
370 |   footer {
371 |     position: relative;
372 |   }
373 | }
374 | 


--------------------------------------------------------------------------------
/themes/spring.css:
--------------------------------------------------------------------------------
  1 | @import "https://fonts.googleapis.com/css?family=Source+Sans+Pro&display=swap";
  2 | 
  3 | /*After working in this file, use https://codebeautify.org/css-beautify-minify to clean up with 2 indents. Remove double verticle spaces.*/
  4 | 
  5 | /* Body applies to ALL pages (including index.html) */
  6 | body {
  7 |   background-color: #23a6d5;
  8 |   color: #414f57;
  9 |   background: linear-gradient(-45deg, #b82f06, #8a0035, #4b869b, #058366);
 10 |   background-size: 400% 400%;
 11 |   animation: gradient 15s ease infinite;
 12 |   margin: 0;
 13 |   padding: 0;
 14 |   -webkit-font-smoothing: antialiased;
 15 |   -moz-osx-font-smoothing: grayscale;
 16 | }
 17 | 
 18 | a {
 19 |   color: #8a0035;
 20 | }
 21 | 
 22 | a:hover {
 23 |   color: #4b869b;
 24 | }
 25 | 
 26 | p {
 27 |     line-height: 1;
 28 | }
 29 | 
 30 | h1 {
 31 |     color: #23a6d5;
 32 |     font-size: 3.625rem;
 33 |     margin: 10px auto;
 34 | }
 35 | 
 36 | h1.small {
 37 |     color: #8a0035;
 38 |     font-size: 1rem;
 39 |     font-weight: bold;
 40 |     margin: 10px auto;
 41 | }
 42 | 
 43 | h1.name {
 44 |     color: #4b869b;
 45 |     font-size: 1rem;
 46 |     font-weight: bold;
 47 |     margin: 10px auto;
 48 | }
 49 | 
 50 | h1.index {
 51 |     color: #000000;
 52 |     font-size: 3rem;
 53 |     font-weight: bold;
 54 |     margin: 10px auto;
 55 | }
 56 | 
 57 | h2 {
 58 |     color: #23a6d5;
 59 |     font-size: 2rem;
 60 |     font-weight: normal;
 61 |     margin: 10px auto;
 62 | }
 63 | 
 64 | h2.title {    
 65 |     color: #4b869b;
 66 |     font-size: 1rem;
 67 |     font-weight: bold;
 68 |     margin: 10px auto;
 69 | }
 70 | 
 71 | h2.index {
 72 |     color: #000000;
 73 |     font-size: 2rem;
 74 |     font-weight: bold;
 75 |     margin: 10px auto;
 76 | }
 77 | 
 78 | h3 {
 79 | color: #b82f06;
 80 |     text-transform: uppercase;
 81 |     font-size: 16px;
 82 |     font-style: normal;
 83 |     font-weight: 400;
 84 |     line-height: 26px;
 85 | }
 86 | 
 87 | h3.index {
 88 | color: #000000;
 89 | }
 90 | 
 91 | h4{
 92 |     color: #23a6d5;
 93 | }
 94 | 
 95 | h4.index {
 96 | color: #000000;
 97 | }
 98 | 
 99 | ul, li {
100 | color:#000000;
101 | }
102 | 
103 | /* Main class for index.html */
104 | div.page-main {
105 |   width: 85%;
106 |   background-color:#89db3a;
107 |   border-radius: 10px;
108 |   text-align: left;
109 |   box-sizing: border-box;
110 |   padding: 75px 25px;
111 |   display: inline-block;
112 |   padding-top: 50px;
113 |   padding-bottom: 50px;
114 |   box-shadow: 0 10px 30px  rgb(151, 142, 58);
115 | }
116 | 
117 | p.index-text, .theme-switch label, .page-selection label {
118 |   color: #444444;
119 |     line-height: 1.5;
120 | }
121 | 
122 | /* Profile Pages Navigation */
123 | /*--------------------------*/
124 | .profile-nav {
125 |   text-align: left;
126 |   margin: 4px;
127 | }
128 | 
129 | .profile-nav a {
130 |   color: #530404;
131 |   text-shadow: rgb(167, 86, 86);
132 | }
133 | 
134 | .homeButton {
135 |   box-shadow: 3px 4px 0 0 #4e6096;
136 |   background: linear-gradient(45deg, #439797 , #32a0c2 , rgb(54, 178, 182),rgb(14, 179, 190));
137 |   background-color: #ee7752;
138 |   border-radius: 10px;
139 |   border: 1px solid #4e6096;
140 |   display: inline-block;
141 |   cursor: pointer;
142 |   padding: 0.5em 1em;
143 |   text-decoration: none;
144 |   text-shadow: 0 1px 0 #0d8668;
145 | }
146 | 
147 | .homeButton:hover {
148 |   background: linear-gradient(-45deg,rgb(250, 203, 115), rgb(250, 250, 104));
149 |   background-color: #e73c7d;
150 | }
151 | 
152 | .theme-switch {
153 |   display: inline;
154 | }
155 | 
156 | /*SELECT BOX FOR THEME DROPDOWN*/
157 | select {
158 |   /* styling */
159 |   box-shadow: 3px 4px 0 0 #b9b60b;
160 |   background-color: rgb(253, 252, 188);
161 |   border-radius: 10px;
162 |   border: 1px solid #6a6b17;
163 |   display: inline-block;
164 |   font: inherit;
165 |   line-height: 1.5em;
166 |   padding: 0.4em 3.5em 0.4em 1em;
167 |   /* reset */
168 |   margin: 0;
169 |   -webkit-box-sizing: border-box;
170 |   -moz-box-sizing: border-box;
171 |   box-sizing: border-box;
172 |   -webkit-appearance: none;
173 |   -moz-appearance: none;
174 | }
175 | 
176 | /*Selectbox Arrow*/
177 | select.classic {
178 |   background-image: linear-gradient(45deg, transparent 50%, blue 50%),
179 |     linear-gradient(135deg, blue 50%, transparent 50%),
180 |     linear-gradient(to right, skyblue, skyblue);
181 |   background-position: calc(100% - 20px) calc(1em + 2px),
182 |     calc(100% - 15px) calc(1em + 2px), 100% 0;
183 |   background-size: 5px 5px, 5px 5px, 2.5em 2.5em;
184 |   background-repeat: no-repeat;
185 | }
186 | 
187 | select.classic:focus {
188 |   background-image: linear-gradient(45deg, white 50%, transparent 50%),
189 |     linear-gradient(135deg, transparent 50%, white 50%),
190 |     linear-gradient(to right, gray, gray);
191 |   background-position: calc(100% - 15px) 1em, calc(100% - 20px) 1em, 100% 0;
192 |   background-size: 5px 5px, 5px 5px, 2.5em 2.5em;
193 |   background-repeat: no-repeat;
194 |   border-color: grey;
195 |   outline: 0;
196 | }
197 | 
198 | /* Profile Body (main big box around card) */
199 | /*-----------------------------------------*/
200 | .profile-content {
201 |   margin: 10px;
202 |   padding: 10px;
203 |   border-radius: 10px;
204 |   font-family: "Source Sans Pro", "Lucida Sans", "Lucida Sans Regular",
205 |     "Lucida Grande", "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
206 |   font-weight: 300;
207 |   text-align: center;
208 |   color: #414f57;
209 |   background: linear-gradient(-45deg, #ee199c, #eb1414, #ff1a5f, #ebb915);
210 |   background-size: 400% 400%;
211 |   animation: gradient 15s ease infinite;
212 | }
213 | 
214 | @keyframes gradient {
215 |   0% {
216 |     background-position: 0 50%;
217 |   }
218 | 
219 |   50% {
220 |     background-position: 100% 50%;
221 |   }
222 | 
223 |   100% {
224 |     background-position: 0 50%;
225 |   }
226 | }
227 | 
228 | @-webkit-keyframes {
229 |   0% {
230 |     background-position: 0 50%;
231 |   }
232 | 
233 |   50% {
234 |     background-position: 100% 50%;
235 |   }
236 | 
237 |   100% {
238 |     background-position: 0 50%;
239 |   }
240 | }
241 | 
242 | footer div.profile-footer {
243 |   width: 100%;
244 |   display: block;
245 |   text-align: center;
246 |   font-size: 17.5px;
247 |   color: white;
248 |   line-height: 75px;
249 |   position: absolute;
250 |   bottom: 0;
251 | }
252 | 
253 | /* Section - Profile Main (Card Box) */
254 | /*-----------------------------------*/
255 | div.profile-main {
256 |   border-radius: 10px;
257 |   background: linear-gradient(90deg, rgb(194, 186, 78) 8%, rgb(187, 170, 20) 99%,rgb(207, 191, 39) 20%);
258 |   text-align: center;
259 |   box-sizing: border-box;
260 |   padding: 65px 25px;
261 |   display: inline-block;
262 |   margin-top: 25px;
263 |   box-shadow: 0 40px 60px  rgb(151, 142, 58);
264 | }
265 | 
266 | .whtbg {
267 |  background: white;
268 | }
269 | 
270 | .grybg {
271 |  background: rgb(255, 255, 250);
272 |   background: radial-gradient(
273 |     circle,
274 |     rgba(255, 255, 255, 1) 0%,
275 |     rgba(225, 225, 225, 1) 100%
276 |   );
277 | }
278 | 
279 | div.hrithik0112-profile {
280 |   background: rgb(194, 186, 78);
281 |   background: linear-gradient(
282 |   90deg,
283 |   rgb(187, 170, 20) 8%,
284 |   rgb(207, 191, 39)  99%
285 |   );
286 | }
287 | 
288 | /* Section - Profile Photo */
289 | /*-------------------------*/
290 | div.profile-main section.profile-photo {
291 |   height: 120px;
292 | }
293 | 
294 | div.profile-main section.profile-photo img {
295 |   height: 120px;
296 |   border-radius: 50%;
297 | }
298 | 
299 | /* Contributor Box on thankyou.html */
300 | .contrib-box {
301 |    border: solid #eb1414 2px;
302 | }
303 | 
304 | /* Section - Profile Info */
305 | /*------------------------*/
306 | div.profile-main section.profile-info {
307 |   width: 100%;
308 | }
309 | 
310 | div.profile-main section.profile-info h1 {
311 |   font-size: 24px;
312 |   font-weight: 700;
313 |   line-height: 25px;
314 |   padding-top: 25px;
315 |   padding-bottom: 10px;
316 | }
317 | 
318 | div.profile-main section.profile-info h2 {
319 |   font-size: 18px;
320 |   font-weight: 600;
321 |   line-height: 30px;
322 |   color: #571931;
323 | }
324 | 
325 | div.profile-main section.profile-info div {
326 |   font-size: 20px;
327 |   font-weight: 500;
328 |   line-height: 30px;
329 |   color: #571931;
330 | }
331 | 
332 | /* Section - Profile Links */
333 | /*-------------------------*/
334 | div.profile-main section.profile-links {
335 |   height: 100px;
336 |   padding-top: 37.5px;
337 |   padding-bottom: 12.5px;
338 |   box-sizing: border-box;
339 |   margin-top: 45px;
340 |   color: #571931;
341 | }
342 | 
343 | div.profile-main section.profile-links a {
344 |   height: 50px;
345 |   text-decoration: none;
346 |   display: inline-block;
347 |   margin: 0 7.5px;
348 | }
349 | 
350 | div.profile-main section.profile-links a svg {
351 |   height: 50px;
352 |   width: auto;
353 | }
354 | 
355 | div.profile-main section.profile-links a svg path {
356 |   fill: #f5faf9;
357 |   transition: fill 0.25s ease;
358 | }
359 | 
360 | div.profile-main section.profile-links a:hover svg path {
361 |  fill: #e24048; 
362 | }
363 | 
364 | /* Responsive Screen Resizing */
365 | /*----------------------------*/
366 | @media only screen and (max-width: 444.44px) {
367 |   div.main {
368 |     width: 90%;
369 |   }
370 | }
371 | 
372 | @media only screen and (max-height: 653.88px) and (max-width: 444.44px) {
373 |   div.main {
374 |     margin: 5vw 0;
375 |     margin-bottom: 0;
376 |   }
377 | 
378 |   footer {
379 |     position: relative;
380 |   }
381 | }
382 | 


--------------------------------------------------------------------------------
/themes/tritan.css:
--------------------------------------------------------------------------------
  1 | @import "https://fonts.googleapis.com/css?family=Source+Sans+Pro&display=swap";
  2 | 
  3 | /*After working in this file, use https://codebeautify.org/css-beautify-minify to clean up with 2 indents. Remove double verticle spaces.*/
  4 | 
  5 | /* Body applies to ALL pages (including index.html) */
  6 | body {
  7 |   background-color: #23a6d5;
  8 |   color: #414f57;
  9 |   background: linear-gradient(-45deg, #186F65, #6A9C89, #952323, #C70039);
 10 |   background-size: 400% 400%;
 11 |   animation: gradient 15s ease infinite;
 12 |   margin: 0;
 13 |   padding: 0;
 14 |   -webkit-font-smoothing: antialiased;
 15 |   -moz-osx-font-smoothing: grayscale;
 16 | }
 17 | 
 18 | a {
 19 |   color: #952323;
 20 | }
 21 | 
 22 | a:hover {
 23 |   color: #6A9C89;
 24 | }
 25 | 
 26 | p {
 27 |     line-height: 1;
 28 | }
 29 | 
 30 | h1 {
 31 |     color: #23a6d5;
 32 |     font-size: 3.625rem;
 33 |     margin: 10px auto;
 34 | }
 35 | 
 36 | h1.small {
 37 |     color: #C70039;
 38 |     font-size: 1rem;
 39 |     font-weight: bold;
 40 |     margin: 10px auto;
 41 | }
 42 | 
 43 | h1.name {
 44 |     color: #6A9C89;
 45 |     font-size: 1rem;
 46 |     font-weight: bold;
 47 |     margin: 10px auto;
 48 | }
 49 | 
 50 | h1.index {
 51 |     color: #000000;
 52 |     font-size: 3rem;
 53 |     font-weight: bold;
 54 |     margin: 10px auto;
 55 | }
 56 | 
 57 | h2 {
 58 |     color: #23a6d5;
 59 |     font-size: 2rem;
 60 |     font-weight: normal;
 61 |     margin: 10px auto;
 62 | }
 63 | 
 64 | h2.title {    
 65 |     color: #6A9C89;
 66 |     font-size: 1rem;
 67 |     font-weight: bold;
 68 |     margin: 10px auto;
 69 | }
 70 | 
 71 | h2.index {
 72 |     color: #000000;
 73 |     font-size: 2rem;
 74 |     font-weight: bold;
 75 |     margin: 10px auto;
 76 | }
 77 | 
 78 | h3 {
 79 | color: #C70039;
 80 |     text-transform: uppercase;
 81 |     font-size: 16px;
 82 |     font-style: normal;
 83 |     font-weight: 400;
 84 |     line-height: 26px;
 85 | }
 86 | 
 87 | h3.index
 88 | {
 89 | color: #000000;
 90 | }
 91 | 
 92 | h4{
 93 |     color: #23a6d5;
 94 | }
 95 | 
 96 | h4.index {
 97 | color: #000000;
 98 | }
 99 | 
100 | ul, li {
101 | color:#000000;
102 | }
103 | 
104 | /* Main class for index.html */
105 | div.page-main {
106 |   width: 85%;
107 |   background-color: rgba(255, 255, 255, 0.7);
108 |   border-radius: 10px;
109 |   text-align: left;
110 |   box-sizing: border-box;
111 |   padding: 75px 25px;
112 |   display: inline-block;
113 |   padding-top: 50px;
114 |   padding-bottom: 50px;
115 | }
116 | 
117 | p.index-text, .theme-switch label, .page-selection label {
118 |   color: #444444;
119 |   line-height: 1.5;
120 | }
121 | 
122 | /* Profile Pages Navigation */
123 | /*--------------------------*/
124 | .profile-nav {
125 |   text-align: left;
126 |   margin: 4px;
127 | }
128 | 
129 | .profile-nav a {
130 |   color: #222222;
131 | }
132 | 
133 | .homeButton {
134 |   box-shadow: 3px 4px 0 0 #4e6096;
135 |   background: linear-gradient(to bottom, #ee7752 5%, #e73c7d 100%);
136 |   background-color: #ee7752;
137 |   border-radius: 10px;
138 |   border: 1px solid #4e6096;
139 |   display: inline-block;
140 |   cursor: pointer;
141 |   padding: 0.5em 1em;
142 |   text-decoration: none;
143 |   text-shadow: 0 1px 0 #0c4a3a;
144 | }
145 | 
146 | .homeButton:hover {
147 |   background: linear-gradient(to bottom, #e73c7d 5%, #ee7752 100%);
148 |   background-color: #e73c7d;
149 | }
150 | .theme-switch {
151 |   display: inline;
152 | }
153 | 
154 | /*SELECT BOX FOR THEME DROPDOWN*/
155 | select {
156 |   /* styling */
157 |   box-shadow: 3px 4px 0 0 #4e6096;
158 |   background-color: white;
159 |   border-radius: 10px;
160 |   border: 1px solid #4e6096;
161 |   display: inline-block;
162 |   font: inherit;
163 |   line-height: 1.5em;
164 |   padding: 0.4em 3.5em 0.4em 1em;
165 |   /* reset */
166 |   margin: 0;
167 |   -webkit-box-sizing: border-box;
168 |   -moz-box-sizing: border-box;
169 |   box-sizing: border-box;
170 |   -webkit-appearance: none;
171 |   -moz-appearance: none;
172 | }
173 | 
174 | /*Selectbox Arrow*/
175 | select.classic {
176 |   background-image: linear-gradient(45deg, transparent 50%, blue 50%),
177 |     linear-gradient(135deg, blue 50%, transparent 50%),
178 |     linear-gradient(to right, skyblue, skyblue);
179 |   background-position: calc(100% - 20px) calc(1em + 2px),
180 |     calc(100% - 15px) calc(1em + 2px), 100% 0;
181 |   background-size: 5px 5px, 5px 5px, 2.5em 2.5em;
182 |   background-repeat: no-repeat;
183 | }
184 | 
185 | select.classic:focus {
186 |   background-image: linear-gradient(45deg, white 50%, transparent 50%),
187 |     linear-gradient(135deg, transparent 50%, white 50%),
188 |     linear-gradient(to right, gray, gray);
189 |   background-position: calc(100% - 15px) 1em, calc(100% - 20px) 1em, 100% 0;
190 |   background-size: 5px 5px, 5px 5px, 2.5em 2.5em;
191 |   background-repeat: no-repeat;
192 |   border-color: grey;
193 |   outline: 0;
194 | }
195 | 
196 | /* Profile Body (main big box around card) */
197 | /*-----------------------------------------*/
198 | .profile-content {
199 |   margin: 10px;
200 |   padding: 10px;
201 |   border-radius: 10px;
202 |   font-family: "Source Sans Pro", "Lucida Sans", "Lucida Sans Regular",
203 |     "Lucida Grande", "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
204 |   font-weight: 300;
205 |   text-align: center;
206 |   color: #414f57;
207 |   background: linear-gradient(-45deg,#186F65, #6A9C89, #952323, #C70039);
208 |   background-size: 400% 400%;
209 |   animation: gradient 15s ease infinite;
210 | }
211 | 
212 | @keyframes gradient {
213 |   0% {
214 |     background-position: 0 50%;
215 |   }
216 | 
217 |   50% {
218 |     background-position: 100% 50%;
219 |   }
220 | 
221 |   100% {
222 |     background-position: 0 50%;
223 |   }
224 | }
225 | 
226 | @-webkit-keyframes {
227 |   0% {
228 |     background-position: 0 50%;
229 |   }
230 | 
231 |   50% {
232 |     background-position: 100% 50%;
233 |   }
234 | 
235 |   100% {
236 |     background-position: 0 50%;
237 |   }
238 | }
239 | 
240 | footer div.profile-footer {
241 |   width: 100%;
242 |   display: block;
243 |   text-align: center;
244 |   font-size: 17.5px;
245 |   color: white;
246 |   line-height: 75px;
247 |   position: absolute;
248 |   bottom: 0;
249 | }
250 | 
251 | /* Section - Profile Main (Card Box) */
252 | /*-----------------------------------*/
253 | div.profile-main {
254 |   border-radius: 10px;
255 |   text-align: center;
256 |   box-sizing: border-box;
257 |   padding: 65px 25px;
258 |   display: inline-block;
259 |   margin-top: 25px;
260 | }
261 | 
262 | .whtbg {
263 |  background: white;
264 | }
265 | 
266 | .grybg {
267 |  background: rgb(255, 255, 250);
268 |   background: radial-gradient(
269 |     circle,
270 |     rgba(255, 255, 255, 1) 0%,
271 |     rgba(225, 225, 225, 1) 100%
272 |   );
273 | }
274 | 
275 | div.hrithik0112-profile {
276 |   background: rgb(237, 221, 221);
277 |   background: linear-gradient(
278 |     90deg,
279 |     rgb(237, 221, 221) 8%,
280 |     rgba(137, 128, 199, 1) 99%
281 |   );
282 | }
283 | 
284 | /* Section - Profile Photo */
285 | /*-------------------------*/
286 | div.profile-main section.profile-photo {
287 |   height: 130px;
288 | }
289 | 
290 | div.profile-main section.profile-photo img {
291 |   height: 130px;
292 |   border-radius: 50%;
293 | }
294 | 
295 | /* Contributor Box on thankyou.html */
296 | .contrib-box {
297 |    border: solid white 0px;
298 | }
299 | 
300 | /* Section - Profile Info */
301 | /*------------------------*/
302 | div.profile-main section.profile-info {
303 |   width: 100%;
304 | }
305 | 
306 | div.profile-main section.profile-info h1 {
307 |   font-size: 24px;
308 |   font-weight: 700;
309 |   line-height: 25px;
310 |   padding-top: 25px;
311 |   padding-bottom: 10px;
312 | }
313 | 
314 | div.profile-main section.profile-info h2 {
315 |   font-size: 18px;
316 |   font-weight: 600;
317 |   line-height: 30px;
318 | }
319 | 
320 | div.profile-main section.profile-info div {
321 |   font-size: 20px;
322 |   font-weight: 500;
323 |   line-height: 30px;
324 | }
325 | 
326 | /* Section - Profile Links */
327 | /*-------------------------*/
328 | div.profile-main section.profile-links {
329 |   height: 100px;
330 |   padding-top: 20px;
331 |   padding-bottom: 10px;
332 |   box-sizing: border-box;
333 | }
334 | 
335 | div.profile-main section.profile-links a {
336 |   height: 50px;
337 |   text-decoration: none;
338 |   display: inline-block;
339 |   margin: 0 7.5px;
340 | }
341 | 
342 | div.profile-main section.profile-links a svg {
343 |   height: 50px;
344 |   width: auto;
345 | }
346 | 
347 | div.profile-main section.profile-links a svg path {
348 |   fill: #414f57;
349 |   transition: fill 0.25s ease;
350 | }
351 | 
352 | div.profile-main section.profile-links a:hover svg path {
353 |   fill: #c8cccf;
354 | }
355 | 
356 | /* Responsive Screen Resizing */
357 | /*----------------------------*/
358 | @media only screen and (max-width: 444.44px) {
359 |   div.main {
360 |     width: 90%;
361 |   }
362 | }
363 | 
364 | @media only screen and (max-height: 653.88px) and (max-width: 444.44px) {
365 |   div.main {
366 |     margin: 5vw 0;
367 |     margin-bottom: 0;
368 |   }
369 | 
370 |   footer {
371 |     position: relative;
372 |   }
373 | }
374 | 


--------------------------------------------------------------------------------
/themes_list.txt:
--------------------------------------------------------------------------------
1 | light.css
2 | dark.css
3 | galaxy.css
4 | fall.css
5 | tritan.css
6 | spring.css
7 | 


--------------------------------------------------------------------------------