Merge pull request #16 from tmshv/fix/clean-old-styles

Remove old styles

pages/schedule.tsx

@@ -24,8 +24,6 @@ const Page: NextPage<Props> = props => (
             <title>{props.title}</title>
         </Head>
 
-        {/*<ScheduleList schedules={schedules}/>*/}
-
         <Schedule {...props.data} />
 
         <Share />

src/components/App/Header.tsx

@@ -1,8 +1,22 @@
-import * as React from 'react'
+export const Header: React.FC = props => (
-import { Navigation } from '../Navigation'
+    <header>
+        <style jsx>{`
+            .navigation {
+                width: 100%;
+                background-color: white;
+            }
 
-const Header: React.FC<any> = props => (
+            .navigation__body {
-    <Navigation items={props.menuItems} />
+                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

src/components/App/index.tsx

@@ -4,8 +4,8 @@ import { Footer } from '../Footer'
 import Comments from '../Comments'
 import { useReducedMotion } from 'src/hooks/useReducedMotion'
 import { Wrapper } from '../Wrapper'
-
+import { Header } from './Header'
-const Header = dynamic(() => import('./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>
+                <Header>
-                    <div className="navigation">
+                    <Navigation
-                        <div className="navigation__body">
+                        items={props.menu.items}
-                            <Header
+                    />
-                                menuItems={props.menu.items}
+                </Header>
-                            />
-                        </div>
-                    </div>
-                </header>
             )}
             footer={(
                 <Footer

src/components/ScheduleList.js

@@ -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

src/style/album.scss

@@ -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;
-    }
-  }
-}

src/style/components/breadcrumbs.scss

@@ -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;
-        }
-      }
-    }
-  }
-}

src/style/components/navigation.scss

@@ -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;
-    }
-  }
-}

src/style/components/parallax.scss

@@ -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;
-  }
-}

src/style/components/timeline-record-instagram.scss

@@ -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;
-  }
-}

src/style/components/timeline-record.scss

@@ -1,7 +0,0 @@
-.timeline__record {
-  margin: 0 0 var(--post-margin);
-
-  .date {
-    color: var(--light-color);
-  }
-}

src/style/components/timeline.scss

@@ -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;
-    }
-  }
-}

src/style/main-image.scss

@@ -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;
-  }
-}

src/style/page-animation.scss

@@ -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;
-  }
-}

src/style/schedule-mobile.scss

@@ -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;
-}

src/style/schedule-selector.scss

@@ -1,8 +0,0 @@
-.schedule-selector {
-  text-align: center;
-  margin-bottom: var(--single-margin);
-
-  label{
-    margin: 0 .5em;
-  }
-}

src/style/style.scss

@@ -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