big chungus
parent
732ffd94c2
commit
1c8b392105
@ -0,0 +1,2 @@
|
|||||||
|
node_modules
|
||||||
|
__sapper__/
|
||||||
@ -1,52 +1,111 @@
|
|||||||
[Bodoni*](http://indestructibletype.com/Bodoni.html)
|
# sapper-template
|
||||||
========
|
|
||||||
|
The default [Sapper](https://github.com/sveltejs/sapper) template, available for Rollup and webpack.
|
||||||
Bodoni* is an original font created by [indestructible type*](https://indestructibletype.com/Home.html). It is inspired by
|
|
||||||
the designs of Giambattista Bodoni. This is version 2.0.
|
|
||||||
|
## Getting started
|
||||||
Bodoni* is designed and maintained by [Owen Earl](https://ewonrael.github.io/), who is the creator of the font foundry [indestructible type*](http://indestructible-type.github.io).
|
|
||||||
|
|
||||||
About
|
### Using `degit`
|
||||||
-----
|
|
||||||
Despite the tremendous popularity of Bodoni typefaces, there is currently no digital family without compromises.
|
[`degit`](https://github.com/Rich-Harris/degit) is a scaffolding tool that lets you create a directory from a branch in a repository. Use either the `rollup` or `webpack` branch in `sapper-template`:
|
||||||
Bodoni* hopes to change that by being the first ever no-compromises Bodoni family, built for the digital age.
|
|
||||||
This font family includes a full range of weights, italics, an extended character set, OpenType features, and optical sizes,
|
```bash
|
||||||
totalling 64 font files. It was made with love and will continue to improve with your support.
|
# for Rollup
|
||||||
[Visit the website for more information!](http://indestructibletype.com/Bodoni)
|
npx degit "sveltejs/sapper-template#rollup" my-app
|
||||||
|
# for webpack
|
||||||
|
npx degit "sveltejs/sapper-template#webpack" my-app
|
||||||
|
```
|
||||||
|
|
||||||
Changelog
|
|
||||||
---------
|
### Using GitHub templates
|
||||||
<b>1.0</b>
|
|
||||||
First Release.<br>
|
Alternatively, you can use GitHub's template feature with the [sapper-template-rollup](https://github.com/sveltejs/sapper-template-rollup) or [sapper-template-webpack](https://github.com/sveltejs/sapper-template-webpack) repositories.
|
||||||
<b>1.1</b>
|
|
||||||
Fixed italic fl and ffi ligatures<br>
|
|
||||||
<b>1.2</b>
|
### Running the project
|
||||||
Corrected metadata to include better style links and include ligatures in .ttf files.<br>
|
|
||||||
<b>2.0</b>
|
However you get the code, you can install dependencies and run the project in development mode with:
|
||||||
Created 6 pt. size and variable font versions.
|
|
||||||
|
```bash
|
||||||
Web Use
|
cd my-app
|
||||||
-------
|
npm install # or yarn
|
||||||
To use on your webpage, simply put the following line of code into the `<head>` of the webpage you'd like to display Bodoni* and use `font-family: 'Bodoni* 11';` in your css. Make sure to replace 11 with the optical size of your choosing.<br>
|
npm run dev
|
||||||
`<link rel="stylesheet" href="https://indestructibletype.com/fonts/Bodoni/Bodoni.css" type="text/css" charset="utf-8" />`
|
```
|
||||||
|
|
||||||
Building
|
Open up [localhost:3000](http://localhost:3000) and start clicking around.
|
||||||
--------
|
|
||||||
I use fontmake to build the finished font files. If for some reason you want to build this font yourself, follow these steps:
|
Consult [sapper.svelte.dev](https://sapper.svelte.dev) for help getting started.
|
||||||
|
|
||||||
Download the complete source code, either by cloning this repository or downloading the .zip file.
|
|
||||||
|
## Structure
|
||||||
Download and install fontmake which can be found [here](https://github.com/googlei18n/fontmake).
|
|
||||||
|
Sapper expects to find two directories in the root of your project — `src` and `static`.
|
||||||
Run the `fontmake.sh` script found in the "scripts" folder.
|
|
||||||
|
|
||||||
This should output two folders, an otf and ttf folder.
|
### src
|
||||||
|
|
||||||
Run the `hinting.sh` script found in the "scripts" folder to make hinted versions of the ttf files.
|
The [src](src) directory contains the entry points for your app — `client.js`, `server.js` and (optionally) a `service-worker.js` — along with a `template.html` file and a `routes` directory.
|
||||||
|
|
||||||
Contact
|
|
||||||
-------
|
#### src/routes
|
||||||
If you have questions or want to help out, send me and email at indestructibletype@gmail.com
|
|
||||||
|
This is the heart of your Sapper app. There are two kinds of routes — *pages*, and *server routes*.
|
||||||
|
|
||||||
|
**Pages** are Svelte components written in `.svelte` files. When a user first visits the application, they will be served a server-rendered version of the route in question, plus some JavaScript that 'hydrates' the page and initialises a client-side router. From that point forward, navigating to other pages is handled entirely on the client for a fast, app-like feel. (Sapper will preload and cache the code for these subsequent pages, so that navigation is instantaneous.)
|
||||||
|
|
||||||
|
**Server routes** are modules written in `.js` files, that export functions corresponding to HTTP methods. Each function receives Express `request` and `response` objects as arguments, plus a `next` function. This is useful for creating a JSON API, for example.
|
||||||
|
|
||||||
|
There are three simple rules for naming the files that define your routes:
|
||||||
|
|
||||||
|
* A file called `src/routes/about.svelte` corresponds to the `/about` route. A file called `src/routes/blog/[slug].svelte` corresponds to the `/blog/:slug` route, in which case `params.slug` is available to the route
|
||||||
|
* The file `src/routes/index.svelte` (or `src/routes/index.js`) corresponds to the root of your app. `src/routes/about/index.svelte` is treated the same as `src/routes/about.svelte`.
|
||||||
|
* Files and directories with a leading underscore do *not* create routes. This allows you to colocate helper modules and components with the routes that depend on them — for example you could have a file called `src/routes/_helpers/datetime.js` and it would *not* create a `/_helpers/datetime` route
|
||||||
|
|
||||||
|
|
||||||
|
### static
|
||||||
|
|
||||||
|
The [static](static) directory contains any static assets that should be available. These are served using [sirv](https://github.com/lukeed/sirv).
|
||||||
|
|
||||||
|
In your [service-worker.js](src/service-worker.js) file, you can import these as `files` from the generated manifest...
|
||||||
|
|
||||||
|
```js
|
||||||
|
import { files } from '@sapper/service-worker';
|
||||||
|
```
|
||||||
|
|
||||||
|
...so that you can cache them (though you can choose not to, for example if you don't want to cache very large files).
|
||||||
|
|
||||||
|
|
||||||
|
## Bundler config
|
||||||
|
|
||||||
|
Sapper uses Rollup or webpack to provide code-splitting and dynamic imports, as well as compiling your Svelte components. With webpack, it also provides hot module reloading. As long as you don't do anything daft, you can edit the configuration files to add whatever plugins you'd like.
|
||||||
|
|
||||||
|
|
||||||
|
## Production mode and deployment
|
||||||
|
|
||||||
|
To start a production version of your app, run `npm run build && npm start`. This will disable live reloading, and activate the appropriate bundler plugins.
|
||||||
|
|
||||||
|
You can deploy your application to any environment that supports Node 10 or above. As an example, to deploy to [Vercel Now](https://vercel.com) when using `sapper export`, run these commands:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
npm install -g vercel
|
||||||
|
vercel
|
||||||
|
```
|
||||||
|
|
||||||
|
If your app can't be exported to a static site, you can use the [now-sapper](https://github.com/thgh/now-sapper) builder. You can find instructions on how to do so in its [README](https://github.com/thgh/now-sapper#basic-usage).
|
||||||
|
|
||||||
|
|
||||||
|
## Using external components
|
||||||
|
|
||||||
|
When using Svelte components installed from npm, such as [@sveltejs/svelte-virtual-list](https://github.com/sveltejs/svelte-virtual-list), Svelte needs the original component source (rather than any precompiled JavaScript that ships with the component). This allows the component to be rendered server-side, and also keeps your client-side app smaller.
|
||||||
|
|
||||||
|
Because of that, it's essential that the bundler doesn't treat the package as an *external dependency*. You can either modify the `external` option under `server` in [rollup.config.js](rollup.config.js) or the `externals` option in [webpack.config.js](webpack.config.js), or simply install the package to `devDependencies` rather than `dependencies`, which will cause it to get bundled (and therefore compiled) with your app:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
npm install -D @sveltejs/svelte-virtual-list
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
## Bugs and feedback
|
||||||
|
|
||||||
|
Sapper is in early development, and may have the odd rough edge here and there. Please be vocal over on the [Sapper issue tracker](https://github.com/sveltejs/sapper/issues).
|
||||||
|
|||||||
@ -0,0 +1,4 @@
|
|||||||
|
{
|
||||||
|
"baseUrl": "http://localhost:3000",
|
||||||
|
"video": false
|
||||||
|
}
|
||||||
@ -0,0 +1,5 @@
|
|||||||
|
{
|
||||||
|
"name": "Using fixtures to represent data",
|
||||||
|
"email": "hello@cypress.io",
|
||||||
|
"body": "Fixtures are a great way to mock data for responses to routes"
|
||||||
|
}
|
||||||
@ -0,0 +1,19 @@
|
|||||||
|
describe('Sapper template app', () => {
|
||||||
|
beforeEach(() => {
|
||||||
|
cy.visit('/')
|
||||||
|
});
|
||||||
|
|
||||||
|
it('has the correct <h1>', () => {
|
||||||
|
cy.contains('h1', 'Great success!')
|
||||||
|
});
|
||||||
|
|
||||||
|
it('navigates to /about', () => {
|
||||||
|
cy.get('nav a').contains('about').click();
|
||||||
|
cy.url().should('include', '/about');
|
||||||
|
});
|
||||||
|
|
||||||
|
it('navigates to /blog', () => {
|
||||||
|
cy.get('nav a').contains('blog').click();
|
||||||
|
cy.url().should('include', '/blog');
|
||||||
|
});
|
||||||
|
});
|
||||||
@ -0,0 +1,17 @@
|
|||||||
|
// ***********************************************************
|
||||||
|
// This example plugins/index.js can be used to load plugins
|
||||||
|
//
|
||||||
|
// You can change the location of this file or turn off loading
|
||||||
|
// the plugins file with the 'pluginsFile' configuration option.
|
||||||
|
//
|
||||||
|
// You can read more here:
|
||||||
|
// https://on.cypress.io/plugins-guide
|
||||||
|
// ***********************************************************
|
||||||
|
|
||||||
|
// This function is called when a project is opened or re-opened (e.g. due to
|
||||||
|
// the project's config changing)
|
||||||
|
|
||||||
|
module.exports = (on, config) => {
|
||||||
|
// `on` is used to hook into various events Cypress emits
|
||||||
|
// `config` is the resolved Cypress config
|
||||||
|
}
|
||||||
@ -0,0 +1,25 @@
|
|||||||
|
// ***********************************************
|
||||||
|
// This example commands.js shows you how to
|
||||||
|
// create various custom commands and overwrite
|
||||||
|
// existing commands.
|
||||||
|
//
|
||||||
|
// For more comprehensive examples of custom
|
||||||
|
// commands please read more here:
|
||||||
|
// https://on.cypress.io/custom-commands
|
||||||
|
// ***********************************************
|
||||||
|
//
|
||||||
|
//
|
||||||
|
// -- This is a parent command --
|
||||||
|
// Cypress.Commands.add("login", (email, password) => { ... })
|
||||||
|
//
|
||||||
|
//
|
||||||
|
// -- This is a child command --
|
||||||
|
// Cypress.Commands.add("drag", { prevSubject: 'element'}, (subject, options) => { ... })
|
||||||
|
//
|
||||||
|
//
|
||||||
|
// -- This is a dual command --
|
||||||
|
// Cypress.Commands.add("dismiss", { prevSubject: 'optional'}, (subject, options) => { ... })
|
||||||
|
//
|
||||||
|
//
|
||||||
|
// -- This is will overwrite an existing command --
|
||||||
|
// Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... })
|
||||||
@ -0,0 +1,20 @@
|
|||||||
|
// ***********************************************************
|
||||||
|
// This example support/index.js is processed and
|
||||||
|
// loaded automatically before your test files.
|
||||||
|
//
|
||||||
|
// This is a great place to put global configuration and
|
||||||
|
// behavior that modifies Cypress.
|
||||||
|
//
|
||||||
|
// You can change the location of this file or turn off
|
||||||
|
// automatically serving support files with the
|
||||||
|
// 'supportFile' configuration option.
|
||||||
|
//
|
||||||
|
// You can read more here:
|
||||||
|
// https://on.cypress.io/configuration
|
||||||
|
// ***********************************************************
|
||||||
|
|
||||||
|
// Import commands.js using ES2015 syntax:
|
||||||
|
import './commands'
|
||||||
|
|
||||||
|
// Alternatively you can use CommonJS syntax:
|
||||||
|
// require('./commands')
|
||||||
@ -0,0 +1,52 @@
|
|||||||
|
[Bodoni*](http://indestructibletype.com/Bodoni.html)
|
||||||
|
========
|
||||||
|
|
||||||
|
Bodoni* is an original font created by [indestructible type*](https://indestructibletype.com/Home.html). It is inspired by
|
||||||
|
the designs of Giambattista Bodoni. This is version 2.0.
|
||||||
|
|
||||||
|
Bodoni* is designed and maintained by [Owen Earl](https://ewonrael.github.io/), who is the creator of the font foundry [indestructible type*](http://indestructible-type.github.io).
|
||||||
|
|
||||||
|
About
|
||||||
|
-----
|
||||||
|
Despite the tremendous popularity of Bodoni typefaces, there is currently no digital family without compromises.
|
||||||
|
Bodoni* hopes to change that by being the first ever no-compromises Bodoni family, built for the digital age.
|
||||||
|
This font family includes a full range of weights, italics, an extended character set, OpenType features, and optical sizes,
|
||||||
|
totalling 64 font files. It was made with love and will continue to improve with your support.
|
||||||
|
[Visit the website for more information!](http://indestructibletype.com/Bodoni)
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
Changelog
|
||||||
|
---------
|
||||||
|
<b>1.0</b>
|
||||||
|
First Release.<br>
|
||||||
|
<b>1.1</b>
|
||||||
|
Fixed italic fl and ffi ligatures<br>
|
||||||
|
<b>1.2</b>
|
||||||
|
Corrected metadata to include better style links and include ligatures in .ttf files.<br>
|
||||||
|
<b>2.0</b>
|
||||||
|
Created 6 pt. size and variable font versions.
|
||||||
|
|
||||||
|
Web Use
|
||||||
|
-------
|
||||||
|
To use on your webpage, simply put the following line of code into the `<head>` of the webpage you'd like to display Bodoni* and use `font-family: 'Bodoni* 11';` in your css. Make sure to replace 11 with the optical size of your choosing.<br>
|
||||||
|
`<link rel="stylesheet" href="https://indestructibletype.com/fonts/Bodoni/Bodoni.css" type="text/css" charset="utf-8" />`
|
||||||
|
|
||||||
|
Building
|
||||||
|
--------
|
||||||
|
I use fontmake to build the finished font files. If for some reason you want to build this font yourself, follow these steps:
|
||||||
|
|
||||||
|
Download the complete source code, either by cloning this repository or downloading the .zip file.
|
||||||
|
|
||||||
|
Download and install fontmake which can be found [here](https://github.com/googlei18n/fontmake).
|
||||||
|
|
||||||
|
Run the `fontmake.sh` script found in the "scripts" folder.
|
||||||
|
|
||||||
|
This should output two folders, an otf and ttf folder.
|
||||||
|
|
||||||
|
Run the `hinting.sh` script found in the "scripts" folder to make hinted versions of the ttf files.
|
||||||
|
|
||||||
|
Contact
|
||||||
|
-------
|
||||||
|
If you have questions or want to help out, send me and email at indestructibletype@gmail.com
|
||||||
|
Before Width: | Height: | Size: 18 KiB After Width: | Height: | Size: 18 KiB |
|
Before Width: | Height: | Size: 23 KiB After Width: | Height: | Size: 23 KiB |
|
Before Width: | Height: | Size: 298 B After Width: | Height: | Size: 298 B |
|
Before Width: | Height: | Size: 287 B After Width: | Height: | Size: 287 B |
|
Before Width: | Height: | Size: 4.5 KiB After Width: | Height: | Size: 4.5 KiB |
|
Before Width: | Height: | Size: 4.5 KiB After Width: | Height: | Size: 4.5 KiB |
|
Before Width: | Height: | Size: 1.2 KiB After Width: | Height: | Size: 1.2 KiB |
|
Before Width: | Height: | Size: 1.2 KiB After Width: | Height: | Size: 1.2 KiB |
|
Before Width: | Height: | Size: 1.0 KiB After Width: | Height: | Size: 1.0 KiB |
|
Before Width: | Height: | Size: 670 B After Width: | Height: | Size: 670 B |
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,36 @@
|
|||||||
|
{
|
||||||
|
"name": "TODO",
|
||||||
|
"description": "TODO",
|
||||||
|
"version": "0.0.1",
|
||||||
|
"scripts": {
|
||||||
|
"dev": "sapper dev",
|
||||||
|
"build": "sapper build --legacy",
|
||||||
|
"export": "sapper export --legacy",
|
||||||
|
"start": "node __sapper__/build",
|
||||||
|
"cy:run": "cypress run",
|
||||||
|
"cy:open": "cypress open",
|
||||||
|
"test": "run-p --race dev cy:run"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"compression": "^1.7.1",
|
||||||
|
"polka": "next",
|
||||||
|
"sirv": "^1.0.0"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"npm-run-all": "^4.1.5",
|
||||||
|
"sapper": "^0.28.0",
|
||||||
|
"svelte": "^3.17.3",
|
||||||
|
"@babel/core": "^7.0.0",
|
||||||
|
"@babel/plugin-syntax-dynamic-import": "^7.0.0",
|
||||||
|
"@babel/plugin-transform-runtime": "^7.0.0",
|
||||||
|
"@babel/preset-env": "^7.0.0",
|
||||||
|
"@babel/runtime": "^7.0.0",
|
||||||
|
"@rollup/plugin-babel": "^5.0.0",
|
||||||
|
"@rollup/plugin-commonjs": "^14.0.0",
|
||||||
|
"@rollup/plugin-node-resolve": "^8.0.0",
|
||||||
|
"@rollup/plugin-replace": "^2.2.0",
|
||||||
|
"rollup": "^2.3.4",
|
||||||
|
"rollup-plugin-svelte": "^6.0.0",
|
||||||
|
"rollup-plugin-terser": "^7.0.0"
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,105 @@
|
|||||||
|
import resolve from '@rollup/plugin-node-resolve';
|
||||||
|
import replace from '@rollup/plugin-replace';
|
||||||
|
import commonjs from '@rollup/plugin-commonjs';
|
||||||
|
import svelte from 'rollup-plugin-svelte';
|
||||||
|
import babel from '@rollup/plugin-babel';
|
||||||
|
import { terser } from 'rollup-plugin-terser';
|
||||||
|
import config from 'sapper/config/rollup.js';
|
||||||
|
import pkg from './package.json';
|
||||||
|
|
||||||
|
const mode = process.env.NODE_ENV;
|
||||||
|
const dev = mode === 'development';
|
||||||
|
const legacy = !!process.env.SAPPER_LEGACY_BUILD;
|
||||||
|
|
||||||
|
const onwarn = (warning, onwarn) =>
|
||||||
|
(warning.code === 'MISSING_EXPORT' && /'preload'/.test(warning.message)) ||
|
||||||
|
(warning.code === 'CIRCULAR_DEPENDENCY' && /[/\\]@sapper[/\\]/.test(warning.message)) ||
|
||||||
|
onwarn(warning);
|
||||||
|
|
||||||
|
export default {
|
||||||
|
client: {
|
||||||
|
input: config.client.input(),
|
||||||
|
output: config.client.output(),
|
||||||
|
plugins: [
|
||||||
|
replace({
|
||||||
|
'process.browser': true,
|
||||||
|
'process.env.NODE_ENV': JSON.stringify(mode)
|
||||||
|
}),
|
||||||
|
svelte({
|
||||||
|
dev,
|
||||||
|
hydratable: true,
|
||||||
|
emitCss: true
|
||||||
|
}),
|
||||||
|
resolve({
|
||||||
|
browser: true,
|
||||||
|
dedupe: ['svelte']
|
||||||
|
}),
|
||||||
|
commonjs(),
|
||||||
|
|
||||||
|
legacy && babel({
|
||||||
|
extensions: ['.js', '.mjs', '.html', '.svelte'],
|
||||||
|
babelHelpers: 'runtime',
|
||||||
|
exclude: ['node_modules/@babel/**'],
|
||||||
|
presets: [
|
||||||
|
['@babel/preset-env', {
|
||||||
|
targets: '> 0.25%, not dead'
|
||||||
|
}]
|
||||||
|
],
|
||||||
|
plugins: [
|
||||||
|
'@babel/plugin-syntax-dynamic-import',
|
||||||
|
['@babel/plugin-transform-runtime', {
|
||||||
|
useESModules: true
|
||||||
|
}]
|
||||||
|
]
|
||||||
|
}),
|
||||||
|
|
||||||
|
!dev && terser({
|
||||||
|
module: true
|
||||||
|
})
|
||||||
|
],
|
||||||
|
|
||||||
|
preserveEntrySignatures: false,
|
||||||
|
onwarn,
|
||||||
|
},
|
||||||
|
|
||||||
|
server: {
|
||||||
|
input: config.server.input(),
|
||||||
|
output: config.server.output(),
|
||||||
|
plugins: [
|
||||||
|
replace({
|
||||||
|
'process.browser': false,
|
||||||
|
'process.env.NODE_ENV': JSON.stringify(mode)
|
||||||
|
}),
|
||||||
|
svelte({
|
||||||
|
generate: 'ssr',
|
||||||
|
hydratable: true,
|
||||||
|
dev
|
||||||
|
}),
|
||||||
|
resolve({
|
||||||
|
dedupe: ['svelte']
|
||||||
|
}),
|
||||||
|
commonjs()
|
||||||
|
],
|
||||||
|
external: Object.keys(pkg.dependencies).concat(require('module').builtinModules),
|
||||||
|
|
||||||
|
preserveEntrySignatures: 'strict',
|
||||||
|
onwarn,
|
||||||
|
},
|
||||||
|
|
||||||
|
serviceworker: {
|
||||||
|
input: config.serviceworker.input(),
|
||||||
|
output: config.serviceworker.output(),
|
||||||
|
plugins: [
|
||||||
|
resolve(),
|
||||||
|
replace({
|
||||||
|
'process.browser': true,
|
||||||
|
'process.env.NODE_ENV': JSON.stringify(mode)
|
||||||
|
}),
|
||||||
|
commonjs(),
|
||||||
|
!dev && terser()
|
||||||
|
],
|
||||||
|
|
||||||
|
preserveEntrySignatures: false,
|
||||||
|
onwarn,
|
||||||
|
}
|
||||||
|
};
|
||||||
@ -0,0 +1,5 @@
|
|||||||
|
import * as sapper from '@sapper/app';
|
||||||
|
|
||||||
|
sapper.start({
|
||||||
|
target: document.querySelector('.sapper')
|
||||||
|
});
|
||||||
@ -0,0 +1,61 @@
|
|||||||
|
<script>
|
||||||
|
import Logo from '../components/logo.svelte';
|
||||||
|
|
||||||
|
|
||||||
|
function click_link() {
|
||||||
|
document
|
||||||
|
.querySelectorAll(".menu-btn")
|
||||||
|
.forEach(elem => elem.classList.toggle("darken"));
|
||||||
|
document
|
||||||
|
.querySelectorAll("#root")
|
||||||
|
.forEach(elem => elem.classList.toggle("darken"));
|
||||||
|
document
|
||||||
|
.querySelectorAll(".navigation-overlay")
|
||||||
|
.forEach(elem => elem.classList.toggle("open-nav"));
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.menu {
|
||||||
|
position: absolute;
|
||||||
|
left: 40vh;
|
||||||
|
top: 20vh;
|
||||||
|
}
|
||||||
|
.menu ul {
|
||||||
|
list-style: none;
|
||||||
|
width: 40vw;
|
||||||
|
}
|
||||||
|
.menu ul li {
|
||||||
|
font-family: "Gill Sans MT";
|
||||||
|
font-size: 5vh;
|
||||||
|
margin-bottom: 5vh;
|
||||||
|
}
|
||||||
|
.menu ul li a {
|
||||||
|
cursor: pointer;
|
||||||
|
color: #d73648;
|
||||||
|
transition: 0.3s;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
.menu ul li a:hover {
|
||||||
|
text-decoration: underline;
|
||||||
|
color: #7c242e;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<div class="navigation-overlay" id="particles-js">
|
||||||
|
<div class="cross cross-og" on:click="{click_link}">
|
||||||
|
<img src="/svg/cross1.svg" class="idle" alt=" cross ">
|
||||||
|
<img src="/svg/cross2.svg" class="active" alt=" cross ">
|
||||||
|
</div>
|
||||||
|
<Logo/>
|
||||||
|
|
||||||
|
<nav class="menu">
|
||||||
|
<ul>
|
||||||
|
<li><a class="menu-link" on:click="{click_link}"href="/">Domů</a></li>
|
||||||
|
<li><a class="menu-link" on:click="{click_link}"href="/predseda">Předseda spolku</a></li>
|
||||||
|
<li><a class="menu-link" on:click="{click_link}"href="/prebiram">Přebírám spolek</a></li>
|
||||||
|
<li><a class="menu-link" on:click="{click_link}"href="/zapojit-se">Chci se zapojit</a></li>
|
||||||
|
<li><a class="menu-link" on:click="{click_link}"href="/zalozit-spolek">Chci založit spolek</a></li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
@ -0,0 +1,16 @@
|
|||||||
|
<style>
|
||||||
|
.logo {
|
||||||
|
position: absolute;
|
||||||
|
right: 3vh;
|
||||||
|
top: 3vh;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: 0.2s;
|
||||||
|
}
|
||||||
|
.logo:hover {
|
||||||
|
transform: scale(1.15);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<div class="logo">
|
||||||
|
<a href="https://pedf.cuni.cz/PEDF-1.html"><img src="/img/logo.png" alt="logo"></a>
|
||||||
|
</div>
|
||||||
@ -0,0 +1,19 @@
|
|||||||
|
<script>
|
||||||
|
function click() {
|
||||||
|
console.log("click");
|
||||||
|
document
|
||||||
|
.querySelectorAll(".menu-btn")
|
||||||
|
.forEach(elem => elem.classList.toggle("darken"));
|
||||||
|
document
|
||||||
|
.querySelectorAll("#root")
|
||||||
|
.forEach(elem => elem.classList.toggle("darken"));
|
||||||
|
document
|
||||||
|
.querySelectorAll(".navigation-overlay")
|
||||||
|
.forEach(elem => elem.classList.toggle("open-nav"));
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class="cross menu-btn" on:click|preventDefault="{click}">
|
||||||
|
<img src="/svg/menu1.svg" class="idle" alt="idle">
|
||||||
|
<img src="/svg/menu2.svg" class="active" alt="active">
|
||||||
|
</div>
|
||||||
@ -0,0 +1,12 @@
|
|||||||
|
<style>
|
||||||
|
.up-arrow {
|
||||||
|
position: fixed;
|
||||||
|
top: 80vh;
|
||||||
|
right: 5vw;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<div class="up-arrow">
|
||||||
|
<img src="/svg/up-arrow.svg" alt="up arrow">
|
||||||
|
</div>
|
||||||
@ -0,0 +1,89 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title></title>
|
||||||
|
<meta name="author" content="">
|
||||||
|
<meta name="description" content="">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
|
||||||
|
<link href="/static/css/normalize.css" rel="stylesheet">
|
||||||
|
<link rel="stylesheet" href="https://unpkg.com/chota@latest">
|
||||||
|
<link href="/static/css/main.css" rel="stylesheet">
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body id="body">
|
||||||
|
<div class="navigation-overlay" id="particles-js">
|
||||||
|
<div class="cross cross-og">
|
||||||
|
<img src="/static/svg/cross1.svg" class="idle">
|
||||||
|
<img src="/static/svg/cross2.svg" class="active">
|
||||||
|
</div>
|
||||||
|
<div class="logo">
|
||||||
|
<a href="https://pedf.cuni.cz/PEDF-1.html"><img src="img/logo.png"></a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<nav class="menu">
|
||||||
|
<ul>
|
||||||
|
<li><a class="menu-link" href="#">Domů</a></li>
|
||||||
|
<li><a class="menu-link" href="#/predseda">Předseda spolku</a></li>
|
||||||
|
<li><a class="menu-link" href="#/prebiram">Přebírám spolek</a></li>
|
||||||
|
<li><a class="menu-link" href="#/zapojit-se">Chci se zapojit</a></li>
|
||||||
|
<li><a class="menu-link" href="#/zalozit-spolek">Chci založit spolek</a></li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
<div class="cross menu-btn">
|
||||||
|
<img src="/static/svg/menu1.svg" class="idle">
|
||||||
|
<img src="/static/svg/menu2.svg" class="active">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<main id="root">
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<div class="up-arrow" onclick="window.scrollTo({ top: 0, behavior: 'smooth' })">
|
||||||
|
<img src="/static/svg/up-arrow.svg">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<code style="display: none">
|
||||||
|
clicking on ".cross-og" toggles class "open-nav" on ".navigation-overlay"
|
||||||
|
clicking on ".cross-og" toggles class "darken" on "#root"
|
||||||
|
clicking on ".cross-og" toggles class "darken" on ".menu-btn"
|
||||||
|
clicking on ".menu-link" toggles class "open-nav" on ".navigation-overlay" no-prevent
|
||||||
|
clicking on ".menu-link" toggles class "darken" on "#root" no-prevent
|
||||||
|
clicking on ".menu-link" toggles class "darken" on ".menu-btn" no-prevent
|
||||||
|
clicking on ".menu-btn" toggles class "open-nav" on ".navigation-overlay"
|
||||||
|
clicking on ".menu-btn" toggles class "darken" on "#root"
|
||||||
|
clicking on ".menu-btn" toggles class "darken" on ".menu-btn"
|
||||||
|
</code>
|
||||||
|
|
||||||
|
<script src="https://unpkg.com/@riotjs/dom-bindings/dist/umd.dom-bindings.js"></script>
|
||||||
|
<script src="https://unpkg.com/riot/riot+compiler.min.js"></script>
|
||||||
|
<script src="https://unpkg.com/@riotjs/route@5.2.0/route.js"></script>
|
||||||
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
|
||||||
|
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
|
||||||
|
<!--<script src="/js/uilang.js"></script>-->
|
||||||
|
<!--<script src="/js/particles.js"></script>-->
|
||||||
|
<!--<script src="/js/router.js"></script>-->
|
||||||
|
<!--<script src="/js/script.js"></script>-->
|
||||||
|
<!--<script src="/js/carousel.js"></script>-->
|
||||||
|
<script>
|
||||||
|
//const { initDomListeners, setBase, router } = route;
|
||||||
|
//
|
||||||
|
//setBase(window.location.origin + '/');
|
||||||
|
//
|
||||||
|
//const loc = window.location;
|
||||||
|
//
|
||||||
|
//router.on.value(path => {
|
||||||
|
// console.log(path);
|
||||||
|
// get_routes(path);
|
||||||
|
//});
|
||||||
|
//
|
||||||
|
//initDomListeners();
|
||||||
|
//
|
||||||
|
//console.log(window.location.hash);
|
||||||
|
//get_routes(window.location.hash);
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
@ -0,0 +1,40 @@
|
|||||||
|
<script>
|
||||||
|
export let status;
|
||||||
|
export let error;
|
||||||
|
|
||||||
|
const dev = process.env.NODE_ENV === 'development';
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
h1, p {
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-size: 2.8em;
|
||||||
|
font-weight: 700;
|
||||||
|
margin: 0 0 0.5em 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
margin: 1em auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 480px) {
|
||||||
|
h1 {
|
||||||
|
font-size: 4em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<svelte:head>
|
||||||
|
<title>{status}</title>
|
||||||
|
</svelte:head>
|
||||||
|
|
||||||
|
<h1>{status}</h1>
|
||||||
|
|
||||||
|
<p>{error.message}</p>
|
||||||
|
|
||||||
|
{#if dev && error.stack}
|
||||||
|
<pre>{error.stack}</pre>
|
||||||
|
{/if}
|
||||||
@ -0,0 +1,12 @@
|
|||||||
|
<script>
|
||||||
|
import Nav from '../components/Nav.svelte';
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<Nav/>
|
||||||
|
|
||||||
|
<main>
|
||||||
|
<slot></slot>
|
||||||
|
</main>
|
||||||
@ -0,0 +1,7 @@
|
|||||||
|
<svelte:head>
|
||||||
|
<title>About</title>
|
||||||
|
</svelte:head>
|
||||||
|
|
||||||
|
<h1>About this site</h1>
|
||||||
|
|
||||||
|
<p>This is the 'about' page. There's not much here.</p>
|
||||||
@ -0,0 +1,28 @@
|
|||||||
|
import posts from './_posts.js';
|
||||||
|
|
||||||
|
const lookup = new Map();
|
||||||
|
posts.forEach(post => {
|
||||||
|
lookup.set(post.slug, JSON.stringify(post));
|
||||||
|
});
|
||||||
|
|
||||||
|
export function get(req, res, next) {
|
||||||
|
// the `slug` parameter is available because
|
||||||
|
// this file is called [slug].json.js
|
||||||
|
const { slug } = req.params;
|
||||||
|
|
||||||
|
if (lookup.has(slug)) {
|
||||||
|
res.writeHead(200, {
|
||||||
|
'Content-Type': 'application/json'
|
||||||
|
});
|
||||||
|
|
||||||
|
res.end(lookup.get(slug));
|
||||||
|
} else {
|
||||||
|
res.writeHead(404, {
|
||||||
|
'Content-Type': 'application/json'
|
||||||
|
});
|
||||||
|
|
||||||
|
res.end(JSON.stringify({
|
||||||
|
message: `Not found`
|
||||||
|
}));
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,64 @@
|
|||||||
|
<script context="module">
|
||||||
|
export async function preload({ params, query }) {
|
||||||
|
// the `slug` parameter is available because
|
||||||
|
// this file is called [slug].svelte
|
||||||
|
const res = await this.fetch(`blog/${params.slug}.json`);
|
||||||
|
const data = await res.json();
|
||||||
|
|
||||||
|
if (res.status === 200) {
|
||||||
|
return { post: data };
|
||||||
|
} else {
|
||||||
|
this.error(res.status, data.message);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export let post;
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
/*
|
||||||
|
By default, CSS is locally scoped to the component,
|
||||||
|
and any unused styles are dead-code-eliminated.
|
||||||
|
In this page, Svelte can't know which elements are
|
||||||
|
going to appear inside the {{{post.html}}} block,
|
||||||
|
so we have to use the :global(...) modifier to target
|
||||||
|
all elements inside .content
|
||||||
|
*/
|
||||||
|
.content :global(h2) {
|
||||||
|
font-size: 1.4em;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content :global(pre) {
|
||||||
|
background-color: #f9f9f9;
|
||||||
|
box-shadow: inset 1px 1px 5px rgba(0,0,0,0.05);
|
||||||
|
padding: 0.5em;
|
||||||
|
border-radius: 2px;
|
||||||
|
overflow-x: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content :global(pre) :global(code) {
|
||||||
|
background-color: transparent;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content :global(ul) {
|
||||||
|
line-height: 1.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content :global(li) {
|
||||||
|
margin: 0 0 0.5em 0;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<svelte:head>
|
||||||
|
<title>{post.title}</title>
|
||||||
|
</svelte:head>
|
||||||
|
|
||||||
|
<h1>{post.title}</h1>
|
||||||
|
|
||||||
|
<div class='content'>
|
||||||
|
{@html post.html}
|
||||||
|
</div>
|
||||||
@ -0,0 +1,92 @@
|
|||||||
|
// Ordinarily, you'd generate this data from markdown files in your
|
||||||
|
// repo, or fetch them from a database of some kind. But in order to
|
||||||
|
// avoid unnecessary dependencies in the starter template, and in the
|
||||||
|
// service of obviousness, we're just going to leave it here.
|
||||||
|
|
||||||
|
// This file is called `_posts.js` rather than `posts.js`, because
|
||||||
|
// we don't want to create an `/blog/posts` route — the leading
|
||||||
|
// underscore tells Sapper not to do that.
|
||||||
|
|
||||||
|
const posts = [
|
||||||
|
{
|
||||||
|
title: 'What is Sapper?',
|
||||||
|
slug: 'what-is-sapper',
|
||||||
|
html: `
|
||||||
|
<p>First, you have to know what <a href='https://svelte.dev'>Svelte</a> is. Svelte is a UI framework with a bold new idea: rather than providing a library that you write code with (like React or Vue, for example), it's a compiler that turns your components into highly optimized vanilla JavaScript. If you haven't already read the <a href='https://svelte.dev/blog/frameworks-without-the-framework'>introductory blog post</a>, you should!</p>
|
||||||
|
|
||||||
|
<p>Sapper is a Next.js-style framework (<a href='blog/how-is-sapper-different-from-next'>more on that here</a>) built around Svelte. It makes it embarrassingly easy to create extremely high performance web apps. Out of the box, you get:</p>
|
||||||
|
|
||||||
|
<ul>
|
||||||
|
<li>Code-splitting, dynamic imports and hot module replacement, powered by webpack</li>
|
||||||
|
<li>Server-side rendering (SSR) with client-side hydration</li>
|
||||||
|
<li>Service worker for offline support, and all the PWA bells and whistles</li>
|
||||||
|
<li>The nicest development experience you've ever had, or your money back</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<p>It's implemented as Express middleware. Everything is set up and waiting for you to get started, but you keep complete control over the server, service worker, webpack config and everything else, so it's as flexible as you need it to be.</p>
|
||||||
|
`
|
||||||
|
},
|
||||||
|
|
||||||
|
{
|
||||||
|
title: 'How to use Sapper',
|
||||||
|
slug: 'how-to-use-sapper',
|
||||||
|
html: `
|
||||||
|
<h2>Step one</h2>
|
||||||
|
<p>Create a new project, using <a href='https://github.com/Rich-Harris/degit'>degit</a>:</p>
|
||||||
|
|
||||||
|
<pre><code>npx degit "sveltejs/sapper-template#rollup" my-app
|
||||||
|
cd my-app
|
||||||
|
npm install # or yarn!
|
||||||
|
npm run dev
|
||||||
|
</code></pre>
|
||||||
|
|
||||||
|
<h2>Step two</h2>
|
||||||
|
<p>Go to <a href='http://localhost:3000'>localhost:3000</a>. Open <code>my-app</code> in your editor. Edit the files in the <code>src/routes</code> directory or add new ones.</p>
|
||||||
|
|
||||||
|
<h2>Step three</h2>
|
||||||
|
<p>...</p>
|
||||||
|
|
||||||
|
<h2>Step four</h2>
|
||||||
|
<p>Resist overdone joke formats.</p>
|
||||||
|
`
|
||||||
|
},
|
||||||
|
|
||||||
|
{
|
||||||
|
title: 'Why the name?',
|
||||||
|
slug: 'why-the-name',
|
||||||
|
html: `
|
||||||
|
<p>In war, the soldiers who build bridges, repair roads, clear minefields and conduct demolitions — all under combat conditions — are known as <em>sappers</em>.</p>
|
||||||
|
|
||||||
|
<p>For web developers, the stakes are generally lower than those for combat engineers. But we face our own hostile environment: underpowered devices, poor network connections, and the complexity inherent in front-end engineering. Sapper, which is short for <strong>S</strong>velte <strong>app</strong> mak<strong>er</strong>, is your courageous and dutiful ally.</p>
|
||||||
|
`
|
||||||
|
},
|
||||||
|
|
||||||
|
{
|
||||||
|
title: 'How is Sapper different from Next.js?',
|
||||||
|
slug: 'how-is-sapper-different-from-next',
|
||||||
|
html: `
|
||||||
|
<p><a href='https://github.com/zeit/next.js'>Next.js</a> is a React framework from <a href='https://vercel.com/'>Vercel</a>, and is the inspiration for Sapper. There are a few notable differences, however:</p>
|
||||||
|
|
||||||
|
<ul>
|
||||||
|
<li>It's powered by <a href='https://svelte.dev'>Svelte</a> instead of React, so it's faster and your apps are smaller</li>
|
||||||
|
<li>Instead of route masking, we encode route parameters in filenames. For example, the page you're looking at right now is <code>src/routes/blog/[slug].svelte</code></li>
|
||||||
|
<li>As well as pages (Svelte components, which render on server or client), you can create <em>server routes</em> in your <code>routes</code> directory. These are just <code>.js</code> files that export functions corresponding to HTTP methods, and receive Express <code>request</code> and <code>response</code> objects as arguments. This makes it very easy to, for example, add a JSON API such as the one <a href='blog/how-is-sapper-different-from-next.json'>powering this very page</a></li>
|
||||||
|
<li>Links are just <code><a></code> elements, rather than framework-specific <code><Link></code> components. That means, for example, that <a href='blog/how-can-i-get-involved'>this link right here</a>, despite being inside a blob of HTML, works with the router as you'd expect.</li>
|
||||||
|
</ul>
|
||||||
|
`
|
||||||
|
},
|
||||||
|
|
||||||
|
{
|
||||||
|
title: 'How can I get involved?',
|
||||||
|
slug: 'how-can-i-get-involved',
|
||||||
|
html: `
|
||||||
|
<p>We're so glad you asked! Come on over to the <a href='https://github.com/sveltejs/svelte'>Svelte</a> and <a href='https://github.com/sveltejs/sapper'>Sapper</a> repos, and join us in the <a href='https://svelte.dev/chat'>Discord chatroom</a>. Everyone is welcome, especially you!</p>
|
||||||
|
`
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
posts.forEach(post => {
|
||||||
|
post.html = post.html.replace(/^\t{3}/gm, '');
|
||||||
|
});
|
||||||
|
|
||||||
|
export default posts;
|
||||||
@ -0,0 +1,16 @@
|
|||||||
|
import posts from './_posts.js';
|
||||||
|
|
||||||
|
const contents = JSON.stringify(posts.map(post => {
|
||||||
|
return {
|
||||||
|
title: post.title,
|
||||||
|
slug: post.slug
|
||||||
|
};
|
||||||
|
}));
|
||||||
|
|
||||||
|
export function get(req, res) {
|
||||||
|
res.writeHead(200, {
|
||||||
|
'Content-Type': 'application/json'
|
||||||
|
});
|
||||||
|
|
||||||
|
res.end(contents);
|
||||||
|
}
|
||||||
@ -0,0 +1,34 @@
|
|||||||
|
<script context="module">
|
||||||
|
export function preload({ params, query }) {
|
||||||
|
return this.fetch(`blog.json`).then(r => r.json()).then(posts => {
|
||||||
|
return { posts };
|
||||||
|
});
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export let posts;
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
ul {
|
||||||
|
margin: 0 0 1em 0;
|
||||||
|
line-height: 1.5;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<svelte:head>
|
||||||
|
<title>Blog</title>
|
||||||
|
</svelte:head>
|
||||||
|
|
||||||
|
<h1>Recent posts</h1>
|
||||||
|
|
||||||
|
<ul>
|
||||||
|
{#each posts as post}
|
||||||
|
<!-- we're using the non-standard `rel=prefetch` attribute to
|
||||||
|
tell Sapper to load the data for the page as soon as
|
||||||
|
the user hovers over the link or taps it, instead of
|
||||||
|
waiting for the 'click' event -->
|
||||||
|
<li><a rel='prefetch' href='blog/{post.slug}'>{post.title}</a></li>
|
||||||
|
{/each}
|
||||||
|
</ul>
|
||||||
@ -0,0 +1,14 @@
|
|||||||
|
<section class="row fullheight">
|
||||||
|
i
|
||||||
|
sa
|
||||||
|
da
|
||||||
|
d
|
||||||
|
da
|
||||||
|
sd
|
||||||
|
ads
|
||||||
|
sd
|
||||||
|
|
||||||
|
sad
|
||||||
|
sad
|
||||||
|
sa
|
||||||
|
</section>
|
||||||
@ -0,0 +1,181 @@
|
|||||||
|
<style>
|
||||||
|
main {
|
||||||
|
background: none !important;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import Logo from '../components/logo.svelte';
|
||||||
|
import UpArrow from '../components/up.svelte';
|
||||||
|
import MenuBtn from '../components/menu-btn.svelte';
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<MenuBtn/>
|
||||||
|
|
||||||
|
<main id="root">
|
||||||
|
<section class="row fullheight">
|
||||||
|
<Logo/>
|
||||||
|
<div class="row" style="width: 100%">
|
||||||
|
<section class="col-1"></section>
|
||||||
|
<section class="col-5">
|
||||||
|
<div style="margin-top: 23vh">
|
||||||
|
<h1 style="margin-bottom: 5vh">Chci založit spolek</h1>
|
||||||
|
<hr class="gay-hr">
|
||||||
|
<h6 style="line-height: 1.4; margin-top: 5vh; font-size: calc(var(--font-size) / 1.55)">
|
||||||
|
Snažíme se podporovat vznik nových studentských spolků jak nejvíc to jde. Pro začátek trochu terminologie.
|
||||||
|
</h6>
|
||||||
|
<button type="button" class="button primary cool-button" style="margin-top: 1vh; border-radius: 4vw">
|
||||||
|
↓ Zjisti více
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<section class="row" style="margin-top: 5vh">
|
||||||
|
<section class="col-1"></section>
|
||||||
|
<section class="col-6 bg-square bg-center">
|
||||||
|
<h2 style="margin-bottom: 1vh"><b>Formální</b></h2>
|
||||||
|
<hr class="gay-hr" style="margin-bottom: 5vh; ">
|
||||||
|
<p style="font-size: calc(var(--font-size) / 1.8); margin-left: 16vw">
|
||||||
|
Hodí se pro větší (nebo zamýšlené jako větší) spolky.
|
||||||
|
Výhody jsou hlavně větší pořádek díky stanovám v tom, kdo co vede.
|
||||||
|
Spolky mají obvykle radu, kontrolní komisi a volby do nich. Zároveň
|
||||||
|
se musíš oficiálně přihlásit k soudu a vést účetnictví. Se vším ti však pomůžeme
|
||||||
|
</p>
|
||||||
|
</section>
|
||||||
|
</section>
|
||||||
|
<section class="row" style="margin-top: 5vh">
|
||||||
|
<section class="col-5"></section>
|
||||||
|
<section class="col bg-circle bg-center bg-auto">
|
||||||
|
<h2 style="margin-left: 17vw; margin-bottom: 1vh"><b>Neformální</b></h2>
|
||||||
|
<hr class="gay-hr" style="margin-left: 17vw;margin-bottom: 5vh; ">
|
||||||
|
<p style="font-size: calc(var(--font-size) / 1.8); margin-right: 15vw">
|
||||||
|
Hodí se pro partu lidí, které spojují společné zájmy a koníčky, jako například divadlo.
|
||||||
|
Nemusí mít žádné volby, orgány a nemusí odevzdávat výroční zprávy.
|
||||||
|
</p>
|
||||||
|
</section>
|
||||||
|
<section class="col-1"></section>
|
||||||
|
</section>
|
||||||
|
<section class="row" style="margin-top: 5vh">
|
||||||
|
<div class="col-1"></div>
|
||||||
|
<div class="col-10 side-line" style="line-height: 1">
|
||||||
|
<div>
|
||||||
|
<h6 style="margin-bottom: 0"><b>Informace k založení neformálního spolku</b></h6>
|
||||||
|
<div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<section class="row" style="margin-top: 5vh">
|
||||||
|
<div class="col-1"></div>
|
||||||
|
<div class="col">
|
||||||
|
<div class="number-gay">
|
||||||
|
<span>1.</span>
|
||||||
|
<p>Je třeba sehnat tolik a tolik lidí a zaregistrovat se tady - <a href="/#">formulář</a></p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col">
|
||||||
|
<div style="height: 6vh"></div>
|
||||||
|
<div class="number-gay">
|
||||||
|
<span>2.</span>
|
||||||
|
<p>O granty můžeš žádat tady, až bude venku výzva (dáme ti vědět na email)</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col">
|
||||||
|
<div style="height: 12vh"></div>
|
||||||
|
<div class="number-gay">
|
||||||
|
<span>3.</span>
|
||||||
|
<p>Pamatuj ale, že všechny akce musíš nahlašovat tady - <a href="/#">odkaz</a></p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-1"></div>
|
||||||
|
</section>
|
||||||
|
<section class="row" style="margin-top: 5vh">
|
||||||
|
<div class="col-1"></div>
|
||||||
|
<div class="col-10" style="line-height: 1">
|
||||||
|
<div class="side-line">
|
||||||
|
<h6 style="margin-bottom: 0"><b>Informace k založení formálního spolku</b></h6>
|
||||||
|
</div>
|
||||||
|
<p style="font-size: calc(var(--font-size) / 1.8); margin-left:1.15vw; margin-top: 0.5vw">
|
||||||
|
Tady je to už trochu složitější, ale neboj se, zas tak hrozné to není
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<section class="row" style="margin-top: 5vh">
|
||||||
|
<div class="col-1"></div>
|
||||||
|
<div class="col">
|
||||||
|
<div class="number-gay">
|
||||||
|
<div class="down">
|
||||||
|
<span>1.</span>
|
||||||
|
<h6 style="font-size: calc(var(--font-size) / 1.8)"><b>Nejdříve potřebuješ přípravný výbor, ten se musí skládat z alespoň 3 osob</b></h6>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="number-gay">
|
||||||
|
<div class="down">
|
||||||
|
<span>4.</span>
|
||||||
|
<h6 style="font-size: calc(var(--font-size) / 1.8)"><b>Po registraci může článek oficiálně začít fungovat.</b></h6>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="number-gay">
|
||||||
|
<div class="down">
|
||||||
|
<span>7.</span>
|
||||||
|
<h6 style="font-size: calc(var(--font-size) / 1.8)"><b>Základní předpisy</b></h6>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col">
|
||||||
|
<div style="height: 6vh"></div>
|
||||||
|
<div class="number-gay">
|
||||||
|
<div class="down">
|
||||||
|
<span>2.</span>
|
||||||
|
<h6 style="font-size: calc(var(--font-size) / 1.8)"><b>Je třeba sepsat osnovy</b></h6>
|
||||||
|
<p>
|
||||||
|
Jak to má Agora se můžeš podívat tady, Drosophila tady a Emil tady. Otevřeno má pobočkovou strukturu,
|
||||||
|
takže je to složitější, ale co kdyby.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="number-gay">
|
||||||
|
<div class="down">
|
||||||
|
<span>5.</span>
|
||||||
|
<h6 style="font-size: calc(var(--font-size) / 1.8)"><b>Zajít do banky založit transparentní účet</b></h6>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="number-gay">
|
||||||
|
<div class="down">
|
||||||
|
<span>8.</span>
|
||||||
|
<h6 style="font-size: calc(var(--font-size) / 1.8)"><b>Povinnosti a práva spolku</b></h6>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col">
|
||||||
|
<div style="height: 12vh"></div>
|
||||||
|
<div class="number-gay">
|
||||||
|
<div class="down">
|
||||||
|
<span>3.</span>
|
||||||
|
<h6 style="font-size: calc(var(--font-size) / 1.8)"><b>Po tomhle všem musíš vyplnit</b></h6>
|
||||||
|
<p>
|
||||||
|
<a href="/#">tenhle formulář</a>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="number-gay">
|
||||||
|
<div class="down">
|
||||||
|
<span>6.</span>
|
||||||
|
<h6 style="font-size: calc(var(--font-size) / 1.8)"><b>Registrace jako fakultní spolek - <a href="/#">zde</a></b></h6>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="number-gay">
|
||||||
|
<div class="down">
|
||||||
|
<span>9.</span>
|
||||||
|
<h6 style="font-size: calc(var(--font-size) / 1.8)"><b>Nahlašování akcí</b></h6>
|
||||||
|
<p>
|
||||||
|
Povinnosti a práva spolkuspolkem dělat se dělá tady:
|
||||||
|
<a href="/#">formulář nahlašování akcí</a>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-1"></div>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<UpArrow/>
|
||||||
@ -0,0 +1,215 @@
|
|||||||
|
<style>
|
||||||
|
main {
|
||||||
|
background: none !important;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import Logo from '../components/logo.svelte';
|
||||||
|
import UpArrow from '../components/up.svelte';
|
||||||
|
import MenuBtn from '../components/menu-btn.svelte';
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<MenuBtn/>
|
||||||
|
|
||||||
|
<main id="root">
|
||||||
|
<section class="row fullheight">
|
||||||
|
<Logo/>
|
||||||
|
<div class="row" style="width: 100%">
|
||||||
|
<section class="col-1"></section>
|
||||||
|
<section class="col-5">
|
||||||
|
<div style="margin-top: 23vh">
|
||||||
|
<h1 style="margin-bottom: 5vh">Přebírám spolek</h1>
|
||||||
|
<hr class="gay-hr">
|
||||||
|
<h6 style="line-height: 1.4; margin-top: 5vh; font-size: calc(var(--font-size) / 1.75)">
|
||||||
|
Většinou se stává, že minulý předseda tomu současnému hodně do začátku pomůže a provede ho všemi náležitostmi,
|
||||||
|
které z toho vyplývají. Ale někdy se tak nestane, a proto jsme s ostatními předsedi dali hlavy dohromady a vytvořili
|
||||||
|
návod toho, co bys měl/a určitě dělat.
|
||||||
|
</h6>
|
||||||
|
<button type="button" class="button primary cool-button" style="margin-top: 1vh; border-radius: 4vw">
|
||||||
|
↓ Zjisti více
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<section class="row" style="margin-top: 9rem">
|
||||||
|
<div class="col-1"></div>
|
||||||
|
<div class="col-5 bg-square">
|
||||||
|
<h3>Přebírám formální spolek</h3>
|
||||||
|
<hr class="gay-hr">
|
||||||
|
<p style="font-size: calc(var(--font-size) / 2); margin-top: 5vh; text-align: left">
|
||||||
|
Většinou se stává, že minulý předseda tomu současnému hodně do začátku pomůže a provede ho všemi náležitostmi,
|
||||||
|
které z toho vyplývají. Ale někdy se tak nestane, a proto jsme s ostatními předsedi dali hlavy dohromady a vytvořili
|
||||||
|
návod toho, co bys měl/a určitě dělat.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<section class="row" style="margin-top: 5vh">
|
||||||
|
<div class="col-1"></div>
|
||||||
|
<div class="col-3 side-line" style="line-height: 1">
|
||||||
|
<div>
|
||||||
|
<h6 style="margin-bottom: 0"><b>Postup přebírání</b></h6>
|
||||||
|
<div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<section class="row" style="margin-top: 5vh">
|
||||||
|
<div class="col-1"></div>
|
||||||
|
<div class="col">
|
||||||
|
<div class="number-gay">
|
||||||
|
<div class="down">
|
||||||
|
<span>1.</span>
|
||||||
|
<h6 style="font-size: calc(var(--font-size) / 1.8)"><b>Seznam se s terminologií</b></h6>
|
||||||
|
<p>Formální spolek je spolek s IČem a volenými orgány.
|
||||||
|
Má vlastní účet atp. Neformální spolek je sdružení kamarádů,
|
||||||
|
které hrozně baví dělat různé věci. Nemá IČO a většinou ani žádné orgány.
|
||||||
|
Studentská oborová rada pomáhá studentům v komunikaci s katedrou. Hlavní předpisy,
|
||||||
|
kterými je třeba se řídit jsou tady.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="number-gay">
|
||||||
|
<div class="down">
|
||||||
|
<span>4.</span>
|
||||||
|
<h6 style="font-size: calc(var(--font-size) / 1.8)"><b>Přístup ke spolkovému účtu</b></h6>
|
||||||
|
<p>
|
||||||
|
Peníze nejsou všechno, ale je dobré mít přístup ke spolkovému účtu.
|
||||||
|
Sežeň si co nejdříve údaje k němu.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="number-gay">
|
||||||
|
<div class="down">
|
||||||
|
<span>7.</span>
|
||||||
|
<h6 style="font-size: calc(var(--font-size) / 1.8)"><b>Inspiruj se u podobných organizací</b></h6>
|
||||||
|
<p>
|
||||||
|
Doporučujeme se podívat, jak to vypadá i v jiných organizacích a spolcích - doporučujeme spolky na UK,
|
||||||
|
dobře zpracované to má VŠE, v zahraničí (německy: Verbindung, Burschenshaft, anglicky: student society, sorority, fraternity)
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="number-gay">
|
||||||
|
<div class="down">
|
||||||
|
<span>10.</span>
|
||||||
|
<h6 style="font-size: calc(var(--font-size) / 1.8)"><b>Nastav fungování týmu</b></h6>
|
||||||
|
<p>
|
||||||
|
Nastav si fungování nejbližšího týmu (většinou se mu říká rada). Neboj se ozvat dalším spolkům,
|
||||||
|
které dobře fungují. Pravděpodobně řešili to samé.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="number-gay">
|
||||||
|
<div class="down">
|
||||||
|
<span>13.</span>
|
||||||
|
<h6 style="font-size: calc(var(--font-size) / 1.8)"><b>Rady od starších</b></h6>
|
||||||
|
<p>
|
||||||
|
A aby toho nebylo málo, tady máš rady od bývalých a současných předsedů.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col">
|
||||||
|
<div style="height: 6vh"></div>
|
||||||
|
<div class="number-gay">
|
||||||
|
<div class="down">
|
||||||
|
<span>2.</span>
|
||||||
|
<h6 style="font-size: calc(var(--font-size) / 1.8)"><b>Napiš na soud</b></h6>
|
||||||
|
<p>
|
||||||
|
Napiš na soud, že se změnil statutární orgán.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="number-gay">
|
||||||
|
<div class="down">
|
||||||
|
<span>5.</span>
|
||||||
|
<h6 style="font-size: calc(var(--font-size) / 1.8)"><b>Nejdříve zkontroluj finanční dokumenty</b></h6>
|
||||||
|
<p>
|
||||||
|
Zkontroluj si, zda byla na daňový úřad podána daňová přiznání za minulé roky,
|
||||||
|
ať první, co budeš řešit, není návštěva berňáku.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="number-gay">
|
||||||
|
<div class="down">
|
||||||
|
<span>8.</span>
|
||||||
|
<h6 style="font-size: calc(var(--font-size) / 1.8)"><b>Přečti si pravidla spolkovky</b></h6>
|
||||||
|
<p>
|
||||||
|
Asi víš, že máte přístup do spolkovky, tak je dobré si přečíst její pravidla, aby na tebe nebyly ostatní spolky
|
||||||
|
naštvané.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="number-gay">
|
||||||
|
<div class="down">
|
||||||
|
<span>11.</span>
|
||||||
|
<h6 style="font-size: calc(var(--font-size) / 1.8)"><b>Kdo je kdo na fakultě</b></h6>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
class="button primary cool-button smol-button"
|
||||||
|
style="margin-top: 1vh; border-radius: 4vw;"
|
||||||
|
>
|
||||||
|
↓ Zjisti více
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col">
|
||||||
|
<div style="height: 12vh"></div>
|
||||||
|
<div class="number-gay">
|
||||||
|
<div class="down">
|
||||||
|
<span>3.</span>
|
||||||
|
<h6 style="font-size: calc(var(--font-size) / 1.8)"><b>Nahlas to fakultě</b></h6>
|
||||||
|
<p>
|
||||||
|
Když budeš v tom, je to třeba nahlásit i na fakultě, abychom věděli, s kým jednat.
|
||||||
|
<a href="javascript:void(0)">stačí vyplnit tohle</a>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="number-gay">
|
||||||
|
<div class="down">
|
||||||
|
<span>6.</span>
|
||||||
|
<h6 style="font-size: calc(var(--font-size) / 1.8)"><b>Nejdříve zkontroluj finanční dokumenty</b></h6>
|
||||||
|
<p>
|
||||||
|
Zkontroluj si, zda byla podána daňová přiznání za minulé roky, ať první, co budeš
|
||||||
|
řešit, není návštěva berňáku.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="number-gay">
|
||||||
|
<div class="down">
|
||||||
|
<span>9.</span>
|
||||||
|
<h6 style="font-size: calc(var(--font-size) / 1.8)"><b>Nahlašování akcí</b></h6>
|
||||||
|
<p>
|
||||||
|
Tohle asi víc, ale pro jistotu: nahlašování akcí, které budeš se spolkem dělat se dělá tady:
|
||||||
|
<a href="javascript:void(0)">formulář nahlašování akcí</a>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="number-gay">
|
||||||
|
<div class="down">
|
||||||
|
<span>12.</span>
|
||||||
|
<h6 style="font-size: calc(var(--font-size) / 1.8)"><b>Nahlašování akcí</b></h6>
|
||||||
|
<p>
|
||||||
|
Hodně doporučujeme si udělat základní SWOT analýzu, která ti prozradí, jak na tom váš spolek j
|
||||||
|
a kam je možné ho směřovat dál. O tom, jak udělat SWOTku najdeš info třeba tady:
|
||||||
|
<a href="https://managementmania.com/cs/swot-analyza">https://managementmania.com/cs/swot-analyza</a>
|
||||||
|
<a href="https://www.marketingmind.cz/swot-analyza">https://www.marketingmind.cz/swot-analyza</a>
|
||||||
|
<a href="https://mladypodnikatel.cz/co-to-je-swot-analyza-t2797">https://mladypodnikatel.cz/co-to-je-swot-analyza-t2797</a>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-1"></div>
|
||||||
|
</section>
|
||||||
|
<section class="row" style="margin-top: 9rem">
|
||||||
|
<div class="col-1"></div>
|
||||||
|
<div class="col-5 bg-circle" style="background-position: top center">
|
||||||
|
<h4>Přebírám neformální spolek</h4>
|
||||||
|
<hr class="gay-hr">
|
||||||
|
<p style="font-size: calc(var(--font-size) / 1.3); margin-top: 5vh; text-align: justify">
|
||||||
|
Zde odpadá většina formálních náležitostí. Je třeba nahlásit na fakultě změnu předsedy.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<UpArrow/>
|
||||||
@ -0,0 +1,253 @@
|
|||||||
|
<style>
|
||||||
|
main {
|
||||||
|
background: none !important;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import Logo from '../components/logo.svelte';
|
||||||
|
import UpArrow from '../components/up.svelte';
|
||||||
|
import MenuBtn from '../components/menu-btn.svelte';
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<MenuBtn/>
|
||||||
|
|
||||||
|
<main id="root">
|
||||||
|
<section class="row fullheight">
|
||||||
|
<Logo/>
|
||||||
|
<div class="horizontal-menu">
|
||||||
|
<span>Povinnosti:</span>
|
||||||
|
<a href="#0">Výroční zpráva</a>
|
||||||
|
<a href="#0">Spolková místnost</a>
|
||||||
|
<a href="#0">Akce a nahlašování akcí</a>
|
||||||
|
<a href="#0">Odkazy a inspirace</a>
|
||||||
|
<a href="#0">Další spolky</a>
|
||||||
|
<a href="#0">Předpisy a pravidla</a>
|
||||||
|
</div>
|
||||||
|
<div class="row" style="width: 100%">
|
||||||
|
<section class="col-1"></section>
|
||||||
|
<section class="col-5">
|
||||||
|
<div style="margin-top: 23vh">
|
||||||
|
<h1 style="margin-bottom: 5vh">Předseda spolku</h1>
|
||||||
|
<hr class="gay-hr">
|
||||||
|
<h6 style="line-height: 1.4; margin-top: 5vh">
|
||||||
|
Provedeme tě všemi povinnostmi a možnostmi, které jako předseda máš.
|
||||||
|
</h6>
|
||||||
|
<button type="button" class="button primary cool-button" style="margin-top: 1vh; border-radius: 4vw">
|
||||||
|
↓ Zjisti více
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<section class="row" style="margin-top: 9rem">
|
||||||
|
<div class="col-1"></div>
|
||||||
|
<div class="col-4 bg-circle">
|
||||||
|
<h3>Výroční zpráva</h3>
|
||||||
|
<hr class="gay-hr">
|
||||||
|
<p style="font-size: calc(var(--font-size) / 2); margin-top: 5vh; text-align: justify">
|
||||||
|
Každý formální spolek má povinnost odevzdávat každý rok 30.4 výroční zprávu včetně zprávy o hospodaření
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<section class="row" style="margin-top: 4vh">
|
||||||
|
<div class="col-1"></div>
|
||||||
|
<div class="col-5 flexy-boi">
|
||||||
|
<h5 style="margin-bottom: 0; margin-left: -14vw">
|
||||||
|
A jak na ní?
|
||||||
|
</h5>
|
||||||
|
<h5 style="padding-left: 4vw; margin-top:0" class="text-primary">
|
||||||
|
To ti řekne Verča
|
||||||
|
<h5>
|
||||||
|
</div>
|
||||||
|
<div class="col-5">
|
||||||
|
<video class="smol-video" controls>
|
||||||
|
<source src="/img/1566501668807.webm" type="video/webm">
|
||||||
|
Your browser is gay.
|
||||||
|
</video>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<section class="row" style="margin-top: 5vh">
|
||||||
|
<div class="col-1"></div>
|
||||||
|
<div class="col-3 side-line" style="line-height: 1">
|
||||||
|
<div>
|
||||||
|
<h6 style="margin-bottom: 0"><b>Hlavní body,</b></h6>
|
||||||
|
<p style="margin-top:0; margin-bottom: 2vh; font-size: calc(var(--font-size) / 1.5)">které tam nesmí chybět jsou:</p>
|
||||||
|
<div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<section class="row" style="margin-top: 5vh">
|
||||||
|
<div class="col-1"></div>
|
||||||
|
<div class="col">
|
||||||
|
<div class="number-gay">
|
||||||
|
<span>1.</span>
|
||||||
|
<p>Počet členů</p>
|
||||||
|
</div>
|
||||||
|
<div class="number-gay">
|
||||||
|
<span>4.</span>
|
||||||
|
<p>Souhrn činnosti za minulý kalendářní rok</p>
|
||||||
|
</div>
|
||||||
|
<div class="number-gay">
|
||||||
|
<div class="down">
|
||||||
|
<div class="right">
|
||||||
|
<span>7.</span>
|
||||||
|
<p>Hospodaření (výdaje rozděleny na tyto části)</p>
|
||||||
|
</div>
|
||||||
|
<ol type="a">
|
||||||
|
<li>Projekty a program</li>
|
||||||
|
<li>Marketing a PR</li>
|
||||||
|
<li>Provoz spolku</li>
|
||||||
|
</ol>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col">
|
||||||
|
<div style="height: 6vh"></div>
|
||||||
|
<div class="number-gay">
|
||||||
|
<span>2.</span>
|
||||||
|
<p>Souhrn činnosti za minulý kalendářní rok</p>
|
||||||
|
</div>
|
||||||
|
<div class="number-gay">
|
||||||
|
<span>5.</span>
|
||||||
|
<p>Souhrn činnosti za minulý kalendářní rok</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col">
|
||||||
|
<div style="height: 12vh"></div>
|
||||||
|
<div class="number-gay">
|
||||||
|
<span>3.</span>
|
||||||
|
<p>Souhrn činnosti za minulý kalendářní rok</p>
|
||||||
|
</div>
|
||||||
|
<div class="number-gay">
|
||||||
|
<span>6.</span>
|
||||||
|
<p>Souhrn činnosti za minulý kalendářní rok</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-1"></div>
|
||||||
|
</section>
|
||||||
|
<section class="row" style="margin-top: 9rem">
|
||||||
|
<div class="col-1"></div>
|
||||||
|
<div class="col-4 bg-square">
|
||||||
|
<h3>Spolková místnost</h3>
|
||||||
|
<hr class="gay-hr">
|
||||||
|
<p style="font-size: calc(var(--font-size) / 2); margin-top: 5vh; text-align: justify">
|
||||||
|
Každý formální spolek má nárok na přístup do spolkové místnosti, která má označení S104 tzv. spolkovka
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<section class="row" style="margin-top: 9vh">
|
||||||
|
<div class="col-1"></div>
|
||||||
|
<div class="col-5 flexy-boi" style="width: 15vw; margin: 10vw 0">
|
||||||
|
<div class="side-line">
|
||||||
|
<p style="margin-top:0; margin-bottom: 2vh; font-size: calc(var(--font-size) / 1.7); width: 13vw">
|
||||||
|
Pravidla spolkovky jsou následující:
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-5">
|
||||||
|
<img src="/img/trump.jpg" style="height: 100%; width: auto;" alt="">
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<section class="row" style="margin-top: 9rem">
|
||||||
|
<div class="col-1"></div>
|
||||||
|
<div class="col-5 bg-circle">
|
||||||
|
<h3>Akce a nahlašování akcí</h3>
|
||||||
|
<hr class="gay-hr">
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<section class="row" style="margin-top: 9vh">
|
||||||
|
<div class="col-1"></div>
|
||||||
|
<div class="col-5" style="font-size: calc(var(--font-size) / 1.9); padding-right: 4vw">
|
||||||
|
<p>
|
||||||
|
Pokud chceš pořádat akci na fakultě, je zapotřebí to nejprve nahlásit přes formulář na
|
||||||
|
<a href="https://akce.pedf.cuni.cz">akce.pedf.cuni.cz</a>. Pokud se jedná o malou akci vyžadující pouze malý počet učeben
|
||||||
|
nebo společný prostor pouze po krátkou dobu, tak stačí akci nahlásit o 10 dnů předem (více u organizování akcí)
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Je možnost požádat o stoly, židle, podporu ajťáků nebo místo na webovkách. Všechny nájmy pro formální spolky jsou bezplatné.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="col-5">
|
||||||
|
<img src="/img/trump.jpg" style="height: 100%; width: auto;" alt="">
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<section class="row" style="margin-top: 9rem">
|
||||||
|
<div class="col-1"></div>
|
||||||
|
<div class="col-5 bg-square" style="background-position: top center">
|
||||||
|
<h4>Odkazy a inspirace</h4>
|
||||||
|
<hr class="gay-hr">
|
||||||
|
<p style="font-size: calc(var(--font-size) / 2); margin-top: 5vh; text-align: justify">
|
||||||
|
Tady najdeš spolky, které působí na UK:<br>
|
||||||
|
<a href="https://cuni.cz/UK-8518.html">https://cuni.cz/UK-8518.html</a>
|
||||||
|
<br><br>
|
||||||
|
Kurzy na různé dovednosti můžeš najít zde:<br>
|
||||||
|
<a href="www.naucmese.cz">www.naucmese.cz</a> nebo na
|
||||||
|
<a href="https://www.acsa.cz">https://www.acsa.cz</a>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<section class="row" style="margin-top: 4vh">
|
||||||
|
<section class="col">
|
||||||
|
<link rel="stylesheet" href="/css/carousel.css">
|
||||||
|
<!-- Slideshow container -->
|
||||||
|
<div class="slideshow-container">
|
||||||
|
|
||||||
|
<!-- Full-width images with number and caption text -->
|
||||||
|
<div class="mySlides fade">
|
||||||
|
<div class="numbertext">1 / 3</div>
|
||||||
|
<img src="img/trump.jpg" style="width:100%" alt="">
|
||||||
|
<div class="text">Caption Text</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="mySlides fade">
|
||||||
|
<div class="numbertext">2 / 3</div>
|
||||||
|
<img src="img/trump.jpg" style="width:100%" alt="">
|
||||||
|
<div class="text">Caption Two</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="mySlides fade">
|
||||||
|
<div class="numbertext">3 / 3</div>
|
||||||
|
<img src="img/trump.jpg" style="width:100%" alt="">
|
||||||
|
<div class="text">Caption Three</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="mySlides fade">
|
||||||
|
<div class="numbertext">3 / 3</div>
|
||||||
|
<img src="img/trump.jpg" style="width:100%" alt="">
|
||||||
|
<div class="text">Caption Three</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Next and previous buttons -->
|
||||||
|
<a class="prev" onclick="plusSlides(-1)" href="#0">❮</a>
|
||||||
|
<a class="next" onclick="plusSlides(1)" href="#0">❯</a>
|
||||||
|
</div>
|
||||||
|
<br>
|
||||||
|
|
||||||
|
<!-- The dots/circles -->
|
||||||
|
<div style="text-align:center">
|
||||||
|
<span class="dot" onclick="currentSlide(1)"></span>
|
||||||
|
<span class="dot" onclick="currentSlide(2)"></span>
|
||||||
|
<span class="dot" onclick="currentSlide(3)"></span>
|
||||||
|
<span class="dot" onclick="currentSlide(4)"></span>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<script src="js/carousel.js"></script>
|
||||||
|
</section>
|
||||||
|
<section class="row" style="margin-top: 9rem">
|
||||||
|
<div class="col-1"></div>
|
||||||
|
<div class="col-5 bg-square" style="background-position: top center">
|
||||||
|
<h4>Předpisy a pravidla</h4>
|
||||||
|
<hr class="gay-hr">
|
||||||
|
<p style="font-size: calc(var(--font-size) / 1.3); margin-top: 5vh; text-align: justify">
|
||||||
|
Základní předpisy, kterými se spolky řidí jsou:<br>
|
||||||
|
</p>
|
||||||
|
<ul style="font-size: calc(var(--font-size) / 1.3); list-style: none;">
|
||||||
|
<li>Tento předpis</li>
|
||||||
|
<li>Tento předpis</li>
|
||||||
|
<li>Tento předpis</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<UpArrow/>
|
||||||
@ -0,0 +1,181 @@
|
|||||||
|
<style>
|
||||||
|
main {
|
||||||
|
background: none !important;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import Logo from '../components/logo.svelte';
|
||||||
|
import UpArrow from '../components/up.svelte';
|
||||||
|
import MenuBtn from '../components/menu-btn.svelte';
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<MenuBtn/>
|
||||||
|
|
||||||
|
<main id="root">
|
||||||
|
<section class="row fullheight">
|
||||||
|
<Logo/>
|
||||||
|
<div class="row" style="width: 100%">
|
||||||
|
<section class="col-1"></section>
|
||||||
|
<section class="col-5">
|
||||||
|
<div style="margin-top: 23vh">
|
||||||
|
<h1 style="margin-bottom: 5vh">Chci založit spolek</h1>
|
||||||
|
<hr class="gay-hr">
|
||||||
|
<h6 style="line-height: 1.4; margin-top: 5vh; font-size: calc(var(--font-size) / 1.55)">
|
||||||
|
Snažíme se podporovat vznik nových studentských spolků jak nejvíc to jde. Pro začátek trochu terminologie.
|
||||||
|
</h6>
|
||||||
|
<button type="button" class="button primary cool-button" style="margin-top: 1vh; border-radius: 4vw">
|
||||||
|
↓ Zjisti více
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<section class="row" style="margin-top: 5vh">
|
||||||
|
<section class="col-1"></section>
|
||||||
|
<section class="col-6 bg-square bg-center">
|
||||||
|
<h2 style="margin-bottom: 1vh"><b>Formální</b></h2>
|
||||||
|
<hr class="gay-hr" style="margin-bottom: 5vh; ">
|
||||||
|
<p style="font-size: calc(var(--font-size) / 1.8); margin-left: 16vw">
|
||||||
|
Hodí se pro větší (nebo zamýšlené jako větší) spolky.
|
||||||
|
Výhody jsou hlavně větší pořádek díky stanovám v tom, kdo co vede.
|
||||||
|
Spolky mají obvykle radu, kontrolní komisi a volby do nich. Zároveň
|
||||||
|
se musíš oficiálně přihlásit k soudu a vést účetnictví. Se vším ti však pomůžeme
|
||||||
|
</p>
|
||||||
|
</section>
|
||||||
|
</section>
|
||||||
|
<section class="row" style="margin-top: 5vh">
|
||||||
|
<section class="col-5"></section>
|
||||||
|
<section class="col bg-circle bg-center bg-auto">
|
||||||
|
<h2 style="margin-left: 17vw; margin-bottom: 1vh"><b>Neformální</b></h2>
|
||||||
|
<hr class="gay-hr" style="margin-left: 17vw;margin-bottom: 5vh; ">
|
||||||
|
<p style="font-size: calc(var(--font-size) / 1.8); margin-right: 15vw">
|
||||||
|
Hodí se pro partu lidí, které spojují společné zájmy a koníčky, jako například divadlo.
|
||||||
|
Nemusí mít žádné volby, orgány a nemusí odevzdávat výroční zprávy.
|
||||||
|
</p>
|
||||||
|
</section>
|
||||||
|
<section class="col-1"></section>
|
||||||
|
</section>
|
||||||
|
<section class="row" style="margin-top: 5vh">
|
||||||
|
<div class="col-1"></div>
|
||||||
|
<div class="col-10 side-line" style="line-height: 1">
|
||||||
|
<div>
|
||||||
|
<h6 style="margin-bottom: 0"><b>Informace k založení neformálního spolku</b></h6>
|
||||||
|
<div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<section class="row" style="margin-top: 5vh">
|
||||||
|
<div class="col-1"></div>
|
||||||
|
<div class="col">
|
||||||
|
<div class="number-gay">
|
||||||
|
<span>1.</span>
|
||||||
|
<p>Je třeba sehnat tolik a tolik lidí a zaregistrovat se tady - <a href="/#">formulář</a></p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col">
|
||||||
|
<div style="height: 6vh"></div>
|
||||||
|
<div class="number-gay">
|
||||||
|
<span>2.</span>
|
||||||
|
<p>O granty můžeš žádat tady, až bude venku výzva (dáme ti vědět na email)</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col">
|
||||||
|
<div style="height: 12vh"></div>
|
||||||
|
<div class="number-gay">
|
||||||
|
<span>3.</span>
|
||||||
|
<p>Pamatuj ale, že všechny akce musíš nahlašovat tady - <a href="/#">odkaz</a></p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-1"></div>
|
||||||
|
</section>
|
||||||
|
<section class="row" style="margin-top: 5vh">
|
||||||
|
<div class="col-1"></div>
|
||||||
|
<div class="col-10" style="line-height: 1">
|
||||||
|
<div class="side-line">
|
||||||
|
<h6 style="margin-bottom: 0"><b>Informace k založení formálního spolku</b></h6>
|
||||||
|
</div>
|
||||||
|
<p style="font-size: calc(var(--font-size) / 1.8); margin-left:1.15vw; margin-top: 0.5vw">
|
||||||
|
Tady je to už trochu složitější, ale neboj se, zas tak hrozné to není
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<section class="row" style="margin-top: 5vh">
|
||||||
|
<div class="col-1"></div>
|
||||||
|
<div class="col">
|
||||||
|
<div class="number-gay">
|
||||||
|
<div class="down">
|
||||||
|
<span>1.</span>
|
||||||
|
<h6 style="font-size: calc(var(--font-size) / 1.8)"><b>Nejdříve potřebuješ přípravný výbor, ten se musí skládat z alespoň 3 osob</b></h6>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="number-gay">
|
||||||
|
<div class="down">
|
||||||
|
<span>4.</span>
|
||||||
|
<h6 style="font-size: calc(var(--font-size) / 1.8)"><b>Po registraci může článek oficiálně začít fungovat.</b></h6>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="number-gay">
|
||||||
|
<div class="down">
|
||||||
|
<span>7.</span>
|
||||||
|
<h6 style="font-size: calc(var(--font-size) / 1.8)"><b>Základní předpisy</b></h6>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col">
|
||||||
|
<div style="height: 6vh"></div>
|
||||||
|
<div class="number-gay">
|
||||||
|
<div class="down">
|
||||||
|
<span>2.</span>
|
||||||
|
<h6 style="font-size: calc(var(--font-size) / 1.8)"><b>Je třeba sepsat osnovy</b></h6>
|
||||||
|
<p>
|
||||||
|
Jak to má Agora se můžeš podívat tady, Drosophila tady a Emil tady. Otevřeno má pobočkovou strukturu,
|
||||||
|
takže je to složitější, ale co kdyby.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="number-gay">
|
||||||
|
<div class="down">
|
||||||
|
<span>5.</span>
|
||||||
|
<h6 style="font-size: calc(var(--font-size) / 1.8)"><b>Zajít do banky založit transparentní účet</b></h6>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="number-gay">
|
||||||
|
<div class="down">
|
||||||
|
<span>8.</span>
|
||||||
|
<h6 style="font-size: calc(var(--font-size) / 1.8)"><b>Povinnosti a práva spolku</b></h6>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col">
|
||||||
|
<div style="height: 12vh"></div>
|
||||||
|
<div class="number-gay">
|
||||||
|
<div class="down">
|
||||||
|
<span>3.</span>
|
||||||
|
<h6 style="font-size: calc(var(--font-size) / 1.8)"><b>Po tomhle všem musíš vyplnit</b></h6>
|
||||||
|
<p>
|
||||||
|
<a href="/#">tenhle formulář</a>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="number-gay">
|
||||||
|
<div class="down">
|
||||||
|
<span>6.</span>
|
||||||
|
<h6 style="font-size: calc(var(--font-size) / 1.8)"><b>Registrace jako fakultní spolek - <a href="/#">zde</a></b></h6>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="number-gay">
|
||||||
|
<div class="down">
|
||||||
|
<span>9.</span>
|
||||||
|
<h6 style="font-size: calc(var(--font-size) / 1.8)"><b>Nahlašování akcí</b></h6>
|
||||||
|
<p>
|
||||||
|
Povinnosti a práva spolkuspolkem dělat se dělá tady:
|
||||||
|
<a href="/#">formulář nahlašování akcí</a>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-1"></div>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<UpArrow/>
|
||||||
@ -0,0 +1,297 @@
|
|||||||
|
<style>
|
||||||
|
main {
|
||||||
|
background: none !important;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import Logo from '../components/logo.svelte';
|
||||||
|
import UpArrow from '../components/up.svelte';
|
||||||
|
import MenuBtn from '../components/menu-btn.svelte';
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<MenuBtn/>
|
||||||
|
|
||||||
|
<main id="root">
|
||||||
|
<section class="row fullheight">
|
||||||
|
<Logo/>
|
||||||
|
<div class="row" style="width: 100%">
|
||||||
|
<section class="col-1"></section>
|
||||||
|
<section class="col-5">
|
||||||
|
<div style="margin-top: 23vh">
|
||||||
|
<h1 style="margin-bottom: 5vh">Chci se zapojit</h1>
|
||||||
|
<hr class="gay-hr">
|
||||||
|
<h6 style="line-height: 1.4; margin-top: 5vh">
|
||||||
|
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce wisi. Duis bibendum, lectus ut viverra rhoncus.
|
||||||
|
</h6>
|
||||||
|
<button type="button" class="button primary cool-button" style="margin-top: 1vh; border-radius: 4vw">
|
||||||
|
↓ Zjisti více
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<section class="row" style="margin-top: 5vh">
|
||||||
|
<div class="col-1"></div>
|
||||||
|
<div class="col-5" style="line-height: 1">
|
||||||
|
<div class="down" style="margin-right: 3vw">
|
||||||
|
<div class="side-line" style="margin-bottom: 1vh+">
|
||||||
|
<h6 style="margin-bottom: 0"><b>Co jsou vlastně studentské organizace?</b></h6>
|
||||||
|
</div>
|
||||||
|
<p style="margin-top:0; margin-bottom: 2vh; margin-left: 1.14vw; line-height: 1.5; font-size: calc(var(--font-size) / 1.8)">
|
||||||
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
|
||||||
|
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
|
||||||
|
nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
||||||
|
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
|
||||||
|
eu fugiat nulla pariatur.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-5" style="line-height: 1">
|
||||||
|
<div style="height: 8vh"></div>
|
||||||
|
<div class="down" style="margin-right: 3vw">
|
||||||
|
<div class="side-line" style="margin-bottom: 1vh">
|
||||||
|
<h6 style="margin-bottom: 0"><b>Proč bych se měl do toho pouštět?</b></h6>
|
||||||
|
</div>
|
||||||
|
<p style="margin-top:0; margin-bottom: 2vh; margin-left: 1.14vw; line-height: 1.5; font-size: calc(var(--font-size) / 1.8)">
|
||||||
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
|
||||||
|
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
|
||||||
|
nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
||||||
|
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
|
||||||
|
eu fugiat nulla pariatur.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<section class="row" style="margin-top: 5vh">
|
||||||
|
<div class="col flexy-boi">
|
||||||
|
<h5 style="color: var(--color-primary)"><b>Jak se v tom všem vyznat?</b></h5>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<section class="row" style="margin-top: 5vh">
|
||||||
|
<div class="col-1"></div>
|
||||||
|
<div class="col-5" style="line-height: 1">
|
||||||
|
<div class="down" style="margin-right: 3vw">
|
||||||
|
<div class="side-line" style="margin-bottom: 1vh+">
|
||||||
|
<h6 style="margin-bottom: 0"><b>Formální spolek</b></h6>
|
||||||
|
</div>
|
||||||
|
<p style="margin-top:0; margin-bottom: 2vh; margin-left: 1.14vw; line-height: 1.5; font-size: calc(var(--font-size) / 1.8)">
|
||||||
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
|
||||||
|
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
|
||||||
|
nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
||||||
|
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
|
||||||
|
eu fugiat nulla pariatur.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="down" style="margin-right: 3vw">
|
||||||
|
<div class="side-line" style="margin-bottom: 1vh+">
|
||||||
|
<h6 style="margin-bottom: 0"><b>SORka</b></h6>
|
||||||
|
</div>
|
||||||
|
<p style="margin-top:0; margin-bottom: 2vh; margin-left: 1.14vw; line-height: 1.5; font-size: calc(var(--font-size) / 1.8)">
|
||||||
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
|
||||||
|
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
|
||||||
|
nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
||||||
|
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
|
||||||
|
eu fugiat nulla pariatur.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="down" style="margin-right: 3vw">
|
||||||
|
<div class="side-line" style="margin-bottom: 1vh+">
|
||||||
|
<h6 style="margin-bottom: 0"><b>Univerzitní spolek</b></h6>
|
||||||
|
</div>
|
||||||
|
<p style="margin-top:0; margin-bottom: 2vh; margin-left: 1.14vw; line-height: 1.5; font-size: calc(var(--font-size) / 1.8)">
|
||||||
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
|
||||||
|
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
|
||||||
|
nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
||||||
|
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
|
||||||
|
eu fugiat nulla pariatur.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-5" style="line-height: 1">
|
||||||
|
<div style="height: 8vh"></div>
|
||||||
|
<div class="down" style="margin-right: 3vw">
|
||||||
|
<div class="side-line" style="margin-bottom: 1vh">
|
||||||
|
<h6 style="margin-bottom: 0"><b>Neformální spolky</b></h6>
|
||||||
|
</div>
|
||||||
|
<p style="margin-top:0; margin-bottom: 2vh; margin-left: 1.14vw; line-height: 1.5; font-size: calc(var(--font-size) / 1.8)">
|
||||||
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
|
||||||
|
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
|
||||||
|
nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
||||||
|
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
|
||||||
|
eu fugiat nulla pariatur.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="down" style="margin-right: 3vw">
|
||||||
|
<div class="side-line" style="margin-bottom: 1vh">
|
||||||
|
<h6 style="margin-bottom: 0"><b>Fakultní spolek</b></h6>
|
||||||
|
</div>
|
||||||
|
<p style="margin-top:0; margin-bottom: 2vh; margin-left: 1.14vw; line-height: 1.5; font-size: calc(var(--font-size) / 1.8)">
|
||||||
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
|
||||||
|
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
|
||||||
|
nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
||||||
|
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
|
||||||
|
eu fugiat nulla pariatur.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<section class="row" style="margin-top: 14vh">
|
||||||
|
<div class="col-1"></div>
|
||||||
|
<div class="col-6" style="background-position: top center">
|
||||||
|
<h5>Zkušenosti členů a bývalých členů</h5>
|
||||||
|
<hr class="gay-hr">
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<section class="row" style="margin-top: 4vh">
|
||||||
|
<section class="col">
|
||||||
|
<link rel="stylesheet" href="/css/carousel.css">
|
||||||
|
<!-- Slideshow container -->
|
||||||
|
<div class="slideshow-container">
|
||||||
|
|
||||||
|
<!-- Full-width images with number and caption text -->
|
||||||
|
<div class="mySlides fade">
|
||||||
|
<div class="numbertext">1 / 3</div>
|
||||||
|
<img src="img/trump.jpg" alt="" style="width:100%">
|
||||||
|
<div class="text">Caption Text</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="mySlides fade">
|
||||||
|
<div class="numbertext">2 / 3</div>
|
||||||
|
<img src="img/trump.jpg" alt="" style="width:100%">
|
||||||
|
<div class="text">Caption Two</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="mySlides fade">
|
||||||
|
<div class="numbertext">3 / 3</div>
|
||||||
|
<img src="img/trump.jpg" alt="" style="width:100%">
|
||||||
|
<div class="text">Caption Three</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="mySlides fade">
|
||||||
|
<div class="numbertext">3 / 3</div>
|
||||||
|
<img src="img/trump.jpg" alt="" style="width:100%">
|
||||||
|
<div class="text">Caption Three</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Next and previous buttons -->
|
||||||
|
<a class="prev" onclick="plusSlides(-1)" href="#0">❮</a>
|
||||||
|
<a class="next" onclick="plusSlides(1)" href="#0">❯</a>
|
||||||
|
</div>
|
||||||
|
<br>
|
||||||
|
|
||||||
|
<!-- The dots/circles -->
|
||||||
|
<div style="text-align:center">
|
||||||
|
<span class="dot" onclick="currentSlide(1)"></span>
|
||||||
|
<span class="dot" onclick="currentSlide(2)"></span>
|
||||||
|
<span class="dot" onclick="currentSlide(3)"></span>
|
||||||
|
<span class="dot" onclick="currentSlide(4)"></span>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</section>
|
||||||
|
<section class="row" style="margin-top: 14vh">
|
||||||
|
<div class="col-1"></div>
|
||||||
|
<div class="col-6" style="background-position: top center">
|
||||||
|
<h5>Proč bys měl jít právě k nám?</h5>
|
||||||
|
<hr class="gay-hr">
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<section class="row" style="margin-top: 4vh">
|
||||||
|
<section class="col">
|
||||||
|
<link rel="stylesheet" href="/css/carousel.css">
|
||||||
|
<!-- Slideshow container -->
|
||||||
|
<div class="slideshow-container">
|
||||||
|
|
||||||
|
<!-- Full-width images with number and caption text -->
|
||||||
|
<div class="mySlides2 fade">
|
||||||
|
<div class="numbertext">1 / 3</div>
|
||||||
|
<img src="img/trump.jpg" alt="" style="width:100%">
|
||||||
|
<div class="text">Caption Text</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="mySlides2 fade">
|
||||||
|
<div class="numbertext">2 / 3</div>
|
||||||
|
<img src="img/trump.jpg" alt="" style="width:100%">
|
||||||
|
<div class="text">Caption Two</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="mySlides2 fade">
|
||||||
|
<div class="numbertext">3 / 3</div>
|
||||||
|
<img src="img/trump.jpg" alt="" style="width:100%">
|
||||||
|
<div class="text">Caption Three</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="mySlides2 fade">
|
||||||
|
<div class="numbertext">3 / 3</div>
|
||||||
|
<img src="img/trump.jpg" alt="" style="width:100%">
|
||||||
|
<div class="text">Caption Three</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Next and previous buttons -->
|
||||||
|
<a class="prev" onclick="plusSlides(-1, 'mySlides2')" href="#0">❮</a>
|
||||||
|
<a class="next" onclick="plusSlides(1, 'mySlides2')" href="#0">❯</a>
|
||||||
|
</div>
|
||||||
|
<br>
|
||||||
|
|
||||||
|
<!-- The dots/circles -->
|
||||||
|
<div style="text-align:center">
|
||||||
|
<span class="dot" onclick="currentSlide(1, 'mySlides2')"></span>
|
||||||
|
<span class="dot" onclick="currentSlide(2, 'mySlides2')"></span>
|
||||||
|
<span class="dot" onclick="currentSlide(3, 'mySlides2')"></span>
|
||||||
|
<span class="dot" onclick="currentSlide(4, 'mySlides2')"></span>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</section>
|
||||||
|
<section class="row" style="margin-top: 5vh">
|
||||||
|
<div class="col flexy-boi" style="background-position: top center">
|
||||||
|
<h5>Seznam spolků a studentských oborových rad</h5>
|
||||||
|
<hr class="gay-hr">
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<section class="row" style="margin-top: 5vh">
|
||||||
|
<div class="col flexy-boi">
|
||||||
|
<h5 style="color: var(--color-primary)"><b>Najdi ten svůj</b></h5>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<section class="row" style="margin-top: 5vh">
|
||||||
|
<div class="col-1"></div>
|
||||||
|
<div class="col flexy-boi">
|
||||||
|
<div class="horizontal-menu no-underline" style="position: relative; text-decoration: none !important; font-weight: 900">
|
||||||
|
<a href="/#">Sport</a>
|
||||||
|
<a href="/#">Umění</a>
|
||||||
|
<a href="/#">Psychologie</a>
|
||||||
|
<a href="/#">Pedagogika</a>
|
||||||
|
<a href="/#">Logika</a>
|
||||||
|
<a href="/#">Filozofie</a>
|
||||||
|
<a href="/#">Společnost</a>
|
||||||
|
<a href="/#">Hudba</a>
|
||||||
|
<a href="/#">Dějiny</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-1"></div>
|
||||||
|
</section>
|
||||||
|
<section class="row" style="margin-top: 3vh">
|
||||||
|
<div class="col-1"></div>
|
||||||
|
<div class="col">
|
||||||
|
<a href="/#" class="hover-man"><img src="img/trump.jpg" alt=""></a>
|
||||||
|
<a href="/#" class="hover-man"><img src="img/trump.jpg" alt=""></a>
|
||||||
|
<a href="/#" class="hover-man"><img src="img/trump.jpg" alt=""></a>
|
||||||
|
<a href="/#" class="hover-man"><img src="img/trump.jpg" alt=""></a>
|
||||||
|
</div>
|
||||||
|
<div class="col">
|
||||||
|
<a href="/#" class="hover-man"><img src="img/trump.jpg" alt=""></a>
|
||||||
|
<a href="/#" class="hover-man"><img src="img/trump.jpg" alt=""></a>
|
||||||
|
<a href="/#" class="hover-man"><img src="img/trump.jpg" alt=""></a>
|
||||||
|
<a href="/#" class="hover-man"><img src="img/trump.jpg" alt=""></a>
|
||||||
|
</div>
|
||||||
|
<div class="col">
|
||||||
|
<a href="/#" class="hover-man"><img src="img/trump.jpg" alt=""></a>
|
||||||
|
<a href="/#" class="hover-man"><img src="img/trump.jpg" alt=""></a>
|
||||||
|
<a href="/#" class="hover-man"><img src="img/trump.jpg" alt=""></a>
|
||||||
|
<a href="/#" class="hover-man"><img src="img/trump.jpg" alt=""></a>
|
||||||
|
</div>
|
||||||
|
<div class="col-1"></div>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<UpArrow/>
|
||||||
@ -0,0 +1,17 @@
|
|||||||
|
import sirv from 'sirv';
|
||||||
|
import polka from 'polka';
|
||||||
|
import compression from 'compression';
|
||||||
|
import * as sapper from '@sapper/server';
|
||||||
|
|
||||||
|
const { PORT, NODE_ENV } = process.env;
|
||||||
|
const dev = NODE_ENV === 'development';
|
||||||
|
|
||||||
|
polka() // You can also use Express
|
||||||
|
.use(
|
||||||
|
compression({ threshold: 0 }),
|
||||||
|
sirv('static', { dev }),
|
||||||
|
sapper.middleware()
|
||||||
|
)
|
||||||
|
.listen(PORT, err => {
|
||||||
|
if (err) console.log('error', err);
|
||||||
|
});
|
||||||
@ -0,0 +1,82 @@
|
|||||||
|
import { timestamp, files, shell, routes } from '@sapper/service-worker';
|
||||||
|
|
||||||
|
const ASSETS = `cache${timestamp}`;
|
||||||
|
|
||||||
|
// `shell` is an array of all the files generated by the bundler,
|
||||||
|
// `files` is an array of everything in the `static` directory
|
||||||
|
const to_cache = shell.concat(files);
|
||||||
|
const cached = new Set(to_cache);
|
||||||
|
|
||||||
|
self.addEventListener('install', event => {
|
||||||
|
event.waitUntil(
|
||||||
|
caches
|
||||||
|
.open(ASSETS)
|
||||||
|
.then(cache => cache.addAll(to_cache))
|
||||||
|
.then(() => {
|
||||||
|
self.skipWaiting();
|
||||||
|
})
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
self.addEventListener('activate', event => {
|
||||||
|
event.waitUntil(
|
||||||
|
caches.keys().then(async keys => {
|
||||||
|
// delete old caches
|
||||||
|
for (const key of keys) {
|
||||||
|
if (key !== ASSETS) await caches.delete(key);
|
||||||
|
}
|
||||||
|
|
||||||
|
self.clients.claim();
|
||||||
|
})
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
self.addEventListener('fetch', event => {
|
||||||
|
if (event.request.method !== 'GET' || event.request.headers.has('range')) return;
|
||||||
|
|
||||||
|
const url = new URL(event.request.url);
|
||||||
|
|
||||||
|
// don't try to handle e.g. data: URIs
|
||||||
|
if (!url.protocol.startsWith('http')) return;
|
||||||
|
|
||||||
|
// ignore dev server requests
|
||||||
|
if (url.hostname === self.location.hostname && url.port !== self.location.port) return;
|
||||||
|
|
||||||
|
// always serve static files and bundler-generated assets from cache
|
||||||
|
if (url.host === self.location.host && cached.has(url.pathname)) {
|
||||||
|
event.respondWith(caches.match(event.request));
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// for pages, you might want to serve a shell `service-worker-index.html` file,
|
||||||
|
// which Sapper has generated for you. It's not right for every
|
||||||
|
// app, but if it's right for yours then uncomment this section
|
||||||
|
/*
|
||||||
|
if (url.origin === self.origin && routes.find(route => route.pattern.test(url.pathname))) {
|
||||||
|
event.respondWith(caches.match('/service-worker-index.html'));
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
*/
|
||||||
|
|
||||||
|
if (event.request.cache === 'only-if-cached') return;
|
||||||
|
|
||||||
|
// for everything else, try the network first, falling back to
|
||||||
|
// cache if the user is offline. (If the pages never change, you
|
||||||
|
// might prefer a cache-first approach to a network-first one.)
|
||||||
|
event.respondWith(
|
||||||
|
caches
|
||||||
|
.open(`offline${timestamp}`)
|
||||||
|
.then(async cache => {
|
||||||
|
try {
|
||||||
|
const response = await fetch(event.request);
|
||||||
|
cache.put(event.request, response.clone());
|
||||||
|
return response;
|
||||||
|
} catch(err) {
|
||||||
|
const response = await cache.match(event.request);
|
||||||
|
if (response) return response;
|
||||||
|
|
||||||
|
throw err;
|
||||||
|
}
|
||||||
|
})
|
||||||
|
);
|
||||||
|
});
|
||||||
@ -0,0 +1,32 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html id="html">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title></title>
|
||||||
|
<meta name="author" content="">
|
||||||
|
<meta name="description" content="">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
|
||||||
|
%sapper.base%
|
||||||
|
|
||||||
|
<link href="/css/normalize.css" rel="stylesheet">
|
||||||
|
<link rel="stylesheet" href="https://unpkg.com/chota@latest">
|
||||||
|
<link href="/main.css" rel="stylesheet">
|
||||||
|
|
||||||
|
%sapper.scripts%
|
||||||
|
|
||||||
|
%sapper.styles%
|
||||||
|
|
||||||
|
%sapper.head%
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body id="body" class="sapper">%sapper.html%</body>
|
||||||
|
|
||||||
|
<!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>-->
|
||||||
|
<!--<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>-->
|
||||||
|
<script src="/js/uilang.js"></script>
|
||||||
|
<script src="/js/carousel.js"></script>
|
||||||
|
<script src="/js/particles.js"></script>
|
||||||
|
<script src="/js/script.js"></script>
|
||||||
|
</html>
|
||||||
@ -0,0 +1,33 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
||||||
|
<meta name="theme-color" content="#333333">
|
||||||
|
|
||||||
|
%sapper.base%
|
||||||
|
|
||||||
|
<link rel="stylesheet" href="global.css">
|
||||||
|
<link rel="manifest" href="manifest.json" crossorigin="use-credentials">
|
||||||
|
<link rel="icon" type="image/png" href="favicon.png">
|
||||||
|
|
||||||
|
<!-- Sapper creates a <script> tag containing `src/client.js`
|
||||||
|
and anything else it needs to hydrate the app and
|
||||||
|
initialise the router -->
|
||||||
|
%sapper.scripts%
|
||||||
|
|
||||||
|
<!-- Sapper generates a <style> tag containing critical CSS
|
||||||
|
for the current page. CSS for the rest of the app is
|
||||||
|
lazily loaded when it precaches secondary pages -->
|
||||||
|
%sapper.styles%
|
||||||
|
|
||||||
|
<!-- This contains the contents of the <svelte:head> component, if
|
||||||
|
the current page has one -->
|
||||||
|
%sapper.head%
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<!-- The application will be rendered inside this element,
|
||||||
|
because `src/client.js` references it -->
|
||||||
|
<div id="sapper">%sapper.html%</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -0,0 +1,104 @@
|
|||||||
|
|
||||||
|
* {box-sizing:border-box}
|
||||||
|
|
||||||
|
/* Slideshow container */
|
||||||
|
.slideshow-container {
|
||||||
|
max-width: 1000px;
|
||||||
|
position: relative;
|
||||||
|
margin: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Hide the images by default */
|
||||||
|
.mySlides {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Next & previous buttons */
|
||||||
|
.prev, .next {
|
||||||
|
cursor: pointer;
|
||||||
|
position: absolute;
|
||||||
|
top: 40%;
|
||||||
|
width: auto;
|
||||||
|
margin-top: -22px;
|
||||||
|
padding: 16px;
|
||||||
|
color: var(--color-primary);
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: calc(var(--font-size) * 2);
|
||||||
|
transition: 0.6s ease;
|
||||||
|
border-radius: 0 3px 3px 0;
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Position the "next button" to the right */
|
||||||
|
.next {
|
||||||
|
right: -9vw;
|
||||||
|
border-radius: 3px 0 0 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.prev {
|
||||||
|
left: -9vw
|
||||||
|
}
|
||||||
|
|
||||||
|
/* On hover, add a black background color with a little bit see-through */
|
||||||
|
.prev:hover, .next:hover {
|
||||||
|
filter: brightness(50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Caption text */
|
||||||
|
.text {
|
||||||
|
color: #f2f2f2;
|
||||||
|
font-size: 15px;
|
||||||
|
padding: 8px 12px;
|
||||||
|
position: absolute;
|
||||||
|
bottom: 8px;
|
||||||
|
width: 100%;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Number text (1/3 etc) */
|
||||||
|
.numbertext {
|
||||||
|
color: #f2f2f2;
|
||||||
|
font-size: 12px;
|
||||||
|
padding: 8px 12px;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* The dots/bullets/indicators */
|
||||||
|
.dot {
|
||||||
|
cursor: pointer;
|
||||||
|
height: 1.5vw;
|
||||||
|
width: 1.5vw;
|
||||||
|
margin: 0 2px;
|
||||||
|
background-color: #fff;
|
||||||
|
border-radius: 50%;
|
||||||
|
border-size: 0.05vw;
|
||||||
|
border: solid;
|
||||||
|
border-color: var(--color-primary);
|
||||||
|
display: inline-block;
|
||||||
|
transition: background-color 0.6s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.carousel-active, .dot:hover {
|
||||||
|
background-color: var(--color-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Fading animation */
|
||||||
|
.fade {
|
||||||
|
-webkit-animation-name: fade;
|
||||||
|
-webkit-animation-duration: 1.5s;
|
||||||
|
animation-name: fade;
|
||||||
|
animation-duration: 1.5s;
|
||||||
|
}
|
||||||
|
|
||||||
|
@-webkit-keyframes fade {
|
||||||
|
from {opacity: .4}
|
||||||
|
to {opacity: 1}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes fade {
|
||||||
|
from {opacity: .4}
|
||||||
|
to {opacity: 1}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
Binary file not shown.
@ -0,0 +1,4 @@
|
|||||||
|
@font-face {
|
||||||
|
font-family: 'Gill Sans MT';
|
||||||
|
src: url("/fonts/gill-sans-mt.ttf");
|
||||||
|
}
|
||||||
@ -0,0 +1,4 @@
|
|||||||
|
@font-face
|
||||||
|
font-family: 'Gill Sans MT'
|
||||||
|
src: url("/fonts/gill-sans-mt.ttf")
|
||||||
|
|
||||||
@ -0,0 +1,264 @@
|
|||||||
|
@import "/css/fonts.css";
|
||||||
|
html,
|
||||||
|
body,
|
||||||
|
.navigation-overlay {
|
||||||
|
min-height: 100vh;
|
||||||
|
}
|
||||||
|
body > canvas {
|
||||||
|
position: fixed;
|
||||||
|
height: 100vh;
|
||||||
|
width: 100vw;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
z-index: -2;
|
||||||
|
}
|
||||||
|
.navigation-overlay {
|
||||||
|
position: absolute;
|
||||||
|
transition: 0.7s;
|
||||||
|
opacity: 0;
|
||||||
|
z-index: -1000;
|
||||||
|
}
|
||||||
|
.open-nav {
|
||||||
|
opacity: 1;
|
||||||
|
z-index: 1000;
|
||||||
|
}
|
||||||
|
.cross {
|
||||||
|
cursor: pointer;
|
||||||
|
position: absolute;
|
||||||
|
left: 2vh;
|
||||||
|
top: 2vh;
|
||||||
|
}
|
||||||
|
.cross .idle {
|
||||||
|
opacity: 1;
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
transition: 0.5s;
|
||||||
|
}
|
||||||
|
.cross .active {
|
||||||
|
opacity: 0;
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
transition: 0.5s;
|
||||||
|
}
|
||||||
|
.cross img {
|
||||||
|
max-width: inherit;
|
||||||
|
}
|
||||||
|
.cross:hover .active {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
.cross:hover .idle {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
.menu-btn {
|
||||||
|
left: 3vh;
|
||||||
|
top: 3vh;
|
||||||
|
}
|
||||||
|
.logo {
|
||||||
|
position: absolute;
|
||||||
|
right: 3vh;
|
||||||
|
top: 3vh;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: 0.2s;
|
||||||
|
}
|
||||||
|
.logo:hover {
|
||||||
|
transform: scale(1.15);
|
||||||
|
}
|
||||||
|
.menu {
|
||||||
|
position: absolute;
|
||||||
|
left: 40vh;
|
||||||
|
top: 20vh;
|
||||||
|
}
|
||||||
|
.menu ul {
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
.menu ul li {
|
||||||
|
font-family: "Gill Sans MT";
|
||||||
|
font-size: 5vh;
|
||||||
|
margin-bottom: 5vh;
|
||||||
|
}
|
||||||
|
.menu ul li a {
|
||||||
|
cursor: pointer;
|
||||||
|
color: #d73648;
|
||||||
|
transition: 0.3s;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
.menu ul li a:hover {
|
||||||
|
text-decoration: underline;
|
||||||
|
color: #7c242e;
|
||||||
|
}
|
||||||
|
#root {
|
||||||
|
transition: 0.6s;
|
||||||
|
min-height: 100vh;
|
||||||
|
}
|
||||||
|
canvas {
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
width: 100vw;
|
||||||
|
height: 100vh;
|
||||||
|
z-index: -1;
|
||||||
|
}
|
||||||
|
:root {
|
||||||
|
--color-primary: #d73648;
|
||||||
|
--color-lightGrey: #d2d6dd;
|
||||||
|
--color-grey: #747681;
|
||||||
|
--color-darkGrey: #3f4144;
|
||||||
|
--color-error: #d43939;
|
||||||
|
--color-success: #28bd14;
|
||||||
|
--grid-maxWidth: 120rem;
|
||||||
|
--grid-gutter: 0rem;
|
||||||
|
--font-size: 2.5vw;
|
||||||
|
--font-family: "Gill Sans MT", sans-serif;
|
||||||
|
}
|
||||||
|
.darken {
|
||||||
|
opacity: 0;
|
||||||
|
z-index: -1;
|
||||||
|
}
|
||||||
|
.fullheight {
|
||||||
|
height: 100vh;
|
||||||
|
}
|
||||||
|
.cool-button {
|
||||||
|
padding: 3rem 9rem;
|
||||||
|
font-size: calc(var(--font-size) * 0.7);
|
||||||
|
}
|
||||||
|
.smol-button {
|
||||||
|
background-color: #fff !important;
|
||||||
|
border: solid 0.5vh var(--color-primary);
|
||||||
|
color: #000 !important;
|
||||||
|
padding: 1rem 3rem;
|
||||||
|
}
|
||||||
|
.horizontal-menu {
|
||||||
|
font-size: calc(var(--font-size) / 2);
|
||||||
|
position: absolute;
|
||||||
|
display: flex;
|
||||||
|
bottom: 5vh;
|
||||||
|
left: 0;
|
||||||
|
padding-left: 8vw;
|
||||||
|
padding-right: 8vw;
|
||||||
|
width: 100%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
justify-content: space-between;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: baseline;
|
||||||
|
}
|
||||||
|
.horizontal-menu a {
|
||||||
|
text-decoration: underline;
|
||||||
|
color: #000;
|
||||||
|
font-size: calc(var(--font-size) / 2.4);
|
||||||
|
cursor: pointer;
|
||||||
|
transition: 0.2s;
|
||||||
|
}
|
||||||
|
.horizontal-menu a:hover {
|
||||||
|
color: var(--color-primary);
|
||||||
|
}
|
||||||
|
.up-arrow {
|
||||||
|
position: fixed;
|
||||||
|
top: 80vh;
|
||||||
|
right: 5vw;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.gay-hr {
|
||||||
|
width: 10vw;
|
||||||
|
height: 0.6vh;
|
||||||
|
background-color: var(--color-primary);
|
||||||
|
border-radius: 0.3vh;
|
||||||
|
}
|
||||||
|
.bg-circle {
|
||||||
|
background-image: url("/svg/bg-circle.svg");
|
||||||
|
background-size: contain;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position: center center;
|
||||||
|
}
|
||||||
|
.bg-square {
|
||||||
|
background-image: url("/svg/bg-square.svg");
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position: top right;
|
||||||
|
}
|
||||||
|
.bg-center {
|
||||||
|
background-position: center center;
|
||||||
|
}
|
||||||
|
.bg-auto {
|
||||||
|
background-size: auto auto;
|
||||||
|
}
|
||||||
|
.bg-half {
|
||||||
|
background-size: 50%;
|
||||||
|
}
|
||||||
|
.smol-video {
|
||||||
|
width: 42vw;
|
||||||
|
}
|
||||||
|
.flexy-boi {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
flex-direction: column;
|
||||||
|
line-height: 1;
|
||||||
|
}
|
||||||
|
.side-line {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
}
|
||||||
|
.side-line::before {
|
||||||
|
content: "";
|
||||||
|
display: inline;
|
||||||
|
margin-right: 1vw;
|
||||||
|
box-sizing: border-box;
|
||||||
|
border: solid 0.125vw var(--color-primary);
|
||||||
|
border-radius: 0.125vw;
|
||||||
|
}
|
||||||
|
.number-gay {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
line-height: 1;
|
||||||
|
margin-bottom: 4vh;
|
||||||
|
margin-right: 2vw;
|
||||||
|
margin-left: 2vw;
|
||||||
|
margin-top: 8vh;
|
||||||
|
}
|
||||||
|
.number-gay span {
|
||||||
|
color: var(--color-primary);
|
||||||
|
font-size: calc(var(--font-size) * 2.2);
|
||||||
|
}
|
||||||
|
.number-gay p {
|
||||||
|
font-size: calc(var(--font-size) / 2.3);
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
.number-gay li {
|
||||||
|
font-size: calc(var(--font-size) / 2.6);
|
||||||
|
}
|
||||||
|
.number-gay ol {
|
||||||
|
margin-top: 0;
|
||||||
|
margin-left: 2vw;
|
||||||
|
}
|
||||||
|
.number-gay ol li {
|
||||||
|
counter-increment: list;
|
||||||
|
list-style-type: none;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.number-gay ol li:before {
|
||||||
|
font-size: 110%;
|
||||||
|
font-weight: 900;
|
||||||
|
color: var(--color-primary);
|
||||||
|
content: counter(list, lower-alpha) ") ";
|
||||||
|
}
|
||||||
|
.row {
|
||||||
|
text-transform: none;
|
||||||
|
}
|
||||||
|
.hover-man {
|
||||||
|
transition: 0.3s;
|
||||||
|
}
|
||||||
|
.hover-man:hover {
|
||||||
|
filter: brightness(0.7) contrast(0.7);
|
||||||
|
}
|
||||||
|
.down {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
.right {
|
||||||
|
align-items: center;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
}
|
||||||
|
.no-underline a {
|
||||||
|
text-decoration: none !important;
|
||||||
|
}
|
||||||
@ -0,0 +1,349 @@
|
|||||||
|
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
|
||||||
|
|
||||||
|
/* Document
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 1. Correct the line height in all browsers.
|
||||||
|
* 2. Prevent adjustments of font size after orientation changes in iOS.
|
||||||
|
*/
|
||||||
|
|
||||||
|
html {
|
||||||
|
line-height: 1.15; /* 1 */
|
||||||
|
-webkit-text-size-adjust: 100%; /* 2 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Sections
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Remove the margin in all browsers.
|
||||||
|
*/
|
||||||
|
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Render the `main` element consistently in IE.
|
||||||
|
*/
|
||||||
|
|
||||||
|
main {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Correct the font size and margin on `h1` elements within `section` and
|
||||||
|
* `article` contexts in Chrome, Firefox, and Safari.
|
||||||
|
*/
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-size: 2em;
|
||||||
|
margin: 0.67em 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Grouping content
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 1. Add the correct box sizing in Firefox.
|
||||||
|
* 2. Show the overflow in Edge and IE.
|
||||||
|
*/
|
||||||
|
|
||||||
|
hr {
|
||||||
|
box-sizing: content-box; /* 1 */
|
||||||
|
height: 0; /* 1 */
|
||||||
|
overflow: visible; /* 2 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 1. Correct the inheritance and scaling of font size in all browsers.
|
||||||
|
* 2. Correct the odd `em` font sizing in all browsers.
|
||||||
|
*/
|
||||||
|
|
||||||
|
pre {
|
||||||
|
font-family: monospace, monospace; /* 1 */
|
||||||
|
font-size: 1em; /* 2 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Text-level semantics
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Remove the gray background on active links in IE 10.
|
||||||
|
*/
|
||||||
|
|
||||||
|
a {
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 1. Remove the bottom border in Chrome 57-
|
||||||
|
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
|
||||||
|
*/
|
||||||
|
|
||||||
|
abbr[title] {
|
||||||
|
border-bottom: none; /* 1 */
|
||||||
|
text-decoration: underline; /* 2 */
|
||||||
|
text-decoration: underline dotted; /* 2 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Add the correct font weight in Chrome, Edge, and Safari.
|
||||||
|
*/
|
||||||
|
|
||||||
|
b,
|
||||||
|
strong {
|
||||||
|
font-weight: bolder;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 1. Correct the inheritance and scaling of font size in all browsers.
|
||||||
|
* 2. Correct the odd `em` font sizing in all browsers.
|
||||||
|
*/
|
||||||
|
|
||||||
|
code,
|
||||||
|
kbd,
|
||||||
|
samp {
|
||||||
|
font-family: monospace, monospace; /* 1 */
|
||||||
|
font-size: 1em; /* 2 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Add the correct font size in all browsers.
|
||||||
|
*/
|
||||||
|
|
||||||
|
small {
|
||||||
|
font-size: 80%;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Prevent `sub` and `sup` elements from affecting the line height in
|
||||||
|
* all browsers.
|
||||||
|
*/
|
||||||
|
|
||||||
|
sub,
|
||||||
|
sup {
|
||||||
|
font-size: 75%;
|
||||||
|
line-height: 0;
|
||||||
|
position: relative;
|
||||||
|
vertical-align: baseline;
|
||||||
|
}
|
||||||
|
|
||||||
|
sub {
|
||||||
|
bottom: -0.25em;
|
||||||
|
}
|
||||||
|
|
||||||
|
sup {
|
||||||
|
top: -0.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Embedded content
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Remove the border on images inside links in IE 10.
|
||||||
|
*/
|
||||||
|
|
||||||
|
img {
|
||||||
|
border-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Forms
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 1. Change the font styles in all browsers.
|
||||||
|
* 2. Remove the margin in Firefox and Safari.
|
||||||
|
*/
|
||||||
|
|
||||||
|
button,
|
||||||
|
input,
|
||||||
|
optgroup,
|
||||||
|
select,
|
||||||
|
textarea {
|
||||||
|
font-family: inherit; /* 1 */
|
||||||
|
font-size: 100%; /* 1 */
|
||||||
|
line-height: 1.15; /* 1 */
|
||||||
|
margin: 0; /* 2 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Show the overflow in IE.
|
||||||
|
* 1. Show the overflow in Edge.
|
||||||
|
*/
|
||||||
|
|
||||||
|
button,
|
||||||
|
input { /* 1 */
|
||||||
|
overflow: visible;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Remove the inheritance of text transform in Edge, Firefox, and IE.
|
||||||
|
* 1. Remove the inheritance of text transform in Firefox.
|
||||||
|
*/
|
||||||
|
|
||||||
|
button,
|
||||||
|
select { /* 1 */
|
||||||
|
text-transform: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Correct the inability to style clickable types in iOS and Safari.
|
||||||
|
*/
|
||||||
|
|
||||||
|
button,
|
||||||
|
[type="button"],
|
||||||
|
[type="reset"],
|
||||||
|
[type="submit"] {
|
||||||
|
-webkit-appearance: button;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Remove the inner border and padding in Firefox.
|
||||||
|
*/
|
||||||
|
|
||||||
|
button::-moz-focus-inner,
|
||||||
|
[type="button"]::-moz-focus-inner,
|
||||||
|
[type="reset"]::-moz-focus-inner,
|
||||||
|
[type="submit"]::-moz-focus-inner {
|
||||||
|
border-style: none;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Restore the focus styles unset by the previous rule.
|
||||||
|
*/
|
||||||
|
|
||||||
|
button:-moz-focusring,
|
||||||
|
[type="button"]:-moz-focusring,
|
||||||
|
[type="reset"]:-moz-focusring,
|
||||||
|
[type="submit"]:-moz-focusring {
|
||||||
|
outline: 1px dotted ButtonText;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Correct the padding in Firefox.
|
||||||
|
*/
|
||||||
|
|
||||||
|
fieldset {
|
||||||
|
padding: 0.35em 0.75em 0.625em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 1. Correct the text wrapping in Edge and IE.
|
||||||
|
* 2. Correct the color inheritance from `fieldset` elements in IE.
|
||||||
|
* 3. Remove the padding so developers are not caught out when they zero out
|
||||||
|
* `fieldset` elements in all browsers.
|
||||||
|
*/
|
||||||
|
|
||||||
|
legend {
|
||||||
|
box-sizing: border-box; /* 1 */
|
||||||
|
color: inherit; /* 2 */
|
||||||
|
display: table; /* 1 */
|
||||||
|
max-width: 100%; /* 1 */
|
||||||
|
padding: 0; /* 3 */
|
||||||
|
white-space: normal; /* 1 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Add the correct vertical alignment in Chrome, Firefox, and Opera.
|
||||||
|
*/
|
||||||
|
|
||||||
|
progress {
|
||||||
|
vertical-align: baseline;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Remove the default vertical scrollbar in IE 10+.
|
||||||
|
*/
|
||||||
|
|
||||||
|
textarea {
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 1. Add the correct box sizing in IE 10.
|
||||||
|
* 2. Remove the padding in IE 10.
|
||||||
|
*/
|
||||||
|
|
||||||
|
[type="checkbox"],
|
||||||
|
[type="radio"] {
|
||||||
|
box-sizing: border-box; /* 1 */
|
||||||
|
padding: 0; /* 2 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Correct the cursor style of increment and decrement buttons in Chrome.
|
||||||
|
*/
|
||||||
|
|
||||||
|
[type="number"]::-webkit-inner-spin-button,
|
||||||
|
[type="number"]::-webkit-outer-spin-button {
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 1. Correct the odd appearance in Chrome and Safari.
|
||||||
|
* 2. Correct the outline style in Safari.
|
||||||
|
*/
|
||||||
|
|
||||||
|
[type="search"] {
|
||||||
|
-webkit-appearance: textfield; /* 1 */
|
||||||
|
outline-offset: -2px; /* 2 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Remove the inner padding in Chrome and Safari on macOS.
|
||||||
|
*/
|
||||||
|
|
||||||
|
[type="search"]::-webkit-search-decoration {
|
||||||
|
-webkit-appearance: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 1. Correct the inability to style clickable types in iOS and Safari.
|
||||||
|
* 2. Change font properties to `inherit` in Safari.
|
||||||
|
*/
|
||||||
|
|
||||||
|
::-webkit-file-upload-button {
|
||||||
|
-webkit-appearance: button; /* 1 */
|
||||||
|
font: inherit; /* 2 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Interactive
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Add the correct display in Edge, IE 10+, and Firefox.
|
||||||
|
*/
|
||||||
|
|
||||||
|
details {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Add the correct display in all browsers.
|
||||||
|
*/
|
||||||
|
|
||||||
|
summary {
|
||||||
|
display: list-item;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Misc
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Add the correct display in IE 10+.
|
||||||
|
*/
|
||||||
|
|
||||||
|
template {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Add the correct display in IE 10.
|
||||||
|
*/
|
||||||
|
|
||||||
|
[hidden] {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 3.1 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue