Skip to content
Snippets Groups Projects
Commit 858243cd authored by Liliana Sanfilippo's avatar Liliana Sanfilippo
Browse files

deleted static from react branch

parent 81d7c44a
No related branches found
No related tags found
No related merge requests found
......@@ -7,6 +7,4 @@ public
node_modules
versions
code
# React branch
static
wiki
This diff is collapsed.
This diff is collapsed.
//initialize
$(document).ready(function(){
$('.slick-carousel').slick({
infinite: true,
slidesToShow: 1,
adaptiveHeight: true,
autoplay: true,
autoplaySpeed: 2000,
dots: false,
prevArrow: false,
nextArrow: false
});
});
\ No newline at end of file
This diff is collapsed.
/* footer */
footer a {
color: white;
font-weight: bold;
text-decoration: none;
}
.text-white {
color: white !important;
}
:root {
/* our colours*/
--darkpurple: #850F78;
--mediumpurple: #bc15aa;
/*--purple: #B85BD1; */
--highlight2: #F57D22;
--highlight: #F4CC1E;
--lightyellow: #fae99e;
--lightblue: #A0A7F3 ;
--offblack: #32232C ;
--offwhite: #e9dff1;
--ourbeige: #FFF6F2;
--background: #4ea194;
/*igem colours*/
--igemdarkgreen: #006530;
--igemmediumgreen: #019968;
--igemlightgreen: #99cb9a;
}
.slick-slide {
width: 200px;
}
:root {
/* our colours*/
--darkpurple: #850F78;
--mediumpurple: #bc15aa;
/*--purple: #B85BD1; */
--highlight2: #F57D22;
--lightorange: #f9b581;
--highlight: #F4CC1E;
--lightyellow: #fae99e;
--lightblue: #A0A7F3 ;
--offblack: #32232C ;
--offwhite: #e9dff1;
--darkoffwhite: #d7c5e6;
--ourbeige: #FFF6F2;
--background: #4ea194;
/*igem colours*/
--igemdarkgreen: #006530;
--igemmediumgreen: #019968;
--igemlightgreen: #99cb9a;
--info-border-color: var(--mediumpurple);
--vp-ct: var(--darkpurple);
--info-border-color: var(--highlight);
--info-bg-color: var(--lightyellow);
--info-title-color: var(--darkpurple);
--info-code-bg-color: var(--lightyellow);
--note-border-color: var(--darkpurple);
--note-bg-color: var(--darkoffwhite);
--note-title-color: var(--darkpurple);
--note-code-bg-color: var(--darkoffwhite);
--tip-border-color: var(--darkpurple);
--tip-bg-color: var(--darkoffwhite);
--tip-title-color: var(--darkpurple);
--tip-code-bg-color: var(--darkoffwhite);
--warning-border-color: var(--highlight2);
--warning-bg-color: var(--lightorange);
--warning-title-color: var(--darkpurple);
--warning-code-bg-color: var(--lightorange);
}
.hint-container {
position:relative;
transition:background var(--vp-ct),border-color var(--vp-ct),color var(--vp-ct)
}
@media print {
.hint-container {
page-break-inside:avoid
}
}
.hint-container .hint-container-title {
position:relative;
font-weight:600;
line-height:1.25
}
.hint-container.info,
.hint-container.note,
.hint-container.tip,
.hint-container.warning,
.hint-container.danger {
margin:1rem 0;
padding:.25rem 1rem;
border-inline-start-width:.3rem;
border-inline-start-style:solid;
border-radius:.5rem;
color:inherit
}
@media (max-width: 419px) {
.hint-container.info,
.hint-container.note,
.hint-container.tip,
.hint-container.warning,
.hint-container.danger {
margin-inline:-.75rem
}
}
.hint-container.info .hint-container-title,
.hint-container.note .hint-container-title,
.hint-container.tip .hint-container-title,
.hint-container.warning .hint-container-title,
.hint-container.danger .hint-container-title {
padding-inline-start:1.75rem
}
@media print {
.hint-container.info .hint-container-title,
.hint-container.note .hint-container-title,
.hint-container.tip .hint-container-title,
.hint-container.warning .hint-container-title,
.hint-container.danger .hint-container-title {
padding-inline-start:0
}
}
.hint-container.info .hint-container-title:before,
.hint-container.note .hint-container-title:before,
.hint-container.tip .hint-container-title:before,
.hint-container.warning .hint-container-title:before,
.hint-container.danger .hint-container-title:before {
content:" ";
position:absolute;
top:calc(50% - .6125em);
left:0;
width:1.25em;
height:1.25em;
background-position:left;
background-repeat:no-repeat
}
@media print {
.hint-container.info .hint-container-title:before,
.hint-container.note .hint-container-title:before,
.hint-container.tip .hint-container-title:before,
.hint-container.warning .hint-container-title:before,
.hint-container.danger .hint-container-title:before {
display:none
}
}
html[dir=rtl] .hint-container.info .hint-container-title:before,
html[dir=rtl] .hint-container.note .hint-container-title:before,
html[dir=rtl] .hint-container.tip .hint-container-title:before,
html[dir=rtl] .hint-container.warning .hint-container-title:before,
html[dir=rtl] .hint-container.danger .hint-container-title:before {
right:0;
left:unset
}
.hint-container.info p,
.hint-container.note p,
.hint-container.tip p,
.hint-container.warning p,
.hint-container.danger p {
line-height:1.5
}
.hint-container.info a,
.hint-container.note a,
.hint-container.tip a,
.hint-container.warning a,
.hint-container.danger a {
color:var(--vp-tc)
}
.hint-container.info {
border-color:var(--info-border-color);
background:var(--info-bg-color)
}
.hint-container.info>.hint-container-title {
color:var(--info-title-color)
}
.hint-container.info>.hint-container-title:before {
background-image:url("https://static.igem.wiki/teams/5247/design/icons/info-filled-small.png")
}
.hint-container.info code {
background:var(--info-code-bg-color)
}
.hint-container.note {
border-color:var(--note-border-color);
background:var(--note-bg-color)
}
.hint-container.note>.hint-container-title {
color:var(--note-title-color)
}
.hint-container.note>.hint-container-title:before {
background-image:url("https://static.igem.wiki/teams/5247/design/icons/bulb-small.png")
}
.hint-container.note code {
background:var(--note-code-bg-color)
}
.hint-container.tip {
border-color:var(--tip-border-color);
background:var(--tip-bg-color)
}
.hint-container.tip>.hint-container-title {
color:var(--tip-title-color)
}
.hint-container.tip>.hint-container-title:before {
background-image:url("https://static.igem.wiki/teams/5247/design/icons/bulb-small-fat.png")
}
.hint-container.tip code {
background:var(--tip-code-bg-color)
}
.hint-container.warning {
border-color:var(--warning-border-color);
background:var(--warning-bg-color)
}
.hint-container.warning>.hint-container-title {
color:var(--warning-title-color)
}
.hint-container.warning>.hint-container-title:before {
background-image:url("https://static.igem.wiki/teams/5247/design/icons/shield-exclamation-small-orange.png")
}
.hint-container.warning code {
background:var(--warning-code-bg-color)
}
.hint-container.danger {
border-color:var(--danger-border-color);
background:var(--danger-bg-color)
}
.hint-container.danger>.hint-container-title {
color:var(--danger-title-color)
}
.hint-container.danger>.hint-container-title:before {
background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2c5.523 0 10 4.477 10 10v3.764a2 2 0 0 1-1.106 1.789L18 19v1a3 3 0 0 1-2.824 2.995L14.95 23a2.5 2.5 0 0 0 .044-.33L15 22.5V22a2 2 0 0 0-1.85-1.995L13 20h-2a2 2 0 0 0-1.995 1.85L9 22v.5c0 .171.017.339.05.5H9a3 3 0 0 1-3-3v-1l-2.894-1.447A2 2 0 0 1 2 15.763V12C2 6.477 6.477 2 12 2zm-4 9a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm8 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4z' fill='%23e13238'/%3E%3C/svg%3E")
}
.hint-container.danger code {
background:var(--danger-code-bg-color)
}
.hint-container.details {
position:relative;
display:block;
margin:1.6em 0;
padding:1.5rem;
border-radius:.5rem;
background:var(--detail-bg-color);
color:var(--detail-text-color);
transition:background var(--vp-tt),color var(--vp-tt)
}
@media print {
.hint-container.details {
display:none
}
}
@media (max-width: 419px) {
.hint-container.details {
margin-inline:-.75rem
}
}
.hint-container.details h4 {
margin-top:0
}
.hint-container.details figure:last-child,
.hint-container.details p:last-child {
margin-bottom:0;
padding-bottom:0
}
.hint-container.details a {
color:var(--vp-tc)
}
.hint-container.details code {
background:var(--detail-code-bg-color)
}
.hint-container.details summary {
position:relative;
margin:-1.5rem;
padding-top:1.5rem;
padding-bottom:1.5rem;
padding-inline-start:4rem;
padding-inline-end:1.5rem;
list-style:none;
cursor:pointer
}
.hint-container.details summary::-webkit-details-marker,
.hint-container.details summary::marker {
color:transparent;
font-size:0
}
.hint-container.details summary:before,
.hint-container.details summary:after {
content:" ";
position:absolute;
top:calc(50% - .75rem);
left:1.5rem;
width:1.5rem;
height:1.5rem
}
@media print {
.hint-container.details summary:before,
.hint-container.details summary:after {
display:block
}
}
html[dir=rtl] .hint-container.details summary:before,
html[dir=rtl] .hint-container.details summary:after {
right:1.5rem;
left:unset
}
.hint-container.details summary:before {
border-radius:50%;
background:#ccc;
transition:background var(--vp-ct),transform var(--vp-tt)
}
html[data-theme=dark] .hint-container.details summary:before {
background:#555
}
.hint-container.details summary:after {
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='rgba(0,0,0,0.5)' d='M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z'/%3E%3C/svg%3E");
line-height:normal;
transition:transform var(--vp-tt);
transform:rotate(90deg)
}
html[data-theme=dark] .hint-container.details summary:after {
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='rgba(255,255,255,0.5)' d='M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z'/%3E%3C/svg%3E")
}
.hint-container.details[open]>summary {
margin-bottom:.5em
}
.hint-container.details[open]>summary:after {
transform:rotate(180deg)
}
\ No newline at end of file
function contrastFunction() {
document.body.classList.toggle("contrast-mode");
}
\ No newline at end of file
:root {
/* our colours*/
--darkpurple: #850F78;
/*--purple: #B85BD1; */
--highlight2: #F57D22;
--highlight: #F4CC1E;
--lightblue: #A0A7F3 ;
--offblack: #32232C ;
--offwhite: #e9dff1;
--ourbeige: #FFF6F2;
--background: #4ea194;
/*igem colours*/
--igemdarkgreen: #006530;
--igemmediumgreen: #019968;
--igemlightgreen: #99cb9a;
}
/*navbar design*/
/*colour of the navbar links*/
/*extra navbar type mit transparentem hintergrund */
.bg-transp{
background:transparent;
color: var(--darkpurple);
}
/* macht den link text dark purple */
.nav-link{
color: var(--darkpurple) !important;
}
/*Macht den Team Namen lila*/
.navbar-dark .navbar-brand{
color: var(--darkpurple);
}
/*When hovering over navbar link with mouse the text turns white */
.nav-link:hover {
color: white !important;
background-color: var(--darkpurple) !important;
border-radius: 7px;
}
/* macht den Hintergrund der Navbar blurry */
.navbar{
backdrop-filter: blur(5px);
transition: visibility 0s, 0.6s, opacity 0.6s linear, transform 1s;
}
nav.navbar {
padding-top: 1rem;
padding-bottom: 1rem;
}
.dropdown-menu{
background-color: white;
border-width: 2px;
border-color: var(--darkpurple);
}
.dropdown-item{
color: var(--darkpurple);
}
.dropdown-item:hover{
color: var(--highlight);
background-color: var(--darkpurple);
border-radius: 7px;
}
@media (min-width: 992px) {
/* navbar opens on hover*/
.dropdown:hover .dropdown-menu {
display: block;
}
}
{
"nodes":
[
{
"id": "precyse",
"height": 50 ,
"fill": {
"src": "https://static.igem.wiki/teams/5247/logos-team/precyse-logo-stand-mai.png"
}
},
{
"id": "iGem",
"height": 50,
"fill": {
"src": "https://static.igem.wiki/teams/5247/logos-team/igem-logo-normal-colours.png"
}
}
],
"edges":
[
{"from": "precyse", "to": "iGem"}
]
}
\ No newline at end of file
/*sidenav*/
/* Style the sidenav */
.sidebar{
border-left: 8px solid;
border-left-color: var(--darkpurple);
border-color: var(--highlight);
color: var(--darkpurple);
list-style-type: none;
line-height: 280%;
margin: 0px 0px;
padding: 0px 0px;
}
.sidebar>div {
overflow: hidden;
text-align: center;
cursor: pointer;
}
.sidebar>div>span{
padding: 1rem;
}
/*box on hover nicht vergrößern?*/
.sidebar>div>span:hover{
font-size: 1.2rem;
transition: all 0.1s linear;
}
/*changed*/
.slick-slide img
{
display: block;
margin-left: auto;
margin-right: auto;
}
/* Slider */
.slick-slider
{
position: relative;
display: block;
box-sizing: border-box;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-touch-callout: none;
-khtml-user-select: none;
-ms-touch-action: pan-y;
touch-action: pan-y;
-webkit-tap-highlight-color: transparent;
}
.slick-list
{
position: relative;
display: block;
overflow: hidden;
margin: 0;
padding: 0;
}
.slick-list:focus
{
outline: none;
}
.slick-list.dragging
{
cursor: pointer;
cursor: hand;
}
.slick-slider .slick-track,
.slick-slider .slick-list
{
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.slick-track
{
position: relative;
top: 0;
left: 0;
display: block;
margin-left: auto;
margin-right: auto;
}
.slick-track:before,
.slick-track:after
{
display: table;
content: '';
}
.slick-track:after
{
clear: both;
}
.slick-loading .slick-track
{
visibility: hidden;
}
.slick-slide
{
display: none;
float: left;
height: 100%;
min-height: 1px;
}
[dir='rtl'] .slick-slide
{
float: right;
}
.slick-slide img
{
display: block;
}
.slick-slide.slick-loading img
{
display: none;
}
.slick-slide.dragging img
{
pointer-events: none;
}
.slick-initialized .slick-slide
{
display: block;
}
.slick-loading .slick-slide
{
visibility: hidden;
}
.slick-vertical .slick-slide
{
display: block;
height: auto;
border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
display: none;
}
This diff is collapsed.
/* * * * * * * * */
/* * * UNITS * * */
/* * * * * * * * */
/*
To have responsive web design, we have so use different units.
abbr type explanation
___________________________________________________-
px absolute (self explanatory; pixel)
em relative (Relative to the font-size of the element (2em means 2 times the size of the current font))
rem relative (Relative to font-size of the root element; r (like root) + em = rem.)
vw relative (Relative to 1% of the width of the browser window size)
There are some things we do not want to have fixed sizes:
- box-shadow
*/
/* Remove default margin */
* {
border: 0;
margin: 0;
padding: 0;
font: inherit;
}
body {
height: 100%;
width: auto;
font-family: 'AcuminPro';
padding-top: 5vw ;
background-color: white;
color: var(--offblack);
text-rendering: optimizeSpeed;
line-height: 1.5;
}
html:focus-within {
scroll-behavior: smooth;
}
.row{
max-width: 100%;
}
.contrast-mode {
background-color: white !important;
color: black !important;
}
p{
text-align: justify
}
.center {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
height: auto;
}
.col{
object-fit: contain;
}
.left-aligned { margin-left: auto; }
.bg-dark { background-color: var(--darkpurple) !important; }
.bg-hero { background-color: var(--purple) }
/* * * * * * * * */
/* * * FONTS * * */
/* * * * * * * * */
@font-face {
font-family: 'AcuminPro';
src: url('https://static.igem.wiki/teams/5247/design/fonts/acumium-pro-black.ttf'), format('truetype');
font-style: normal;
font-weight: 900;
}
@font-face {
font-family: 'AcuminPro';
src: url('https://static.igem.wiki/teams/5247/design/fonts/acumium-pro-blackitalic.ttf'), format('truetype');
font-style: italic;
font-weight: 900;
}
@font-face {
font-family: 'AcuminPro';
src: url('https://static.igem.wiki/teams/5247/design/fonts/acumium-pro-bold.ttf'), format('truetype');
font-style: normal;
font-weight: 700;
}
@font-face {
font-family: 'AcuminPro';
src: url('https://static.igem.wiki/teams/5247/design/fonts/acumium-pro-bolditalics.ttf'), format('truetype');
font-style: normal;
font-weight: 700;
}
@font-face {
font-family: 'AcuminPro';
src: url('https://static.igem.wiki/teams/5247/design/fonts/acumium-pro-semibold.ttf'), format('truetype');
font-style: normal;
font-weight: 600;
}
@font-face {
font-family: 'AcuminPro';
src: url('https: //static .igem .wiki/teams/ 5247px /design/fonts/acumium-pro-bookitalic.ttf'), format('truetype');
font-style: italic;
font-weight: 400;
}
@font-face {
font-family: 'AcuminPro';
src: url('https://static.igem.wiki/teams/5247/design/fonts/acumium-pro-book.ttf'), format('truetype');
font-style: normal;
font-weight: 400;
}
@font-face {
font-family: 'AcuminPro';
src: url('https://static.igem.wiki/teams/5247/design/fonts/acumium-pro-light.ttf'), format('truetype');
font-style: normal;
font-weight: 300;
}
@font-face {
font-family: 'AcuminPro';
src: url('https://static.igem.wiki/teams/5247/design/fonts/acumium-pro-extralight.ttf'), format('truetype');
font-style: normal;
font-weight: 200;
}
@font-face {
font-family: 'AcuminPro';
src: url('https://static.igem.wiki/teams/5247/design/fonts/acumium-pro-thin.ttf'), format('truetype');
font-style: normal;
font-weight: 100;
}
/* CALLOUT */
.bd-callout { padding:1.25rem; margin-top:1.25rem; margin-bottom:1.25rem; border:1px solid #e9ecef; border-left-width:.25rem; border-radius:.25rem }
.bd-callout h4 { margin-bottom:.25rem }
.bd-callout p:last-child { margin-bottom:0 }
.bd-callout code { border-radius:.25rem }
.bd-callout+.bd-callout { margin-top:-.25rem }
.bd-callout-info { border-left-color:#5bc0de }
.bd-callout-warning { border-left-color:#f0ad4e }
.bd-callout-danger { border-left-color:#d9534f }
:root {
/* our colours*/
--darkpurple: #850F78;
--mediumpurple: #bc15aa;
/*--purple: #B85BD1; */
--highlight2: #F57D22;
--highlight: #F4CC1E;
--lightyellow: #fae99e;
--lightblue: #A0A7F3 ;
--offblack: #32232C ;
--cebitecgray: #8295A4;
/*--offwhite: #e9dff1; */
--ourbeige: #FFF6F2;
--background: #4ea194;
/*igem colours*/
--igemdarkgreen: #006530;
--igemmediumgreen: #019968;
--igemlightgreen: #99cb9a;
}
/*galleries */
/*.gallery-container{
border: var(--offblack);
border-radius: 3px;
border-style: ridge;
padding: 10px ;
margin-top: 20px;
margin-bottom: 20px;
}*/
/*collapsible*/
/* Style the button that is used to open and close the collapsible content */
.collapsible {
background-color: var(--mediumpurple);
color: var(--offblack);
cursor: pointer;
padding: 1.2vw;
margin-top: 2vw;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
margin-left: 5px;
margin-right: 5px;
margin-bottom: 5px;
border-radius: 3px;
border-style: outset;
border-color: var(--darkpurple);
}
/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.collapsible:hover {
box-shadow: 5px 5px 15px black;
transition: all 0.1s linear;
}
/* Style the collapsible content. Note: hidden by default */
.content{
padding: 18px 18px;
display: none;
overflow: hidden;
background-color: white;
border-radius: 3px;
border-color: var(--darkpurple);
border-style: dotted;
}
.test-container{
background-color: var(--offblack);
color: white;
width: 50%;
padding: 40px;
}
/*Header*/
header{
height: 300px;
margin-top: 20px;
}
header h1{
text-align: center;
padding-top: 120px
}
/* Headings
Überschrift 1: 4rem svg animated 2px no hover
Überschrift 2: 3rem html still 2px hover
*/
h2{
font-size: 3rem;
-webkit-background-clip: text;
-webkit-text-stroke-width: 2px;
-webkit-text-stroke-color: var(--darkpurple);
background-clip: text;
color: transparent;
padding-top: 15px;
background-image: repeating-linear-gradient(-45deg, var(--darkpurple) 0, var(--darkpurple) 2px, white 2px, white 4px);
}
h2:hover{
animation: dash;
}
h6{
padding-bottom: 1rem;
padding-top: 1rem;
color: white;
}
svg{
background:transparent
}
svg text{
font-size: 7vw;
stroke-width:2px;
fill:var(--highlight);
stroke:var(--darkpurple);
/*letter-spacing:4px;*/
animation:effect 3s, dash 3s;
}
svg text:hover{
fill: var(--darkpurple)
}
.underline--magical {
background-image: linear-gradient(120deg, var(--lightblue) 0%, var(--mediumpurple) 100%);
background-repeat: no-repeat;
color: black;
background-size: 100% 0.2em;
background-position: 0 105%;
transition: background-size 0.25s ease-in;
}
.underline--magical:hover {
background-size: 100% 100%;
color: black;
text-decoration: none !important;
}
/* Effects */
@keyframes effect{
0%{
stroke-dasharray:0 70%;
}
100%{
stroke-dasharray:10% 0%;
stroke-dashoffset:20%;
}
}
@keyframes dash {
0% {
stroke-dashoffset: 1300;
}
35% {
fill-opacity: 0;
}
50% {
stroke-dashoffset: 0;
}
100% {
stroke-dashoffset: 0;
fill-opacity: 1;
}
}
@keyframes dashy {
to {
stroke-dashoffset: 1000;
}
}
/*Media*/
img,
picture,
svg {
max-width: 100%;
display: block;
}
.fit{
width: 100% !important;
height: auto !important;
}
.round-img-vert{
width: 100% !important;
height: auto !important;
border-radius:50%;
overflow:hidden;
padding-top: 5%;
padding-bottom: 5%;
align-items: center;
margin: auto;
}
.round-img-vert:hover{
box-shadow: 5px 5px 15px black;
transition: all 0.1s linear;
}
.videoblock{
width: 100%;
padding-top: 15px;
padding-bottom: 15px;
}
.video-desc{
text-align: center;
padding-top: 5px;
padding-bottom: 5px;
}
.socials{
height: 1.5rem;
width: auto;
margin: 0.5rem;
}
.img-sponsor{
max-width: 70%;
max-height: 150px;
}
/*Links and buttons*/
a {
color:var(--lightblue);
text-decoration: none !important; /* Remove underline */
}
a:hover {
color: inherit;
}
.backtotop {
place-self:end;
/* visual styling */
text-decoration: none;
padding: 10px;
color:white;
background: var(--darkpurple);
border-radius: 100px;
white-space: nowrap;
text-align: right;
}
.backtotop:hover{
box-shadow: 5px 5px 15px black;
color: var(--highlight);
transition: all 0.1s linear;
}
.alink:hover{
color: var(--highlight);
transition: all 0.1s linear;
}
a:hover { color: var(--highlight); text-decoration: underline; }
.bottom-buttons{
margin-top: 50px;
margin-bottom: 20px;
padding-left: 30px;
}
/*.bottom-buttons:hover{
margin-top: 45px;
margin-bottom: 45px;
transition: all 0.1s linear;
}*/
.village-style-button{
box-shadow: 5px 5px 15px gray;
border-radius: 2rem;
padding: 0 !important;
max-width: 12%;
aspect-ratio: 2 / 3;
margin-left: 1vw;
}
.village-style-button:hover{
box-shadow: 5px 5px 15px black;
}
/*.village-style-button:hover{
box-shadow: 5px 5px 15px --highlight;
border-radius: 2rem;
padding: 0 !important;
width: 120px;
height: 150px;
transition: all 0.1s linear;
}*/
.village-style-button h3{
text-align: center !important;
font-size: 10px;
font-weight: bold;
color: #000;
}
.village-style-button img{
max-width: 70%;
max-height: 70%;
padding-top: 20px;
}
.anchor{
position: relative;
padding-top: 100px;
}
/* * * * * * * * */
/* * * NAVBAR* * */
/* * * * * * * * */
/*colour of the navbar links*/
/*extra navbar type mit transparentem hintergrund */
.bg-transp{
background:transparent;
color: var(--darkpurple);
}
/* macht den link text dark purple */
.nav-link{
color: var(--darkpurple) !important;
}
/*Macht den Team Namen lila*/
.navbar-light .navbar-brand{
color: var(--darkpurple);
}
/*When hovering over navbar link with mouse the text turns white */
.nav-link:hover {
color: white !important;
background-color: var(--darkpurple) !important;
border-radius: 7px;
}
/* macht den Hintergrund der Navbar blurry */
.navbar{
backdrop-filter: blur(5px);
transition: visibility 0s, 0.6s, opacity 0.6s linear, transform 1s;
}
nav.navbar {
padding-top: 1rem;
padding-bottom: 1rem;
}
.dropdown-menu{
background-color: white;
border-width: 2px;
border-color: var(--darkpurple);
}
.dropdown-item:hover{
color: var(--highlight);
background-color: var(--darkpurple);
border-radius: 7px;
}
/* * * * * * * * */
/* SCREEN WIDTHS */
/* * * * * * * * */
/*For tablet or bigger*/
@media screen and (min-width: 992px) {
/* navbar opens on hover*/
.dropdown:hover .dropdown-menu {
display: block;
}
}
/*For Tablet and smaller*/
@media screen and (max-width: 992px){
}
/*For Smartphones*/
@media screen and (max-width: 768px){
.navbar {
float: none;
width: 100%;
}
.navbar-collapse{
backdrop-filter: none;
background-color: white;
}
[class*="col-"] {
width: 100%;
}
svg text{
font-size: 9vw;
stroke-width:1px;
}
.village-style-button h3{
display: none !important;
}
.village-style-button{
box-shadow: 1px 1px 1px gray;
border-radius: 10px;
border-color: black;
}
.village-style-button:hover{
box-shadow: none;
}
.village-style-button img{
max-width: 90%;
max-height: 90%;
padding-top: 10px;
padding-bottom: 5px;
}
}
/*Bigger than smartphones*/
@media only screen and (min-width: 768px) {
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
}
This diff is collapsed.
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment