pedf
/
spolky
Archived
1
0
Fork 0

more lint

master
Lukáš Hozda 4 years ago
parent 5d0ec2a95a
commit 562998a6e0

@ -160,6 +160,7 @@ Povinnosti a práva spolkuspolkem dělat se dělá tady:
</p> </p>
</div> </div>
</div> </div>
<div class="spacer"></div>
</div> </div>
<div class="col-1"></div> <div class="col-1"></div>
</section> </section>

@ -1,7 +1,20 @@
<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"> <section class="row fullheight">
<div class="logo"> <Logo/>
<a href="https://pedf.cuni.cz/PEDF-1.html"><img src="img/logo.png"></a>
</div>
<div class="row" style="width: 100%"> <div class="row" style="width: 100%">
<section class="col-1"></section> <section class="col-1"></section>
<section class="col-5"> <section class="col-5">
@ -279,4 +292,7 @@
</div> </div>
<div class="col-1"></div> <div class="col-1"></div>
</section> </section>
<div class="spacer"></div>
</main>
<UpArrow/>

13
package-lock.json generated

@ -1059,6 +1059,14 @@
"to-fast-properties": "^2.0.0" "to-fast-properties": "^2.0.0"
} }
}, },
"@beyonk/svelte-carousel": {
"version": "2.8.0",
"resolved": "https://registry.npmjs.org/@beyonk/svelte-carousel/-/svelte-carousel-2.8.0.tgz",
"integrity": "sha512-kWObh9XqI7tfzltySmTZ0/ULE5MjLqd0jhsGhr+GnVfIkCOGwTHwQxzheLjC1dkBk0Z4wucLxBwUeSxqtGF9Ww==",
"requires": {
"siema": "^1.5.1"
}
},
"@polka/url": { "@polka/url": {
"version": "1.0.0-next.11", "version": "1.0.0-next.11",
"resolved": "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.11.tgz", "resolved": "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.11.tgz",
@ -2197,6 +2205,11 @@
"integrity": "sha512-Imf4gH+8WQmT1GvxS/x79qpmfnE6m50hyN1ucatX+7oMCgmaF8obZWCPIzSUe6+P+YmXM46lkP2pxiV2/lt9Og==", "integrity": "sha512-Imf4gH+8WQmT1GvxS/x79qpmfnE6m50hyN1ucatX+7oMCgmaF8obZWCPIzSUe6+P+YmXM46lkP2pxiV2/lt9Og==",
"dev": true "dev": true
}, },
"siema": {
"version": "1.5.1",
"resolved": "https://registry.npmjs.org/siema/-/siema-1.5.1.tgz",
"integrity": "sha1-7/MSt36DQPpNgdXQU+u+uRE/+Ig="
},
"sirv": { "sirv": {
"version": "1.0.6", "version": "1.0.6",
"resolved": "https://registry.npmjs.org/sirv/-/sirv-1.0.6.tgz", "resolved": "https://registry.npmjs.org/sirv/-/sirv-1.0.6.tgz",

@ -12,6 +12,7 @@
"test": "run-p --race dev cy:run" "test": "run-p --race dev cy:run"
}, },
"dependencies": { "dependencies": {
"@beyonk/svelte-carousel": "^2.8.0",
"animejs": "^3.2.0", "animejs": "^3.2.0",
"compression": "^1.7.1", "compression": "^1.7.1",
"polka": "next", "polka": "next",

@ -1,12 +1,20 @@
<style> <style>
.up-arrow { .up-arrow {
position: fixed; position: fixed;
width: 1em;
height: 1em;
top: 80vh; top: 80vh;
right: 5vw; right: 5vw;
cursor: pointer; cursor: pointer;
} }
</style> </style>
<div class="up-arrow"> <script>
function scroll() {
window.scrollTo({top: 0, behavior: 'smooth'});
}
</script>
<div class="up-arrow" on:click="{scroll}">
<img src="/svg/up-arrow.svg" alt="up arrow"> <img src="/svg/up-arrow.svg" alt="up arrow">
</div> </div>

@ -33,13 +33,13 @@
font-size: 0.5em; font-size: 0.5em;
transition: .2s ease; transition: .2s ease;
} }
.label:hover { /*.label:hover {
border: solid 0.1em #d73648; border: solid 0.1em #d73648;
} }*/
.label a { .label a {
color: #000; color: #000;
} }
.label a:hover { label a:hover {
color: #d73648; color: #d73648;
opacity: 1 !important; opacity: 1 !important;
} }
@ -238,5 +238,6 @@
<div class="pedftext"> <div class="pedftext">
<p>Pedagogická fakulta</p> <p>Pedagogická fakulta</p>
<b style="color: #d73648">Univerzita Karlova</b> <b style="color: #d73648">Univerzita Karlova</b>
<img src="/svg/zobacek.svg" style="width:0.8em; height: 0.8em; position: absolute; left: 0; bottom: 0; margin-left: -0.5em; margin-bottom: -0.5em; fill: #d73648">
</div> </div>
</main> </main>

@ -208,6 +208,7 @@
<p style="font-size: calc(var(--font-size) / 1.3); margin-top: 5vh; text-align: justify"> <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. Zde odpadá většina formálních náležitostí. Je třeba nahlásit na fakultě změnu předsedy.
</p> </p>
<div class="spacer"></div>
</div> </div>
</section> </section>
</main> </main>

@ -246,6 +246,7 @@
<li>Tento předpis</li> <li>Tento předpis</li>
<li>Tento předpis</li> <li>Tento předpis</li>
</ul> </ul>
<div class="spacer"></div>
</div> </div>
</section> </section>
</main> </main>

@ -8,6 +8,7 @@
import Logo from '../components/logo.svelte'; import Logo from '../components/logo.svelte';
import UpArrow from '../components/up.svelte'; import UpArrow from '../components/up.svelte';
import MenuBtn from '../components/menu-btn.svelte'; import MenuBtn from '../components/menu-btn.svelte';
import Carousel from '@beyonk/svelte-carousel';
</script> </script>
<MenuBtn/> <MenuBtn/>
@ -145,48 +146,12 @@
</section> </section>
<section class="row" style="margin-top: 4vh"> <section class="row" style="margin-top: 4vh">
<section class="col"> <section class="col">
<link rel="stylesheet" href="/css/carousel.css"> <Carousel>
<!-- Slideshow container --> <img src="https://source.unsplash.com/random/600x300?a" alt="" style="width: 100%">
<div class="slideshow-container"> <img src="https://source.unsplash.com/random/600x300?s" alt="" style="width: 100%">
<img src="https://source.unsplash.com/random/600x300?c" alt="" style="width: 100%">
<!-- Full-width images with number and caption text --> <img src="https://source.unsplash.com/random/600x300?v" alt="" style="width: 100%">
<div class="mySlides fade"> </Carousel>
<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">&#10094;</a>
<a class="next" onclick="plusSlides(1)" href="#0">&#10095;</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> </section>
<section class="row" style="margin-top: 14vh"> <section class="row" style="margin-top: 14vh">
@ -198,48 +163,12 @@
</section> </section>
<section class="row" style="margin-top: 4vh"> <section class="row" style="margin-top: 4vh">
<section class="col"> <section class="col">
<link rel="stylesheet" href="/css/carousel.css"> <Carousel>
<!-- Slideshow container --> <img src="https://source.unsplash.com/random/600x300?as" alt="" style="width: 100%">
<div class="slideshow-container"> <img src="https://source.unsplash.com/random/600x300?ss" alt="" style="width: 100%">
<img src="https://source.unsplash.com/random/600x300?cs" alt="" style="width: 100%">
<!-- Full-width images with number and caption text --> <img src="https://source.unsplash.com/random/600x300?vs" alt="" style="width: 100%">
<div class="mySlides2 fade"> </Carousel>
<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">&#10094;</a>
<a class="next" onclick="plusSlides(1, 'mySlides2')" href="#0">&#10095;</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> </section>
<section class="row" style="margin-top: 5vh"> <section class="row" style="margin-top: 5vh">
@ -273,22 +202,22 @@
<section class="row" style="margin-top: 3vh"> <section class="row" style="margin-top: 3vh">
<div class="col-1"></div> <div class="col-1"></div>
<div class="col"> <div class="col">
<a href="/#" class="hover-man"><img src="img/trump.jpg" alt=""></a> <a class="hover-man"><img src="https://source.unsplash.com/random/400x300" alt=""></a>
<a href="/#" class="hover-man"><img src="img/trump.jpg" alt=""></a> <a class="hover-man"><img src="https://source.unsplash.com/random/400x300" alt=""></a>
<a href="/#" class="hover-man"><img src="img/trump.jpg" alt=""></a> <a class="hover-man"><img src="https://source.unsplash.com/random/400x300" alt=""></a>
<a href="/#" class="hover-man"><img src="img/trump.jpg" alt=""></a> <a class="hover-man"><img src="https://source.unsplash.com/random/400x300" alt=""></a>
</div> </div>
<div class="col"> <div class="col">
<a href="/#" class="hover-man"><img src="img/trump.jpg" alt=""></a> <a class="hover-man"><img src="https://source.unsplash.com/random/400x300" alt=""></a>
<a href="/#" class="hover-man"><img src="img/trump.jpg" alt=""></a> <a class="hover-man"><img src="https://source.unsplash.com/random/400x300" alt=""></a>
<a href="/#" class="hover-man"><img src="img/trump.jpg" alt=""></a> <a class="hover-man"><img src="https://source.unsplash.com/random/400x300" alt=""></a>
<a href="/#" class="hover-man"><img src="img/trump.jpg" alt=""></a> <a class="hover-man"><img src="https://source.unsplash.com/random/400x300" alt=""></a>
</div> </div>
<div class="col"> <div class="col">
<a href="/#" class="hover-man"><img src="img/trump.jpg" alt=""></a> <a class="hover-man"><img src="https://source.unsplash.com/random/400x300" alt=""></a>
<a href="/#" class="hover-man"><img src="img/trump.jpg" alt=""></a> <a class="hover-man"><img src="https://source.unsplash.com/random/400x300" alt=""></a>
<a href="/#" class="hover-man"><img src="img/trump.jpg" alt=""></a> <a class="hover-man"><img src="https://source.unsplash.com/random/400x300" alt=""></a>
<a href="/#" class="hover-man"><img src="img/trump.jpg" alt=""></a> <a class="hover-man"><img src="https://source.unsplash.com/random/400x300" alt=""></a>
</div> </div>
<div class="col-1"></div> <div class="col-1"></div>
</section> </section>

@ -26,7 +26,6 @@
<!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.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="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>-->
<script src="/js/uilang.js"></script> <script src="/js/uilang.js"></script>
<script src="/js/carousel.js"></script>
<script src="/js/particles.js"></script> <script src="/js/particles.js"></script>
<script src="/js/script.js"></script> <script src="/js/script.js"></script>
</html> </html>

@ -2,3 +2,8 @@
font-family: 'Gill Sans MT'; font-family: 'Gill Sans MT';
src: url("/fonts/gill-sans-mt.ttf"); src: url("/fonts/gill-sans-mt.ttf");
} }
@font-face {
font-family: "Moderat-Regular";
src: url("/fonts/0c3856a335fdfdb8b0652f7c3d367fdd.eot"); /* IE9*/
src: url("/fonts/0c3856a335fdfdb8b0652f7c3d367fdd.eot?#iefix") format("embedded-opentype"), url("/fonts/0c3856a335fdfdb8b0652f7c3d367fdd.woff2") format("woff2"), url("/fonts/0c3856a335fdfdb8b0652f7c3d367fdd.woff") format("woff"), url("/fonts/0c3856a335fdfdb8b0652f7c3d367fdd.ttf") format("truetype"), url("/fonts/0c3856a335fdfdb8b0652f7c3d367fdd.svg#Moderat-Regular") format("svg"); /* iOS 4.1- */
}

@ -2,3 +2,11 @@
font-family: 'Gill Sans MT' font-family: 'Gill Sans MT'
src: url("/fonts/gill-sans-mt.ttf") src: url("/fonts/gill-sans-mt.ttf")
@font-face {font-family: "Moderat-Regular";
src: url("/fonts/0c3856a335fdfdb8b0652f7c3d367fdd.eot"); /* IE9*/
src: url("/fonts/0c3856a335fdfdb8b0652f7c3d367fdd.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
url("/fonts/0c3856a335fdfdb8b0652f7c3d367fdd.woff2") format("woff2"), /* chromefirefox */
url("/fonts/0c3856a335fdfdb8b0652f7c3d367fdd.woff") format("woff"), /* chromefirefox */
url("/fonts/0c3856a335fdfdb8b0652f7c3d367fdd.ttf") format("truetype"), /* chromefirefoxoperaSafari, Android, iOS 4.2+*/
url("/fonts/0c3856a335fdfdb8b0652f7c3d367fdd.svg#Moderat-Regular") format("svg"); /* iOS 4.1- */
}

@ -1,264 +0,0 @@
@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;
}

File diff suppressed because it is too large Load Diff

After

Width:  |  Height:  |  Size: 1.4 MiB

@ -53,7 +53,7 @@
"width": 1 "width": 1
}, },
"move": { "move": {
"enable": true, "enable": false,
"speed": 6, "speed": 6,
"direction": "none", "direction": "none",
"random": false, "random": false,

@ -75,7 +75,8 @@ canvas {
--grid-maxWidth: 120rem; --grid-maxWidth: 120rem;
--grid-gutter: 0rem; --grid-gutter: 0rem;
--font-size: 2.5vw; --font-size: 2.5vw;
--font-family: "Gill Sans MT", sans-serif; --font-family: "Moderat Regular", sans-serif;
--font-family-sans: "Moderat Regular", sans-serif;
} }
.darken { .darken {
opacity: 0; opacity: 0;
@ -126,14 +127,15 @@ canvas {
} }
.bg-circle { .bg-circle {
background-image: url("/svg/bg-circle.svg"); background-image: url("/svg/bg-circle.svg");
background-size: contain; background-size: 5em;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center center; background-position: center center;
} }
.bg-square { .bg-square {
background-image: url("/svg/bg-square.svg"); background-image: url("/svg/bg-square.svg");
background-size: 5em;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: top right; background-position: center center;
} }
.bg-center { .bg-center {
background-position: center center; background-position: center center;
@ -228,3 +230,6 @@ canvas {
color: #fff !important; color: #fff !important;
border-color: #888 !important; border-color: #888 !important;
} }
.spacer {
height: 5em;
}

@ -72,7 +72,8 @@ body > canvas
--grid-maxWidth: 120rem --grid-maxWidth: 120rem
--grid-gutter: 0rem --grid-gutter: 0rem
--font-size: 2.5vw --font-size: 2.5vw
--font-family: "Gill Sans MT", sans-serif --font-family: "Moderat Regular", sans-serif
--font-family-sans: "Moderat Regular", sans-serif
.darken .darken
opacity: 0 opacity: 0
@ -122,14 +123,15 @@ body > canvas
.bg-circle .bg-circle
background-image: url("/svg/bg-circle.svg") background-image: url("/svg/bg-circle.svg")
background-size: contain background-size: 5em
background-repeat: no-repeat background-repeat: no-repeat
background-position: center center background-position: center center
.bg-square .bg-square
background-image: url("/svg/bg-square.svg") background-image: url("/svg/bg-square.svg")
background-size: 5em
background-repeat: no-repeat background-repeat: no-repeat
background-position: top right background-position: center center
.bg-center .bg-center
background-position: center center background-position: center center
@ -219,3 +221,7 @@ body > canvas
color: #fff !important; color: #fff !important;
border-color: #888 !important; border-color: #888 !important;
} }
.spacer {
height:5em;
}