pedf
/
fakulta-online
Archived
1
0
Fork 0
You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
This repo is archived. You can view files and clone it, but cannot push or open issues/pull-requests.

346 lines
5.1 KiB
SCSS

@font-face {
font-family: moderat;
src: url(/moderat.otf);
}
$header-width: 1560px;
$main-width: 1024px;
:focus { outline: none; }
body {
margin: 0;
color: #fff;
font-size: 1.15em;
font-family: moderat, Arial, Helvetica, sans-serif;
line-height: 1.6;
height: 100vh;
background: url(/body-bg.svg) #d22d40;
background-position: top center;
background-size: cover;
background-repeat: no-repeat;
a {
color: #fff;
text-decoration: none;
}
}
nav {
position: fixed;
top: 0;
right: 0;
width: 0;
height: 100vh;
overflow: hidden;
text-align: right;
opacity: 0;
transition: opacity .3s;
&.visible {
width: 100%;
opacity: 1;
}
ul { list-style-type: none; }
li { margin: 2em 0; }
div.background {
position: absolute;
top: 0;
right: 0;
width: 30vw;
height: 100vh;
background-color: #b52637;
z-index: -1;
}
div.list {
max-width: $header-width;
padding: 2em;
text-align: right;
margin: 0 auto;
ul { padding: 0; }
}
header { justify-content: flex-end; }
}
header {
display: flex;
justify-content: space-between;
align-items: center;
height: 4em;
max-width: $header-width;
margin: 0 auto;
padding: 2em;
a#logo {
display: block;
width: 250px;
height: 100%;
background-image: url(/logo.svg);
background-repeat: no-repeat;
background-position: left center;
background-size: contain;
}
h1 {
font-size: 1.35em;
font-weight: normal;
color: #fff;
}
.menu {
display: flex;
align-items: center;
justify-content: flex-end;
height: 100%;
width: 250px;
font-size: 1.2em;
img {
margin-left: 1em;
width: 1.5em;
}
}
}
main {
max-width: $main-width;
padding: 2em;
margin: 0 auto;
h2, h3, h4, h5, h6 {
line-height: 1.2;
}
h5, h6 {
margin-top: 2.75em;
}
h2 {
font-size: 2.3em;
}
h3 {
font-size: 1.8em;
margin-top: 3em;
}
a {
color: #fff;
text-decoration: underline;
}
img {
max-width: 100%;
}
section {
img.logo {
max-height: 5em;
max-width: 100%;
display: block;
margin: 2em auto 4em auto;
}
&.meta {
display: flex;
align-items: center;
h2 { margin: .9em 0; }
img {
float: right;
max-width: 48%;
margin-left: 2em;
border-radius: 50%;
}
}
&.filters {
display: flex;
justify-content: center;
flex-wrap: wrap;
button {
color: #fff;
background-color: #d22d40;
border: 2px solid #fff;
border-radius: 1em;
font-weight: bold;
padding: .8em 1em;
margin: .5em;
&:hover, &.active {
color: #d22d40;
background-color: #fff;
}
}
}
&.software {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
.program {
width: 48%;
box-sizing: border-box;
margin-top: 4em;
display: none; // for filtering
&.show { display: block; } // when filtered
img {
max-height: 3em;
max-width: 50%;
}
div.stats {
display: flex;
ul:nth-child(2) {
margin-left: 2em;
}
}
}
}
&.articles {
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: 1em;
row-gap: 1em;
a {
padding: .5em 1em;
border: 2px solid #fff;
border-radius: 1em;
text-decoration: none;
text-align: center;
&:hover {
color: #d22d40;
background-color: #fff;
}
}
}
div.stats {
margin: 3em 0;
ul.positive, ul.negative {
padding-left: 0;
list-style-type: none;
li::before{
display: inline-block;
width: 1em;
height: 1em;
content: ' ';
background-size: 100% 100%;
margin-right: .85em;
position: relative;
top: .15em;
}
&.positive li::before {
background-image: url('/plus.svg');
}
&.negative li::before {
background-image: url('/minus.svg');
}
}
}
div.coordinator {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 8em;
&>div {
display: flex;
align-items: center;
img {
width: 10em;
margin: 0 2em;
border-radius: 50%;
}
ul {
padding: 0;
list-style-type: none;
}
}
}
div.video {
min-height: 15em;
margin: 3em 0;
iframe {
float: left;
margin: 0 2em 0 0;
width: 50%;
min-height: inherit;
}
}
}
}
body.index {
background-image: url(/index-bg.png), url(/body-index-bg.svg);
background-position: center center, top center;
background-size: 30em auto, cover;
main {
max-width: $header-width;
display: flex;
align-items: center;
justify-content: space-between;
h2 {
font-size: 2.5em;
margin-top: 2.75em;
}
section, aside { max-width: 35%; }
section{ text-shadow: 0px 3px 8px rgba(0, 0, 0, .35); }
aside {
display: flex;
flex-direction: column;
align-items: stretch;
width: 25%;
margin-top: 6em;
a {
text-align: center;
text-decoration: none;
border: 2px solid #fff;
border-radius: .8em;
margin-bottom: 1.5em;
padding: .6em 1.5em;
color: #fff;
&:hover {
background: #fff;
color: #b52637;
}
}
}
}
}
div.twocolumn {
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: 2em;
img { width: 100%; }
}
@import "mobile";