jannik/web-jbeyerstedt
1
0
Fork 0
Code Releases Activity

[CSS, SITE] migrate to bootstrap v4-beta

Browse source
This commit is contained in:
Jannik Beyerstedt 2017-08-19 01:35:03 +02:00
parent f30049a8ac
commit a59227a733
31 changed files with 208 additions and 197 deletions
Download patch file Download diff file Expand all files Collapse all files

4
assets/scss/_mainvariables.scss
View file

@ -1,3 +1,7 @@
@import "functions";
@import "variables";
@import "mixins";
$color_font: #000;
$color_bg: #fff;
$color_base: #1779ff;

4
assets/scss/blog.scss
View file

@ -1,10 +1,6 @@
/* STYLE for jannikbeyerstedt.de
* for specific template
*/
@import "custom";
@import "variables";
@import "mixins";
@import "mainvariables";
$blog_color_meta: #a6a6a6;

35
assets/scss/foundation.scss vendored
View file

@ -1,18 +1,12 @@
/* STYLE for jannikbeyerstedt.de
* used parts of bootstrap
*/
// Core variables and mixins
@import "custom";
@import "functions";
@import "variables";
@import "mixins";
// Reset and dependencies
//@import "normalize";
@import "print";
@import "reboot";
// Core CSS
@import "reboot"; // needed for correct grid behaviour
@import "type";
//@import "images";
//@import "code";
@ -20,9 +14,7 @@
//@import "tables";
//@import "forms";
@import "buttons";
// Components
//@import "animation";
//@import "transitions";
//@import "dropdown";
//@import "button-group";
//@import "input-group";
@ -32,20 +24,31 @@
//@import "card";
//@import "breadcrumb";
//@import "pagination";
//@import "tags";
//@import "badge";
//@import "jumbotron";
//@import "alert";
//@import "progress";
//@import "media";
//@import "list-group";
//@import "responsive-embed";
//@import "close";
// Components w/ JavaScript
//@import "modal";
//@import "tooltip";
//@import "popover";
//@import "carousel";
// Utility classes
// utilities
@import "utilities";
//@import "utilities/align";
//@import "utilities/background";
//@import "utilities/borders";
//@import "utilities/clearfix";
//@import "utilities/display";
//@import "utilities/embed";
//@import "utilities/flex";
//@import "utilities/float";
//@import "utilities/position";
//@import "utilities/screenreaders";
//@import "utilities/sizing";
//@import "utilities/spacing";
//@import "utilities/text";
//@import "utilities/visibility";

79
assets/scss/main.scss
View file

@ -5,10 +5,6 @@
* headings: Crimson Text
* Logo: Boon
*/
@import "custom";
@import "variables";
@import "mixins";
@import "mainvariables";
body {
@ -99,10 +95,13 @@ main div.container {
$header_logoSize: 75px;
$header_logoPadg: 4px;
header {
a {
display: inline-block;
}
img {
width: $header_logoSize;
height: $header_logoSize;
margin: $header_logoPadg 0;
margin-top: $header_logoPadg;
float: left;
}
@ -289,7 +288,7 @@ footer {
}
/* space footer at bottom of page */
$header_height: 2*$header_logoPadg + $header_logoSize;
$header_height: 2*$header_logoPadg + $header_logoSize + 4px; // + weird "padding" added to inline-block elements
@include media-breakpoint-up(sm) {
main {
min-height: calc(100vh - #{$header_height} - #{$footer_height} - #{$footer_margin});
@ -303,20 +302,68 @@ $header_height: 2*$header_logoPadg + $header_logoSize;
/*
* HELPERS
* PLUGINS AND OTHER MODULES
*/
.right {
text-align: right;
}
.center {
text-align: center;
}
@media (max-width: $col_xxs_bp) {
.col-xxs-12.right, .col-xxs-12.center {
text-align: inherit;
/*
* KIRBY PLUGIN columns by Bastians Allgeier
*/
$cols-breakdown-width: 600px;
$cols-pad: 15px;
.columns {
margin-right: -$cols-pad;
margin-left: -$cols-pad;
&:before {
display: table;
content: " ";
}
&:after {
clear: both;
display: table;
content: " ";
}
}
.column {
padding-right: $cols-pad;
padding-left: $cols-pad;
display: block;
float: left;
position: relative;
min-height: 1px;
}
.columns-1 .column {
width: 100%;
}
.columns-2 .column {
width: 50%;
@media(max-width: $cols-breakdown-width) {
width: 100%;
}
}
.columns-3 .column {
width: 33.33%;
@media(max-width: $cols-breakdown-width) {
width: 100%;
}
}
.columns-4 .column {
width: 25%;
@media(max-width: $cols-breakdown-width*2) {
width: 50%;
}
@media(max-width: $cols-breakdown-width) {
width: 100%;
}
}
.columns-5 .column {
width: 20%;
}
/* to break down col-xs */
.visible-xxs {

4
assets/scss/templates/home.scss
View file

@ -1,10 +1,6 @@
/* STYLE for jannikbeyerstedt.de
* for specific template
*/
@import "custom";
@import "variables";
@import "mixins";
@import "../mainvariables";
main {

6
assets/scss/templates/photo.scss
View file

@ -1,10 +1,6 @@
/* STYLE for jannikbeyerstedt.de
* for specific template
*/
@import "custom";
@import "variables";
@import "mixins";
@import "../mainvariables";
// change main.scss behavior - inverted color style
@ -65,7 +61,7 @@ div.carousel {
// ---- from boostrap ----
@import "images";
// @requires animation.scss (already in main.scss) and carousel.js, util.js
// @requires carousel.js, util.js
@import "carousel";
// fix responsiveness

4
assets/scss/templates/project.scss
View file

@ -1,10 +1,6 @@
/* STYLE for jannikbeyerstedt.de
* for specific template
*/
@import "custom";
@import "variables";
@import "mixins";
@import "../mainvariables";
// change main.scss behavior

24
assets/scss/templates/projects.scss
View file

@ -1,10 +1,6 @@
/* STYLE for jannikbeyerstedt.de
* for specific template
*/
@import "custom";
@import "variables";
@import "mixins";
@import "../mainvariables";
// change main.scss behavior
@ -20,16 +16,20 @@ main.projects {
}
}
.card a {
color: $color_font;
&:active, &:hover {
color: $color_font;
text-decoration: none;
}
.card {
margin-bottom: 30px;
&.card-link {
a {
color: $color_font;
&:active, &:hover {
text-decoration: underline;
color: $color_font;
text-decoration: none;
}
&.card-link {
&:active, &:hover {
text-decoration: underline;
}
}
}
}

4
assets/scss/templates/webdesign.scss
View file

@ -1,10 +1,6 @@
/* STYLE for jannikbeyerstedt.de
* for specific template
*/
@import "custom";
@import "variables";
@import "mixins";
@import "../mainvariables";
// change main.scss behavior