interaktionsweise/hippie
1
1
Fork 0
Code Issues Pull requests Releases 3 Activity Actions

Added card and portal modules

Browse source
This commit is contained in:
Stephan Hagedorn 2021-03-14 21:47:11 +01:00
parent 32215de810
commit f7dd7c93e3
9 changed files with 365 additions and 65 deletions
Download patch file Download diff file Expand all files Collapse all files

3
source/style/demo.scss
View file

@ -5,10 +5,11 @@
@import "demo_config";
@import "hippie-style/hippie";
// Additional Modules and variables
// in dependency to other basic styles
// could be defined here
// -----------------------------------------------------------------------------
@import "modules/card/card_module";
@import "modules/portal/portal_module";
@import "modules/demo/demo_module";
// @import "modules/YOUR-MODULE/YOUR-FILES";

2
source/style/hippie-style

@ -1 +1 @@
Subproject commit b27dc31455b1dff17bbb1df4239a83981bafe748
Subproject commit 5e667371e6aafdfc8bbafb56d4891f9d1cb795d8

77
source/style/modules/card/_card_module.scss Normal file
View file

@ -0,0 +1,77 @@
// Card module styles
// ------------------------------------------------------------------------------
.html_card {
height: 100%;
body {
min-height: 100%;
.card_bkg {
@extend %full_parent;
transition-duration: 800ms;
overflow: hidden;
vertical-align: top;
z-index: -1;
& > svg {
position: relative;
}
}
.card_box {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
* {
font-family: $family_text_card;
// text-align: center;
}
& > div {
position: relative;
padding: 64px 64px 24px 64px;
border: 1px solid #FFF;
background-color: #F5F5F5;
z-index: 40;
}
}
h1 {
margin: 16px 0;
color: #1E1E1E;
font-size: 24px;
line-height: 1.4em;
font-weight: normal;
}
p {
margin-top: 0;
margin-bottom: 16px;
font-size: 12px;
line-height: 1.4em;
}
.marked {
// padding-left: 1em;
// text-indent: -1em;
&::before { content: "*\0000a0" }
}
.decent { color: #666 }
a {
color: #000;
text-decoration: none;
&:hover {
color: #F4F9FA;
background-color: #0C85FF;
text-decoration: none;
}
}
}
}

150
source/style/modules/portal/_portal_module.scss Normal file
View file

@ -0,0 +1,150 @@
$portal_highlight: $color_highlight_basic;
$portal_margin: $space_double;
$portal_link_size: 128px;
$portal_icon_size: 64px;
.body_portal {
@extend .h_full_view;
}
.portal {
display: flex;
height: 100vh;
}
.portal__entry {
display: flex;
flex: 1;
align-items: center;
padding-right: $portal_margin;
padding-left: $portal_margin;
// overflow-x: hidden;
// overflow-y: auto;
transition: flex 500ms cubic-bezier(0, 0, 0.2, 1.4), background 800ms ease;
&:hover {
flex: 2;
background-color: #999;
// h2 {
// color: $portal_highlight;
// }
.portal__list {
display: block;
}
}
section {
width: 100%;
padding: 32px 0;
}
h2 {
@extend h4;
position: relative;
margin-top: 0;
overflow: hidden;
text-align: center;
text-overflow: ellipsis;
white-space: nowrap;
}
}
.portal__link {
display: block;
position: relative;
width: $portal_link_size;
height: $portal_link_size;
margin: 0 auto;
border-width: 1px;
border-style: solid;
border-color: transparent;
background-repeat: no-repeat;
background-position: center;
&:hover {
background-color: transparentize($portal_highlight, $amount: 0.2);
border-color: $portal_highlight;
}
&:focus {
outline: 0;
}
img {
position: absolute;
top: 50%;
left: 50%;
width: $portal_icon_size;
height: $portal_icon_size;
transform: translate(-50%, -50%);
object-fit: cover;
object-position: 0 0;
}
}
.portal__link--bibo {
background-image: url(../../art/portal/bibo.png);
}
.portal__link--portfolio {
background-image: url(../../art/portal/portfolio.png);
}
.portal__link--found {
background-image: url(../../art/portal/gems.png);
}
.portal__link--flux {
background-image: url(../../art/portal/flux.png);
}
.portal__link--blog {
background-image: url(../../art/portal/notes.png);
}
.portal__link--tools {
background-image: url(../../art/portal/tools.png);
}
.portal__link--safe {
background-image: url(../../art/portal/safe.png);
}
.portal__link--game {
&:hover {
background-image: url(../../art/portal/games.png);
& > img {
display: none;
}
}
}
.portal__list {
@extend .list_link;
display: none;
position: relative;
width: 80%;
margin: 48px auto 0 auto;
padding-left: 0;
li {
list-style: none;
a {
overflow: hidden;
width: 100%;
text-overflow: ellipsis;
white-space: nowrap;
img {
width: 16px;
height: auto;
}
}
}
}