Merge pull request #16 from tmshv/fix/clean-old-styles
Remove old styles
This commit is contained in:
16 files changed
+27
-529
No files matched your search
@@ -24,8 +24,6 @@ const Page: NextPage<Props> = props => (
|
||||
<title>{props.title}</title>
|
||||
</Head>
|
||||
|
||||
{/*<ScheduleList schedules={schedules}/>*/}
|
||||
|
||||
<Schedule {...props.data} />
|
||||
|
||||
<Share />
|
||||
|
||||
@@ -1,8 +1,22 @@
|
||||
import * as React from 'react'
|
||||
import { Navigation } from '../Navigation'
|
||||
export const Header: React.FC = props => (
|
||||
<header>
|
||||
<style jsx>{`
|
||||
.navigation {
|
||||
width: 100%;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
const Header: React.FC<any> = props => (
|
||||
<Navigation items={props.menuItems} />
|
||||
.navigation__body {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
`}</style>
|
||||
|
||||
<div className="navigation">
|
||||
<div className="navigation__body">
|
||||
{props.children}
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
)
|
||||
|
||||
export default Header
|
||||
@@ -4,8 +4,8 @@ import { Footer } from '../Footer'
|
||||
import Comments from '../Comments'
|
||||
import { useReducedMotion } from 'src/hooks/useReducedMotion'
|
||||
import { Wrapper } from '../Wrapper'
|
||||
|
||||
const Header = dynamic(() => import('./Header'), {
|
||||
import { Header } from './Header'
|
||||
const Navigation = dynamic(() => import('../Navigation').then(mod => mod.Navigation), {
|
||||
ssr: false,
|
||||
})
|
||||
|
||||
@@ -22,15 +22,11 @@ export const App: React.FC<IAppProps> = props => {
|
||||
return (
|
||||
<Wrapper
|
||||
header={(
|
||||
<header>
|
||||
<div className="navigation">
|
||||
<div className="navigation__body">
|
||||
<Header
|
||||
menuItems={props.menu.items}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<Header>
|
||||
<Navigation
|
||||
items={props.menu.items}
|
||||
/>
|
||||
</Header>
|
||||
)}
|
||||
footer={(
|
||||
<Footer
|
||||
|
||||
@@ -1,20 +0,0 @@
|
||||
const React = require('react')
|
||||
const text = require('../server/schedule').text
|
||||
|
||||
const ScheduleList = ({schedules}) => (
|
||||
<div className="schedule-selector">
|
||||
<ul>
|
||||
{schedules.map((s, index) => (
|
||||
<Schedule key={index} {...s}/>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
)
|
||||
|
||||
const Schedule = ({url, semester, period}) => (
|
||||
<li>
|
||||
<a href={url}>{text({semester, period})}</a>
|
||||
</li>
|
||||
)
|
||||
|
||||
module.exports = ScheduleList
|
||||
@@ -1,132 +0,0 @@
|
||||
.album-block {
|
||||
//margin: 1em auto 2em;
|
||||
|
||||
h3 {
|
||||
text-align: center;
|
||||
margin: 1.5em 0 1em;
|
||||
}
|
||||
|
||||
.album {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.album-info {
|
||||
width: 80%;
|
||||
margin: 0 0 3em;
|
||||
}
|
||||
|
||||
.album-info p {
|
||||
margin: 0 0 .5em;
|
||||
}
|
||||
|
||||
.album-item {
|
||||
width: 80%;
|
||||
box-sizing: border-box;
|
||||
margin: 0 0 4em;
|
||||
position: relative;
|
||||
background-color: white;
|
||||
padding: 6em;
|
||||
box-shadow: 0 4px 14px -10px rgba(0,0,0, .85);
|
||||
|
||||
&.vertical {
|
||||
width: 47%;
|
||||
min-width: 30em;
|
||||
max-width: 35em;
|
||||
}
|
||||
|
||||
img{
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
border: .25em solid #eee;
|
||||
border-top-color: #bbb;
|
||||
border-left-color: #ddd;
|
||||
}
|
||||
}
|
||||
|
||||
.product-info{
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
left: 0;
|
||||
bottom: 1em;
|
||||
|
||||
& > div {
|
||||
display: inline-block;
|
||||
padding: .5em 1em;
|
||||
background-color: white;
|
||||
border: 1px solid #f5f5f5;
|
||||
border-radius: .25em;
|
||||
box-shadow: 0 5p/x 4px -4px rgba(0,0,0, .5);
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 0.75em;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: $mobile-width) {
|
||||
.album-block {
|
||||
width: 100%;
|
||||
margin: 1em auto 2em;
|
||||
|
||||
h3 {
|
||||
text-align: left;
|
||||
margin: 1em 0 0.5em;
|
||||
}
|
||||
|
||||
.album-info{
|
||||
width: 100%;
|
||||
margin: 0 0 2em;
|
||||
}
|
||||
|
||||
.album-item {
|
||||
width: 100%;
|
||||
padding: 1em 1em 5em;
|
||||
margin: 0 0 2em;
|
||||
|
||||
img{
|
||||
border: .1em solid #eee;
|
||||
border-top-color: #bbb;
|
||||
border-left-color: #ddd;
|
||||
}
|
||||
}
|
||||
|
||||
.product-info {
|
||||
bottom: .5em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: $mobile-width) and (max-width: $desktop-width){
|
||||
.album-block {
|
||||
.album-info{
|
||||
width: 100%;
|
||||
margin: 0 0 2em;
|
||||
font-size: 0.75em;
|
||||
}
|
||||
|
||||
.album-item {
|
||||
width: 100%;
|
||||
padding: 2em 2em 5em;
|
||||
margin: 0 0 2em;
|
||||
|
||||
img{
|
||||
border: .15em solid #eee;
|
||||
border-top-color: #bbb;
|
||||
border-left-color: #ddd;
|
||||
}
|
||||
}
|
||||
|
||||
.product-info {
|
||||
bottom: .5em;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,43 +0,0 @@
|
||||
breadcrumbs{
|
||||
--font-size: 0.75em;
|
||||
--item-active-color: var(--link-color);
|
||||
--item-inactive-color: var(--inactive-link-color);
|
||||
--separator: '⟶';
|
||||
--mobile-separator: '>';
|
||||
|
||||
padding: .35em 0 0;
|
||||
color: var(--item-inactive-color);
|
||||
|
||||
a {
|
||||
color: var(--item-active-color);
|
||||
}
|
||||
|
||||
ul{
|
||||
list-style: none;
|
||||
|
||||
li {
|
||||
display: inline-block;
|
||||
|
||||
&:not(:first-child):before{
|
||||
content: var(--separator);
|
||||
margin-left: .4em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: var(--mobile-width)) {
|
||||
breadcrumbs{
|
||||
margin: 0;
|
||||
font-size: var(--font-size);
|
||||
|
||||
ul{
|
||||
li {
|
||||
&:not(:first-child):before{
|
||||
content: var(--mobile-separator);
|
||||
margin-left: .2em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,36 +0,0 @@
|
||||
.navigation {
|
||||
width: 100%;
|
||||
background-color: white;
|
||||
|
||||
&__body {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.navigation__right {
|
||||
color: var(--dark-color);
|
||||
font-size: var(--normal-font-size);
|
||||
margin-right: 1em;
|
||||
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
@media (max-width: var(--mobile-width)) {
|
||||
.navigation {
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.navigation__right {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: var(--tablet-min-width)) and (max-width: var(--tablet-max-width)) {
|
||||
@media screen and (orientation: portrait) {
|
||||
.navigation__right {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,22 +0,0 @@
|
||||
.parallax {
|
||||
min-width: 1280px;
|
||||
width: 1280px;
|
||||
height: 1000px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
|
||||
//&__container {
|
||||
//
|
||||
//}
|
||||
|
||||
&__layer {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
&__end {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
background-color: white;
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
@@ -1,51 +0,0 @@
|
||||
$user-size: 40px;
|
||||
$half-margin: $single-margin/2;
|
||||
$image-border-radius: .35em;
|
||||
$image-border-thickness: $half-margin;
|
||||
|
||||
.timeline-record-instagram {
|
||||
}
|
||||
|
||||
.timeline-record-instagram__head {
|
||||
margin-bottom: 1.25em;
|
||||
//margin-bottom: $single-margin;
|
||||
|
||||
.date {
|
||||
text-align: center;
|
||||
color: #aaa;
|
||||
}
|
||||
}
|
||||
|
||||
.timeline-record-instagram__body {
|
||||
img {
|
||||
max-width: 640px;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
box-sizing: border-box;
|
||||
border: $image-border-thickness solid white;
|
||||
box-shadow: $white-shadow;
|
||||
border-radius: $image-border-radius;
|
||||
margin: 0 auto $single-margin;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.timeline-record-instagram__user {
|
||||
padding-top: $half-margin;
|
||||
|
||||
span {
|
||||
margin-left: $half-margin;
|
||||
|
||||
line-height: $user-size;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
img {
|
||||
display: inline;
|
||||
width: $user-size;
|
||||
height: $user-size;
|
||||
border-radius: 50%;
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
@@ -1,7 +0,0 @@
|
||||
.timeline__record {
|
||||
margin: 0 0 var(--post-margin);
|
||||
|
||||
.date {
|
||||
color: var(--light-color);
|
||||
}
|
||||
}
|
||||
@@ -1,34 +0,0 @@
|
||||
.timeline{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: var(--double-margin) auto;
|
||||
}
|
||||
|
||||
.timeline__footer{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
button.more {
|
||||
cursor: hand;
|
||||
|
||||
position: relative;
|
||||
top: -2px;
|
||||
|
||||
width: 100px;
|
||||
height: 40px;
|
||||
border: 2px solid var(--dark-color);
|
||||
padding: 0 10px;
|
||||
color: var(--dark-color);
|
||||
background: var(--lighter-color);
|
||||
|
||||
font-size: var(--normal-font-size);
|
||||
|
||||
&:hover {
|
||||
background: gainsboro;
|
||||
}
|
||||
|
||||
&:active {
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,25 +0,0 @@
|
||||
.main-image{
|
||||
display: none;
|
||||
|
||||
width: 100%;
|
||||
|
||||
//display: flex;
|
||||
//justify-content: center;
|
||||
//overflow: hidden;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
max-width: 1280px;
|
||||
}
|
||||
|
||||
//&__content {
|
||||
// min-width: 1280px;
|
||||
// width: 1280px;
|
||||
//}
|
||||
}
|
||||
|
||||
@media (max-width: var(--mobile-width)) {
|
||||
.main-image {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@@ -1,56 +0,0 @@
|
||||
@keyframes rotateFall {
|
||||
0% {
|
||||
transform: rotateZ(0deg);
|
||||
}
|
||||
20% {
|
||||
transform: rotateZ(10deg);
|
||||
animation-timing-function: ease-out;
|
||||
}
|
||||
40% {
|
||||
transform: rotateZ(17deg);
|
||||
}
|
||||
60% {
|
||||
transform: rotateZ(16deg);
|
||||
}
|
||||
100% {
|
||||
transform: translateY(100%) rotateZ(17deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes scaleUp {
|
||||
from {
|
||||
opacity: 0.0;
|
||||
transform: scale(0.5);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideInRight {
|
||||
from {
|
||||
transform: translateX(100%);
|
||||
}
|
||||
to {
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideInUp {
|
||||
from {
|
||||
transform: translateY(100%);
|
||||
}
|
||||
to {
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideOutLeft {
|
||||
to {
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes rotateOutNewspaper {
|
||||
to {
|
||||
transform: translateZ(-3000px) rotateZ(360deg);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
@@ -1,61 +0,0 @@
|
||||
.schedule-slider {
|
||||
width: 100%;
|
||||
max-width: 30em;
|
||||
//width: 90%;
|
||||
//margin: 0 auto;
|
||||
}
|
||||
|
||||
.schedule-slider__slide {
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
|
||||
&.current {
|
||||
border-left: .3em solid #4b8ff3;
|
||||
border-right: .3em solid #4b8ff3;
|
||||
}
|
||||
}
|
||||
|
||||
.schedule-slider__body {
|
||||
}
|
||||
|
||||
.schedule-slider__head {
|
||||
text-align: center;
|
||||
font-size: 2em;
|
||||
margin: 0 0 .5em;
|
||||
}
|
||||
|
||||
.schedule-record {
|
||||
min-height: 10em;
|
||||
text-align: center;
|
||||
|
||||
&.even{
|
||||
background-color: #f3f3fd;
|
||||
}
|
||||
|
||||
&.empty {
|
||||
.schedule-record__head{
|
||||
color: #bbb;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
margin: .2em 0;
|
||||
}
|
||||
}
|
||||
|
||||
.schedule-record__head {
|
||||
padding: .25em 0;
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
.schedule-record__main {
|
||||
}
|
||||
|
||||
.schedule-record__name {
|
||||
font-weight: bold;
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
.schedule-record__group {
|
||||
position: absolute;
|
||||
}
|
||||
@@ -1,8 +0,0 @@
|
||||
.schedule-selector {
|
||||
text-align: center;
|
||||
margin-bottom: var(--single-margin);
|
||||
|
||||
label{
|
||||
margin: 0 .5em;
|
||||
}
|
||||
}
|
||||
@@ -3,29 +3,14 @@
|
||||
@import "components/document";
|
||||
@import "components/document-row";
|
||||
@import "components/documents-container";
|
||||
@import "components/navigation";
|
||||
@import "components/breadcrumbs";
|
||||
@import "components/timeline";
|
||||
@import "components/timeline-record";
|
||||
//@import "components/timeline-record-instagram";
|
||||
@import "components/schedule-table";
|
||||
@import "components/footer-links";
|
||||
@import "components/Article";
|
||||
@import "components/Paginator";
|
||||
@import "components/album";
|
||||
@import "components/parallax";
|
||||
|
||||
@import "components/ArticleTags";
|
||||
|
||||
@import "content";
|
||||
@import "page-animation";
|
||||
@import "main-image";
|
||||
//@import "vertical-image";
|
||||
|
||||
@import "schedule-selector";
|
||||
@import "schedule-mobile";
|
||||
|
||||
@import "tape-viewer";
|
||||
@import "footer";
|
||||
|
||||
// THEMES
|
||||
|
||||
Reference in new issue
Block a user