hoernschen/squirrel-theme
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

changes

Browse source
This commit is contained in:
hoernschen 2021-02-17 19:56:58 +01:00
parent cbcb89f9fa
commit 34ce60164a
17 changed files with 607 additions and 82 deletions
Download patch file Download diff file Expand all files Collapse all files

7
css/footer.css
View file

@ -1,13 +1,15 @@
.footer {
margin: auto;
padding: 1.5rem;
width: 100%;
flex-shrink: 0;
text-align: center;
display: block;
background-color: #333;
color: #f2f2f2;
}
.social-media {
.social-media-footer {
display: flex;
justify-content: center;
flex-wrap: wrap;
@ -20,6 +22,7 @@
display: flex;
justify-content: center;
flex-wrap: wrap;
padding: 0;
}
.link {
@ -32,7 +35,7 @@
}
.copyright {
margin-top: 1.5rem;
margin-top: 2rem;
width: 100%;
font-size: small;
}

131
css/header.css
View file

@ -1,34 +1,47 @@
.header {
margin: auto;
padding: 1.5rem;
padding-bottom: 0.5rem;
text-align: center;
width: 100%;
padding: 1rem;
display: flex;
font-size: large;
overflow: hidden;
height: auto;
flex-shrink: 0;
background: white;
box-shadow: 0px 4px 4px 0px rgba(0,0,0,0.2);
position: fixed;
z-index: 999;
top: 0;
}
.header-container {
width: 100%;
max-width: 1152px;
display: flex;
margin: auto;
}
.sticky {
position: fixed;
top: 0;
}
.logo {
display: flex;
height: 3.5rem;
}
.small-logo {
height: 2.5rem;
}
.menu-icon {
display: none;
font-size: larger;
}
.header-items {
margin: auto;
/* padding-right: 1rem;
margin-right: 0px; */
margin-left: 0px;
display: flex;
float: right;
right: 0px;
align-items: right;
text-align: right;
}
.header-items .menu-icon {
display: none;
font-size: larger;
}
.header-item {
@ -36,7 +49,6 @@
}
.dropdown {
float: left;
overflow: hidden;
}
@ -48,20 +60,16 @@
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
position: fixed;
background-color: #ffffff;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
padding: 0.5rem 1rem;
display: block;
text-align: left;
}
.dropdown-content a:hover {
@ -73,40 +81,65 @@
}
@media screen and (max-width: 600px) {
.header-items .dropdown .dropbtn {
display: none;
.header-container {
display: block;
}
.header-items .header-item {
.home {
width: 100vw;
}
.menu-icon {
display: block;
position: fixed;
top: 30px;
right: 30px;
}
.menu-icon .hide {
display: none;
}
.header-items a.menu-icon {
float: right;
display: block;
.small-icon {
top: 20px;
}
}
@media screen and (max-width: 600px) {
.header-items.responsive {position: relative;}
.header-items.responsive .menu-icon {
position: absolute;
right: 0;
top: 0;
.header-items {
display: none;
}
.header-items.responsive a {
float: none;
display: block;
text-align: left;
}
.header-items.responsive .dropdown {float: none;}
.header-items.responsive .dropdown-content {position: relative;}
.header-items.responsive .dropdown .dropbtn {
display: block;
width: 100vw;
text-align: left;
.header-items.responsive {
position: relative;
float: none;
display: block;
text-align: left;
margin-top: 0.5rem;
}
.header-items.responsive .header-item {
display: block;
margin-left: 0rem;
padding-bottom: 0.5rem;
padding-top: 0.5rem;
}
.header-items.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.header-items.responsive .dropdown {
float: none;
}
.header-items.responsive .dropdown-content {
position: relative;
box-shadow: none;
}
.header-items.responsive .dropdown .dropbtn {
display: block;
width: 100vw;
text-align: left;
}
}

168
css/index.css
View file

@ -1,3 +1,169 @@
/* html {
scroll-behavior: smooth;
} */
html, body {
height: 100%;
}
body {
margin: 0px
margin: 0px;
display: flex;
flex-direction: column;
font-family: system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji';
color: #333;
}
h1 {
margin: 0rem;
margin-bottom: 0.5rem;
margin-top: 0.5rem;
}
p {
margin: 0.5rem;
}
a {
text-decoration: none;
color: inherit;
}
button {
font-family: inherit;
font-size: 100%;
line-height: inherit;
color: inherit;
background-color: transparent;
background-image: none;
text-transform: none;
padding: 0;
}
.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%;}
[class*="col-"] {
float: left;
padding: 15px;
border: 1px solid red;
}
.row::after {
content: "";
clear: both;
display: table;
}
.content {
border: 2px;
border-color: black;
flex: 1 0 auto;
max-width: 1152px;
align-self: center;
padding: 3rem 1.5rem;
padding-top: 8rem;
}
.divider {
height: 3px;
border-radius: 50px;
background: tomato;
width: 60px;
}
.title {
font-size: large;
padding-bottom: 1rem;
text-align: start;
}
.videoWrapper {
position: relative;
padding-bottom: 56.25%;
height: 0;
}
.video {
position: absolute;
margin: 0 auto;
border: 5px dotted tomato;
top: 0;
left: 0;
width: 100%;
/* max-width: 640px; */
height: 100%;
}
.section {
padding-bottom: 3rem;
}
/* Team */
.team {
align-items: center;
text-align: center;
}
.teammember {
display: inline-block;
align-items: center;
text-align: center;
margin: 0 auto;
padding: 1.5rem;
}
.avatar {
width: 15rem;
height: 15rem;
border-radius: 50%;
border: 2px solid tomato;
object-fit: cover;
margin: 0 auto;
}
.teammember-title {
font-size: x-large;
padding-bottom: 0.1rem;
}
.social-media {
display: flex;
justify-content: center;
flex-wrap: wrap;
font-size: 1.5em;
padding-top: 1rem;
color: #333;
min-height: 2em;
}
/* Funding */
.funding-logo {
width: 15rem;
padding: 1.5rem;
}
.reference-logo {
max-height: 15rem;
max-width: 15rem;
padding: 1.5rem;
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}
.service-icon {
min-width: 300px;
justify-content: center;
}

9
css/progressbar.css Normal file
View file

@ -0,0 +1,9 @@
/* default CSS variables */
.progress {
background: linear-gradient(to right, tomato var(--scroll), transparent 0);
background-repeat: no-repeat;
position: fixed;
width: 100%;
height: 4px;
z-index: 1000;
}

134
css/slider.css Normal file
View file

@ -0,0 +1,134 @@
* {
box-sizing: border-box;
}
.slider {
width: 100%;
text-align: center;
overflow: hidden;
}
.slides {
display: flex;
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
scroll-snap-stop: inherit;
-webkit-overflow-scrolling: touch;
scroll-snap-points-x: repeat(300px);
scroll-snap-type: mandatory;
}
.slides::-webkit-scrollbar {
width: 10px;
height: 10px;
}
.slides::-webkit-scrollbar-thumb {
background: black;
border-radius: 10px;
}
.slides::-webkit-scrollbar-track {
background: transparent;
}
.slides > div {
scroll-snap-align: start;
flex-shrink: 0;
width: 100%;
height: 30rem;
margin-right: 50px;
border-radius: 10px;
background: #eee;
transform-origin: center center;
transform: scale(1);
transition: transform 0.5s;
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.slide > img {
object-fit: cover;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.slide-links {
position: absolute;
margin: 0;
top: 35rem;
left: 0;
right: 0;
}
.slide-links > a {
display: inline-flex;
width: 1rem;
height: 1rem;
background: tomato;
text-decoration: none;
align-items: center;
justify-content: center;
border-radius: 50%;
margin: 0 0 0 1rem;
position: relative;
z-index: 1;
}
.slider-navigation-left {
position: absolute;
display: flex;
justify-content: center;
align-items: center;
padding: 1rem;
height: inherit;
left: 0;
top: 0;
z-index: 2;
color: tomato;
font-size: 3.5em;
}
.slider-navigation-left:hover {
cursor: pointer;
color: #444;
}
.slider-navigation-right {
position: absolute;
display: flex;
justify-content: center;
align-items: center;
padding: 1rem;
height: inherit;
top: 0;
right: 0;
z-index: 2;
color: tomato;
font-size: 3.5em;
}
.slider-navigation-right:active > i {
top: 1px;
}
.slider-navigation-right:hover {
cursor: pointer;
color: #444;
}
.slide-links > a:hover {
cursor: pointer;
background: #444;
}
.slide-links > a:active {
top: 1px;
}

12
css/totop.css
View file

@ -9,8 +9,8 @@
border-radius: 50%;
margin: 30px;
position: fixed;
bottom: 30px;
right: 30px;
bottom: 0px;
right: 0px;
transition: background-color .3s;
z-index: 1000;
}
@ -25,7 +25,9 @@
opacity: 0;
}
.totop:hover {
cursor: pointer;
background-color: #333;
@media screen and (min-width: 600px) {
.totop:hover {
cursor: pointer;
background-color: black;
}
}