Compare commits

...

1 Commits

Author SHA1 Message Date
Emilia Allison 8dd01bb4b0
No changes, only style rewrites 2022-07-07 14:05:34 -04:00
5 changed files with 80 additions and 39 deletions

View File

@ -5,10 +5,10 @@
<link rel="stylesheet" href="/css/about.css"> <link rel="stylesheet" href="/css/about.css">
<meta name="viewport" content="width=device-width,initial-scale=1"> <meta name="viewport" content="width=device-width,initial-scale=1">
</head> </head>
<body> <body class="flex center">
<div class="overlay"> <div class="overlay">
</div> </div>
<div class="outerdiv contentholder"> <div class="outerdiv contentholder flex center">
<div class="contentholder__topfiller"></div> <div class="contentholder__topfiller"></div>
<div class="content"> <div class="content">
<h1> <h1>

View File

@ -17,10 +17,10 @@
<!-- Twitter --> <!-- Twitter -->
<meta property="twitter:card" content="summary_large_image" /> <meta property="twitter:card" content="summary_large_image" />
</head> </head>
<body> <body class="flex center">
<div class="overlay"> <div class="overlay">
</div> </div>
<div class="outerdiv"> <div class="outerdiv flex center container">
<div class="name"> <div class="name">
<h1 class="name__header">Emilia</h1> <h1 class="name__header">Emilia</h1>
<!--<p class="name__subcontent">she/her</p>--> <!--<p class="name__subcontent">she/her</p>-->

27
src/sass/base.sass Normal file
View File

@ -0,0 +1,27 @@
*,
*::before,
*::after
box-sizing: border-box
body, h1, h2, h3, h4, h5, h6, p
margin: 0
body
line-height: 1.5
min-height: 100vh
img, picture
max-width: 100%
display: block
input, button, textarea, select
font: inherit
@media (prefers-reduced-motion: reduce)
*,
*::before,
*::after
animation-duration: 0.01ms !important
animation-iteration-count: 1 !important
transition-duration: 0.01ms !important
scroll-behaviour: auto !important

47
src/sass/classes.sass Normal file
View File

@ -0,0 +1,47 @@
@import 'responsive'
.overlay
width: 100%
height: 100vh
position: fixed
//opacity: 0.03
opacity: 0.2
z-index: 1 !important
background-image: url('../img/noise.gif')
background-size: 25%
@include mobile()
background-size: 200%
.contentholder
justify-content: flex-start
overflow: scroll
div
width: 30rem
margin: 1% 0
@include mobile
width: 20rem
.contentholder__topfiller
height: 5%
background-color: transparent
/* New */
.flex
display: flex
gap: 2rem
.center
justify-content: center
align-items: center
flex-direction: column
align-content: center
.container
padding-inline: 2em
margin-inline: auto
max-width: 90rem

View File

@ -1,3 +1,5 @@
@import 'base'
@import 'classes'
@import 'responsive' @import 'responsive'
@import 'anim' @import 'anim'
@ -8,18 +10,11 @@ $outer-bg: #091519
//$outer-bg: #f2e1ba // nice sand color, light theme maybe? //$outer-bg: #f2e1ba // nice sand color, light theme maybe?
$inner-bg: #112932 $inner-bg: #112932
@mixin div-center()
display: flex
justify-content: center
align-items: center
flex-direction: column
align-content: center
* *
border-color: $tertiary-color border-color: $tertiary-color
body body
@include div-center()
width: 100% width: 100%
height: 100% height: 100%
padding: 0 0 0 0 padding: 0 0 0 0
@ -31,22 +26,7 @@ body
@include mobile() @include mobile()
--is-mobile: 1 --is-mobile: 1
.overlay
width: 100%
height: 100vh
position: fixed
opacity: 0.03
z-index: 1
background-image: url('../img/noise.gif')
background-size: 25%
@include mobile()
background-size: 200%
.outerdiv .outerdiv
@include div-center()
width: 90% width: 90%
height: 100vh height: 100vh
background-color: $outer-bg background-color: $outer-bg
@ -55,19 +35,6 @@ body
@include mobile() @include mobile()
width: 100% width: 100%
.contentholder
justify-content: flex-start
overflow: scroll
div
width: 30rem
margin: 1% 0
@include mobile
width: 20rem
.contentholder__topfiller
height: 5%
background-color: transparent
.content .content
z-index: 100 z-index: 100