c3woc/webseite
1
1
Fork 0
Code Issues Pull requests Releases Activity

Improve css

Browse source
This commit is contained in:
L3D 2019-05-05 16:46:24 +02:00 committed by L3D
parent 129ad48c91
commit cebbd703e3
12 changed files with 147 additions and 46 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
assets/sass/libs/_vars.scss
View file

@ -24,8 +24,8 @@ $size: (
$font: (
family: ('Roboto', Helvetica, sans-serif),
family-fixed: ('Courier New', monospace),
weight: 400,
weight-bold: 500
weight: 300,
weight-bold: 400
);
// Palette.
@ -51,5 +51,5 @@ $palette: (
//pictures startpage
$picture-startpage: (
scroll-1: url(../images/home/abschnitt1.jpeg),
scroll-1: url(/images/home/abschnitt1.jpeg),
);

10
assets/sass/main.scss
View file

@ -1,8 +1,8 @@
@import 'libs/vars';
@import 'libs/functions';
@import 'libs/mixins';
@import url("../css/font-awesome.min.css");
@import url("../fonts/roboto.css");
@import url("/css/font-awesome.min.css");
@import url("/fonts/roboto.css");
@import url("https://c3woc.de/css/spacestatus.css");
@import "libs/skel";
@import 'parts/startpage';
@ -17,7 +17,7 @@ Modified by Toolbox Bodensee e.V.
@include skel-breakpoints((
xlarge: '(max-width: 1680px)',
large: '(max-width: 1280px)',
medium: '(max-width: 980px)',
medium: '(max-width: 1100px)',
small: '(max-width: 933px)',
xsmall: '(max-width: 480px)'
));
@ -32,7 +32,7 @@ Modified by Toolbox Bodensee e.V.
}
@else if $point == tablet {
@media (max-width: 980px) { @content ; }
@media (max-width: 1100px) { @content ; }
}
@else if $point == phablet {
@ -116,4 +116,4 @@ $size-wrapper-pad-lr: 3em;
@import 'parts/footer';
@import 'parts/project';
@import 'parts/col';
@import 'parts/youtube';

16
assets/sass/parts/_banner.scss
View file

@ -2,7 +2,7 @@
#banner {
background-attachment: fixed;
background-color: _palette(accent2);
background-image: url('../../images/banner.jpg');
background-image: url('/images/banner.jpg');
background-position: center center;
background-size: cover;
box-shadow: 0 0.25em 0.5em 0 rgba(0, 0, 0, 0.25);
@ -86,10 +86,6 @@
h2 {
font-size: 2.5em;
margin: 0;
@include breakpoint(phablet) {
font-size: 1.5em;
}
}
p {
@ -99,13 +95,12 @@
}
.image {
border-radius: 0;
border-radius: 100%;
display: inline-block;
height: 19em;
height: 18em;
margin-left: 3em;
margin-top: 2em;
vertical-align: middle;
width: 19em;
width: 18em;
@include breakpoint(tablet) {
margin: 0;
@ -117,7 +112,7 @@
}
img {
border-radius: 0;
border-radius: 100%;
display: block;
width: 100%;
}
@ -130,4 +125,3 @@ body.is-touch {
background-attachment: scroll;
}
}

6
assets/sass/parts/_button.scss
View file

@ -21,10 +21,6 @@ input[type="button"],
text-decoration: none;
white-space: nowrap;
@include breakpoint(mobileonly) {
padding: 0;
}
&:hover,
&:active {
box-shadow: inset 0 0 0 1px _palette(accent1);
@ -45,6 +41,8 @@ input[type="button"],
display: block;
margin: 0 0 (_size(element-margin) * 0.5) 0;
width: 100%;
height: auto;
white-space: normal;
}
&.small {

39
assets/sass/parts/_col.scss
View file

@ -1,12 +1,43 @@
/* Columns */
@for $i from 2 through 5 {
.col-#{$i} {
column-count: $i;
.col-2 {
column-count: 2;
column-gap: 1vw;
height:auto;
> .button {
padding: 0;
}
&.long {
@include breakpoint(phablet) {
column-count: 1;
}
}
}
.col-3 {
column-count: 3;
column-gap: 1vw;
height:auto;
> .button {
padding: 0;
}
@include breakpoint(phablet) {
column-count: 2;
}
&.long {
@include breakpoint(phablet) {
column-count: 1;
}
}
}
.col-4 {
column-count: 4;
column-gap: 1vw;
height:auto;
> .button {
padding: 0;
}
@include breakpoint(phablet) {
column-count: 2;
}
}

3
assets/sass/parts/_goto-next.scss
View file

@ -14,7 +14,7 @@
z-index: 1;
&::before {
background-image: url('images/arrow.svg');
background-image: url('/css/images/arrow.svg');
background-position: center center;
background-repeat: no-repeat;
background-size: contain;
@ -35,4 +35,3 @@
}
}
}

10
assets/sass/parts/_image.scss
View file

@ -56,5 +56,13 @@
&.mapid {
height: 70vh;
}
&.lightgallery {
width: 33%;
@include breakpoint(tablet) {
width: 49%;
}
@include breakpoint(phablet) {
width: 100%;
}
}
}

1
assets/sass/parts/_list.scss
View file

@ -159,4 +159,3 @@ ul {
dl {
margin: 0 0 _size(element-margin) 0;
}

2
assets/sass/parts/_project.scss
View file

@ -1,5 +1,5 @@
.project {
height: 420px;
height: 600px;
}
.teaser {

7
assets/sass/parts/_spotlight.scss
View file

@ -142,13 +142,8 @@
height: 101%;
padding: $size-wrapper-pad-tb $size-wrapper-pad-lr;
top: 0;
width: 28em;
width: 30em;
min-width: 25%;
@include breakpoint(laptop) {
padding: $size-wrapper-pad-tb $size-wrapper-pad-lr;
width: 25em;
}
}
}

36
assets/sass/parts/_table.scss
View file

@ -1,12 +1,9 @@
/* Table */
.table-wrapper {
-webkit-overflow-scrolling: touch;
overflow-x: auto;
}
table {
margin: 0 0 _size(element-margin) 0;
width: 100%;
word-wrap:break-word;
table-layout: fixed;
tbody {
tr {
@ -71,5 +68,34 @@ table {
border-top: 0;
}
}
ul {
margin: 0 0 0 0;
}
@include breakpoint(mobileonly) {
td {
width:100%;
display: block;
margin:10px 0px;
text-align: center;
}
}
}
.table-wrapper {
-webkit-overflow-scrolling: touch;
overflow-x: auto;
&.code {
border-radius: 5px;
font-style: italic;
table {
margin: 0 0 0 0;
tbody {
tr {
border: 0;
}
}
}
}
}

51
assets/sass/parts/_youtube.scss Normal file
View file

@ -0,0 +1,51 @@
.youtube {
background-color: #000;
margin-bottom: 30px;
position: relative;
padding-top: 56.25%;
overflow: hidden;
cursor: pointer;
}
.youtube img {
width: 100%;
top: -16.82%;
left: 0;
opacity: 0.7;
}
.youtube .play-button {
width: 90px;
height: 60px;
background-color: #333;
box-shadow: 0 0 30px rgba( 0,0,0,0.6 );
z-index: 1;
opacity: 0.8;
border-radius: 6px;
}
.youtube .play-button:before {
content: "";
border-style: solid;
border-width: 15px 0 15px 26.0px;
border-color: transparent transparent transparent #fff;
}
.youtube img,
.youtube .play-button {
cursor: pointer;
}
.youtube img,
.youtube iframe,
.youtube .play-button,
.youtube .play-button:before {
position: absolute;
}
.youtube .play-button,
.youtube .play-button:before {
top: 50%;
left: 50%;
transform: translate3d( -50%, -50%, 0 );
}
.youtube iframe {
height: 100%;
width: 100%;
top: 0;
left: 0;
}